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) }}>