Skip to content

feat: add visual Graph Builder tool to Burr UI - #667

Open
skrawcz wants to merge 2 commits into
mainfrom
feature/graph-builder
Open

feat: add visual Graph Builder tool to Burr UI#667
skrawcz wants to merge 2 commits into
mainfrom
feature/graph-builder

Conversation

@skrawcz

@skrawcz skrawcz commented Mar 1, 2026

Copy link
Copy Markdown
Contributor

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

  • these are UI only changes to add new graph-builder

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

How I tested this

  • locally
Screenshot 2026-03-01 at 08 27 49

Notes

Next would be to unify the color schemes with the observability components.

Checklist

  • PR has an informative and human-readable title (this will be pulled into the release notes)
  • Changes are limited to a single goal (no scope creep)
  • Code passed the pre-commit check & code is left cleaner/nicer than when first encountered.
  • Any change in functionality is tested
  • New functions are documented (with a description, list of inputs, and expected output)
  • Placeholder code is flagged / future TODOs are captured in comments
  • Project documentation has been updated if adding/changing functionality.

@skrawcz
skrawcz force-pushed the feature/graph-builder branch from ea60cbe to e9c7c88 Compare March 1, 2026 16:33
@github-actions

github-actions Bot commented Mar 1, 2026

Copy link
Copy Markdown

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 draft: true will not be rendered. The source is here: https://github.com/apache/burr/tree/gh-pages/pull/667/

andreahlert added a commit to andreahlert/burr that referenced this pull request Mar 28, 2026
…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.
@andreahlert andreahlert added kind/feature Net-new functionality area/ui Burr UI (telemetry frontend) labels Mar 30, 2026

@skrawcz skrawcz left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 (edgesUpdatableedgesReconnectable, 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:

  1. Unit tests for BurrCodeGenerator, GraphExporter, and ExampleLoader.validateExample — these are pure functions and the highest-value thing missing. At minimum, assert validateExample returns [] for each bundled example and snapshot the generated Python for one sync + one streaming graph.
  2. Fix the duplicate-label code-generation bug: deduplicateNames is applied only to the with_actions list, not to the generated defs or transitions, so two nodes with the same label produce colliding/redefined functions. Dedup consistently or key off node.id.
  3. A short docs page (the PR checklist docs item is unchecked) and a manual smoke-test of existing UI pages given the shared appcontainer layout change and the v12 migration.
    Also worth a quick confirmation: dropping the smart-edge routing in favor of plain bezier paths in the observability GraphView is 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 (generateGraphFunctiondeduplicateNames call)
    [BLOCKING] deduplicateNames is applied here to build the with_actions(...) list, but generateActions and generateTransitions call sanitizeNodeName(node.label) directly with no dedup. Two nodes sharing a label therefore produce two identically-named defs and ambiguous transition strings — invalid Python. Please dedup consistently across function definitions, the action list, and transitions (or key generation off the stable node.id rather 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 (a SyntaxError). 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 the useMemo recomputed on every node/edge change and is written to localStorage, so created resets 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 bundled ExampleGraph and asserts it returns [], so a malformed example can't ship silently.
  • File: telemetry/ui/src/components/routes/app/GraphView.tsx
    Line: ~170 (removal of getSmartEdge, replaced by getBezierPath)
    [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 previous py-14 -my-1 margins 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 disables exhaustive-deps. Acceptable for a one-time restore, but a brief comment on why (avoid re-running on initialGraph/loadGraphIntoCanvas identity changes) would help future readers.

@skrawcz

skrawcz commented Jul 23, 2026

Copy link
Copy Markdown
Contributor Author

Need to remember whether relationship with #687 means this is required or superseded

@skrawcz

skrawcz commented Jul 23, 2026

Copy link
Copy Markdown
Contributor Author

need to rebase this against vite changes

skrawcz added 2 commits July 31, 2026 12:48
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
@skrawcz
skrawcz force-pushed the feature/graph-builder branch from b71f715 to 463698c Compare July 31, 2026 20:00
@github-actions github-actions Bot added the pr/needs-rebase Conflicts with main label Jul 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/ui Burr UI (telemetry frontend) kind/feature Net-new functionality pr/needs-rebase Conflicts with main

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants