agent/Understand-Anything
1
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: highlight connected edges on node selection in knowledge view

Browse Source 
Connected edges now highlight (thicker, full opacity) when a node is
selected/focused. Unconnected edges dim to near-invisible. Edge labels
only show on connected edges to reduce visual noise.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Lum1104
2026-04-12 11:24:17 +08:00
Unverified
parent 7e41ba7a68
commit 1d15851905
1 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
understand-anything-plugin/packages/dashboard/src/components/KnowledgeGraphView.tsx
+24 -3
View File
@@ -195,15 +195,36 @@ function KnowledgeGraphViewInner() {
};
});
const activeId = focusNodeId ?? selectedNodeId;
const rfEdges: Edge[] = filteredGraph.edges.map((e) => {
const style = EDGE_STYLES[e.type] ?? EDGE_STYLES.related;
const baseStyle = EDGE_STYLES[e.type] ?? EDGE_STYLES.related;
const isConnected = activeId && (e.source === activeId || e.target === activeId);
// When a node is selected: highlight connected edges, dim the rest
let style: React.CSSProperties;
if (activeId) {
if (isConnected) {
style = {
...baseStyle,
strokeWidth: Math.max(2, (baseStyle.strokeWidth as number ?? 1) * 1.5),
opacity: 1,
};
} else {
style = { ...baseStyle, opacity: 0.04 };
}
} else {
style = baseStyle;
}
return {
id: `ke-${e.source}-${e.target}-${e.type}`,
source: e.source,
target: e.target,
style,
animated: e.type === "contradicts",
label: e.type !== "related" && e.type !== "categorized_under" ? e.type.replace(/_/g, " ") : undefined,
animated: e.type === "contradicts" && (!activeId || !!isConnected),
label: isConnected && e.type !== "related" && e.type !== "categorized_under"
? e.type.replace(/_/g, " ")
: undefined,
labelStyle: { fill: "var(--color-text-muted)", fontSize: 9, opacity: 0.7 },
labelBgStyle: { fill: "var(--color-surface)", fillOpacity: 0.9 },
labelBgPadding: [4, 2] as [number, number],