holonomy-lib 0.8.0__py3-none-any.whl

holonomy_explorer/static/charts.js

@@ -0,0 +1,114 @@
+import {VIEW, fmt, node, color} from './view.js';
+
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'; // W3C SVG namespace, not a network request.
+const CHART = Object.freeze({tickCount: 4, pointRadius: 3, arrowSize: 4, labelBaseline: 14});
+function svgNode(tag, attributes = {}, text = null) {
+  const element = document.createElementNS(SVG_NAMESPACE, tag);
+  for (const [key,value] of Object.entries(attributes)) element.setAttribute(key, value);
+  if (text != null) element.textContent = text;
+  return element;
+}
+function chart(title, height = VIEW.chartHeight, width = VIEW.chartWidth) {
+  const wrapper = node('div', null, {class:'chart'});
+  const svg = svgNode('svg', {viewBox:`0 0 ${width} ${height}`, role:'img', 'aria-label':title});
+  wrapper.append(node('h2',title),svg); return [wrapper,svg];
+}
+function line(svg,x1,y1,x2,y2,cls = 'axis') { svg.append(svgNode('line',{x1,y1,x2,y2,class:cls})); }
+function text(svg,x,y,value,anchor = 'middle') { svg.append(svgNode('text',{x,y,'text-anchor':anchor},value)); }
+function axis(svg, xmax, ymax, height = VIEW.chartHeight, w = VIEW.chartWidth, p = VIEW.chartPadding) {
+  const x = value => p+value/xmax*(w-2*p), y = value => height-p-value/ymax*(height-2*p);
+  line(svg,p,p,p,height-p); line(svg,p,height-p,w-p,height-p);
+  for (let i=0;i<=CHART.tickCount;i++) {
+    const xv = xmax*i/CHART.tickCount, yv = ymax*i/CHART.tickCount;
+    text(svg,x(xv),height-p+CHART.labelBaseline,fmt(xv)); text(svg,p-6,y(yv)+3,fmt(yv),'end');
+  }
+  return [x,y];
+}
+export function spectrumChart(data) {
+  const [wrapper,svg] = chart(`Normalized Laplacian spectrum · λ₂ = ${fmt(data.spectral_gap)}`, VIEW.chartHeight/2);
+  const p = VIEW.chartPadding, width = VIEW.chartWidth-2*p, y = VIEW.chartHeight/4;
+  const max = Math.max(2,...data.spectrum);
+  line(svg,p,y,p+width,y);
+  data.spectrum.forEach(value => {
+    const x = p+value/max*width;
+    line(svg,x,y-10,x,y+10,'plot-line');
+  });
+  [0,1,2].forEach(value => text(svg,p+value/max*width,y+28,String(value)));
+  return wrapper;
+}
+export function topologyCharts(data, epsilon) {
+  const result = document.createDocumentFragment();
+  const flattened = data.bars.flatMap((bars,dim) => bars.map(bar => ({bar,dim})));
+  // At a tied birth, longer intervals come first. Infinite bars sort before
+  // finite ones without subtracting Infinity from Infinity in the comparator.
+  flattened.sort((left,right)=>{
+    const birth=left.bar[0]-right.bar[0];
+    if(birth) return birth;
+    const leftDeath=left.bar[1]??Infinity, rightDeath=right.bar[1]??Infinity;
+    if(leftDeath!==rightDeath) return leftDeath>rightDeath?-1:1;
+    return left.dim-right.dim;
+  });
+  const p=VIEW.barcodePadding, height=Math.max(1,flattened.length)*VIEW.barcodeRow+2*p;
+  // Match plot coordinates to CSS pixels. A wide viewport must not multiply the
+  // row heights and push the persistence diagram several screens downward.
+  const width=Math.max(VIEW.chartWidth,document.getElementById('charts').clientWidth-2*VIEW.chartInset);
+  const [barcode,svg] = chart(`Persistence barcode · ${flattened.length} intervals · birth, then longest first · → ∞`,height,width);
+  const scroll=node('div',null,{class:'barcode-scroll',tabindex:'0','aria-label':'Persistence barcode; scroll for additional intervals'});
+  svg.setAttribute('height',height); scroll.append(svg); barcode.append(scroll);
+  const max = data.events.at(-1) || 1;
+  const x = value => p+value/max*(width-2*p);
+  const row = VIEW.barcodeRow;
+  flattened.forEach(({bar:[birth,death],dim},index) => {
+    const y = p+(index+0.5)*row;
+    const active = birth <= epsilon && (death == null || epsilon < death);
+    line(svg,x(birth),y,x(death ?? max),y,`bar ${dim ? 'h1' : ''} ${active ? 'active' : ''}`);
+    if (death == null) {
+      const tip = x(max), a = CHART.arrowSize;
+      svg.append(svgNode('path',{d:`M${tip-a},${y-a} L${tip},${y} L${tip-a},${y+a}`,fill:'none',class:`bar ${dim?'h1':''} ${active?'active':''}`}));
+    }
+  });
+  line(svg,x(epsilon),p,x(epsilon),height-p,'plot-line');
+  [0,max/2,max].forEach(value => text(svg,x(value),height-p+CHART.labelBaseline,fmt(value)));
+  const [diagram,plot] = chart('Persistence diagram · x: birth ε · y: death ε · top row: ∞',VIEW.diagramHeight,width);
+  plot.setAttribute('height',VIEW.diagramHeight);
+  const [px,py] = axis(plot,max,max,VIEW.diagramHeight,width,p);
+  line(plot,px(0),py(0),px(max),py(max));
+  flattened.forEach(({bar:[birth,death],dim}) => {
+    const y = death == null ? p/2 : py(death);
+    plot.append(svgNode('circle',{cx:px(birth),cy:y,r:CHART.pointRadius,class:dim?'h1-point':'point'}));
+  });
+  text(plot,width-p,p/2-5,'∞');
+  result.append(barcode,diagram); return result;
+}
+function logChart(rows, perItem) {
+  const [wrapper,svg] = chart(`${perItem ? 'Time per item' : 'Time per batch'} (ms) · log axes · min / median / max`);
+  const p = VIEW.chartPadding, width = VIEW.chartWidth, height = VIEW.chartHeight;
+  const lower = row => perItem ? row.per_item_min_ms : row.min_ms;
+  const middle = row => perItem ? row.per_item_ms : row.median_ms;
+  const upper = row => perItem ? row.per_item_max_ms : row.max_ms;
+  const xs = [...new Set(rows.map(row => row.batch))].sort((a,b)=>a-b);
+  let ymin = Math.log10(Math.min(...rows.map(lower))), ymax = Math.log10(Math.max(...rows.map(upper)));
+  if (ymin === ymax) { ymin -= 0.5; ymax += 0.5; }
+  const xmin = Math.log10(xs[0]), xmax = Math.log10(xs.at(-1));
+  const x = value => p+(Math.log10(value)-xmin)/(xmax-xmin || 1)*(width-2*p);
+  const y = value => height-p-(Math.log10(value)-ymin)/(ymax-ymin)*(height-2*p);
+  line(svg,p,p,p,height-p); line(svg,p,height-p,width-p,height-p);
+  xs.forEach(value => text(svg,x(value),height-p+CHART.labelBaseline,String(value)));
+  for(let i=0;i<=CHART.tickCount;i++) {
+    const value = 10**(ymin+(ymax-ymin)*i/CHART.tickCount);
+    text(svg,p-5,y(value)+3,Number(value.toPrecision(2)).toString(),'end');
+  }
+  for (const device of new Set(rows.map(row => row.device))) {
+    const series = rows.filter(row=>row.device===device), cls = device==='cpu'?'plot-line':'plot-line secondary';
+    svg.append(svgNode('polyline',{points:series.map(row=>`${x(row.batch)},${y(middle(row))}`).join(' '),class:cls}));
+    series.forEach(row => {
+      const cx = x(row.batch); line(svg,cx,y(lower(row)),cx,y(upper(row)),cls);
+      svg.append(svgNode('circle',{cx,cy:y(middle(row)),r:CHART.pointRadius,fill:color(device==='cpu'?'accent':'positive')}));
+    });
+  }
+  text(svg,width/2,height-4,'Batch size B'); return wrapper;
+}
+export function batchCharts(data) {
+  const fragment = document.createDocumentFragment();
+  fragment.append(logChart(data.rows,false),logChart(data.rows,true)); return fragment;
+}

holonomy_explorer/static/index.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
+  <title>Holonomy · Explorer</title>
+  <link rel="stylesheet" href="/static/style.css">
+  <script type="module" src="/static/app.js"></script>
+</head>
+<body>
+  <aside class="sidebar">
+    <header class="brand"><span class="mark" aria-hidden="true">h</span><div>holonomy<span>LOCAL EXPLORER</span></div></header>
+    <nav aria-label="Scenes" id="scenes">
+      <button data-scene="graphs" aria-current="page"><span>01</span>Graphs</button>
+      <button data-scene="curvature"><span>02</span>Curvature</button>
+      <button data-scene="topology"><span>03</span>Topology</button>
+      <button data-scene="batching"><span>04</span>Batching</button>
+    </nav>
+    <form id="controls" aria-label="Scene controls"></form>
+    <div class="compute-settings">
+      <label>Device<select id="device" aria-label="Compute device"><option value="cpu">CPU</option></select></label>
+      <label>Precision<select id="dtype" aria-label="Tensor precision"><option>float64</option><option>float32</option></select></label>
+    </div>
+    <p class="sidebar-note">PyTorch computation.<br>Offline, in this Python environment.</p>
+  </aside>
+  <main>
+    <header class="scene-header"><div><p class="eyebrow">LIBRARY WORKBENCH</p><h1 id="title">Graphs</h1><p id="description"></p></div><span class="live-label"><i></i>LOCAL</span></header>
+    <div id="error" role="alert" hidden></div>
+    <div id="warnings" aria-live="polite"></div>
+    <div class="workspace">
+      <section class="visual-panel" aria-label="Visualization">
+        <div class="visual-toolbar"><span id="view-label">Spectral embedding</span><span id="hint"></span></div>
+        <div class="canvas-wrap"><canvas id="canvas" tabindex="0" aria-label="Interactive scene. Controls also support coordinate entry."></canvas><div id="empty">Connecting to the local library…</div></div>
+        <div id="legend" class="legend"></div>
+        <div id="playback" hidden></div>
+        <div id="charts" class="charts"></div>
+      </section>
+      <aside class="details" aria-label="Computed values"><p class="eyebrow">COMPUTED VALUES</p><div id="details"></div></aside>
+    </div>
+    <section id="data-table" class="data-table" hidden></section>
+  </main>
+  <footer><span id="status-device">CPU · float64</span><span id="status-state" role="status">Starting…</span><span id="status-time">Library call: —</span></footer>
+</body>
+</html>

holonomy_explorer/static/layout.js

@@ -0,0 +1,85 @@
+// Presentation only. Fruchterman and Reingold (1991), Graph Drawing by
+// Force-directed Placement: repulsion k²/d, attraction d²/k, linear cooling.
+// The unit-area layout starts at the spectral coordinates. The small index-based
+// offset separates coincident eigenvector coordinates without a random seed.
+export const RELAXATION = Object.freeze({
+  iterations: 180, initialTemperature: 0.08, separationFraction: 0.01,
+});
+
+export function relaxLayout(coordinates, edges) {
+  const count = coordinates.length;
+  if (count < 2) return coordinates.map(point => [...point]);
+  const center = [0, 1].map(axis => coordinates.reduce((sum, point) => sum+point[axis], 0)/count);
+  const span = Math.max(...[0, 1].map(axis =>
+    Math.max(...coordinates.map(point => point[axis]))-Math.min(...coordinates.map(point => point[axis])))) || 1;
+  const ideal = Math.sqrt(1/count), separation = ideal*RELAXATION.separationFraction;
+  const goldenAngle = Math.PI*(3-Math.sqrt(5));
+  const points = coordinates.map((point,index) => [
+    (point[0]-center[0])/span + separation*Math.cos(index*goldenAngle),
+    (point[1]-center[1])/span + separation*Math.sin(index*goldenAngle),
+  ]);
+  for (let iteration=0; iteration<RELAXATION.iterations; iteration++) {
+    const forces = points.map(() => [0, 0]);
+    for (let left=0; left<count; left++) {
+      for (let right=left+1; right<count; right++) {
+        let dx = points[left][0]-points[right][0], dy = points[left][1]-points[right][1];
+        if (dx===0 && dy===0) { dx=separation*Math.cos(right*goldenAngle); dy=separation*Math.sin(right*goldenAngle); }
+        const distanceSquared = Math.max(dx*dx+dy*dy, separation*separation);
+        const strength = ideal*ideal/distanceSquared;
+        forces[left][0] += dx*strength; forces[left][1] += dy*strength;
+        forces[right][0] -= dx*strength; forces[right][1] -= dy*strength;
+      }
+    }
+    for (const [left,right] of edges) {
+      const dx = points[left][0]-points[right][0], dy = points[left][1]-points[right][1];
+      const strength = Math.hypot(dx,dy)/ideal;
+      forces[left][0] -= dx*strength; forces[left][1] -= dy*strength;
+      forces[right][0] += dx*strength; forces[right][1] += dy*strength;
+    }
+    const temperature = RELAXATION.initialTemperature*(1-iteration/RELAXATION.iterations);
+    points.forEach((point,index) => {
+      const [dx,dy] = forces[index], length = Math.hypot(dx,dy);
+      const step = length ? Math.min(length,temperature)/length : 0;
+      // Keep the unit area used by k fixed. An outlying leaf should not stretch
+      // the viewport and compress the denser part of the graph into a small fan.
+      point[0] = Math.max(-0.5,Math.min(0.5,point[0]+dx*step));
+      point[1] = Math.max(-0.5,Math.min(0.5,point[1]+dy*step));
+    });
+  }
+  return points;
+}
+
+// Screen-space budgets for labels, not parameters of the graph computation.
+export const LABELS = Object.freeze({padding: 2, gap: 4, height: 12, rings: 3});
+const intersects = (a,b) => a.x<b.x+b.width && a.x+a.width>b.x && a.y<b.y+b.height && a.y+a.height>b.y;
+
+export function placeLabels(points, measure, width, height, radius, priority) {
+  const required = [...new Set(priority.filter(index => index!=null && points[index]))];
+  const order = [...required,...points.map((_,index)=>index).filter(index=>!required.includes(index))];
+  const occupied = [], placed = [];
+  const nodes = points.map(([x,y])=>({x:x-radius,y:y-radius,width:2*radius,height:2*radius}));
+  for (const index of order) {
+    const [x,y] = points[index], text = String(index);
+    const boxWidth = measure(text)+2*LABELS.padding, boxHeight = LABELS.height+2*LABELS.padding;
+    const candidates = [];
+    for (let ring=1; ring<=LABELS.rings; ring++) {
+      const offset = radius+LABELS.gap+(ring-1)*boxHeight;
+      candidates.push(
+        [x+offset,y-boxHeight/2], [x-offset-boxWidth,y-boxHeight/2],
+        [x-boxWidth/2,y-offset-boxHeight], [x-boxWidth/2,y+offset],
+      );
+    }
+    // Required labels can use the top margin with a leader line when a dense
+    // spectral cluster has no local opening. Reserve them before other labels.
+    if (required.includes(index)) {
+      for (let left=LABELS.gap; left+boxWidth<width; left+=boxWidth+LABELS.gap)
+        candidates.push([left,LABELS.gap]);
+    }
+    const candidate = candidates.map(([x,y])=>({x,y,width:boxWidth,height:boxHeight})).find(box=>
+      box.x>=0 && box.y>=0 && box.x+box.width<=width && box.y+box.height<=height &&
+      !occupied.some(other=>intersects(box,other)) && !nodes.some(other=>intersects(box,other)));
+    if (!candidate) continue;
+    occupied.push(candidate); placed.push({index,text,...candidate});
+  }
+  return placed;
+}

holonomy_explorer/static/style.css

@@ -0,0 +1,121 @@
+:root {
+  color-scheme: light dark;
+  --bg: #f4f5f2; --surface: #ffffff; --ink: #232c2a; --muted: #6c7874;
+  --border: #dce1dc; --accent: #277767; --accent-soft: #e7f1ed;
+  --negative: #b66e43; --positive: #347b91; --neutral: #a5b4ac;
+  --h1: #365ad7;
+  --warning: #8d5e25; --warning-bg: #faf2e2; --error: #a84439;
+  --grid: #e0e6e0; --edge: #b4c1ba; --node: #648a7c; --triangle: #277767;
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
+  --space-5: 24px; --space-6: 32px; --radius: 7px;
+  --status-height: 34px; --main-padding: 32px; --header-height: 110px;
+  --barcode-max-height: 240px;
+  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #171d1b; --surface: #202825; --ink: #e1e8e3; --muted: #a0afa6;
+    --border: #35423b; --accent: #83c4ad; --accent-soft: #293f35;
+    --negative: #db9b73; --positive: #7cb5ce; --neutral: #657a6c;
+    --h1: #91adff;
+    --warning: #dfb981; --warning-bg: #383024; --error: #e59688;
+    --grid: #303c35; --edge: #65786c; --node: #8bbb9f; --triangle: #83c4ad;
+  }
+}
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--ink); display: grid; grid-template-columns: 246px minmax(0,1fr); grid-template-rows: minmax(0,1fr); min-width: 920px; height: 100vh; height: 100dvh; padding-bottom: var(--status-height); overflow: hidden; }
+button, input, select, textarea { font: inherit; color: inherit; }
+button, select { cursor: pointer; }
+button, input, select, textarea { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 7px 9px; }
+button:hover, select:hover { border-color: var(--accent); }
+button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+button:disabled { cursor: wait; opacity: .65; }
+button.primary { color: var(--surface); background: var(--accent); border-color: var(--accent); width: 100%; font-weight: 600; min-height: 38px; }
+.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: var(--space-5) var(--space-4); min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
+.brand { display: flex; align-items: center; gap: var(--space-3); font-size: 23px; font-weight: 600; letter-spacing: -.6px; padding: 4px 8px 28px; }
+.brand span:not(.mark) { display: block; font-size: 9px; font-weight: 500; letter-spacing: 1.8px; color: var(--muted); }
+.mark { border: 1px solid var(--accent); color: var(--accent); border-radius: 50%; font: italic 30px Georgia, serif; width: 37px; height: 37px; text-align: center; line-height: 34px; }
+nav { display: grid; gap: var(--space-1); border-bottom: 1px solid var(--border); padding-bottom: var(--space-4); margin-bottom: var(--space-5); }
+nav button { text-align: left; border-color: transparent; padding: 9px 12px; background: transparent; }
+nav button span { font-size: 11px; color: var(--muted); margin-right: 12px; font-variant-numeric: tabular-nums; }
+nav button[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+label { display: grid; gap: var(--space-1); color: var(--muted); font-size: 12px; }
+label input, label select, textarea { width: 100%; color: var(--ink); font-size: 13px; min-width: 0; }
+textarea { min-height: 110px; resize: vertical; font-family: ui-monospace, monospace; }
+#controls { display: grid; gap: var(--space-3); }
+.control-grid, .compute-settings { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
+.compute-settings { border-top: 1px solid var(--border); margin-top: var(--space-5); padding-top: var(--space-4); }
+.help, .sidebar-note { color: var(--muted); font-size: 11px; margin: 0; }
+.sidebar-note { padding-top: var(--space-3); }
+.button-row { display: flex; gap: var(--space-2); }
+.button-row button { flex: 1; font-size: 12px; }
+.range-label { display: flex; justify-content: space-between; }
+input[type=range] { accent-color: var(--accent); padding: 0; height: 24px; border: none; }
+.busy-note { display: block; font-size: 11px; height: 36px; text-align: center; color: var(--muted); }
+main { padding: var(--main-padding); min-width: 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
+.scene-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: var(--space-5); min-height: var(--header-height); }
+.eyebrow { font-size: 10px; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
+h1 { margin: 0; font-size: 29px; line-height: 1.3; letter-spacing: -.8px; font-weight: 550; }
+#description { color: var(--muted); margin: 8px 0 0; max-width: 660px; font-size: 13px; }
+.live-label { font-size: 10px; letter-spacing: 1px; color: var(--muted); display: flex; align-items: center; gap: 7px; padding-top: 6px; white-space: nowrap; }
+.live-label i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+.workspace { display: grid; grid-template-columns: minmax(320px,1fr) 250px; gap: var(--space-4); align-items: start; }
+.visual-panel, .details, .data-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; }
+.visual-toolbar { display: flex; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); gap: 12px; font-size: 12px; }
+#hint { color: var(--muted); text-align: right; font-size: 11px; }
+.canvas-wrap { height: clamp(420px, 58vh, 720px); position: relative; }
+.topology-mode .canvas-wrap { height: clamp(360px, 48vh, 560px); }
+canvas { display: block; width: 100%; height: 100%; touch-action: none; }
+#empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
+#empty[hidden], [hidden] { display: none !important; }
+.legend { padding: 10px 16px; min-height: 44px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); flex-wrap: wrap; }
+.gradient { width: 94px; height: 8px; border-radius: 8px; background: linear-gradient(to right,var(--negative),var(--neutral),var(--positive)); }
+.gradient.sequential { background: linear-gradient(to right,var(--surface),var(--accent)); }
+.gradient.negative { background: linear-gradient(to right,var(--negative),var(--neutral)); }
+.gradient.positive { background: linear-gradient(to right,var(--neutral),var(--positive)); }
+.gradient.zero { background: var(--neutral); }
+.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
+.details { padding: var(--space-4); max-height: calc(100dvh - var(--status-height) - 2 * var(--main-padding) - var(--header-height) - var(--space-5)); overflow: auto; position: sticky; top: 0; }
+.details h2 { font-size: 12px; font-weight: 600; margin: 21px 0 9px; }
+.details p { font-size: 12px; color: var(--muted); }
+.details details { margin-top: var(--space-4); font-size: 11px; }
+.details summary { cursor: pointer; color: var(--muted); }
+.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 20px; }
+.metric strong { font-size: 25px; font-weight: 500; display: block; font-variant-numeric: tabular-nums; }
+.metric span { font-size: 10px; color: var(--muted); }
+table { border-collapse: collapse; width: 100%; font-size: 11px; font-variant-numeric: tabular-nums; }
+th { text-align: left; font-weight: 500; color: var(--muted); }
+th, td { border-bottom: 1px solid var(--border); padding: 6px 5px; text-align: right; }
+th:first-child, td:first-child { text-align: left; }
+.table-scroll { max-height: 280px; overflow: auto; }
+.parameters { font-size: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin: 0; }
+.parameters dt { color: var(--muted); overflow-wrap: anywhere; }
+.parameters dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
+#warnings p, #error { font-size: 12px; padding: 11px 15px; border-radius: var(--radius); margin: 0 0 12px; border: 1px solid var(--border); background: var(--warning-bg); color: var(--warning); }
+#error { color: var(--error); }
+.charts { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); }
+.charts:empty { border: none; }
+.chart { padding: 14px; min-width: 0; }
+.chart + .chart { border-top: 1px solid var(--border); }
+.chart h2 { margin: 0 0 8px; font-size: 11px; font-weight: 500; color: var(--muted); }
+.chart svg { width: 100%; display: block; overflow: visible; color: var(--muted); }
+.barcode-scroll { max-height: var(--barcode-max-height); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
+.barcode-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.chart text { font: 10px system-ui, sans-serif; fill: currentColor; }
+.chart .axis { stroke: var(--border); fill: none; }
+.chart .plot-line { stroke: var(--accent); fill: none; stroke-width: 2; }
+.chart .secondary { stroke: var(--positive); }
+.chart .bar { stroke: var(--accent); stroke-width: 3; opacity: .6; }
+.chart .bar.active { opacity: 1; }
+.chart .h1 { stroke: var(--h1); }
+.chart .point { fill: var(--accent); }
+.chart .h1-point { fill: var(--h1); }
+#playback { padding: 8px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; font-size: 12px; }
+#playback input { flex: 1; min-width: 50px; }
+.data-table { padding: var(--space-4); margin-top: var(--space-4); }
+.data-table h2 { font-size: 14px; margin: 0 0 12px; }
+.batch-mode .canvas-wrap { display: none; }
+.batch-mode .charts { border-top: 0; }
+footer { position: fixed; bottom: 0; left: 0; right: 0; height: var(--status-height); background: var(--surface); border-top: 1px solid var(--border); display: flex; gap: 24px; align-items: center; padding: 0 20px; color: var(--muted); font-size: 11px; z-index: 2; }
+#status-time { margin-left: auto; font-variant-numeric: tabular-nums; }
+@media (max-width: 1150px) { :root { --main-padding: 22px; } body { grid-template-columns: 220px minmax(0,1fr); } .workspace { grid-template-columns: minmax(300px,1fr) 210px; gap: 12px; } .live-label { display: none; } }

holonomy_explorer/static/view.js

@@ -0,0 +1,195 @@
+import {LABELS, placeLabels} from './layout.js';
+
+// Drawing constants are screen-space choices; mathematical data comes from Python.
+export const VIEW = Object.freeze({
+  nodeRadius: 6, graphNodeRadius: 5, hitRadius: 15, labelOffset: 12,
+  fontSize: 11, lineWidth: 1.5, edgeWidth: 0.9, gridWidth: 0.7, flowMs: 900,
+  chartWidth: 540, chartHeight: 200, chartPadding: 38,
+  barcodeRow: 7, barcodePadding: 24, chartInset: 14, diagramHeight: 180, figureExtent: 1.3,
+  debounceMs: 180, transitionMs: 500, triangleOpacity: 0.035,
+});
+// Eight percent on each side reserves room for labels without changing aspect.
+const FIT_MARGIN = 0.08;
+// A unit-wide fallback gives empty and coincident clouds a usable picking area.
+const FIT_FALLBACK_SPAN = 1;
+// A short corner ruler uses the conventional 1, 2, 5 decimal series.
+const SCALE_BAR = Object.freeze({fraction: 0.16, inset: 16, tick: 4, gap: 8, lengths: [1, 2, 5], base: 10});
+
+export function fitTransform(points, width, height, extent = null) {
+  let bounds = extent;
+  if (!bounds) bounds = points.length ? [
+    Math.min(...points.map(p=>p[0])), Math.max(...points.map(p=>p[0])),
+    Math.min(...points.map(p=>p[1])), Math.max(...points.map(p=>p[1])),
+  ] : [-FIT_FALLBACK_SPAN/2,FIT_FALLBACK_SPAN/2,-FIT_FALLBACK_SPAN/2,FIT_FALLBACK_SPAN/2];
+  const [xmin,xmax,ymin,ymax] = bounds;
+  const dx=xmax-xmin, dy=ymax-ymin;
+  // A flat axis imposes no scale constraint. Coincident points need a finite
+  // span on both axes so that picking still has an invertible transform.
+  const spanX=dx || (dy ? 0 : FIT_FALLBACK_SPAN);
+  const spanY=dy || (dx ? 0 : FIT_FALLBACK_SPAN);
+  const scale=Math.min(width*(1-2*FIT_MARGIN)/spanX,height*(1-2*FIT_MARGIN)/spanY);
+  const cx=(xmin+xmax)/2, cy=(ymin+ymax)/2;
+  return {
+    scale,
+    map: ([x,y])=>[width/2+(x-cx)*scale,height/2-(y-cy)*scale],
+    inverse: ([x,y])=>[(x-width/2)/scale+cx,-(y-height/2)/scale+cy],
+  };
+}
+
+export function scaleBarLength(scale, width) {
+  const target=width*SCALE_BAR.fraction/scale;
+  const power=SCALE_BAR.base**Math.floor(Math.log10(target));
+  return SCALE_BAR.lengths.filter(length=>length*power<=target).at(-1)*power;
+}
+export const $ = (id) => document.getElementById(id);
+export const fmt = (value) => value == null ? '∞ / unavailable' :
+  typeof value === 'number' ? (Number.isInteger(value) ? String(value) : Number(value.toPrecision(5)).toString()) : String(value);
+export const color = (name) => getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
+export function node(tag, text, attributes = {}) {
+  const element = document.createElement(tag);
+  if (text != null) element.textContent = text;
+  for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, value);
+  return element;
+}
+export function table(headers, rows) {
+  const table = node('table');
+  const head = node('thead'), body = node('tbody'), row = node('tr');
+  headers.forEach(value => row.append(node('th', value, {scope: 'col'})));
+  head.append(row);
+  rows.forEach(values => { const row = node('tr'); values.forEach(value => row.append(node('td', fmt(value)))); body.append(row); });
+  table.append(head, body);
+  const scroll = node('div', null, {class: 'table-scroll'}); scroll.append(table); return scroll;
+}
+export function metrics(entries) {
+  const result = node('div', null, {class: 'metrics'});
+  entries.forEach(([label, value]) => { const item = node('div', null, {class: 'metric'}); item.append(node('strong', fmt(value)), node('span', label)); result.append(item); });
+  return result;
+}
+export function parameters(values) {
+  const result = node('dl', null, {class: 'parameters'});
+  Object.entries(values).forEach(([key, value]) => {
+    if (Array.isArray(value) || value && typeof value === 'object') return;
+    result.append(node('dt', key.replaceAll('_', ' ')), node('dd', fmt(value)));
+  }); return result;
+}
+export function section(title, child) {
+  const result = node('section'); result.append(node('h2', title), child); return result;
+}
+export class CanvasView {
+  constructor(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.map = p => p; this.inverse = p => p; }
+  begin(points, extent = null) {
+    const {width, height} = this.canvas.getBoundingClientRect();
+    // Hidden canvases can receive resize notifications before their scene opens.
+    if (!width || !height) return;
+    const dpr = window.devicePixelRatio || 1;
+    this.canvas.width = Math.round(width * dpr); this.canvas.height = Math.round(height * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.ctx.clearRect(0, 0, width, height);
+    // Spectral-only mode preserves coincident points. Relaxation, when selected,
+    // happens separately and never changes the coordinates returned by Python.
+    Object.assign(this,fitTransform(points,width,height,extent));
+    this.ctx.font = `${VIEW.fontSize}px system-ui, sans-serif`;
+    this.width=width; this.height=height;
+  }
+  scaleBar() {
+    const length=scaleBarLength(this.scale,this.width), ctx=this.ctx;
+    const x=SCALE_BAR.inset, y=this.height-SCALE_BAR.inset;
+    const end=x+length*this.scale, label=`${fmt(length)} coordinate units`;
+    ctx.save();
+    ctx.fillStyle=color('surface');
+    ctx.fillRect(x-SCALE_BAR.tick,y-SCALE_BAR.gap-VIEW.fontSize-SCALE_BAR.tick,
+      Math.max(end-x,ctx.measureText(label).width)+2*SCALE_BAR.tick,VIEW.fontSize+SCALE_BAR.gap+2*SCALE_BAR.tick);
+    ctx.strokeStyle=color('ink'); ctx.fillStyle=color('ink'); ctx.lineWidth=VIEW.lineWidth;
+    ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(end,y);
+    for (const at of [x,end]) { ctx.moveTo(at,y-SCALE_BAR.tick); ctx.lineTo(at,y+SCALE_BAR.tick); }
+    ctx.stroke(); ctx.fillText(label,x,y-SCALE_BAR.gap); ctx.restore();
+  }
+  edgeLength(a,b,length) {
+    const [ax,ay]=this.map(a), [bx,by]=this.map(b), ctx=this.ctx;
+    const text=`d = ${fmt(length)}`, width=ctx.measureText(text).width;
+    const x=(ax+bx-width)/2, y=(ay+by)/2;
+    ctx.save(); ctx.fillStyle=color('surface');
+    ctx.fillRect(x-LABELS.padding,y-VIEW.fontSize,width+2*LABELS.padding,VIEW.fontSize+2*LABELS.padding);
+    ctx.fillStyle=color('ink'); ctx.fillText(text,x,y); ctx.restore();
+  }
+  graphLabels(points, priority) {
+    const positions = points.map(point=>this.map(point)), ctx=this.ctx;
+    const labels = placeLabels(positions,text=>ctx.measureText(text).width,this.width,this.height,VIEW.graphNodeRadius*1.5,priority);
+    for (const label of labels) {
+      const [x,y]=positions[label.index];
+      ctx.beginPath(); ctx.moveTo(x,y);
+      ctx.lineTo(Math.max(label.x,Math.min(x,label.x+label.width)),Math.max(label.y,Math.min(y,label.y+label.height)));
+      ctx.strokeStyle=color('edge'); ctx.lineWidth=VIEW.gridWidth; ctx.stroke();
+      ctx.fillStyle=color('surface'); ctx.fillRect(label.x,label.y,label.width,label.height);
+      ctx.fillStyle=color('ink'); ctx.textBaseline='top';
+      ctx.fillText(label.text,label.x+LABELS.padding,label.y+LABELS.padding);
+    }
+    ctx.textBaseline='alphabetic';
+  }
+  path(points, stroke = color('edge'), width = VIEW.lineWidth, alpha = 1, fill = false) {
+    const ctx = this.ctx; ctx.beginPath(); let begun = false;
+    for (const point of points) {
+      if (!point || point.some(v => v == null || !Number.isFinite(v))) { begun = false; continue; }
+      const [x,y] = this.map(point);
+      if (begun) ctx.lineTo(x,y); else ctx.moveTo(x,y);
+      begun = true;
+    }
+    ctx.globalAlpha = alpha; ctx.strokeStyle = stroke; ctx.lineWidth = width;
+    if (fill) { ctx.closePath(); ctx.fillStyle = stroke; ctx.fill(); } else ctx.stroke();
+    ctx.globalAlpha = 1;
+  }
+  dot(point, fill = color('node'), label = null, hollow = false, radius = VIEW.nodeRadius) {
+    if (!point || point.some(v => v == null || !Number.isFinite(v))) return;
+    const [x,y] = this.map(point), ctx = this.ctx;
+    ctx.beginPath(); ctx.arc(x,y,radius,0,2*Math.PI);
+    ctx.fillStyle = hollow ? color('surface') : fill; ctx.fill();
+    ctx.strokeStyle = fill; ctx.lineWidth = VIEW.lineWidth; ctx.stroke();
+    if (label != null) { ctx.fillStyle = color('muted'); ctx.fillText(String(label), x+VIEW.labelOffset, y-VIEW.labelOffset/2); }
+  }
+  circle(radius) {
+    const [cx,cy] = this.map([0,0]), [ex] = this.map([radius,0]);
+    this.ctx.beginPath(); this.ctx.arc(cx,cy,Math.abs(ex-cx),0,2*Math.PI);
+    this.ctx.strokeStyle = color('muted'); this.ctx.setLineDash([VIEW.gridWidth*4,VIEW.gridWidth*4]); this.ctx.stroke(); this.ctx.setLineDash([]);
+  }
+  click(event) { const rect = this.canvas.getBoundingClientRect(); return [event.clientX-rect.left,event.clientY-rect.top]; }
+  nearest(event, points) {
+    const [x,y] = this.click(event); let best = null, distance = VIEW.hitRadius;
+    points.forEach((point,index) => { const [px,py] = this.map(point), d = Math.hypot(px-x,py-y); if (d < distance) { best = index; distance = d; } });
+    return best;
+  }
+}
+// Color interpolation is presentation only. Values and their ranges come from the API.
+export function blend(a,b,t) {
+  const rgb = value => value.slice(1).match(/.{2}/g).map(v => parseInt(v,16));
+  const left = rgb(a), right = rgb(b);
+  return `rgb(${left.map((v,i) => Math.round(v+(right[i]-v)*Math.max(0,Math.min(1,t)))).join(',')})`;
+}
+export function diverging(value, range) {
+  const span = Math.max(Math.abs(range[0]),Math.abs(range[1])) || 1;
+  return blend(color('neutral'), color(value < 0 ? 'negative' : 'positive'), Math.abs(value)/span);
+}
+export function curvatureScale(range) {
+  if(range[0]===0 && range[1]===0) return {range,kind:'zero',note:'zero curvature'};
+  if (range[0]<0 && range[1]>0) {
+    const extent=Math.max(Math.abs(range[0]),Math.abs(range[1]));
+    return {range:[-extent,extent],kind:'diverging',note:'diverging, centered at 0'};
+  }
+  return {range,kind:range[1]<=0?'negative':'positive',note:'sequential'};
+}
+export function curvatureColor(value, scale) {
+  if (value==null) return color('muted');
+  if (value===0) return color('neutral');
+  if (scale.kind==='diverging') return diverging(value,scale.range);
+  const [low,high]=scale.range;
+  const fraction=high===low?1:scale.kind==='negative'?(high-value)/(high-low):(value-low)/(high-low);
+  return blend(color('neutral'),color(scale.kind),fraction);
+}
+export function sequential(value, range) {
+  if (value == null) return color('muted');
+  return blend(color('surface'),color('accent'), (value-range[0])/(range[1]-range[0] || 1));
+}
+export function community(index) {
+  // Separate components need categorical hues; the rest of the UI uses one accent.
+  const goldenAngle = 180 * (3-Math.sqrt(5));
+  return `hsl(${index*goldenAngle%360} 34% 53%)`;
+}