diff --git a/src/pages/Production.tsx b/src/pages/Production.tsx index 7e037ae..f71d27e 100644 --- a/src/pages/Production.tsx +++ b/src/pages/Production.tsx @@ -298,7 +298,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' : ''}${hover === n.id ? ' hover' : ''}${selected?.id === n.id ? ' sel' : ''}`} + 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' : ''}`} onMouseEnter={() => setHover(n.id)} onMouseLeave={() => setHover(null)} onClick={e => { e.stopPropagation(); setSelected(n) }}> diff --git a/src/styles/theme.css b/src/styles/theme.css index 02e0441..5c46507 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -344,6 +344,8 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)} .graph-node text{fill:#fff;font-size:13px;font-weight:700;letter-spacing:.01em;text-anchor:middle;paint-order:stroke;stroke:#08142a;stroke-width:4px;stroke-linejoin:round;pointer-events:none} .graph-node:not(.hub) text{font-size:11.5px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s} .graph-node:not(.hub):is(.hover,.sel) text{opacity:1;transform:none} +/* What the focused node is linked to is named too, a little quieter than the node itself. */ +.graph-node.near:not(.hub) text{opacity:.85;transform:none;font-size:10.5px;font-weight:500} .c-sources{--c:var(--g-sources)}.c-made{--c:var(--g-made)} .graph-note{position:absolute;top:16px;left:16px;z-index:2;display:flex;align-items:center;gap:8px;max-width:min(460px,calc(100% - 340px));