diff --git a/understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx b/understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx index c7155cb..acb4f3e 100644 --- a/understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx +++ b/understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx @@ -191,16 +191,26 @@ function DomainGraphViewInner() { } let cancelled = false; const { nodes: nodesArray, edges: edgesArray, dims } = built; - const elkInput = nodesToElkInput(nodesArray, edgesArray, dims); - applyElkLayout(elkInput, { strict: import.meta.env.DEV }).then( - ({ positioned }) => { + // DomainGraphView used dagre LR; preserve that direction with ELK. + const elkInput = nodesToElkInput(nodesArray, edgesArray, dims, { + "elk.direction": "RIGHT", + }); + applyElkLayout(elkInput, { strict: import.meta.env.DEV }) + .then(({ positioned, issues }) => { if (cancelled) return; + if (issues.length > 0) { + // TODO: Task 16 funnels these into the WarningBanner. + console.warn("[domain ELK] layout issues:", issues); + } setLayout({ nodes: mergeElkPositions(nodesArray, positioned), edges: edgesArray, }); - }, - ); + }) + .catch((err) => { + if (cancelled) return; + console.error("[domain ELK] layout failed:", err); + }); return () => { cancelled = true; }; diff --git a/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx b/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx index 55c5635..67c1d6b 100644 --- a/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx +++ b/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx @@ -224,21 +224,23 @@ function useOverviewGraph() { } let cancelled = false; const { clusterNodes, flowEdges, dims } = built; - const elkInput = nodesToElkInput( - clusterNodes as unknown as Node[], - flowEdges, - dims, - ); - applyElkLayout(elkInput, { strict: import.meta.env.DEV }).then( - ({ positioned }) => { + const baseNodes = clusterNodes as unknown as Node[]; + const elkInput = nodesToElkInput(baseNodes, flowEdges, dims); + applyElkLayout(elkInput, { strict: import.meta.env.DEV }) + .then(({ positioned, issues }) => { if (cancelled) return; - const positionedNodes = mergeElkPositions( - clusterNodes as unknown as Node[], - positioned, - ); + if (issues.length > 0) { + // TODO: Task 16 wires these into the WarningBanner. Until then, + // surface them in the console so they aren't completely silent. + console.warn("[overview ELK] layout issues:", issues); + } + const positionedNodes = mergeElkPositions(baseNodes, positioned); setOverview({ nodes: positionedNodes, edges: flowEdges }); - }, - ); + }) + .catch((err) => { + if (cancelled) return; + console.error("[overview ELK] layout failed:", err); + }); return () => { cancelled = true; }; diff --git a/understand-anything-plugin/packages/dashboard/src/utils/layout.ts b/understand-anything-plugin/packages/dashboard/src/utils/layout.ts index 0b13ac0..6e408e5 100644 --- a/understand-anything-plugin/packages/dashboard/src/utils/layout.ts +++ b/understand-anything-plugin/packages/dashboard/src/utils/layout.ts @@ -202,10 +202,11 @@ export function nodesToElkInput( nodes: Node[], edges: Edge[], dims: Map, + layoutOptionsOverride?: Record, ): ElkInput { return { id: "root", - layoutOptions: ELK_DEFAULT_LAYOUT_OPTIONS, + layoutOptions: { ...ELK_DEFAULT_LAYOUT_OPTIONS, ...layoutOptionsOverride }, children: nodes.map((n) => { const d = dims.get(n.id); return {