feat(visualize): horizontal collapsible mind-map (XMind-style) as default

Replace the radial 'circle' layout with a proper left-to-right tree, which
reads unambiguously as a mind-map:
- OpenKB root on the left → documents → each document's concepts/entities,
  laid out as a tidy tree with curved (bezier) connectors (DOM + SVG)
- documents start collapsed with a +N badge; click +/- to expand a branch,
  click a node to read its details/sources/links
- search filters branches, legend filters types, reset re-collapses
- view button cycles mind-map -> 3D nebula -> treemap
Removes the canvas radial mind-map.

Author: KylinMountain

openkb/templates/graph.html

@@ -125,6 +125,30 @@
 
 /* ---- treemap infographic ---- */
 .treemap{position:fixed;left:0;top:58px;right:0;bottom:66px;z-index:3;overflow:hidden}
+/* ---- mind-map (horizontal tree) ---- */
+.mindmap{position:fixed;left:0;top:58px;right:0;bottom:66px;z-index:3;overflow:auto}
+.mindmap .mm-canvas{position:relative}
+.mindmap .mm-links{position:absolute;left:0;top:0;pointer-events:none}
+.mindmap .mm-node{
+  position:absolute;width:184px;height:20px;display:flex;align-items:center;gap:7px;
+  padding:0 9px;border:1px solid var(--line);border-radius:11px;background:var(--glass);
+  font:.72rem var(--mono);color:var(--ink);cursor:pointer;box-sizing:border-box;
+  transition:filter .12s ease;
+}
+.mindmap .mm-node:hover{filter:brightness(1.4)}
+.mindmap .mm-root{
+  width:86px;justify-content:center;font-weight:700;color:#0a0e14;
+  background:rgba(232,242,252,.96);border:none;box-shadow:0 0 16px rgba(120,200,255,.6);
+}
+.mindmap .mm-dot{width:8px;height:8px;border-radius:50%;flex:none}
+.mindmap .mm-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.mindmap .mm-caret{
+  flex:none;min-width:15px;text-align:center;color:var(--soft);font-size:.64rem;
+  background:rgba(255,255,255,.09);border-radius:7px;padding:0 4px;
+}
+.mindmap .mm-caret:hover{background:rgba(255,255,255,.2);color:var(--ink)}
+.mindmap::-webkit-scrollbar{width:9px;height:9px}
+.mindmap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
 .treemap .tm-doc{position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden}
 .treemap .tm-h{
   position:absolute;left:0;top:0;right:0;height:21px;padding:0 8px;
@@ -193,6 +217,7 @@
 <div class="vignette"></div>
 <canvas id="c"></canvas>
 <div class="treemap" id="treemap"></div>
+<div class="mindmap" id="mindmap"></div>
 
 <div class="brand">openkb<small>knowledge graph</small></div>
 
@@ -246,8 +271,7 @@
   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)
-  tx:0, ty:0, show:true, depth:0                        // mind-map: radial target, visibility, layer
+  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]);
@@ -268,16 +292,11 @@
 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;   // mind-map: bg-drag pan + click-to-inspect
 let didDrag = false;
 let alpha = 1;                   // simulated-annealing "temperature"; cools to 0 so motion stops
 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 radial tree (default) · "graph" = 3D nebula · "treemap" = infographic
-// synthetic centre node for the mind-map ("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 = [];              // mind-map hierarchy edges (root→doc, doc→concept)
+let mode = "mindmap";            // "mindmap" = OpenKB-rooted horizontal tree (default) · "graph" = 3D nebula · "treemap" = infographic
 let idleFrames = 0;              // frames since last interaction → drives idle auto-rotation
 let autoFit = true;              // keep gently framing the cloud until the user takes control
 
@@ -303,54 +322,80 @@
   });
 }
 
-/* ===================== mind-map: OpenKB → documents → concepts (radial tree) ===================== */
-// concept/entity `sources` like "summaries/foo.md" → summary node id "summaries/foo"
+/* ===================== mind-map: OpenKB → documents → concepts (horizontal tree, DOM) ===================== */
+const mmEl = document.getElementById("mindmap");
+const mmCollapsed = new Set();   // node ids whose children are hidden
+let mmQuery = "";
 const mmResolveSrc = s => { const id = String(s).replace(/\.md$/i, ""); return (byId[id] && byId[id].id.startsWith("summaries/")) ? id : null; };
-function layoutMindmap(){
+const ROOT_W = 86, NODE_W = 184, COL = 234, ROW = 27, PADX = 34, PADY = 28, NH = 20;
+function buildMindmap(){
+  const q = mmQuery.toLowerCase();
+  const keep = n => !q || n.label.toLowerCase().includes(q) || n.id.toLowerCase().includes(q);
   const docs = nodes.filter(n => n.id.startsWith("summaries/") && typeVisible(n.type));
   const kidsOf = {}; docs.forEach(d => kidsOf[d.id] = []);
-  const rootDirect = [];                          // concepts with no resolvable document → hang off the centre
+  const rootDirect = [];
   nodes.forEach(n => {
-    if(n.id.startsWith("summaries/") || !typeVisible(n.type)){ n.show = false; return; }
+    if(n.id.startsWith("summaries/") || !typeVisible(n.type)) return;
     const p = (n.sources || []).map(mmResolveSrc).filter(Boolean)[0];   // primary document
     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; ROOT.tx = 0; ROOT.ty = 0;
-  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;
+  const mk = n => ({ id:n.id, label:n.label, type:n.type, kids:[] });
+  const root = { id:"__openkb__", label:"OpenKB", type:"__root__", kids:[] };
+  docs.forEach(d => {
+    const kids = kidsOf[d.id].filter(keep).map(mk);
+    if(q && !keep(d) && !kids.length) return;      // search prunes empty branches
+    const dn = mk(d); dn.kids = kids; root.kids.push(dn);
   });
-}
-function stepMindmap(){
-  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;
+  rootDirect.filter(keep).forEach(c => root.kids.push(mk(c)));
+
+  let rows = 0, maxDepth = 0;
+  const flat = [], links = [];
+  (function place(item, depth){
+    maxDepth = Math.max(maxDepth, depth);
+    item.x = PADX + depth * COL;
+    item.w = item.id === "__openkb__" ? ROOT_W : NODE_W;
+    const expanded = item.kids.length && !mmCollapsed.has(item.id);
+    if(expanded){
+      item.kids.forEach(k => place(k, depth + 1));
+      item.y = (item.kids[0].y + item.kids[item.kids.length - 1].y) / 2;
+      item.kids.forEach(k => links.push([item, k]));
+    } else {
+      item.y = PADY + rows * ROW; rows++;
+    }
+    flat.push(item);
+  })(root, 0);
+
+  const Wpx = PADX + (maxDepth + 1) * COL + 30, Hpx = PADY + rows * ROW + 30;
+  let svg = `<svg class="mm-links" width="${Wpx}" height="${Hpx}">`;
+  links.forEach(([p, c]) => {
+    const x1 = p.x + p.w, y1 = p.y + NH/2, x2 = c.x, y2 = c.y + NH/2, mx = (x1 + x2) / 2;
+    svg += `<path d="M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}" fill="none" stroke="rgba(255,255,255,.15)" stroke-width="1.3"/>`;
+  });
+  svg += `</svg>`;
+  let html = "";
+  flat.forEach(it => {
+    if(it.id === "__openkb__"){ html += `<div class="mm-node mm-root" style="left:${it.x}px;top:${it.y}px">OpenKB</div>`; return; }
+    const col = colorOf(it.type), kn = it.kids.length || (mmCollapsed.has(it.id) ? 1 : 0);
+    const hasKids = it.id.startsWith("summaries/") && (kidsOf[it.id] || []).length;
+    html += `<div class="mm-node" data-id="${esc(it.id)}" title="${esc(it.label)}" `
+      + `style="left:${it.x}px;top:${it.y}px;border-color:rgba(${col},.5);background:rgba(${col},.12)">`
+      + `<span class="mm-dot" style="background:rgb(${col})"></span><span class="mm-label">${esc(it.label)}</span>`
+      + (hasKids ? `<span class="mm-caret" data-tog="${esc(it.id)}">${mmCollapsed.has(it.id) ? "+" + (kidsOf[it.id] || []).length : "−"}</span>` : ``)
+      + `</div>`;
+  });
+  mmEl.innerHTML = `<div class="mm-canvas" style="width:${Wpx}px;height:${Hpx}px">${svg}${html}</div>`;
+  mmEl.querySelectorAll("[data-tog]").forEach(el => el.onclick = e => {
+    e.stopPropagation(); const id = el.dataset.tog;
+    if(mmCollapsed.has(id)) mmCollapsed.delete(id); else mmCollapsed.add(id);
+    buildMindmap();
+  });
+  mmEl.querySelectorAll(".mm-node[data-id]").forEach(el => el.onclick = () => { const m = byId[el.dataset.id]; if(m) openPanel(m); });
 }
 
 /* ===================== 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 === "mindmap"){ stepMindmap(); return; }
   for(let i=0;i<nodes.length;i++){
     const a = nodes[i];
     if(!visible(a)) continue;
@@ -484,20 +529,21 @@
 const MODE_LABEL = { mindmap: "mind-map", graph: "3D nebula", treemap: "treemap" };
 function setMode(m){
   mode = m;
-  const tm = (m === "treemap");
-  canvas.style.display = tm ? "none" : "block";
-  tmEl.style.display = tm ? "block" : "none";
-  spacingCtl.style.display = tm ? "none" : "flex";
+  const canvasMode = (m === "graph");          // only the 3D nebula uses the canvas; 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";
   hover = null; closePanel(); panX = 0; panY = 0; autoFit = true;
   if(m === "treemap"){ buildTreemap(); }
-  else if(m === "mindmap"){ yaw = 0; pitch = 0; scale = DEF_SCALE; layoutMindmap(); alpha = 1; }
+  else if(m === "mindmap"){ buildMindmap(); }
   else { yaw = DEF_YAW; pitch = DEF_PITCH; scale = DEF_SCALE; seed(); alpha = 1; }
   modeBtn.textContent = MODE_LABEL[m];
   updateHint();
 }
 function updateHint(){
   hintEl.innerHTML =
-    mode === "mindmap" ? 'centre <b>OpenKB</b> → documents → concepts &nbsp; faint lines = cross-refs &nbsp; <kbd>click</kbd> read &nbsp; <kbd>drag</kbd> pan &nbsp; <kbd>scroll</kbd> zoom'
+    mode === "mindmap" ? 'OpenKB → documents → concepts &nbsp; <kbd>+/−</kbd> expand a branch &nbsp; <kbd>click</kbd> read details'
     : 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';
@@ -580,37 +626,6 @@
   return best;
 }
 
-/* ===================== mind-map 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];
@@ -709,7 +724,7 @@
   }
   // (flat discs — no glossy core highlight)
   // label — declutter: hubs at rest; hovered node + neighbors; selection; zoomed in; near depth only
-  const showLabel = (mode === "mindmap" && n.depth <= 1) || (scale > 1.4) || (n.id === selected) || (hover ? hl > 0.55 : 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 = `rgba(238,242,247,${0.4 + 0.55*hl})`;
     ctx.font = `600 11px ui-monospace,monospace`;
@@ -723,23 +738,7 @@
 }
 
 function frame(t){
-  if(mode === "mindmap"){
-    if(alpha > 0.005) step();
-    project();                                          // flat (yaw=pitch=0)
-    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;         // gentle dim — keep the whole tree readable
-    }
-    ctx.setTransform(DPR,0,0,DPR,0,0); ctx.clearRect(0,0,W(),H());
-    edges.forEach(drawCrossEdge);                       // faint cross-references (+ hovered node's lit)
-    treeEdges.forEach(drawTreeEdge);                    // bright hierarchy
-    nodes.filter(visible).forEach(n => drawNode(n, t));
-    drawRoot();
-  } else if(mode === "graph"){          // treemap is DOM — the canvas idles
+  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
@@ -771,14 +770,9 @@
     alpha = Math.max(alpha, 0.5);   // reheat so neighbors re-settle around the dragged node
     return;
   }
-  if(orbiting){
-    if(mode === "mindmap"){                      // flat tree → 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));
-    }
+  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));
     didDrag = true; return;
   }
   const n = pick(e.offsetX, e.offsetY);
@@ -788,19 +782,13 @@
   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 === "mindmap"){                        // click a 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(mode === "mindmap"){
-    if(pendingInspect && !didDrag) openPanel(pendingInspect);
-  } else if(drag && !didDrag){ openPanel(drag); }                  // click (no drag) → 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; pendingInspect = null;
+  drag = null; orbiting = false;
   canvas.style.cursor = "grab";
 });
 canvas.addEventListener("dblclick", e => {
@@ -857,6 +845,7 @@
     row.classList.toggle("off");
     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
   };
   legend.appendChild(row);
@@ -866,6 +855,7 @@
 search.addEventListener("input", e => {
   const raw = e.target.value.trim();
   if(mode === "treemap"){ tmQuery = raw; buildTreemap(); return; }   // filter tiles
+  if(mode === "mindmap"){ mmQuery = raw; buildMindmap(); return; }   // filter branches
   const q = raw.toLowerCase();
   if(!q){ hover = null; return; }
   const m = nodes.find(n => n.label.toLowerCase().includes(q))
@@ -892,6 +882,8 @@
   hover = null; closePanel();
   if(mode === "treemap"){
     tmQuery = ""; search.value = ""; buildTreemap();
+  } else if(mode === "mindmap"){
+    mmQuery = ""; search.value = ""; mmCollapsed.clear(); collapseDocs(); buildMindmap(); mmEl.scrollTop = 0; mmEl.scrollLeft = 0;
   } else {
     spread = DEFAULT_SPREAD; spreadEl.value = String(DEFAULT_SPREAD); panX = 0; panY = 0;
     scale = DEF_SCALE; yaw = DEF_YAW; pitch = DEF_PITCH;
@@ -901,8 +893,9 @@
 });
 
 /* ===================== boot ===================== */
+function collapseDocs(){ nodes.forEach(n => { if(n.id.startsWith("summaries/")) mmCollapsed.add(n.id); }); }  // start compact: docs folded
 window.addEventListener("resize", () => { size(); autoFit = true; if(mode === "treemap") buildTreemap(); });
-size(); seed();
+size(); seed(); collapseDocs();
 setMode("mindmap");      // open on the OpenKB-rooted mind-map
 requestAnimationFrame(frame);
 </script>