Update index.html

index.html

@@ -57,7 +57,8 @@
     <span id="b-data" class="px-1.5 py-0.5 rounded bg-pink-900/60 text-pink-300 border border-pink-800/60">HOUSNG</span>
   </div>
   <div class="flex items-center gap-2 ml-1">
-    <span id="lat-lbl" class="text-[7px] text-slate-700">±0</span>
+    <!-- shared-vertex counter, hidden when 0 -->
+    <span id="shared-lbl" class="text-[7px] text-slate-700"></span>
     <span id="q-lbl"   class="text-[8px] text-slate-600">Q:0</span>
     <div   id="run-dot" class="w-2 h-2 rounded-full bg-slate-700"></div>
     <button onclick="openDrawer()" class="text-[10px] bg-blue-700 hover:bg-blue-600 px-2 py-1 rounded font-bold">⚙ DIALS</button>
@@ -137,11 +138,12 @@
     <div class="col-span-2 bg-slate-900 rounded p-3 border border-violet-900/50">
       <div class="text-violet-400 text-[9px] font-bold mb-1">
         CROSS-CONNECT
-        <span class="text-slate-600 font-normal ml-1">lateral springs between adjacent dimensions</span>
+        <span class="text-slate-600 font-normal ml-1">structural shared vertices</span>
       </div>
       <div class="text-[9px] text-slate-500 mb-2">
-        OFF → n independent parallel hourglasses<br>
-        ON  → genuine nD mesh: tension in dim 1 propagates into dim 2
+        OFF → n independent parallel hourglasses (default)<br>
+        ON  → boundary hidden nodes that visually overlap become one<br>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shared vertex with springs to both neighbouring dims
       </div>
       <button id="drawer-cross-btn" onclick="toggleCross()"
         class="w-full py-2 rounded text-xs font-bold border border-slate-700 bg-slate-800 text-slate-400">
@@ -254,44 +256,62 @@
 const cfg  = { mode: 'training', architecture: 'additive' };
 const topo = { inputs: 1, upper: 3, lower: 3 };
 let crossConnect = false;
+let nShared = 0;
 
 // ── CROSS CONNECT ─────────────────────────────────────────────────────────────
 async function toggleCross() {
   const res  = await fetch('/toggle_cross', { method: 'POST' });
   const data = await res.json();
   crossConnect = data.cross_connect;
+  nShared      = data.n_shared;
   updateCrossUI();
   meshPlotted = false;
 }
 
 function updateCrossUI() {
-  const btn1 = document.getElementById('b-cross');
-  const btn2 = document.getElementById('drawer-cross-btn');
-  const info = document.getElementById('cross-info');
+  const btn1  = document.getElementById('b-cross');
+  const btn2  = document.getElementById('drawer-cross-btn');
+  const info  = document.getElementById('cross-info');
+  const slbl  = document.getElementById('shared-lbl');
+  const n     = topo.inputs;
+  const u     = topo.upper;
+  const l     = topo.lower;
+  const ns    = nShared || (crossConnect && n >= 2
+    ? (n-1) * ((u >= 2 ? 1 : 0) + (l >= 2 ? 1 : 0))
+    : 0);
+
   if (crossConnect) {
     btn1.className = 'px-1.5 py-0.5 rounded border font-bold text-[8px] transition-all bg-violet-800 text-violet-200 border-violet-600';
     btn1.innerText = 'CROSS:ON';
     btn2.className = 'w-full py-2 rounded text-xs font-bold border border-violet-600 bg-violet-900 text-violet-200';
     btn2.innerText = 'CROSS-CONNECT: ON  (click to disable)';
-    const n = topo.inputs, u = topo.upper, l = topo.lower;
-    const lat = (n-1) * (u + l);
-    info.innerText = `${lat} lateral spring${lat!==1?'s':''} active — true ${n}D mesh`;
+    info.innerText  = ns
+      ? `${ns} shared vertex${ns !== 1 ? 'es' : ''} — boundary nodes merged`
+      : 'No merges (need D≥2 and U/L≥2)';
+    slbl.innerText  = ns ? `⊕${ns}` : '';
+    slbl.className  = 'text-[7px] text-violet-400';
   } else {
     btn1.className = 'px-1.5 py-0.5 rounded border font-bold text-[8px] transition-all bg-slate-900 text-slate-600 border-slate-700';
     btn1.innerText = 'CROSS:OFF';
     btn2.className = 'w-full py-2 rounded text-xs font-bold border border-slate-700 bg-slate-800 text-slate-400';
     btn2.innerText = 'CROSS-CONNECT: OFF  (click to enable)';
-    info.innerText = `${topo.inputs} independent parallel hourglasses`;
+    info.innerText  = `${n} independent parallel hourglass${n !== 1 ? 'es' : ''}`;
+    slbl.innerText  = '';
   }
 }
 
 // ── TOPOLOGY ──────────────────────────────────────────────────────────────────
 function updateSpringCount() {
   const { inputs: n, upper: u, lower: l } = topo;
-  const vert = n * (2*u + 2*l);
-  const lat  = crossConnect ? (n-1)*(u+l) : 0;
+  // With structural merge: each merge removes 2 springs and adds 2 (net=0),
+  // but removes 1 node.  Spring count stays the same; node count reduces.
+  const ns = crossConnect && n >= 2
+    ? (n-1) * ((u >= 2 ? 1 : 0) + (l >= 2 ? 1 : 0))
+    : 0;
+  const totalSprings = n * (2*u + 2*l);  // unchanged by merge
+  const totalNodes   = 3*n + n*u + n*l - ns;
   document.getElementById('spring-count').innerText =
-    `${vert} vertical + ${lat} lateral = ${vert+lat} springs`;
+    `${totalSprings} springs | ${totalNodes} nodes${ns ? ` (${ns} shared vertices)` : ''}`;
   document.getElementById('custom-dim-hint').innerText =
     n === 1 ? '(single value)' : `(${n} values, comma-separated)`;
   updateCrossUI();
@@ -454,23 +474,29 @@ function buildPos(layers, n_inputs, n_upper, n_lower) {
   const halfSp = COL_W * (n_inputs - 1) / 2;
   const bSprd  = n_inputs === 1 ? 3.8 : Math.min(COL_W * 0.55, 1.8);
 
+  // Build a flat lookup: nid → layer index (to get Y)
+  const layerOf = {};
+  layers.forEach((layer, li) => layer.forEach(nid => { layerOf[nid] = li; }));
+
   layers.forEach((layer, li) => {
     const y = Y[li];
     layer.forEach(nid => {
       const kind = nid[0];
-      let dim = 1;
+      // Parse dim and j from node ID
+      let dim = 1, j = 1, total = 1;
       if ('ABC'.includes(kind)) {
         dim = parseInt(nid.slice(1));
       } else {
-        dim = parseInt(nid.slice(1).split('_')[0]);
+        const parts = nid.slice(1).split('_');
+        dim   = parseInt(parts[0]);
+        j     = parseInt(parts[1]);
+        total = kind === 'U' ? n_upper : n_lower;
       }
       const cx = n_inputs === 1 ? 0 : -halfSp + (dim-1)*COL_W;
       if ('ABC'.includes(kind)) {
         pos[nid] = [cx, y];
       } else {
-        const j     = parseInt(nid.slice(1).split('_')[1]);
-        const total = kind === 'U' ? n_upper : n_lower;
-        const t     = total === 1 ? 0 : (2*(j-1)/(total-1) - 1);
+        const t  = total === 1 ? 0 : (2*(j-1)/(total-1) - 1);
         pos[nid] = [cx + bSprd * t, y];
       }
     });
@@ -494,42 +520,58 @@ function busShapes(pos, n_inputs) {
   return sh;
 }
 
-function springColor(k, isLateral) {
-  // Lateral springs shown in violet to distinguish from vertical
-  if (isLateral) {
-    const t = Math.min(Math.abs(k) / 6, 1);
-    return [`rgb(${Math.round(120+t*80)},50,${Math.round(180+t*75)})`, 0.8 + t*2.5];
-  }
+function springColor(k) {
   const t = Math.min(Math.abs(k) / 6, 1);
   if (k >= 0) return [`rgb(${Math.round(180+t*70)},${Math.round(100+t*80)},30)`, 1.0+t*3.5];
   return              [`rgb(30,${Math.round(80+t*100)},${Math.round(140+t*115)})`, 1.0+t*3.5];
 }
 
-function isLateralKey(key) {
-  // Lateral springs: both sides start with U or L, same kind
+// A spring is a "shared-vertex spring" if it crosses dimensions:
+// e.g. A2→U1_3 (dim2 input → dim1's canonical shared node).
+// We detect this by checking if the input side dim differs from the node's dim.
+function isSharedSpring(key) {
   const [u, v] = key.split('→');
-  return u && v && 'UL'.includes(u[0]) && u[0] === v[0];
+  if (!u || !v) return false;
+  const getDim = s => {
+    if ('ABC'.includes(s[0])) return parseInt(s.slice(1));
+    const p = s.slice(1).split('_'); return parseInt(p[0]);
+  };
+  try {
+    const du = getDim(u), dv = getDim(v);
+    return !isNaN(du) && !isNaN(dv) && du !== dv;
+  } catch { return false; }
 }
 
 function buildTraces(nodes, springs, layers, n_inputs, n_upper, n_lower) {
   const pos    = buildPos(layers, n_inputs, n_upper, n_lower);
   const traces = [];
 
-  // Edges — lateral springs drawn after vertical so they appear on top
-  const vertEdges = [], latEdges = [];
+  // Draw shared-vertex springs on top (after normal springs)
+  const normalEdges = [], sharedEdges = [];
   for (const [key, k] of Object.entries(springs)) {
     const [u, v] = key.split('→');
     if (!pos[u] || !pos[v]) continue;
-    (isLateralKey(key) ? latEdges : vertEdges).push([key, k, u, v]);
+    (isSharedSpring(key) ? sharedEdges : normalEdges).push([key, k, u, v]);
   }
 
-  for (const [key, k, u, v] of [...vertEdges, ...latEdges]) {
-    const lat = isLateralKey(key);
-    const [col, wd] = springColor(k, lat);
+  for (const [key, k, u, v] of normalEdges) {
+    const [col, wd] = springColor(k);
     traces.push({
       type:'scatter', mode:'lines',
       x:[pos[u][0], pos[v][0]], y:[pos[u][1], pos[v][1]],
-      line:{color:col, width:wd, dash: lat ? 'dot' : 'solid'},
+      line:{color:col, width:wd},
+      hoverinfo:'none', showlegend:false
+    });
+  }
+
+  // Shared-vertex springs drawn in violet with slight dash to distinguish
+  for (const [key, k, u, v] of sharedEdges) {
+    const t   = Math.min(Math.abs(k) / 6, 1);
+    const col = `rgb(${Math.round(160+t*60)},80,${Math.round(200+t*55)})`;
+    traces.push({
+      type:'scatter', mode:'lines',
+      x:[pos[u][0], pos[v][0]], y:[pos[u][1], pos[v][1]],
+      line:{color:col, width:1.8+t*2, dash:'dot'},
       hoverinfo:'none', showlegend:false
     });
   }
@@ -543,6 +585,16 @@ function buildTraces(nodes, springs, layers, n_inputs, n_upper, n_lower) {
   };
   const isIO = id => 'ABC'.includes(id[0]);
 
+  // Mark shared vertices (appear in springs from multiple dims)
+  const sharedNodes = new Set();
+  for (const key of Object.keys(springs)) {
+    if (isSharedSpring(key)) {
+      const [u, v] = key.split('→');
+      if ('UL'.includes((u||'')[0])) sharedNodes.add(u);
+      if ('UL'.includes((v||'')[0])) sharedNodes.add(v);
+    }
+  }
+
   traces.push({
     type:'scatter', mode:'markers+text',
     x: allN.map(id => pos[id]?.[0] ?? 0),
@@ -556,13 +608,17 @@ function buildTraces(nodes, springs, layers, n_inputs, n_upper, n_lower) {
     marker:{
       size: allN.map(id => {
         const v = Math.abs(nodes[id]?.vel ?? 0);
-        return (isIO(id) ? 18 : 10) + Math.min(v*30, 8);
+        const base = isIO(id) ? 18 : (sharedNodes.has(id) ? 14 : 10);
+        return base + Math.min(v*30, 8);
       }),
-      color:   allN.map(id => NCOL(id)),
+      color: allN.map(id => sharedNodes.has(id) ? '#a78bfa' : NCOL(id)),
       opacity: allN.map(id => 0.75 + Math.min(Math.abs(nodes[id]?.vel??0)*1.8, 0.25)),
       line:{
-        width:2.5,
-        color: allN.map(id => nodes[id]?.anchored ? '#ef4444' : '#22c55e')
+        width: allN.map(id => sharedNodes.has(id) ? 3.5 : 2.5),
+        color: allN.map(id =>
+          sharedNodes.has(id) ? '#7c3aed'
+          : nodes[id]?.anchored ? '#ef4444' : '#22c55e'
+        )
       }
     },
     hoverinfo:'none', showlegend:false
@@ -602,8 +658,8 @@ setInterval(async () => {
 
     syncTopoUI(d.n_inputs, d.n_upper, d.n_lower);
     crossConnect = d.cross_connect;
+    nShared      = d.n_shared || 0;
     updateCrossUI();
-    document.getElementById('lat-lbl').innerText  = `±${d.n_lateral}`;
     document.getElementById('b-alpha').innerText  = `α:${d.back_alpha.toFixed(2)}`;
     document.getElementById('b-data').innerText   = (d.dataset_type||'').slice(0,6).toUpperCase();
 
@@ -648,14 +704,15 @@ setInterval(async () => {
     }
     document.getElementById('pane-nodes').innerHTML = nh;
 
-    // Springs pane — lateral springs shown with violet marker
+    // Springs pane — shared-vertex springs shown with violet marker
     let sh = '';
     for (const [key, k] of Object.entries(d.springs)) {
-      const lat = isLateralKey(key);
-      const kc  = lat ? 'text-violet-300' : (k < 0 ? 'text-blue-300' : k > 4 ? 'text-yellow-200' : 'text-purple-300');
-      const pfx = lat ? '<span class="text-violet-600 mr-1">↔</span>' : '';
+      const shared = isSharedSpring(key);
+      const kc  = shared ? 'text-violet-300'
+                         : (k < 0 ? 'text-blue-300' : k > 4 ? 'text-yellow-200' : 'text-purple-300');
+      const pfx = shared ? '<span class="text-violet-500 mr-1">⊕</span>' : '';
       sh += `<div class="flex justify-between py-0.5 border-b border-slate-900">
-        ${pfx}<span class="text-slate-500 text-[9px]">${key}</span>
+        <span>${pfx}<span class="text-slate-500 text-[9px]">${key}</span></span>
         <span class="${kc} font-bold text-[10px]">${k.toFixed(4)}</span></div>`;
     }
     document.getElementById('pane-springs').innerHTML = sh;