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