agent/Understand-Anything
2
0
Fork 0
mirror of https://github.com/Egonex-AI/Understand-Anything.git synced 2026-06-22 10:58:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(dashboard): auto-widen domain graph spacing for long edge labels

Browse Source 
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>
This commit is contained in:
Lum1104
2026-04-03 00:17:20 +08:00
co-authored by Claude Opus 4.6
parent 87cfe0d869
commit 63ee658478
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx
+8 -1
View File
@@ -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(
understand-anything-plugin/packages/dashboard/src/utils/layout.ts
+3 -2
View File
@@ -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,
});