iqbal/learning-lab-express
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Name a node's neighbours in the graph only when there are few

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Iqbal
2026-10-30 13:52:23 +07:00
parent e1c88b291c
commit 012159aae2
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/Production.tsx
View File

@@ -176,6 +176,7 @@ function ContentActivity({ made, working, loading }: { made: Material[]; working
// frame, so hovering or selecting (React state) never fights the animation. // frame, so hovering or selecting (React state) never fights the animation.
const DRIFT = 5 const DRIFT = 5
const MAX_PARTICLES = 80 const MAX_PARTICLES = 80
const NAMED_NEIGHBOURS = 12
const ease = (x: number) => 1 - Math.pow(1 - Math.min(1, Math.max(0, x)), 3) 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) { function curve(ax: number, ay: number, bx: number, by: number, bend: number) {
@@ -259,6 +260,9 @@ function KnowledgeGraph({ graph }: { graph: Graph }) {
} }
return set return set
}, [focus, graph]) }, [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) const lit = (p: { a: number; b: number }) => neighbours?.has(graph.nodes[p.a].id) && neighbours.has(graph.nodes[p.b].id)
return ( 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) const r = n.hub ? 9 : 3.2 + Math.min(3, (degree.get(n.id) ?? 0) * 0.7)
return ( return (
<g key={n.id} ref={el => { nodeEls.current[i] = el }} <g key={n.id} ref={el => { 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)} onMouseEnter={() => setHover(n.id)} onMouseLeave={() => setHover(null)}
onClick={e => { e.stopPropagation(); setSelected(n) }}> onClick={e => { e.stopPropagation(); setSelected(n) }}>
<circle className="hit" r={r + 8} /> <circle className="hit" r={r + 8} />