feat(visualize): radial mind-map mode (default) + 3D-graph toggle

The 3D force graph of a dense wikilink mesh (71 nodes / 800 edges, avg
degree ~22) is intrinsically a hairball — no layout tuning makes its
structure readable. Add a focus-based radial mind-map as the default,
readable view:
- one node centered, its direct neighbours fanned on 1–2 rings, spokes
  only (the mesh is hidden) → a clean tree where every label is legible
- click any node (or any link in the inspector) to re-center on it and
  expand its neighbours; the panel shows the focused node's description,
  sources, and links
- spacing slider stretches the rings; reset returns to the top hub
- a MIND-MAP ⇄ 3D GRAPH toggle keeps the force layout available for the
  big-picture/cool overview
Reuses the existing render (project/draw/pick), alpha-fade, highlight
easing, zoom, legend filter, and inspector — map mode just swaps the
layout (radial ease vs force physics) and what's visible.

Author: KylinMountain

openkb/templates/graph.html

@@ -121,6 +121,7 @@
   text-transform:uppercase;cursor:pointer;transition:background .15s ease,color .15s ease;
 }
 .controls .rst:hover{background:rgba(255,255,255,.08);color:var(--ink)}
+.controls .sepc{width:1px;height:18px;background:var(--line)}
 
 /* ---- glass inspector panel ---- */
 .panel{
@@ -184,14 +185,13 @@
 
 <div class="legend" id="legend"></div>
 
-<div class="hint">
-  <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="hint" id="hint"></div>
 
 <div class="controls">
+  <button class="rst" id="mode" title="switch between mind-map and 3D graph">3D graph</button>
+  <span class="sepc"></span>
   <label>spacing <input id="spread" type="range" min="0.5" max="3" step="0.1" value="1"></label>
-  <button class="rst" id="reset" title="reset view, spacing &amp; pinned nodes">reset</button>
+  <button class="rst" id="reset" title="reset view, spacing &amp; focus">reset</button>
 </div>
 
 <div class="panel" id="panel"></div>
@@ -214,6 +214,8 @@
 const panel = document.getElementById("panel");
 const legend = document.getElementById("legend");
 const search = document.getElementById("search");
+const hintEl = document.getElementById("hint");
+const modeBtn = document.getElementById("mode");
 const DPR = Math.min(window.devicePixelRatio || 1, 2);
 const W = () => canvas.clientWidth;
 const H = () => canvas.clientHeight;
@@ -224,7 +226,8 @@
   r: 3.5 + Math.min(7, ((n.in || 0) + (n.out || 0)) * 0.42),   // small crisp nodes, scaled by degree
   col: colorOf(n.type),                               // cached color → no per-frame lookup
   alpha: 1,                                            // per-node fade (legend toggle)
-  sx:0, sy:0, rz:0, pp:1, hl:1, pinned:false           // projection cache + smoothed highlight + pinned (drag to pull out)
+  sx:0, sy:0, rz:0, pp:1, hl:1, pinned:false,          // projection cache + smoothed highlight + pinned (drag to pull out)
+  tx:0, ty:0, mapShow:true                              // mind-map: radial target position + whether shown in current focus
 }));
 const byId = Object.fromEntries(nodes.map(n => [n.id, n]));
 const edges = GRAPH.edges.filter(e => byId[e.source] && byId[e.target]);
@@ -245,9 +248,13 @@
 let scale = DEF_SCALE, panX = 0, panY = 0;
 let yaw = DEF_YAW, pitch = DEF_PITCH;    // 3D orbit angles — drag the background to rotate
 let orbiting = false, oStartX = 0, oStartY = 0, yawStart = 0, pitchStart = 0;
+let panOrigX = 0, panOrigY = 0;  // bg-drag pan origin (mind-map mode)
 let didDrag = false;
 let alpha = 1;                   // simulated-annealing "temperature"; cools to 0 so motion stops
 let spread = 1;                  // spacing knob: >1 spreads nodes apart, <1 packs them tighter
+let mode = "map";                // "map" = radial mind-map (focus + neighbors), "graph" = 3D force layout
+let focusId = null;              // centered node in mind-map mode
+let pendingFocus = null;         // node pressed in map mode, awaiting click-release
 
 document.getElementById("ncount").textContent = nodes.length;
 document.getElementById("ecount").textContent = edges.length;
@@ -273,7 +280,9 @@
 
 /* ===================== physics (adapted from okf-spec.html step()) ===================== */
 const VMAX = 9;   // per-frame speed cap → no violent swings, even on a dense hub
+const alphaTarget = n => (typeVisible(n.type) && (mode === "graph" || n.mapShow)) ? 1 : 0;
 function step(){
+  if(mode === "map"){ stepMap(); return; }
   for(let i=0;i<nodes.length;i++){
     const a = nodes[i];
     if(!visible(a)) continue;
@@ -302,8 +311,7 @@
   });
   nodes.forEach(n => {
     // smoothly approach the legend-toggle target opacity
-    const target = typeVisible(n.type) ? 1 : 0;
-    n.alpha += (target - n.alpha) * 0.12;
+    n.alpha += (alphaTarget(n) - n.alpha) * 0.12;
     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;
@@ -314,6 +322,70 @@
   alpha += (0 - alpha) * 0.02;                    // anneal: forces fade → the layout settles and stops
 }
 
+/* ===================== mind-map (radial focus layout) ===================== */
+// Place the focus node at the origin and fan its direct neighbours out on 1–2 rings.
+// Only focus + neighbours are shown; everything else fades out. Clicking a neighbour re-focuses.
+function layoutMap(){
+  const f = byId[focusId];
+  if(!f){ return; }
+  nodes.forEach(n => { n.mapShow = false; });
+  f.mapShow = true; f.tx = 0; f.ty = 0;
+  const nbrs = [...adj[focusId]].filter(id => byId[id] && typeVisible(byId[id].type));
+  const N = nbrs.length;
+  const twoRings = N > 18;
+  const split = twoRings ? Math.ceil(N * 0.42) : N;   // inner-ring count
+  nbrs.forEach((id, i) => {
+    const ring = (twoRings && i >= split) ? 1 : 0;
+    const start = ring === 0 ? 0 : split;
+    const count = ring === 0 ? Math.min(split, N) : (N - split);
+    const idx = i - start;
+    const R = (ring === 0 ? 215 : 380) * (0.7 + 0.3 * spread);   // spacing slider stretches the rings too
+    const ang = (idx / Math.max(1, count)) * TAU - Math.PI / 2 + ring * 0.5;
+    const nb = byId[id];
+    nb.mapShow = true;
+    nb.tx = Math.cos(ang) * R;
+    nb.ty = Math.sin(ang) * R;
+  });
+}
+function stepMap(){
+  for(const n of nodes){
+    n.alpha += (alphaTarget(n) - n.alpha) * 0.14;
+    if(n.mapShow){                       // ease toward radial target (flat: z→0)
+      n.x += (n.tx - n.x) * 0.16;
+      n.y += (n.ty - n.y) * 0.16;
+      n.z += (0 - n.z) * 0.16;
+    }
+  }
+  alpha += (0 - alpha) * 0.02;           // reuse the anneal gate as a "still animating" timer
+}
+function setFocus(id){
+  if(!byId[id]) return;
+  focusId = id;
+  layoutMap();
+  openPanel(byId[id]);                   // show the centered node's details + links
+  alpha = 1;                             // animate the re-layout
+}
+function setMode(m){
+  mode = m;
+  if(m === "map"){
+    yaw = 0; pitch = 0; scale = 1.0; panX = 0; panY = 0;
+    if(!focusId) focusId = byDeg[0];
+    layoutMap();
+  } else {
+    yaw = DEF_YAW; pitch = DEF_PITCH; scale = DEF_SCALE; panX = 0; panY = 0;
+    closePanel(); seed();                // fresh 3D sphere
+  }
+  hover = null; alpha = 1;
+  modeBtn.textContent = (m === "map") ? "3D graph" : "mind-map";
+  updateHint();
+}
+function updateHint(){
+  hintEl.innerHTML = (mode === "map")
+    ? '<kbd>click</kbd> focus &amp; expand &nbsp; <kbd>drag bg</kbd> pan &nbsp; <kbd>scroll</kbd> zoom'
+    : '<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';
+}
+
 /* ===================== 3D orbit projection + perspective ===================== */
 const FOCAL = 900;
 function project(){
@@ -370,6 +442,8 @@
 
 /* ===================== rendering ===================== */
 function drawEdge(e, t){
+  // mind-map: draw only the spokes radiating from the focus node (a clean tree, not the mesh)
+  if(mode === "map" && focusId && e.source !== focusId && e.target !== focusId) return;
   const a = byId[e.source], b = byId[e.target];
   const al = Math.min(a.alpha, b.alpha);
   if(al < 0.02) return;
@@ -440,7 +514,7 @@
   ctx.shadowBlur = 0;
   // (flat discs — no glossy core highlight)
   // label — declutter: hubs at rest; hovered node + neighbors; selection; zoomed in; near depth only
-  const showLabel = (scale > 1.4) || (n.id === selected) || (hover ? hl > 0.55 : labelIds.has(n.id));
+  const showLabel = (mode === "map") || (scale > 1.4) || (n.id === selected) || (hover ? hl > 0.55 : labelIds.has(n.id));
   if(showLabel && fog > 0.55){
     ctx.fillStyle = `rgba(238,242,247,${0.4 + 0.55*hl})`;
     ctx.font = `600 11px ui-monospace,monospace`;
@@ -481,8 +555,13 @@
     return;
   }
   if(orbiting){
-    yaw = yawStart + (e.offsetX - oStartX) * 0.0045;
-    pitch = Math.max(-1.45, Math.min(1.45, pitchStart - (e.offsetY - oStartY) * 0.0045));
+    if(mode === "map"){                          // flat map → drag background to pan
+      panX = panOrigX + (e.offsetX - oStartX);
+      panY = panOrigY + (e.offsetY - oStartY);
+    } else {                                     // 3D → drag background to orbit
+      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);
@@ -491,14 +570,21 @@
 canvas.addEventListener("mousedown", e => {
   const n = pick(e.offsetX, e.offsetY);
   didDrag = false;
-  oStartX = e.offsetX; oStartY = e.offsetY;   // press origin — for the drag threshold and for orbit
+  oStartX = e.offsetX; oStartY = e.offsetY;   // press origin — for the drag threshold and for orbit/pan
+  if(mode === "map"){
+    if(n){ pendingFocus = n; hover = n.id; }
+    else { orbiting = true; panOrigX = panX; panOrigY = panY; canvas.style.cursor = "grabbing"; }
+    return;
+  }
   if(n){ drag = n; hover = n.id; canvas.style.cursor = "grabbing"; }
   else { orbiting = true; yawStart = yaw; pitchStart = pitch; canvas.style.cursor = "grabbing"; }
 });
 window.addEventListener("mouseup", e => {
-  if(drag && !didDrag){ openPanel(drag); }                         // click (no drag) → inspect
+  if(mode === "map"){
+    if(pendingFocus && !didDrag) setFocus(pendingFocus.id);        // click a node → re-center on it
+  } else 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;
+  drag = null; orbiting = false; pendingFocus = null;
   canvas.style.cursor = "grab";
 });
 canvas.addEventListener("dblclick", e => {
@@ -534,7 +620,9 @@
   panel.querySelector(".x").onclick = closePanel;
   panel.querySelectorAll("[data-n]").forEach(a => a.onclick = () => {
     const m = byId[a.dataset.n];
-    if(m){ hover = m.id; centerOn(m); openPanel(m); }
+    if(!m) return;
+    if(mode === "map"){ setFocus(m.id); }              // navigate the mind-map by clicking a link
+    else { hover = m.id; centerOn(m); openPanel(m); }
   });
 }
 function closePanel(){ panel.classList.remove("open"); selected = null; }
@@ -572,23 +660,33 @@
   }
 });
 
-/* ===================== controls (spacing slider + reset) ===================== */
+/* ===================== controls (mode toggle + spacing slider + reset) ===================== */
+modeBtn.addEventListener("click", () => setMode(mode === "map" ? "graph" : "map"));
+
 const spreadEl = document.getElementById("spread");
 spreadEl.addEventListener("input", e => {
   spread = parseFloat(e.target.value) || 1;
-  alpha = Math.max(alpha, 0.6);   // reheat so the layout re-settles at the new spacing
+  if(mode === "map") layoutMap();   // spacing stretches the rings
+  alpha = Math.max(alpha, 0.6);     // reheat so the layout re-settles at the new spacing
 });
 document.getElementById("reset").addEventListener("click", () => {
-  scale = DEF_SCALE; panX = 0; panY = 0; yaw = DEF_YAW; pitch = DEF_PITCH;   // view
-  spread = 1; spreadEl.value = "1";                                          // spacing
-  nodes.forEach(n => n.pinned = false);                                     // release pinned
+  spread = 1; spreadEl.value = "1";
   hover = null; closePanel();
-  alpha = Math.max(alpha, 0.8);   // re-settle from the reset state
+  if(mode === "map"){
+    scale = 1.0; panX = 0; panY = 0; focusId = byDeg[0]; layoutMap();        // back to the top hub
+  } else {
+    scale = DEF_SCALE; panX = 0; panY = 0; yaw = DEF_YAW; pitch = DEF_PITCH;  // view
+    nodes.forEach(n => n.pinned = false);                                    // release pinned
+  }
+  alpha = Math.max(alpha, 0.9);   // re-settle from the reset state
 });
 
 /* ===================== boot ===================== */
 window.addEventListener("resize", size);
-size(); seed();
+size();
+focusId = byDeg[0]; layoutMap();   // open on the most-connected node as the mind-map root
+modeBtn.textContent = "3D graph";  // button switches TO the other mode
+updateHint();
 requestAnimationFrame(frame);
 </script>
 </body>