diff --git a/understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx b/understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx index 6b747c0..6426cc2 100644 --- a/understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx +++ b/understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx @@ -70,10 +70,17 @@ function buildDomainOverview(graph: KnowledgeGraph): { nodes: Node[]; edges: Edg label: e.description ?? "", style: { stroke: "var(--color-accent)", strokeDasharray: "6 3", strokeWidth: 2 }, labelStyle: { fill: "var(--color-text-muted)", fontSize: 10 }, + labelBgStyle: { fill: "var(--color-surface)", fillOpacity: 0.9 }, + labelBgPadding: [6, 4] as [number, number], + labelBgBorderRadius: 4, animated: true, })); - return applyDagreLayout(rfNodes, rfEdges, "LR", dims); + // Compute spacing based on longest edge label (~6px per char at fontSize 10) + const maxLabelLen = Math.max(0, ...rfEdges.map((e) => String(e.label ?? "").length)); + const ranksep = Math.max(120, maxLabelLen * 6); + + return applyDagreLayout(rfNodes, rfEdges, "LR", dims, { ranksep }); } function buildDomainDetail( diff --git a/understand-anything-plugin/packages/dashboard/src/utils/layout.ts b/understand-anything-plugin/packages/dashboard/src/utils/layout.ts index c1644bc..2d7c50d 100644 --- a/understand-anything-plugin/packages/dashboard/src/utils/layout.ts +++ b/understand-anything-plugin/packages/dashboard/src/utils/layout.ts @@ -16,6 +16,7 @@ export function applyDagreLayout( edges: Edge[], direction: "TB" | "LR" = "TB", nodeDimensions?: Map, + spacingOverrides?: { nodesep?: number; ranksep?: number }, ): { nodes: Node[]; edges: Edge[] } { const g = new dagre.graphlib.Graph(); g.setDefaultEdgeLabel(() => ({})); @@ -24,8 +25,8 @@ export function applyDagreLayout( const isLarge = nodes.length > 50; g.setGraph({ rankdir: direction, - nodesep: isLarge ? 80 : 60, - ranksep: isLarge ? 120 : 80, + nodesep: spacingOverrides?.nodesep ?? (isLarge ? 80 : 60), + ranksep: spacingOverrides?.ranksep ?? (isLarge ? 120 : 80), marginx: 20, marginy: 20, });