From 012159aae278c4db2158d75c8ab8508364351fef Mon Sep 17 00:00:00 2001 From: Iqbal Date: Fri, 30 Oct 2026 13:52:23 +0700 Subject: [PATCH] Name a node's neighbours in the graph only when there are few Selecting the Knowledge base hub named every document linked to it at once, hundreds of labels piled on top of each other. Neighbours are now named only for a node that is not a hub and has at most 12 of them; the others still light up, and each shows its name on hover. Co-Authored-By: Claude Opus 5.5 --- src/pages/Production.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/Production.tsx b/src/pages/Production.tsx index d86b896..028f7ab 100644 --- a/src/pages/Production.tsx +++ b/src/pages/Production.tsx @@ -176,6 +176,7 @@ function ContentActivity({ made, working, loading }: { made: Material[]; working // frame, so hovering or selecting (React state) never fights the animation. const DRIFT = 5 const MAX_PARTICLES = 80 +const NAMED_NEIGHBOURS = 12 const ease = (x: number) => 1 - Math.pow(1 - Math.min(1, Math.max(0, x)), 3) function curve(ax: number, ay: number, bx: number, by: number, bend: number) { @@ -259,6 +260,9 @@ function KnowledgeGraph({ graph }: { graph: Graph }) { } return set }, [focus, graph]) + // Linked nodes are named only when there are few: a hub links to every document or result, and + // naming them all at once piles hundreds of labels on top of each other. + const nameNear = !!neighbours && !graph.nodes[index.get(focus!)!]?.hub && neighbours.size <= NAMED_NEIGHBOURS + 1 const lit = (p: { a: number; b: number }) => neighbours?.has(graph.nodes[p.a].id) && neighbours.has(graph.nodes[p.b].id) return ( @@ -298,7 +302,7 @@ function KnowledgeGraph({ graph }: { graph: Graph }) { const r = n.hub ? 9 : 3.2 + Math.min(3, (degree.get(n.id) ?? 0) * 0.7) return ( { nodeEls.current[i] = el }} - className={`graph-node c-${n.cluster}${n.hub ? ' hub' : ''}${neighbours && !neighbours.has(n.id) ? ' dim' : ''}${n.id !== focus && neighbours?.has(n.id) ? ' near' : ''}${hover === n.id ? ' hover' : ''}${selected?.id === n.id ? ' sel' : ''}`} + className={`graph-node c-${n.cluster}${n.hub ? ' hub' : ''}${neighbours && !neighbours.has(n.id) ? ' dim' : ''}${nameNear && n.id !== focus && neighbours?.has(n.id) ? ' near' : ''}${hover === n.id ? ' hover' : ''}${selected?.id === n.id ? ' sel' : ''}`} onMouseEnter={() => setHover(n.id)} onMouseLeave={() => setHover(null)} onClick={e => { e.stopPropagation(); setSelected(n) }}>