feat(visualize): drop treemap, default to 3D nebula

Per request: remove the treemap view (squarify, buildTreemap, its CSS/DOM,
and all its branches) and make the 3D nebula the default. Tab bar is now
[mind-map · radial · 3D].

Author: KylinMountain

openkb/templates/graph.html

@@ -131,8 +131,6 @@
 .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}
 /* ---- 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}
@@ -157,22 +155,6 @@
 .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;
-  font:600 .62rem/21px var(--mono);letter-spacing:.04em;color:var(--soft);
-  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
-  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07);
-}
-.treemap .tm-h:hover{color:var(--ink);background:rgba(255,255,255,.08)}
-.treemap .tm-t{
-  position:absolute;border:1px solid;border-radius:5px;cursor:pointer;overflow:hidden;
-  display:flex;align-items:center;justify-content:center;text-align:center;
-  transition:filter .12s ease,transform .12s ease;
-}
-.treemap .tm-t:hover{filter:brightness(1.5);z-index:2}
-.treemap .tm-t span{font:.66rem/1.15 var(--mono);padding:2px 4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
-.treemap .tm-empty{position:absolute;left:30px;top:30px;color:var(--mut);font:.8rem var(--mono)}
 
 /* ---- glass inspector panel ---- */
 .panel{
@@ -224,7 +206,6 @@
 <div class="grain"></div>
 <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>
@@ -242,7 +223,7 @@
 
 <div class="controls">
   <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>
+    <button data-m="mindmap">mind-map</button><button data-m="radial">radial</button><button data-m="graph">3D</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>
@@ -312,7 +293,7 @@
 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
+let mode = "graph";              // "graph" = 3D nebula (default) · "mindmap" = horizontal tree · "radial" = OpenKB-centred circle
 let idleFrames = 0;              // frames since last interaction → drives idle auto-rotation
 let autoFit = true;              // keep gently framing the cloud until the user takes control
 
@@ -490,108 +471,16 @@
   alpha += (0 - alpha) * 0.02;                    // anneal: forces fade → the layout settles and stops
 }
 
-/* ===================== provenance tree (document → summary → concept/entity) ===================== */
-// The wiki's real hierarchy lives in the frontmatter: each summary's `sources` is its origin
-// document (full_text), and each concept/entity's `sources` are the summaries it was drawn from.
-// Treemap: documents as blocks (area ∝ their concepts' total connectivity), concepts tiled inside
-// (tile area ∝ connectivity), coloured by type. An at-a-glance infographic; click a tile to read it.
-const tmEl = document.getElementById("treemap");
 const spacingCtl = document.getElementById("spacingCtl");
-let tmQuery = "";
-const tmResolveSrc = s => {                 // "summaries/foo.md" → summary node id "summaries/foo"
-  const id = String(s).replace(/\.md$/i, "");
-  return (byId[id] && byId[id].id.startsWith("summaries/")) ? id : null;
-};
-const tmWeight = n => 1 + (n.in || 0) + (n.out || 0);   // bigger = more connected
-
-// Squarified treemap (Bruls et al.): pack weighted items into a rect with near-square tiles.
-function squarify(items, x, y, w, h){
-  const out = [];
-  const ns = items.filter(it => it.w > 0).map(it => ({ it, area: 0 }));
-  if(!ns.length || w <= 0 || h <= 0) return out;
-  const total = ns.reduce((s, n) => s + n.it.w, 0);
-  const k = (w * h) / total;
-  ns.forEach(n => n.area = n.it.w * k);
-  ns.sort((a, b) => b.area - a.area);
-  const rect = { x, y, w, h };
-  let row = [];
-  const worst = (rw, len) => {
-    if(!rw.length) return Infinity;
-    const sum = rw.reduce((s, n) => s + n.area, 0);
-    const mx = Math.max(...rw.map(n => n.area)), mn = Math.min(...rw.map(n => n.area));
-    return Math.max((len * len * mx) / (sum * sum), (sum * sum) / (len * len * mn));
-  };
-  const flush = () => {
-    const sum = row.reduce((s, n) => s + n.area, 0);
-    if(rect.w >= rect.h){
-      const cw = sum / rect.h; let yy = rect.y;
-      row.forEach(n => { const hh = n.area / cw; out.push({ ...n.it, X: rect.x, Y: yy, W: cw, H: hh }); yy += hh; });
-      rect.x += cw; rect.w -= cw;
-    } else {
-      const rh = sum / rect.w; let xx = rect.x;
-      row.forEach(n => { const ww = n.area / rh; out.push({ ...n.it, X: xx, Y: rect.y, W: ww, H: rh }); xx += ww; });
-      rect.y += rh; rect.h -= rh;
-    }
-    row = [];
-  };
-  ns.forEach(n => {
-    const len = Math.min(rect.w, rect.h);
-    if(row.length && worst([...row, n], len) > worst(row, len)) flush();
-    row.push(n);
-  });
-  if(row.length) flush();
-  return out;
-}
-
-function buildTreemap(){
-  const q = tmQuery.toLowerCase();
-  const childrenOf = {}, sums = [];
-  nodes.forEach(n => { if(n.id.startsWith("summaries/")){ childrenOf[n.id] = []; sums.push(n); } });
-  nodes.forEach(n => {
-    if(n.id.startsWith("summaries/") || !typeVisible(n.type)) return;
-    [...new Set((n.sources || []).map(tmResolveSrc).filter(Boolean))]
-      .forEach(p => { if(childrenOf[p]) childrenOf[p].push(n); });
-  });
-  const docItems = sums.filter(s => typeVisible(s.type)).map(s => {
-    const kids = childrenOf[s.id].filter(c => !q || c.label.toLowerCase().includes(q));
-    return { id: s.id, label: s.label, kids, w: kids.reduce((a, c) => a + tmWeight(c), 0) };
-  }).filter(d => d.w > 0);
-
-  const W = tmEl.clientWidth, H = tmEl.clientHeight, PAD = 4, HEAD = 21;
-  let html = "";
-  squarify(docItems, 0, 0, W, H).forEach(d => {
-    html += `<div class="tm-doc" style="left:${d.X}px;top:${d.Y}px;width:${d.W}px;height:${d.H}px">`
-      + `<div class="tm-h" data-id="${esc(d.id)}" title="${esc(d.label)}">${esc(d.label)}</div>`;
-    // tiles are children of the doc div → use coords RELATIVE to it (origin = PAD, HEAD)
-    const iw = d.W - 2 * PAD, ih = d.H - HEAD - PAD;
-    if(iw > 6 && ih > 6){
-      squarify(d.kids.map(c => ({ id: c.id, label: c.label, type: c.type, w: tmWeight(c) })), PAD, HEAD, iw, ih)
-        .forEach(t => {
-          const col = colorOf(t.type), txt = t.W > 38 && t.H > 17;
-          html += `<div class="tm-t" data-id="${esc(t.id)}" title="${esc(t.label)}" `
-            + `style="left:${t.X}px;top:${t.Y}px;width:${Math.max(0, t.W - 2)}px;height:${Math.max(0, t.H - 2)}px;`
-            + `background:rgba(${col},.2);border-color:rgba(${col},.5)">`
-            + (txt ? `<span style="color:rgb(${col})">${esc(t.label)}</span>` : ``) + `</div>`;
-        });
-    }
-    html += `</div>`;
-  });
-  tmEl.innerHTML = html || '<div class="tm-empty">Nothing to show.</div>';
-  tmEl.querySelectorAll("[data-id]").forEach(el => el.onclick = () => {
-    const m = byId[el.dataset.id]; if(m) openPanel(m);
-  });
-}
-const MODE_LABEL = { mindmap: "mind-map", radial: "radial", graph: "3D", treemap: "treemap" };
+const MODE_LABEL = { mindmap: "mind-map", radial: "radial", graph: "3D" };
 function setMode(m){
   mode = m;
-  const canvasMode = (m === "graph" || m === "radial");   // canvas: 3D nebula + radial. mind-map & treemap are DOM
+  const canvasMode = (m === "graph" || m === "radial");   // canvas: 3D nebula + radial. mind-map is DOM
   canvas.style.display = canvasMode ? "block" : "none";
-  tmEl.style.display = (m === "treemap") ? "block" : "none";
   mmEl.style.display = (m === "mindmap") ? "block" : "none";
-  spacingCtl.style.display = (m === "treemap" || m === "mindmap") ? "none" : "flex";
+  spacingCtl.style.display = (m === "mindmap") ? "none" : "flex";
   hover = null; closePanel(); panX = 0; panY = 0; autoFit = true;
-  if(m === "treemap"){ buildTreemap(); }
-  else if(m === "mindmap"){ buildMindmap(); }
+  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; }
   [...modeTabs.children].forEach(b => b.classList.toggle("on", b.dataset.m === m));
@@ -601,7 +490,6 @@
   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';
 }
@@ -842,7 +730,7 @@
     treeEdges.forEach(drawTreeEdge);
     nodes.filter(visible).forEach(n => drawNode(n, t));
     drawRoot();
-  } else if(mode === "graph"){          // mind-map & treemap are DOM — the canvas idles
+  } else if(mode === "graph"){          // mind-map is DOM — the canvas idles in that mode
     if(alpha > 0.005) step();
     project();
     if(autoFit && !orbiting && !drag){ fitStep(); }   // smoothly keep the cloud framed to the viewport
@@ -959,8 +847,7 @@
   row.onclick = () => {
     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();
+    if(mode === "mindmap") buildMindmap();      // rebuild without the hidden type
     else { if(mode === "radial") layoutRadial(); alpha = Math.max(alpha, 0.4); }   // reheat / re-fan
   };
   legend.appendChild(row);
@@ -969,7 +856,6 @@
 /* ===================== search ===================== */
 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; }
@@ -995,9 +881,7 @@
 });
 document.getElementById("reset").addEventListener("click", () => {
   hover = null; closePanel();
-  if(mode === "treemap"){
-    tmQuery = ""; search.value = ""; buildTreemap();
-  } else if(mode === "mindmap"){
+  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;
@@ -1013,9 +897,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(); });
+window.addEventListener("resize", () => { size(); autoFit = true; if(mode === "mindmap") buildMindmap(); });
 size(); seed(); collapseDocs();
-setMode("mindmap");      // open on the OpenKB-rooted mind-map
+setMode("graph");        // open on the 3D nebula
 requestAnimationFrame(frame);
 </script>
 </body>