feat: add visual Graph Builder tool to Burr UI - #667
Conversation
ea60cbe to
e9c7c88
Compare
|
A preview of b71f715 is uploaded and can be seen here: ✨ https://burr.dagworks.io/pull/667 ✨ Changes may take a few minutes to propagate. Since this is a preview of production, content with |
…ilder Incorporates the Graph Builder from apache#667 (@skrawcz) and extends it with a full workspace mode and enhanced low-code builder. From apache#667 (Graph Builder): - New /graph-builder route with ReactFlow v12 visual editor - Sidebar navigation with Graph Builder entry - Per-node async/streaming toggles - 3 pre-built example graphs - localStorage auto-save/restore New in this PR: - 9 specialized node types with property editors - Inline + buttons on edges (Activepieces-style) - Recursive layout algorithm for loop/router compound nodes - Monaco Editor with multi-file code generation - Bidirectional sync between graph and code - File menu with save/load projects (server-side persistence) - Workspace backend for file browsing and script execution - Undo/redo, keyboard shortcuts, code sanitization Fixes lint issues in apache#667 files (HomeView, CompareView). Downgrades react-joyride to v2 for API compatibility.
skrawcz
left a comment
There was a problem hiding this comment.
Nice, self-contained addition — the Graph Builder is cleanly factored (separate exporter / code-generator / loader / presentational components), every new file carries the Apache header, and the generated Python correctly matches Burr's real API including the async-streaming AsyncGenerator[Tuple[dict, Optional[State]], None] signature. The reactflow v11 → @xyflow/react v12 migration looks correct (edgesUpdatable→edgesReconnectable, named ReactFlow import, updated CSS path) and nets a dependency reduction with no impact on the burr package, so backwards compatibility is fine.
Before merge I'd like to see:
- Unit tests for
BurrCodeGenerator,GraphExporter, andExampleLoader.validateExample— these are pure functions and the highest-value thing missing. At minimum, assertvalidateExamplereturns[]for each bundled example and snapshot the generated Python for one sync + one streaming graph. - Fix the duplicate-label code-generation bug:
deduplicateNamesis applied only to thewith_actionslist, not to the generateddefs or transitions, so two nodes with the same label produce colliding/redefined functions. Dedup consistently or key offnode.id. - A short docs page (the PR checklist docs item is unchecked) and a manual smoke-test of existing UI pages given the shared
appcontainerlayout change and the v12 migration.
Also worth a quick confirmation: dropping the smart-edge routing in favor of plain bezier paths in the observabilityGraphViewis a minor visual regression (edges may cross nodes) — is that acceptable?
Inline notes (line refs approximate — folded into body since this is a body-only draft):
- File:
telemetry/ui/src/components/routes/graph-builder/utils/BurrCodeGenerator.ts
Line: ~148 (generateGraphFunction—deduplicateNamescall)
[BLOCKING]deduplicateNamesis applied here to build thewith_actions(...)list, butgenerateActionsandgenerateTransitionscallsanitizeNodeName(node.label)directly with no dedup. Two nodes sharing a label therefore produce two identically-nameddefs and ambiguous transition strings — invalid Python. Please dedup consistently across function definitions, the action list, and transitions (or key generation off the stablenode.idrather than the display label). - File:
telemetry/ui/src/components/routes/graph-builder/utils/BurrCodeGenerator.ts
Line: ~106 (getInputParameters)
[SUGGESTION] Input parameter names aren't deduplicated, so two input edges resolving to the same sanitized name would emit duplicate function parameters (aSyntaxError). Cheap to guard with the same dedup logic. - File:
telemetry/ui/src/components/routes/graph-builder/utils/GraphExporter.ts
Line: ~57 (metadata.created: new Date().toISOString())
[SUGGESTION] This runs inside theuseMemorecomputed on every node/edge change and is written to localStorage, socreatedresets to "now" on every edit. Set it once at creation (or omit from the persisted blob) — this also makes the generated JSON snapshot-testable. - File:
telemetry/ui/src/components/routes/graph-builder/utils/ExampleLoader.ts
Line: ~52 (validateExample)
[SUGGESTION] Great that this validator exists — please wire it into a unit test that runs over each bundledExampleGraphand asserts it returns[], so a malformed example can't ship silently. - File:
telemetry/ui/src/components/routes/app/GraphView.tsx
Line: ~170 (removal ofgetSmartEdge, replaced bygetBezierPath)
[NIT] Dropping smart-edge routing is a minor visual regression for the observability graph (edges may overlap nodes). Fine if intentional given the dependency removal — just calling it out for confirmation. - File:
telemetry/ui/src/components/nav/appcontainer.tsx
Line: ~394 (<main>layout rewrite)
[NIT] This changes the shared layout used by every route (removing the previouspy-14 -my-1margins for a flex column). Reasonable cleanup, but please smoke-test existing pages (projects, app view, annotations) for spacing regressions since it's outside the graph-builder scope. - File:
telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx
Line: ~230 (useEffect(..., [])initial-load hook with eslint-disable)
[NIT] The mount-only load effect disablesexhaustive-deps. Acceptable for a one-time restore, but a brief comment on why (avoid re-running oninitialGraph/loadGraphIntoCanvasidentity changes) would help future readers.
|
Need to remember whether relationship with #687 means this is required or superseded |
|
need to rebase this against vite changes |
This takes work from @jaeyow and #572. Adds a drag-and-drop graph editor for designing Burr application graphs visually and exporting as Python code or JSON. Key changes: - New /graph-builder route with full visual editor (ReactFlow v12) - Migrate existing GraphView from reactflow v11 to @xyflow/react v12 - Remove reactflow and @tisoap/react-flow-smart-edge dependencies - Per-node async/streaming toggles matching Burr's 4 action variants - Python code generation with correct decorators and signatures - 3 pre-built example graphs (MultiModal Chatbot, CRAG, Streaming) - localStorage auto-save/restore of graph state - Empty-state onboarding overlay and structured help sidebar - Fix appcontainer layout for full-height content
b71f715 to
463698c
Compare
This takes work from @jaeyow and #572.
Adds a drag-and-drop graph editor for designing Burr application graphs visually and exporting as Python code or JSON.
Changes
Key changes:
How I tested this
Notes
Next would be to unify the color schemes with the observability components.
Checklist