fix(visualize): gentler hover + slower orbit + deep zoom + pull-out pins

Address feedback that hovering flashed the scene and that exploring was
hard:
- smooth, eased highlight (per-node hl lerp) replaces the hard faded
  snap; non-neighbors dim gently (never to black) and the hover pulse/
  glow are toned down — no more flicker
- an open inspector now keeps its node's connections lit (focus =
  hover || selected), so you can study one node's links at leisure
- orbit sensitivity halved (0.0045) — rotation is no longer twitchy
- zoom range widened to 9x and anchored on the cursor, so you can drill
  into a local cluster
- drag a node to pull it out; releasing pins it (dashed ring, won't
  spring back) so its links fan out for inspection; double-click releases
- hint line updated to match

Author: KylinMountain

openkb/templates/graph.html

@@ -158,8 +158,8 @@
 <div class="legend" id="legend"></div>
 
 <div class="hint">
-  <kbd>scroll</kbd> zoom &nbsp; <kbd>drag bg</kbd> rotate<br>
-  <kbd>drag node</kbd> move &nbsp; <kbd>click</kbd> inspect
+  <kbd>scroll</kbd> zoom &nbsp; <kbd>drag bg</kbd> rotate &nbsp; <kbd>click</kbd> inspect<br>
+  <kbd>drag node</kbd> pull out &amp; pin &nbsp; <kbd>dbl-click</kbd> release
 </div>
 
 <div class="panel" id="panel"></div>
@@ -190,7 +190,7 @@
   ...n, x:0, y:0, z:0, vx:0, vy:0, vz:0,
   r: 8 + Math.min(10, (n.in || 0) + (n.out || 0)),   // radius scales with degree
   alpha: 1,                                            // per-node fade (legend toggle)
-  sx:0, sy:0, rz:0, pp:1                               // per-frame 3D projection cache
+  sx:0, sy:0, rz:0, pp:1, hl:1, pinned:false           // projection cache + smoothed highlight + pinned (drag to pull out)
 }));
 const byId = Object.fromEntries(nodes.map(n => [n.id, n]));
 const edges = GRAPH.edges.filter(e => byId[e.source] && byId[e.target]);
@@ -271,7 +271,7 @@
     // smoothly approach the legend-toggle target opacity
     const target = typeVisible(n.type) ? 1 : 0;
     n.alpha += (target - n.alpha) * 0.12;
-    if(n === drag){ n.vx = n.vy = n.vz = 0; return; }   // pinned: position set by drag handler
+    if(n === drag || n.pinned){ n.vx = n.vy = n.vz = 0; return; }   // dragged or pinned: held in place
     n.vx *= 0.84; n.vy *= 0.84; n.vz *= 0.84;           // stronger damping dissipates energy fast
     if(n.vx > VMAX) n.vx = VMAX; else if(n.vx < -VMAX) n.vx = -VMAX;
     if(n.vy > VMAX) n.vy = VMAX; else if(n.vy < -VMAX) n.vy = -VMAX;
@@ -313,7 +313,13 @@
 canvas.addEventListener("wheel", e => {
   e.preventDefault();
   const f = Math.exp(-e.deltaY * 0.0015);
-  scale = Math.max(0.3, Math.min(4.5, scale*f));   // zoom about the screen centre
+  const ns = Math.max(0.3, Math.min(9, scale*f));   // wider range so you can dive deep in
+  const k = ns/scale;
+  // anchor zoom on the cursor → drill into whatever cluster you point at
+  const dx = e.offsetX - W()/2, dy = e.offsetY - H()/2;
+  panX = dx*(1-k) + panX*k;
+  panY = dy*(1-k) + panY*k;
+  scale = ns;
 }, {passive:false});
 
 /* ===================== picking ===================== */
@@ -335,19 +341,19 @@
   const al = Math.min(a.alpha, b.alpha);
   if(al < 0.02) return;
   const hot = hover && (e.source===hover || e.target===hover);
-  const dim = hover && !hot;
   const ax=a.sx, ay=a.sy, bx=b.sx, by=b.sy;
   const fog = Math.max(0.2, Math.min(1, 1 - (a.rz+b.rz)/1300));   // far edges recede
-  ctx.globalAlpha = al * (hot ? 1 : fog);
-  ctx.strokeStyle = hot ? "rgba(45,212,191,.85)" : (dim ? "rgba(255,255,255,.035)" : "rgba(255,255,255,.12)");
+  const ehl = Math.max(a.hl, b.hl);                               // edge eases with its endpoints (smooth dim)
+  ctx.globalAlpha = al * fog * (hot ? 1 : (0.18 + 0.82*ehl));
+  ctx.strokeStyle = hot ? "rgba(45,212,191,.85)" : `rgba(255,255,255,${0.06 + 0.07*ehl})`;
   ctx.lineWidth = hot ? 2 : 1;
   ctx.beginPath(); ctx.moveTo(ax,ay); ctx.lineTo(bx,by); ctx.stroke();
   // arrowhead at b, backed off by b's projected radius
   const ang = Math.atan2(by-ay, bx-ax);
   const off = b.r*b.pp*scale + 4;
   const hx = bx - Math.cos(ang)*off, hy = by - Math.sin(ang)*off;
   const ah = 7;
-  ctx.fillStyle = hot ? "rgba(45,212,191,.9)" : (dim ? "rgba(255,255,255,.035)" : "rgba(255,255,255,.2)");
+  ctx.fillStyle = hot ? "rgba(45,212,191,.9)" : `rgba(255,255,255,${0.08 + 0.12*ehl})`;
   ctx.beginPath();
   ctx.moveTo(hx, hy);
   ctx.lineTo(hx - Math.cos(ang-.4)*ah, hy - Math.sin(ang-.4)*ah);
@@ -368,41 +374,45 @@
 function drawNode(n, t){
   if(n.alpha < 0.02) return;
   const col = colorOf(n.type);
-  const near = hover ? (n.id===hover || adj[hover].includes(n.id)) : true;
-  const faded = hover && !near;
-  // idle breathing for hubs (when nothing is hovered)
-  const breathe = (!hover && hubIds.has(n.id)) ? (1 + 0.10*Math.sin(t*0.0024)) : 1;
-  const pulse = (n.id===hover) ? (1.32 + 0.10*Math.sin(t*0.006)) : 1;
+  const hl = n.hl;   // smoothed highlight: 1 = lit; eases down (not snaps) when another node is hovered
+  const breathe = (!hover && hubIds.has(n.id)) ? (1 + 0.05*Math.sin(t*0.0024)) : 1;
+  const pulse = (n.id===hover) ? (1.16 + 0.03*Math.sin(t*0.006)) : 1;
   const r = Math.max(2, n.r * pulse * breathe * n.pp * scale);   // perspective: near = larger
   const fog = Math.max(0.32, Math.min(1, 1 - n.rz/640));         // depth cue: far nodes recede
   const x = n.sx, y = n.sy;
-  ctx.globalAlpha = n.alpha * (faded ? 0.9 : fog);
+  ctx.globalAlpha = n.alpha * fog * (0.34 + 0.66*hl);            // dim non-neighbors gently, never to black
   // selected ring
   if(n.id === selected){
     ctx.beginPath(); ctx.arc(x, y, r+6, 0, 6.2832);
     ctx.strokeStyle = `rgba(${col},.85)`; ctx.lineWidth = 2; ctx.stroke();
   }
+  // pinned marker (dashed ring → "pulled out and held")
+  if(n.pinned){
+    ctx.beginPath(); ctx.arc(x, y, r+4, 0, 6.2832);
+    ctx.strokeStyle = "rgba(255,255,255,.65)"; ctx.lineWidth = 1.5;
+    ctx.setLineDash([3,3]); ctx.stroke(); ctx.setLineDash([]);
+  }
   // hover halo
   if(n.id === hover){
     ctx.beginPath(); ctx.arc(x, y, r+11, 0, 6.2832);
     ctx.fillStyle = `rgba(${col},.16)`; ctx.fill();
   }
-  // disc + glow
+  // disc + glow (glow eases with highlight so hovering doesn't flash the whole scene)
   ctx.beginPath(); ctx.arc(x, y, r, 0, 6.2832);
-  ctx.fillStyle = `rgba(${col},${faded ? .25 : 1})`;
-  ctx.shadowColor = `rgba(${col},.85)`;
-  ctx.shadowBlur = (faded ? 0 : (n.id===hover ? 22 : 14)) * fog;
+  ctx.fillStyle = `rgba(${col},${0.5 + 0.5*hl})`;
+  ctx.shadowColor = `rgba(${col},.8)`;
+  ctx.shadowBlur = (n.id===hover ? 17 : 11) * fog * hl;
   ctx.fill();
   ctx.shadowBlur = 0;
   // bright inner core
-  if(!faded){
+  if(hl > 0.35){
     ctx.beginPath(); ctx.arc(x-r*0.28, y-r*0.28, r*0.34, 0, 6.2832);
-    ctx.fillStyle = "rgba(255,255,255,.55)"; ctx.fill();
+    ctx.fillStyle = `rgba(255,255,255,${0.5*hl})`; ctx.fill();
   }
   // label — declutter: hubs at rest; hovered node + neighbors; selection; zoomed in; near depth only
-  const showLabel = (scale > 1.4) || (n.id === selected) || (hover ? near : labelIds.has(n.id));
+  const showLabel = (scale > 1.4) || (n.id === selected) || (hover ? hl > 0.55 : labelIds.has(n.id));
   if(showLabel && fog > 0.55){
-    ctx.fillStyle = faded ? "rgba(170,184,199,.3)" : "rgba(238,242,247,.95)";
+    ctx.fillStyle = `rgba(238,242,247,${0.4 + 0.55*hl})`;
     ctx.font = `600 11px ui-monospace,monospace`;
     ctx.textAlign = "center";
     ctx.shadowColor = "rgba(4,6,10,.92)"; ctx.shadowBlur = 4;   // legibility over the edge web
@@ -415,6 +425,12 @@
 function frame(t){
   if(alpha > 0.005) step();   // once cooled, stop integrating — the graph holds still
   project();                  // 3D → screen coords for this frame
+  // ease each node's highlight toward its target so hover brightens/dims smoothly (no flash)
+  const focus = hover || selected;   // hovering OR an open inspector keeps that node's connections lit
+  for(const n of nodes){
+    const near = !focus || n.id===focus || adj[focus].includes(n.id);
+    n.hl += ((near ? 1 : 0.22) - n.hl) * 0.12;
+  }
   ctx.setTransform(DPR,0,0,DPR,0,0);
   ctx.clearRect(0,0,W(),H());
   edges.forEach(e => drawEdge(e, t));
@@ -432,8 +448,8 @@
     return;
   }
   if(orbiting){
-    yaw = yawStart + (e.offsetX - oStartX) * 0.01;
-    pitch = Math.max(-1.45, Math.min(1.45, pitchStart - (e.offsetY - oStartY) * 0.01));
+    yaw = yawStart + (e.offsetX - oStartX) * 0.0045;
+    pitch = Math.max(-1.45, Math.min(1.45, pitchStart - (e.offsetY - oStartY) * 0.0045));
     didDrag = true; return;
   }
   const n = pick(e.offsetX, e.offsetY);
@@ -446,10 +462,15 @@
   else { orbiting = true; oStartX = e.offsetX; oStartY = e.offsetY; yawStart = yaw; pitchStart = pitch; canvas.style.cursor = "grabbing"; }
 });
 window.addEventListener("mouseup", e => {
-  if(drag && !didDrag){ openPanel(drag); }     // click (no drag) on a node → inspect
+  if(drag && !didDrag){ openPanel(drag); }                         // click (no drag) → inspect
+  else if(drag && didDrag){ drag.pinned = true; alpha = Math.max(alpha, 0.5); }  // pulled out → pin it
   drag = null; orbiting = false;
   canvas.style.cursor = "grab";
 });
+canvas.addEventListener("dblclick", e => {
+  const n = pick(e.offsetX, e.offsetY);
+  if(n && n.pinned){ n.pinned = false; alpha = Math.max(alpha, 0.5); }   // double-click a pinned node → release
+});
 canvas.addEventListener("mouseleave", () => { if(!drag && !orbiting) hover = null; });
 
 /* ===================== inspector panel ===================== */