feat(visualize): keep all four views behind a tab bar

Per request, retain multiple views instead of one. Bring back the radial
'circle' layout (OpenKB centre → documents → concepts, faint cross-refs)
alongside the horizontal mind-map, 3D nebula, and treemap. Replace the
single cycle button with a tab bar [mind-map · radial · 3D · treemap];
default = mind-map. Each view reuses the shared inspector, search, legend
filter and reset.

Author: KylinMountain

openkb/templates/graph.html

@@ -122,6 +122,14 @@
 }
 .controls .rst:hover{background:rgba(255,255,255,.08);color:var(--ink)}
 .controls .sepc{width:1px;height:18px;background:var(--line)}
+.controls .tabs{display:flex;gap:2px;background:rgba(255,255,255,.05);border-radius:9px;padding:2px}
+.controls .tabs button{
+  border:none;background:none;color:var(--soft);cursor:pointer;
+  border-radius:7px;padding:5px 11px;font:600 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase;
+  transition:background .15s ease,color .15s ease;
+}
+.controls .tabs button:hover{color:var(--ink)}
+.controls .tabs button.on{background:rgba(56,189,248,.22);color:#bfe6ff}
 
 /* ---- treemap infographic ---- */
 .treemap{position:fixed;left:0;top:58px;right:0;bottom:66px;z-index:3;overflow:hidden}
@@ -233,7 +241,9 @@
 <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>
+  <div class="tabs" id="modeTabs">
+    <button data-m="mindmap">mind-map</button><button data-m="radial">radial</button><button data-m="graph">3D</button><button data-m="treemap">treemap</button>
+  </div>
   <span class="sepc"></span>
   <label id="spacingCtl">spacing <input id="spread" type="range" min="0.5" max="3.5" step="0.1" value="1.7"></label>
   <button class="rst" id="reset" title="reset view, spacing &amp; focus">reset</button>
@@ -260,7 +270,7 @@
 const legend = document.getElementById("legend");
 const search = document.getElementById("search");
 const hintEl = document.getElementById("hint");
-const modeBtn = document.getElementById("mode");
+const modeTabs = document.getElementById("modeTabs");
 const DPR = Math.min(window.devicePixelRatio || 1, 2);
 const W = () => canvas.clientWidth;
 const H = () => canvas.clientHeight;
@@ -271,7 +281,8 @@
   r: 3.5 + Math.min(18, Math.sqrt((n.in || 0) + (n.out || 0)) * 2.1),   // sqrt-scaled by degree → hubs read big, leaves stay small
   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, show:true, depth:0                        // radial layout target / visibility / layer
 }));
 const byId = Object.fromEntries(nodes.map(n => [n.id, n]));
 const edges = GRAPH.edges.filter(e => byId[e.source] && byId[e.target]);
@@ -292,8 +303,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, pendingInspect = null;   // radial: bg-drag pan + click-to-inspect
 let didDrag = false;
 let alpha = 1;                   // simulated-annealing "temperature"; cools to 0 so motion stops
+// synthetic centre for the radial view ("OpenKB" → documents → concepts)
+const ROOT = { id:"__openkb__", label:"OpenKB", type:"__root__", x:0, y:0, z:0, tx:0, ty:0,
+  sx:0, sy:0, rz:0, pp:1, r:15, hl:1, alpha:1, depth:0, show:true };
+let treeEdges = [];              // radial hierarchy edges (root→doc, doc→concept)
 const DEFAULT_SPREAD = 1.7;      // open the nebula out by default so it isn't a clump
 let spread = DEFAULT_SPREAD;     // spacing knob: >1 spreads nodes apart, <1 packs them tighter
 let mode = "mindmap";            // "mindmap" = OpenKB-rooted horizontal tree (default) · "graph" = 3D nebula · "treemap" = infographic
@@ -392,10 +408,49 @@
   mmEl.querySelectorAll(".mm-node[data-id]").forEach(el => el.onclick = () => { const m = byId[el.dataset.id]; if(m) openPanel(m); });
 }
 
+/* ===================== radial view: same OpenKB→docs→concepts tree, fanned in a circle ===================== */
+function layoutRadial(){
+  const docs = nodes.filter(n => n.id.startsWith("summaries/") && typeVisible(n.type));
+  const kidsOf = {}; docs.forEach(d => kidsOf[d.id] = []);
+  const rootDirect = [];
+  nodes.forEach(n => {
+    if(n.id.startsWith("summaries/") || !typeVisible(n.type)){ n.show = false; return; }
+    const p = (n.sources || []).map(mmResolveSrc).filter(Boolean)[0];
+    if(p && kidsOf[p]) kidsOf[p].push(n); else rootDirect.push(n);
+  });
+  nodes.forEach(n => { n.show = false; });
+  const branches = docs.map(d => ({ node: d, kids: kidsOf[d.id], w: Math.max(1.6, kidsOf[d.id].length) }))
+    .concat(rootDirect.map(c => ({ node: c, kids: [], w: 1 })));
+  const totW = branches.reduce((s, b) => s + b.w, 0) || 1;
+  const R1 = 250 * (0.6 + 0.4 * spread), R2 = R1 + 175 * (0.6 + 0.4 * spread);
+  treeEdges = []; ROOT.show = true;
+  let a = -Math.PI;
+  branches.forEach(b => {
+    const wedge = 2 * Math.PI * b.w / totW, mid = a + wedge / 2;
+    b.node.show = true; b.node.depth = 1; b.node.tx = Math.cos(mid) * R1; b.node.ty = Math.sin(mid) * R1;
+    treeEdges.push({ a: ROOT, b: b.node });
+    b.kids.forEach((c, i) => {
+      const ca = a + wedge * (i + 0.5) / Math.max(1, b.kids.length);
+      c.show = true; c.depth = 2; c.tx = Math.cos(ca) * R2; c.ty = Math.sin(ca) * R2;
+      treeEdges.push({ a: b.node, b: c });
+    });
+    a += wedge;
+  });
+}
+function stepRadial(){
+  for(const n of nodes){
+    n.alpha += ((n.show && typeVisible(n.type) ? 1 : 0) - n.alpha) * 0.14;
+    if(n.show){ n.x += (n.tx - n.x) * 0.16; n.y += (n.ty - n.y) * 0.16; n.z += (0 - n.z) * 0.16; }
+  }
+  ROOT.x += (0 - ROOT.x) * 0.16; ROOT.y += (0 - ROOT.y) * 0.16;
+  alpha += (0 - alpha) * 0.02;
+}
+
 /* ===================== 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) ? 1 : 0;
 function step(){
+  if(mode === "radial"){ stepRadial(); return; }
   for(let i=0;i<nodes.length;i++){
     const a = nodes[i];
     if(!visible(a)) continue;
@@ -526,24 +581,26 @@
     const m = byId[el.dataset.id]; if(m) openPanel(m);
   });
 }
-const MODE_LABEL = { mindmap: "mind-map", graph: "3D nebula", treemap: "treemap" };
+const MODE_LABEL = { mindmap: "mind-map", radial: "radial", graph: "3D", treemap: "treemap" };
 function setMode(m){
   mode = m;
-  const canvasMode = (m === "graph");          // only the 3D nebula uses the canvas; mind-map & treemap are DOM
+  const canvasMode = (m === "graph" || m === "radial");   // canvas: 3D nebula + radial. mind-map & treemap are DOM
   canvas.style.display = canvasMode ? "block" : "none";
   tmEl.style.display = (m === "treemap") ? "block" : "none";
   mmEl.style.display = (m === "mindmap") ? "block" : "none";
-  spacingCtl.style.display = canvasMode ? "flex" : "none";
+  spacingCtl.style.display = (m === "treemap" || m === "mindmap") ? "none" : "flex";
   hover = null; closePanel(); panX = 0; panY = 0; autoFit = true;
   if(m === "treemap"){ buildTreemap(); }
   else if(m === "mindmap"){ buildMindmap(); }
+  else if(m === "radial"){ yaw = 0; pitch = 0; scale = DEF_SCALE; layoutRadial(); alpha = 1; }
   else { yaw = DEF_YAW; pitch = DEF_PITCH; scale = DEF_SCALE; seed(); alpha = 1; }
-  modeBtn.textContent = MODE_LABEL[m];
+  [...modeTabs.children].forEach(b => b.classList.toggle("on", b.dataset.m === m));
   updateHint();
 }
 function updateHint(){
   hintEl.innerHTML =
     mode === "mindmap" ? 'OpenKB → documents → concepts &nbsp; <kbd>+/−</kbd> expand a branch &nbsp; <kbd>click</kbd> read details'
+    : mode === "radial" ? 'centre <b>OpenKB</b> → documents → concepts &nbsp; faint = cross-refs &nbsp; <kbd>click</kbd> read &nbsp; <kbd>drag</kbd> pan'
     : mode === "treemap" ? 'each block = a document &nbsp; tiles = its concepts (size = connections) &nbsp; <kbd>click</kbd> read'
     : '<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';
@@ -626,6 +683,37 @@
   return best;
 }
 
+/* ===================== radial rendering ===================== */
+function drawCrossEdge(e){                          // faint wikilink cross-reference; lights up on hover
+  const a = byId[e.source], b = byId[e.target];
+  if(!a.show || !b.show || a.alpha < 0.05 || b.alpha < 0.05) return;
+  const hot = hover && (e.source === hover || e.target === hover);
+  ctx.globalAlpha = hot ? 0.85 : 0.05;
+  ctx.strokeStyle = hot ? "rgba(45,212,191,.9)" : "rgba(150,180,225,.6)";
+  ctx.lineWidth = hot ? 1.4 : 0.6;
+  ctx.beginPath(); ctx.moveTo(a.sx, a.sy); ctx.lineTo(b.sx, b.sy); ctx.stroke();
+  ctx.globalAlpha = 1;
+}
+function drawTreeEdge(e){                            // bright hierarchy spoke (root→doc, doc→concept)
+  const a = e.a, b = e.b;
+  if(b.alpha < 0.05) return;
+  ctx.globalAlpha = 0.5 * (b.alpha || 1);
+  ctx.strokeStyle = "rgba(255,255,255,.34)";
+  ctx.lineWidth = (a === ROOT) ? 1.7 : 1.0;
+  ctx.beginPath(); ctx.moveTo(a.sx, a.sy); ctx.lineTo(b.sx, b.sy); ctx.stroke();
+  ctx.globalAlpha = 1;
+}
+function drawRoot(){
+  const x = ROOT.sx, y = ROOT.sy, r = ROOT.r;
+  ctx.beginPath(); ctx.arc(x, y, r, 0, TAU);
+  ctx.fillStyle = "rgba(232,242,252,.96)";
+  ctx.shadowColor = "rgba(120,200,255,.95)"; ctx.shadowBlur = 24; ctx.fill(); ctx.shadowBlur = 0;
+  ctx.fillStyle = "rgba(238,242,247,.98)"; ctx.font = "700 13px ui-monospace,monospace"; ctx.textAlign = "center";
+  ctx.shadowColor = "rgba(4,6,10,.95)"; ctx.shadowBlur = 5;
+  ctx.fillText("OpenKB", x, y + r + 16);
+  ctx.shadowBlur = 0;
+}
+
 /* ===================== rendering ===================== */
 function drawEdge(e, t){
   const a = byId[e.source], b = byId[e.target];
@@ -724,7 +812,7 @@
   }
   // (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 === "radial" && n.depth <= 1) || (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`;
@@ -738,7 +826,23 @@
 }
 
 function frame(t){
-  if(mode === "graph"){          // mind-map & treemap are DOM — the canvas idles
+  if(mode === "radial"){         // canvas: OpenKB-rooted radial tree (flat)
+    if(alpha > 0.005) step();
+    project();
+    ROOT.pp = 1; ROOT.rz = 0;
+    ROOT.sx = W()/2 + panX + ROOT.x*scale; ROOT.sy = H()/2 + panY + ROOT.y*scale;
+    if(autoFit && !orbiting) fitStep();
+    const focus = hover || selected;
+    for(const n of nodes){
+      const near = !focus || n.id===focus || (adj[focus] && adj[focus].has(n.id));
+      n.hl += ((near ? 1 : 0.5) - n.hl) * 0.12;
+    }
+    ctx.setTransform(DPR,0,0,DPR,0,0); ctx.clearRect(0,0,W(),H());
+    edges.forEach(drawCrossEdge);
+    treeEdges.forEach(drawTreeEdge);
+    nodes.filter(visible).forEach(n => drawNode(n, t));
+    drawRoot();
+  } else if(mode === "graph"){          // mind-map & treemap are DOM — the canvas idles
     if(alpha > 0.005) step();
     project();
     if(autoFit && !orbiting && !drag){ fitStep(); }   // smoothly keep the cloud framed to the viewport
@@ -770,9 +874,14 @@
     alpha = Math.max(alpha, 0.5);   // reheat so neighbors re-settle around the dragged node
     return;
   }
-  if(orbiting){                                  // 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));
+  if(orbiting){
+    if(mode === "radial"){                       // flat radial → 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);
@@ -782,13 +891,19 @@
   const n = pick(e.offsetX, e.offsetY);
   didDrag = false; idleFrames = 0; autoFit = false;   // user takes control → stop auto-framing
   oStartX = e.offsetX; oStartY = e.offsetY;
+  if(mode === "radial"){                          // click node → inspect; drag bg → pan
+    pendingInspect = n; 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 === "radial"){
+    if(pendingInspect && !didDrag) openPanel(pendingInspect);
+  } 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; pendingInspect = null;
   canvas.style.cursor = "grab";
 });
 canvas.addEventListener("dblclick", e => {
@@ -825,8 +940,8 @@
   panel.querySelectorAll("[data-n]").forEach(a => a.onclick = () => {
     const m = byId[a.dataset.n];
     if(!m) return;
-    if(mode === "graph"){ hover = m.id; centerOn(m); }   // graph: fly to the node
-    openPanel(m);                                        // both modes: show its details
+    if(mode === "graph" || mode === "radial"){ hover = m.id; centerOn(m); }   // canvas views: bring it into view
+    openPanel(m);                                        // all modes: show its details
   });
 }
 function closePanel(){ panel.classList.remove("open"); selected = null; }
@@ -846,7 +961,7 @@
     if(hiddenTypes.has(t)) hiddenTypes.delete(t); else hiddenTypes.add(t);
     if(mode === "treemap") buildTreemap();      // rebuild without the hidden type
     else if(mode === "mindmap") buildMindmap();
-    else alpha = Math.max(alpha, 0.4);          // graph: reheat so the layout re-settles
+    else { if(mode === "radial") layoutRadial(); alpha = Math.max(alpha, 0.4); }   // reheat / re-fan
   };
   legend.appendChild(row);
 });
@@ -870,12 +985,12 @@
 });
 
 /* ===================== controls (mode toggle + spacing slider + reset) ===================== */
-const MODE_CYCLE = ["mindmap", "graph", "treemap"];
-modeBtn.addEventListener("click", () => setMode(MODE_CYCLE[(MODE_CYCLE.indexOf(mode) + 1) % MODE_CYCLE.length]));
+[...modeTabs.children].forEach(b => b.addEventListener("click", () => setMode(b.dataset.m)));
 
 const spreadEl = document.getElementById("spread");
 spreadEl.addEventListener("input", e => {
   spread = parseFloat(e.target.value) || 1;
+  if(mode === "radial") layoutRadial();           // re-fan the rings
   alpha = Math.max(alpha, 0.6); autoFit = true;   // reheat + re-frame to the new spacing
 });
 document.getElementById("reset").addEventListener("click", () => {
@@ -884,6 +999,10 @@
     tmQuery = ""; search.value = ""; buildTreemap();
   } else if(mode === "mindmap"){
     mmQuery = ""; search.value = ""; mmCollapsed.clear(); collapseDocs(); buildMindmap(); mmEl.scrollTop = 0; mmEl.scrollLeft = 0;
+  } else if(mode === "radial"){
+    spread = DEFAULT_SPREAD; spreadEl.value = String(DEFAULT_SPREAD); panX = 0; panY = 0;
+    scale = DEF_SCALE; yaw = 0; pitch = 0; layoutRadial();
+    alpha = Math.max(alpha, 0.9); autoFit = true;
   } else {
     spread = DEFAULT_SPREAD; spreadEl.value = String(DEFAULT_SPREAD); panX = 0; panY = 0;
     scale = DEF_SCALE; yaw = DEF_YAW; pitch = DEF_PITCH;