From 63ee6584780c57102a86ac98ae72d5759aed0f03 Mon Sep 17 00:00:00 2001
From: Lum1104 <linyux1104@163.com>
Date: Fri, 3 Apr 2026 00:17:20 +0800
Subject: [PATCH] fix(dashboard): auto-widen domain graph spacing for long edge
 labels

Instead of truncating cross_domain edge labels, compute ranksep from
the longest label length (~6px/char) so dagre spaces nodes further
apart. Also add label background for readability, and support
spacingOverrides parameter in applyDagreLayout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../dashboard/src/components/DomainGraphView.tsx         | 9 ++++++++-
 .../packages/dashboard/src/utils/layout.ts               | 5 +++--
 2 files changed, 11 insertions(+), 3 deletions(-)

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<string, { width: number; height: number }>,
+  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,
   });