Feat/frontend canvas - #8
Merged
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a new frontend visual pipeline builder (canvas + sidebar + node components) backed by Zustand state, and wires the UI to the existing FastAPI pipeline execution endpoint (plus CORS for local dev).
Changes:
- Introduces a React Flow-based drag-and-drop canvas with custom node renderers and a node sidebar.
- Adds a Zustand store to manage graph state (nodes/edges) and an API client to call backend execution endpoints.
- Updates frontend routing/UI (new home page layout) and enables backend CORS for the local frontend.
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/tsconfig.json | Updates @/* path alias to point at src/* for cleaner imports. |
| frontend/src/store/pipelineStore.ts | Adds Zustand store for React Flow nodes/edges and change handlers. |
| frontend/src/lib/api.ts | Adds fetch-based client for /run_pipeline and /nodes. |
| frontend/src/components/Sidebar.tsx | Adds draggable sidebar UI for available node types. |
| frontend/src/components/Canvas.tsx | Adds React Flow canvas, node type mapping, and drag/drop node creation. |
| frontend/src/components/nodes/DatasetNode.tsx | Adds custom Dataset node renderer. |
| frontend/src/components/nodes/PreprocessNode.tsx | Adds custom Preprocess node renderer. |
| frontend/src/components/nodes/ModelNode.tsx | Adds custom Model node renderer. |
| frontend/src/components/nodes/TrainTestSplitNode.tsx | Adds custom Train/Test Split node renderer. |
| frontend/package.json | Adds @xyflow/react and bumps zustand; retains reactflow. |
| frontend/package-lock.json | Locks new dependencies (notably @xyflow/react). |
| frontend/app/page.tsx | Replaces starter page with the workflow builder layout and “Run Pipeline” action. |
| frontend/app/globals.css | Adds full-height layout styling and React Flow control/node overrides. |
| backend/app/main.py | Adds CORS middleware allowing the local frontend origin. |
Files not reviewed (1)
- frontend/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "use client"; | ||
| import { useCallback } from "react"; | ||
| import { ReactFlow, Background, Controls, MiniMap, BackgroundVariant } from "@xyflow/react"; | ||
| import "@xyflow/react/dist/style.css"; |
Comment on lines
+26
to
+32
| const onDrop = useCallback((e: React.DragEvent) => { | ||
| e.preventDefault(); | ||
| const type = e.dataTransfer.getData("nodeType"); | ||
| if (!type) return; | ||
| const bounds = (e.currentTarget as HTMLElement).getBoundingClientRect(); | ||
| const position = { x: e.clientX - bounds.left - 80, y: e.clientY - bounds.top - 40 }; | ||
| addNode({ id: `${type}-${Date.now()}`, type, position, data: { label: type } }); |
| @@ -0,0 +1,38 @@ | |||
| const BASE_URL = "http://localhost:8000"; | |||
Comment on lines
+3
to
+12
| interface Node { | ||
| id: string; | ||
| type: string; | ||
| config: Record<string, unknown>; | ||
| } | ||
|
|
||
| interface Edge { | ||
| source: string; | ||
| target: string; | ||
| } |
| "next": "16.2.2", | ||
| "react": "19.2.4", | ||
| "react-dom": "19.2.4", | ||
| "reactflow": "^11.11.4", |
Comment on lines
+7
to
+13
| app.add_middleware( | ||
| CORSMiddleware, | ||
| allow_origins=["http://localhost:3000"], | ||
| allow_credentials=True, | ||
| allow_methods=["*"], | ||
| allow_headers=["*"], | ||
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Built the visual ML pipeline editor . Added a drag-and-drop canvas using React Flow with custom nodes, a sidebar for available nodes, Zustand store for state management, and connected the frontend to the FastAPI backend for pipeline execution.
Type of Change
Related Issues
N/A
Checklist