feat: Add UI based workflow builder

[NiveditJain]

Add a visual drag-and-drop workflow builder to the dashboard. Users select from available registered nodes, drag them onto a canvas, connect them visually, and the UI generates the graph JSON configuration.

---

Current State

What Exists

Component	Location	Purpose
GraphTemplateBuilder	dashboard/src/components/	Form-based builder (text inputs, JSON)
GraphVisualization	dashboard/src/components/	ReactFlow-based viewer for executed runs
ReactFlow	Already installed	Used for run visualization

Current Builder Limitations

• Manual text entry for node names, namespaces
• JSON textarea for inputs
• Comma-separated text for next_nodes
• No visibility into available registered nodes
• No visual representation of the graph structure
• Error-prone for complex workflows

---

Proposed Solution

Visual Builder with Node Palette

flowchart LR
    subgraph "Node Palette"
        API["/api/nodes"]
        PALETTE[Available Nodes Panel]
        API --> PALETTE
    end
    
    subgraph "Canvas"
        DRAG[Drag & Drop]
        CONNECT[Visual Connections]
        CONFIG[Node Config Panel]
    end
    
    subgraph "Output"
        JSON[Graph JSON]
        SAVE[Save to API]
    end
    
    PALETTE --> DRAG
    DRAG --> CONNECT
    CONNECT --> JSON
    JSON --> SAVE

Loading

Key Features

1. Node Palette: Shows all registered nodes in the namespace
2. Drag & Drop: Drag nodes from palette onto canvas
3. Visual Connections: Click and drag to connect node outputs to inputs
4. Node Configuration: Click a node to configure inputs, identifier
5. Input Mapping UI: Visual helper for ${{ source.outputs.field }} syntax
6. Real-time Validation: Show errors as user builds
7. JSON Preview: See generated config in real-time

---

Data Flow

flowchart TB
    API[Registered Nodes API] --> PALETTE[Node Palette]
    PALETTE -->|drag| CANVAS[Canvas State]
    CANVAS -->|select| CONFIG[Config Panel]
    CONFIG -->|update| CANVAS
    CANVAS -->|connect| EDGES[Edge State]
    
    CANVAS --> TRANSFORM[Transform to Graph JSON]
    EDGES --> TRANSFORM
    TRANSFORM --> PREVIEW[Preview]
    TRANSFORM --> SAVE[Save API]

Loading

---

API Requirements

Existing Endpoint (May Need Enhancement)

// Get registered nodes for a namespace
GET /api/nodes?namespace={namespace}

// Response includes input/output schemas
{
  "nodes": [
    {
      "name": "DataLoader",
      "namespace": "MyProject",
      "inputs_schema": { ... },
      "outputs_schema": { ... }
    }
  ]
}

The inputs_schema and outputs_schema are already captured during node registration - these drive the builder UI.

---

Prototype Scope

In Scope

• Node palette showing registered nodes
• Drag nodes onto canvas
• Visual edge connections between nodes
• Node configuration panel (identifier, inputs)
• Basic input mapping helper (${{ }} syntax)
• Generate valid graph JSON
• Save graph template

Out of Scope (Future)

• Undo/redo
• Copy/paste nodes
• Templates/presets
• Collaborative editing
• Version comparison
• Auto-layout algorithms

---

Key Challenges

Challenge	Approach
Input mapping syntax is complex	Provide dropdown picker: "Select source node" → "Select output field"
Validation before save	Real-time validation using same logic as backend
Large graphs	ReactFlow handles this well; add minimap
Schema-driven inputs	Generate form fields from inputs_schema

---

Success Criteria

• User can see all registered nodes in the namespace
• User can drag nodes onto canvas
• User can visually connect nodes
• User can configure node inputs with helper UI
• Generated JSON matches expected graph template schema
• Saved graphs work when triggered
• Existing form-based builder remains available as fallback

---

References

• Current builder: dashboard/src/components/GraphTemplateBuilder.tsx
• Current visualization: dashboard/src/components/GraphVisualization.tsx
• ReactFlow Documentation
• ReactFlow Examples - Drag from Sidebar