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
xiaomo
xingyue
xiaoju