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
What: Replace Dagre layout engine with ELK (Eclipse Layout Kernel) for
workflow graph visualization in the dashboard.
Why: Dagre lacks support for edge label placement and orthogonal edge
routing, causing condition labels to overlap with nodes. ELK provides
proper label positioning, better edge routing, and more compact layouts.
Changes:
- packages/workflow-dashboard/package.json: add elkjs dependency
- packages/workflow-dashboard/src/components/workflow-graph/use-layout.ts:
rewrite layout from Dagre to async ELK with layered algorithm,
orthogonal routing, reduced spacing for compactness
- packages/workflow-dashboard/src/components/workflow-graph/condition-edge.tsx:
use ELK-computed label positions, show all labels including FALLBACK,
switch to getSmoothStepPath for all edges
- packages/workflow-dashboard/src/components/workflow-graph/workflow-graph.tsx:
wrap in ReactFlowProvider, add fitView on async layout change,
key-based remount for layout stability
- packages/workflow-dashboard/src/components/workflow-list.tsx:
left-right layout (info left, graph right), fix toggleExpanded
React 18 batching bug, increase graph container height
xingyue
jiashuang
xiaoju
xiaomo