refactor(dashboard): replace ELK with custom spine layout #235

2026-05-13T08:54:19Z

xingyue commented

2026-05-13 08:54:19 +00:00

What

Replace ELK layout engine with a hand-written spine layout for workflow graph visualization.

Why

ELK's layered algorithm spreads the graph too wide when handling feedback (back) edges, causing fitView to shrink nodes until text is unreadable. Our workflow graphs are predominantly linear pipelines with feedback loops — a custom layout handles this topology much better.

Changes

use-layout.ts: Rewrite from async ELK → synchronous spine layout. Topo-sort extracts main path, nodes stack vertically centered, feedback edges get right-side label positions
condition-edge.tsx: Add custom SVG path for feedback edges (right-side arc with quadratic curves), use typed isFeedback/isSelfLoop fields
types.ts: Rename elkLabelX/Y → labelX/Y, add isFeedback and isSelfLoop to ConditionEdgeData
workflow-graph.tsx: Remove ReactFlowProvider/useReactFlow/useEffect fitView workaround (layout is now synchronous), simplify component
package.json: Remove elkjs and @dagrejs/dagre dependencies

Ref

Follows PR #232 (ELK) and #233 (review feedback). This replaces both.

## What Replace ELK layout engine with a hand-written spine layout for workflow graph visualization. ## Why ELK's layered algorithm spreads the graph too wide when handling feedback (back) edges, causing fitView to shrink nodes until text is unreadable. Our workflow graphs are predominantly linear pipelines with feedback loops — a custom layout handles this topology much better. ## Changes - **use-layout.ts**: Rewrite from async ELK → synchronous spine layout. Topo-sort extracts main path, nodes stack vertically centered, feedback edges get right-side label positions - **condition-edge.tsx**: Add custom SVG path for feedback edges (right-side arc with quadratic curves), use typed `isFeedback`/`isSelfLoop` fields - **types.ts**: Rename `elkLabelX/Y` → `labelX/Y`, add `isFeedback` and `isSelfLoop` to ConditionEdgeData - **workflow-graph.tsx**: Remove ReactFlowProvider/useReactFlow/useEffect fitView workaround (layout is now synchronous), simplify component - **package.json**: Remove `elkjs` and `@dagrejs/dagre` dependencies ## Ref Follows PR #232 (ELK) and #233 (review feedback). This replaces both.

xingyue added 1 commit 2026-05-13 08:54:19 +00:00

refactor(dashboard): replace ELK with custom spine layout e7f733c393

What: Replace ELK layout engine with a hand-written spine layout that
topologically sorts nodes into a vertical main path with feedback edges
routed to the right side.

Why: ELK's layered algorithm spreads the graph too wide when handling
feedback (back) edges, causing fitView to shrink nodes until text is
unreadable. Our workflow graphs are predominantly linear pipelines with
feedback loops — a custom layout handles this topology much better.

Changes:
- packages/workflow-dashboard/src/components/workflow-graph/use-layout.ts:
  rewrite from async ELK to synchronous spine layout — topo-sort extracts
  main path, nodes stack vertically, feedback edges get right-side routing
- packages/workflow-dashboard/src/components/workflow-graph/condition-edge.tsx:
  add custom SVG path for feedback edges (right-side arc with Q curves),
  use typed isFeedback/isSelfLoop fields from ConditionEdgeData
- packages/workflow-dashboard/src/components/workflow-graph/types.ts:
  rename elkLabelX/Y to labelX/Y, add isFeedback and isSelfLoop fields
- packages/workflow-dashboard/src/components/workflow-graph/workflow-graph.tsx:
  remove ReactFlowProvider/useReactFlow/useEffect fitView workaround
  (no longer needed — layout is synchronous), simplify component
- packages/workflow-dashboard/package.json: remove elkjs and dagre deps

xiaomo approved these changes 2026-05-13 09:03:29 +00:00

xiaomo left a comment

Clean refactor. Replacing async ELK with synchronous spine layout is a good simplification for this topology. Code follows conventions: named exports, functional style, T | null over optionals, no console.log. Type changes in ConditionEdgeData are well-structured. Minor: indentation on labelX/labelY in the edge data literal (use-layout.ts) is off by 2 spaces — cosmetic only.

Clean refactor. Replacing async ELK with synchronous spine layout is a good simplification for this topology. Code follows conventions: named exports, functional style, `T | null` over optionals, no console.log. Type changes in ConditionEdgeData are well-structured. Minor: indentation on `labelX`/`labelY` in the edge data literal (use-layout.ts) is off by 2 spaces — cosmetic only.

xiaomo merged commit 6d1e0498ba into main

2026-05-13 09:03:34 +00:00

xiaomo referenced this issue from a commit

2026-05-13 09:03:34 +00:00

Merge pull request 'refactor(dashboard): replace ELK with custom spine layout' (#235) from refactor/dashboard-custom-spine-layout into main

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: uncaged/workflow#235