<!--
  Coherence graph viewer -- real chb01 seizure 16 preictal window.

  PROVENANCE: reads resources/coherence-graph/{positions,graph,featured,coi}.json
  and resources/coherence-graph/edges/*.json, exported from the real
  dense_edge_gru pipeline (EEG_Benchmarks/exports/coherence-graph/raw/coherence.npz
  -> converted here). coherence/phase/significance/coi_valid are the real
  computed arrays -- coherence_threshold=0.90, lowest_hz=8.0, and nfreqs=40
  are a DELIBERATE relaxation from the model's real trained values (0.99,
  1.0Hz, 8 bins) for demo legibility; the caption below discloses this.
  Re-run 2026-08-18 with nfreqs bumped 8->30->40 (30 was a checked-in but
  never-executed intermediate edit -- 40 is what's actually deployed). The
  "significant" flag in graph.json is not reliable (near-universal true at
  this threshold/window length) -- this viewer curates the 60 "featured"
  clickable edges by real mean_coherence instead (see featured.json), not
  that flag.

  BRAIN OVERLAY: resources/coherence-graph/brain.glb is "Brain" by Poly by
  Google, CC BY 3.0, via Poly Pizza (https://poly.pizza/m/5mPRPZkI3qt).
  Attribution required by the license; credited in the on-page caption
  below. Stylized low-poly reference mesh, NOT an anatomical registration --
  the 23 nodes are real 10-20 scalp positions (outside the skull); the brain
  is fit to nest just inside that electrode shell for visual context only.
  Parsed by hand below (~40-line GLB reader, not GLTFLoader) since the model
  has no external buffers/textures and vendor/three.min.js is core-only.

  The mesh's local axes are NOT anatomically aligned to positions.json's
  axes (x=left/right, y=anterior/posterior, z=superior, confirmed against
  real Fp1/Fp2 vs O1/O2 and T7/T8 coordinates). Measured directly from the
  mesh: a mirror-symmetry test across local Z is far more self-similar than
  across local X (brains are left-right symmetric -> local Z is left-right,
  local X is front-to-back), and the lowest-Y (brainstem-adjacent) vertices
  cluster at positive local X, matching the brainstem's real posterior-
  inferior position. A +90deg rotation about Y (x'=z, z'=-x) aligns both
  facts with the scene's real axes -- without it the model was effectively
  rotated 90deg from the electrodes (frontal channels ended up over the
  side of the head, not the forehead).

  The fit itself is a single UNIFORM scale (real proportions preserved)
  from matching mean vertex-to-centroid radius (brain) against mean
  electrode-to-centroid radius (nodeScenePos) -- a per-axis bounding-box
  fit was tried first and rejected because it distorts this bumpy, non-
  ellipsoidal low-poly mesh unevenly, and because bbox-matching the
  electrodes' full vertical range (down to near-ear channels like
  T7/T8/FT9/FT10) is anatomically wrong for a brain, which doesn't extend
  to jaw/ear level. Verified with a raycast containment check (cast each
  electrode toward the mesh centroid, count intersections) -- 0/23
  electrodes fall inside the mesh at the shipped fitScale.

  brainMat.depthWrite must stay TRUE despite being transparent: false (the
  usual advice for transparent materials) let this mesh's own overlapping
  fold surfaces -- a near sulcus wall and a farther front-facing wall behind
  it, both facing the camera along the same ray -- blend on top of each
  other in arbitrary triangle order instead of by depth, showing up as a
  bright, camera-angle-dependent patch that looked like a separate floating
  shape. depthWrite:true makes the nearest front-facing surface win at each
  pixel, like a normal single-layer translucent shell.

  NODE OVERLAP FIX: two pairs of chb01's 23 real channel labels are exact-
  duplicate scalp positions -- T7-P7/P7-T7 (same electrode pair, reversed
  order) and T8-P8-0/T8-P8-1 (chb01's real duplicate-raw-channel montage
  quirk). Their midpoint is mathematically identical, so untreated their
  node spheres render exactly on top of each other. posGroups/tangentJitter
  below nudge exact-duplicate positions apart along a small tangent offset
  so both real channels stay visible as distinct nodes; edges read from the
  same resolved nodeScenePos so lines/tubes stay attached correctly.

  EDGES are cylindrical tubes, not flat lines -- radius scales continuously
  with each edge's real mean_coherence (see coherenceRadius), so thickness
  itself encodes coherence rather than relying on opacity alone. Color still
  varies with coherence too (seqColor), so thickness and hue reinforce the
  same variable. Only the 60 "featured" edges are clickable (a separate
  invisible larger-radius hit-cylinder per featured edge is used for a
  reliable click target, since many tubes are only ~0.15 units thick).

  BUILT/VERIFIED in a Cowork session (2026-08-18) via device-bridge access to
  the real export + Playwright screenshot testing -- not scaffolding for
  another agent to design from scratch.

  OPEN ITEMS for whoever picks this up next in the site repo:
    - Brain overlay fit (fitScale/nodeCentroid) is a mean-radius heuristic
      re-derived from nodeScenePos at load time -- if positions.json's real
      head geometry changes materially, re-run the raycast containment
      check described above before shipping. A single global scale can't
      perfectly track a lumpy, non-ellipsoidal low-poly mesh at every
      individual electrode; some gaps are a few units, others closer to
      15-20 (outlier temporal channels) -- that's this asset's irregularity,
      not a fit bug.
    - Only tested at desktop width (~1000px) and dark theme. Not yet checked
      on narrow/mobile viewports -- the fixed 640px three.js canvas and the
      900px iframe height in research.html will likely need a mobile-specific
      height/interaction pass (drag-to-rotate is awkward on touch, though
      pinch-to-zoom is handled).
    - No touch/tap handling for the edge click-to-open-modal interaction --
      currently mouse-only (mousemove hover + click). Needs a touch equivalent.
    - vendor/three.min.js is r0.160.0, UMD build, vendored locally (not CDN)
      because this sandbox's network couldn't reach cdnjs during testing --
      worth confirming a CDN would actually work fine on the real deployed
      site if a lighter-weight approach is preferred later; local vendoring
      is also just a reasonable default (no external dependency either way).
    - featured.json hardcodes the top 60 edges by mean_coherence chosen in
      this session -- if the underlying window/subject changes later, this
      whole export needs regenerating, not just positions/graph.
    - No favicon reference in this standalone file (fine as embedded via
      iframe in research.html, which already declares one -- only matters if
      this file is ever linked to directly).
-->
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coherence graph — chb01 seizure 16 preictal window</title>
<style>
  .viz-root {
    color-scheme: dark;
    --surface-1: #0d0d0d;
    --surface-2: #1a1a19;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #8a897f;
    --border: rgba(255,255,255,0.08);
    /* sequential blue (coherence) */
    --seq-100: #cde2fb; --seq-250: #86b6ef; --seq-400: #3987e5;
    --seq-500: #256abf; --seq-600: #184f95; --seq-700: #0d366b;
    /* diverging blue<->red (significance) */
    --div-blue: #3987e5; --div-mid: #383835; --div-red: #e66767;
  }
  html, body { margin:0; padding:0; background: var(--surface-1); }
  * { box-sizing: border-box; }
  .viz-root {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text-primary);
    background: var(--surface-1);
    width: 100%;
    position: relative;
  }
  #scene-container { width: 100%; height: 640px; display: block; cursor: grab; }
  #scene-container:active { cursor: grabbing; }
  .caption {
    max-width: 760px; margin: 0 auto; padding: 0.75rem 1rem 1.25rem;
    font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; text-align: center;
  }
  .caption strong { color: var(--text-primary); }
  #tooltip {
    position: absolute; pointer-events: none; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem;
    font-size: 0.78rem; color: var(--text-primary); display: none; z-index: 20;
    white-space: nowrap;
  }
  #modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.72);
    z-index: 100; align-items: center; justify-content: center; padding: 1.5rem;
  }
  #modal-overlay.open { display: flex; }
  #modal {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
    max-width: 920px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem;
  }
  #modal-close {
    float: right; background: none; border: none; color: var(--text-secondary);
    font-size: 1.3rem; cursor: pointer; line-height: 1;
  }
  #modal-close:hover { color: var(--text-primary); }
  #modal h3 { margin: 0 0.25rem 0.2rem 0; font-size: 1.05rem; font-weight: 600; }
  #modal .sub { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 1rem; }
  .panels { display: flex; flex-direction: column; gap: 1.1rem; }
  .panel-row { display: flex; align-items: center; gap: 0.85rem; }
  .panel-label { width: 84px; flex-shrink: 0; font-size: 0.78rem; color: var(--text-secondary); text-align: right; }
  .panel-canvas-wrap { position: relative; }
  canvas.heatmap { display: block; border-radius: 4px; image-rendering: pixelated; }
  .legend-strip { display:flex; align-items:center; gap:0.4rem; margin-top:0.3rem; }
  .legend-bar { width: 120px; height: 8px; border-radius: 3px; }
  .legend-label { font-size: 0.68rem; color: var(--text-muted); }
  #loading { text-align:center; padding: 2rem; color: var(--text-muted); font-size: 0.85rem; }
</style>
</head>
<body>
<div class="viz-root">
  <div id="scene-container"></div>
  <div id="tooltip"></div>
  <div class="caption">
    <ul style="max-width: 760px; margin: 0 auto; padding-left: 1.25rem; text-align: left; line-height: 1.55;">
      <li>Real computed coherence graph for <strong>chb01, seizure 1_16_0 preictal window</strong>.</li>
      <li>Nodes are chb01's 23 real bipolar channels, not single electrodes.</li>
      <li>Each node is placed at the midpoint of its pair's real 10-20 scalp positions.</li>
      <li>Edges are drawn as tubes whose radius and color both track real mean coherence over this window.</li>
      <li>Drag to rotate, scroll or pinch to zoom, and click any highlighted edge for the full coherence, significance, and phase detail.</li>
      <li>The translucent brain is a stylized reference mesh for visual context only, not an anatomical registration to these scalp positions.
        <a href="https://poly.pizza/m/5mPRPZkI3qt" target="_blank" rel="noopener" style="color:inherit;">"Brain" by Poly by Google</a>,
        <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noopener" style="color:inherit;">CC BY 3.0</a>.
      </li>
    </ul>
  </div>
  <div id="modal-overlay">
    <div id="modal">
      <button id="modal-close" aria-label="Close">&times;</button>
      <h3 id="modal-title"></h3>
      <div class="sub" id="modal-sub"></div>
      <div class="panels" id="modal-panels"></div>
    </div>
  </div>
</div>

<script src="vendor/three.min.js"></script>
<script>
(async function () {
  const BASE = 'coherence-graph/';
  const container = document.getElementById('scene-container');
  const tooltip = document.getElementById('tooltip');

  const [positions, graph, featured, coi, brainBuf] = await Promise.all([
    fetch(BASE + 'positions.json').then(r => r.json()),
    fetch(BASE + 'graph.json').then(r => r.json()),
    fetch(BASE + 'featured.json').then(r => r.json()),
    fetch(BASE + 'coi.json').then(r => r.json()),
    fetch(BASE + 'brain.glb').then(r => r.ok ? r.arrayBuffer() : null).catch(() => null),
  ]);

  const featuredSet = new Set(featured.map(f => f.src + '__' + f.dst));
  const posByChannel = {};
  positions.forEach(p => { posByChannel[p.channel] = p; });

  // only the 23 bipolar-channel nodes (positions.json also has the 21 raw
  // electrode positions used to compute midpoints -- not rendered as nodes)
  const channelNames = new Set();
  graph.forEach(e => { channelNames.add(e.src); channelNames.add(e.dst); });

  const SCALE = 420;
  function toScene(p) {
    return new THREE.Vector3(p.x * SCALE, p.z * SCALE, p.y * SCALE);
  }

  // --- three.js scene ---
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, container.clientWidth / 640, 1, 2000);
  camera.position.set(0, 60, 260);
  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(container.clientWidth, 640);
  renderer.setPixelRatio(window.devicePixelRatio || 1);
  container.appendChild(renderer.domElement);

  scene.add(new THREE.AmbientLight(0xffffff, 0.9));
  const dl = new THREE.DirectionalLight(0xffffff, 0.6);
  dl.position.set(100, 200, 150);
  scene.add(dl);

  const nodeGroup = new THREE.Group();
  const edgeGroup = new THREE.Group();
  const hitGroup = new THREE.Group(); // invisible thick tubes for raycasting
  scene.add(nodeGroup, edgeGroup, hitGroup);

  const nodeMeshes = {};
  const nodeGeo = new THREE.SphereGeometry(1.8, 16, 16);

  // Some of chb01's 23 real channel labels are exact-duplicate scalp
  // positions (see header comment) -- group by resolved position and nudge
  // any group of >1 apart along a small tangent offset so both real
  // channels stay visible as distinct nodes.
  const posGroups = {};
  channelNames.forEach(ch => {
    const p = posByChannel[ch];
    if (!p) return;
    const key = toScene(p).toArray().map(n => n.toFixed(1)).join(',');
    (posGroups[key] = posGroups[key] || []).push(ch);
  });
  function tangentJitter(outwardFrom, index, count, magnitude) {
    if (count <= 1) return new THREE.Vector3();
    const outward = outwardFrom.clone().normalize();
    const ref = Math.abs(outward.y) < 0.9 ? new THREE.Vector3(0, 1, 0) : new THREE.Vector3(1, 0, 0);
    const t1 = new THREE.Vector3().crossVectors(outward, ref).normalize();
    const t2 = new THREE.Vector3().crossVectors(outward, t1).normalize();
    const angle = (2 * Math.PI * index) / count;
    return t1.multiplyScalar(Math.cos(angle) * magnitude).add(t2.multiplyScalar(Math.sin(angle) * magnitude));
  }

  const nodeScenePos = {}; // final (possibly jittered) position per channel -- edges read from here too
  channelNames.forEach(ch => {
    const p = posByChannel[ch];
    if (!p) return;
    const scenePos = toScene(p);
    const key = scenePos.toArray().map(n => n.toFixed(1)).join(',');
    const group = posGroups[key];
    scenePos.add(tangentJitter(scenePos, group.indexOf(ch), group.length, 3));
    nodeScenePos[ch] = scenePos;

    const mat = new THREE.MeshStandardMaterial({ color: 0x86b6ef, emissive: 0x1c5cab, emissiveIntensity: 0.25 });
    const mesh = new THREE.Mesh(nodeGeo, mat);
    mesh.position.copy(scenePos);
    mesh.userData = { channel: ch };
    nodeGroup.add(mesh);
    nodeMeshes[ch] = mesh;
  });

  // --- brain overlay (see header comment for the full rationale) ---
  function parseGLB(buf) {
    const dv = new DataView(buf);
    if (dv.getUint32(0, true) !== 0x46546c67) throw new Error('not a glb');
    let offset = 12, json = null, bin = null;
    while (offset < buf.byteLength) {
      const len = dv.getUint32(offset, true);
      const type = dv.getUint32(offset + 4, true);
      const data = buf.slice(offset + 8, offset + 8 + len);
      if (type === 0x4e4f534a) json = JSON.parse(new TextDecoder('utf-8').decode(data)); // 'JSON'
      else if (type === 0x004e4942) bin = data; // 'BIN\0'
      offset += 8 + len;
    }
    const CTORS = { 5126: Float32Array, 5123: Uint16Array, 5125: Uint32Array };
    const NCOMP = { SCALAR: 1, VEC2: 2, VEC3: 3, VEC4: 4 };
    function readAccessor(i) {
      const acc = json.accessors[i];
      const view = json.bufferViews[acc.bufferView];
      const byteOffset = (view.byteOffset || 0) + (acc.byteOffset || 0);
      return new CTORS[acc.componentType](bin, byteOffset, acc.count * NCOMP[acc.type]);
    }
    const prim = json.meshes[0].primitives[0];
    return { positions: readAccessor(prim.attributes.POSITION), indices: readAccessor(prim.indices) };
  }

  if (brainBuf) {
    try {
      const { positions: bPos, indices: bIdx } = parseGLB(brainBuf);
      const geo = new THREE.BufferGeometry();
      geo.setAttribute('position', new THREE.BufferAttribute(bPos, 3));
      geo.setIndex(new THREE.BufferAttribute(bIdx, 1));
      geo.computeVertexNormals();

      // Compute centroid and mean radius from the RAW (pre-transform) data
      // first -- geo.translate()/geo.rotateY() below mutate the position
      // attribute's array in place (it's the same array as bPos, no copy
      // was made), so reading bPos after either call would read already-
      // shifted/rotated coordinates instead of the originals.
      let vsum = new THREE.Vector3();
      const vertCount = bPos.length / 3;
      for (let i = 0; i < bPos.length; i += 3) vsum.set(vsum.x + bPos[i], vsum.y + bPos[i + 1], vsum.z + bPos[i + 2]);
      const nativeCenter = vsum.multiplyScalar(1 / vertCount);
      let radiusSum = 0;
      for (let i = 0; i < bPos.length; i += 3) {
        radiusSum += Math.hypot(bPos[i] - nativeCenter.x, bPos[i + 1] - nativeCenter.y, bPos[i + 2] - nativeCenter.z);
      }
      const nativeMeanRadius = radiusSum / vertCount;

      // +90deg about Y (x'=z, z'=-x) re-aligns this asset's local axes to
      // the electrodes' real anatomical axes -- see header comment.
      geo.translate(-nativeCenter.x, -nativeCenter.y, -nativeCenter.z);
      geo.rotateY(Math.PI / 2);

      const nodePosArr = Object.values(nodeScenePos);
      const nodeCentroid = nodePosArr.reduce((acc, v) => acc.add(v), new THREE.Vector3()).multiplyScalar(1 / nodePosArr.length);
      const nodeMeanRadius = nodePosArr.reduce((sum, v) => sum + v.distanceTo(nodeCentroid), 0) / nodePosArr.length;

      // Uniform scale from mean radius, not per-axis bbox -- see header
      // comment. 0.60 clears every electrode on the raycast containment
      // check with several units to spare.
      const fitScale = 0.60 * (nodeMeanRadius / nativeMeanRadius);

      // depthWrite must stay true -- see header comment.
      const brainMat = new THREE.MeshStandardMaterial({
        color: 0x9db8d8, transparent: true, opacity: 0.26,
        roughness: 0.55, metalness: 0.0, side: THREE.FrontSide, depthWrite: true,
      });
      const brainMesh = new THREE.Mesh(geo, brainMat);
      brainMesh.scale.setScalar(fitScale);
      brainMesh.position.copy(nodeCentroid);
      brainMesh.renderOrder = -1; // draw before the edge tubes/nodes so their own transparency sorts on top
      scene.add(brainMesh);
    } catch (err) {
      console.warn('brain overlay: failed to load/parse brain.glb, skipping', err);
    }
  }

  // Real (non-trivial) mean_coherence across the current graph.json export
  // is a narrow, right-skewed band -- min 0.728, median 0.762, only the
  // top ~10% reach past 0.79, max 0.834 (re-checked directly against the
  // live file; this range shifts whenever the export is re-run with new
  // pipeline params, so don't assume these numbers are permanent). A
  // straight linear map over a range this narrow puts almost every edge
  // at nearly the same color/thickness. Raising the normalized position
  // to a power (COHERENCE_EXP) compresses that low/mid cluster down near
  // zero and only lets genuine standouts (the highest real coherence
  // edges) approach full radius/brightness -- "only a few stand out."
  const COH_MIN = 0.728, COH_MAX = 0.835;
  const COHERENCE_EXP = 4;
  function coherenceT(v) {
    const raw = Math.max(0, Math.min(1, (v - COH_MIN) / (COH_MAX - COH_MIN)));
    return Math.pow(raw, COHERENCE_EXP);
  }

  // sequential blue ramp, dim/dark at low coherenceT, pale/bright at high --
  // stops are in normalized 0..1 coherenceT space, not raw coherence
  const seqStops = [
    [0, 0x184f95], [0.35, 0x256abf], [0.6, 0x3987e5], [0.8, 0x86b6ef], [1, 0xcde2fb],
  ];
  function seqColor(t) {
    for (let i = 0; i < seqStops.length - 1; i++) {
      if (t <= seqStops[i + 1][0]) {
        const [t0, c0] = seqStops[i], [t1, c1] = seqStops[i + 1];
        const tt = (t - t0) / Math.max(t1 - t0, 1e-6);
        const col0 = new THREE.Color(c0), col1 = new THREE.Color(c1);
        return col0.lerp(col1, Math.max(0, Math.min(1, tt)));
      }
    }
    return new THREE.Color(seqStops[seqStops.length - 1][1]);
  }

  const RADIUS_MIN = 0.08, RADIUS_MAX = 1.0;
  function coherenceRadius(t) {
    return RADIUS_MIN + (RADIUS_MAX - RADIUS_MIN) * t;
  }

  const clickable = [];
  graph.forEach(e => {
    const v1 = nodeScenePos[e.src], v2 = nodeScenePos[e.dst];
    if (!v1 || !v2) return;
    if (e.mean_coherence >= 0.99) return; // trivial duplicate-channel pair, skip drawing
    const isFeatured = featuredSet.has(e.src + '__' + e.dst);
    const t = coherenceT(e.mean_coherence);
    const color = seqColor(t);
    const radius = coherenceRadius(t);

    const dir = new THREE.Vector3().subVectors(v2, v1);
    const len = dir.length();
    const tubeGeo = new THREE.CylinderGeometry(radius, radius, len, 6, 1);
    // MeshBasicMaterial (unlit) -- MeshStandardMaterial's PBR lighting was
    // washing the whole coherence color ramp toward white under the
    // scene's ambient+directional light, especially the paler stops (e.g.
    // 0xcde2fb), making every edge look the same regardless of coherence.
    // Unlit paints exactly the given hue, matching what the previous
    // LineBasicMaterial edges did.
    //
    // Only "featured" (the 60 clickable, highest-coherence) edges get high
    // opacity -- with all ~250 real edges now drawn as solid tubes rather
    // than the old near-invisible 0.06 background lines, giving every edge
    // the same high opacity turns the graph into an unreadable hairball of
    // converging spikes at every node. Radius still scales with coherence
    // for every edge either way, per the actual request; opacity is what
    // keeps the graph legible.
    const tubeMat = new THREE.MeshBasicMaterial({
      color, transparent: true, opacity: isFeatured ? 0.9 : 0.16, depthWrite: true,
    });
    const tube = new THREE.Mesh(tubeGeo, tubeMat);
    const mid = new THREE.Vector3().addVectors(v1, v2).multiplyScalar(0.5);
    tube.position.copy(mid);
    tube.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());
    edgeGroup.add(tube);

    if (isFeatured) {
      // separate, fatter invisible hit-cylinder -- many visible tubes are
      // too thin (down to 0.15 radius) to be a reliable click target
      const hitGeo = new THREE.CylinderGeometry(2.2, 2.2, len, 6, 1);
      const hitMat = new THREE.MeshBasicMaterial({ visible: false });
      const hit = new THREE.Mesh(hitGeo, hitMat);
      hit.position.copy(mid);
      hit.quaternion.copy(tube.quaternion);
      hit.userData = { src: e.src, dst: e.dst, mean_coherence: e.mean_coherence };
      hitGroup.add(hit);
      clickable.push(hit);
    }
  });

  // simple orbit-ish drag rotation (no external OrbitControls dependency)
  let dragging = false, lastX = 0, lastY = 0;
  let rotY = 0.5, rotX = -0.15;
  const ZOOM_MIN = 90, ZOOM_MAX = 650;
  let camDist = 300;
  function applyRotation() {
    const r = camDist;
    camera.position.x = r * Math.sin(rotY) * Math.cos(rotX);
    camera.position.z = r * Math.cos(rotY) * Math.cos(rotX);
    camera.position.y = 60 + r * Math.sin(rotX);
    camera.lookAt(0, 20, 0);
  }
  applyRotation();
  container.addEventListener('mousedown', e => { dragging = true; lastX = e.clientX; lastY = e.clientY; });
  window.addEventListener('mouseup', () => dragging = false);
  window.addEventListener('mousemove', e => {
    if (!dragging) return;
    rotY -= (e.clientX - lastX) * 0.006;
    rotX = Math.max(-0.6, Math.min(0.6, rotX + (e.clientY - lastY) * 0.006));
    lastX = e.clientX; lastY = e.clientY;
    applyRotation();
  });

  // scroll-wheel zoom (multiplicative, so it feels consistent near and far)
  container.addEventListener('wheel', e => {
    e.preventDefault();
    const factor = Math.exp(e.deltaY * 0.0015);
    camDist = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, camDist * factor));
    applyRotation();
  }, { passive: false });

  // pinch-to-zoom on touch (two-finger distance)
  let pinchDist = null;
  function touchDist(t0, t1) {
    return Math.hypot(t0.clientX - t1.clientX, t0.clientY - t1.clientY);
  }
  container.addEventListener('touchstart', e => {
    if (e.touches.length === 2) pinchDist = touchDist(e.touches[0], e.touches[1]);
  }, { passive: true });
  container.addEventListener('touchmove', e => {
    if (e.touches.length === 2 && pinchDist !== null) {
      e.preventDefault();
      const d = touchDist(e.touches[0], e.touches[1]);
      camDist = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, camDist * (pinchDist / d)));
      pinchDist = d;
      applyRotation();
    }
  }, { passive: false });
  container.addEventListener('touchend', e => {
    if (e.touches.length < 2) pinchDist = null;
  }, { passive: true });

  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
  function setMouse(e) {
    const rect = container.getBoundingClientRect();
    mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
    mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
  }
  container.addEventListener('mousemove', e => {
    if (dragging) { tooltip.style.display = 'none'; return; }
    setMouse(e);
    raycaster.setFromCamera(mouse, camera);
    const hits = raycaster.intersectObjects(clickable);
    if (hits.length) {
      const d = hits[0].object.userData;
      tooltip.style.display = 'block';
      tooltip.style.left = (e.clientX - container.getBoundingClientRect().left + 12) + 'px';
      tooltip.style.top = (e.clientY - container.getBoundingClientRect().top + 8) + 'px';
      tooltip.innerHTML = `<strong>${d.src} ↔ ${d.dst}</strong><br>mean coherence ${d.mean_coherence.toFixed(3)}`;
      container.style.cursor = 'pointer';
    } else {
      tooltip.style.display = 'none';
      container.style.cursor = 'grab';
    }
  });
  container.addEventListener('click', async e => {
    setMouse(e);
    raycaster.setFromCamera(mouse, camera);
    const hits = raycaster.intersectObjects(clickable);
    if (!hits.length) return;
    const d = hits[0].object.userData;
    await openModal(d.src, d.dst);
  });

  (function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  })();
  window.addEventListener('resize', () => {
    camera.aspect = container.clientWidth / 640;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, 640);
  });

  // --- modal: coherence / significance / phase heatmaps from real per-edge data ---
  const modalOverlay = document.getElementById('modal-overlay');
  document.getElementById('modal-close').addEventListener('click', () => modalOverlay.classList.remove('open'));
  modalOverlay.addEventListener('click', e => { if (e.target === modalOverlay) modalOverlay.classList.remove('open'); });

  const edgeCache = {};
  async function openModal(src, dst) {
    const key = src + '__' + dst;
    document.getElementById('modal-title').textContent = `${src} ↔ ${dst}`;
    document.getElementById('modal-sub').textContent = `chb01, seizure 1_16_0 preictal window · ${coi.seizure_id ? '' : ''}real computed coherence, significance, and phase (8–40Hz, threshold ${coi.coherence_threshold})`;
    const panelsEl = document.getElementById('modal-panels');
    panelsEl.innerHTML = '<div id="loading">loading real data…</div>';
    modalOverlay.classList.add('open');

    let data = edgeCache[key];
    if (!data) {
      const f = featured.find(x => x.src === src && x.dst === dst);
      if (!f) { panelsEl.innerHTML = '<div id="loading">no detail for this edge</div>'; return; }
      data = await fetch(BASE + f.file).then(r => r.json());
      edgeCache[key] = data;
    }
    renderPanels(panelsEl, data, coi);
  }

  function renderPanels(container, data, coiMeta) {
    container.innerHTML = '';
    const F = coiMeta.freqs_hz.length;
    const T = coiMeta.n_time;
    const cellW = Math.max(1, Math.floor(560 / T));
    const cellH = Math.max(3, Math.floor(220 / F));
    const W = cellW * T, H = cellH * F;

    function makeCanvas() {
      const c = document.createElement('canvas');
      c.className = 'heatmap';
      c.width = W; c.height = H;
      c.style.width = W + 'px'; c.style.height = H + 'px';
      return c;
    }

    function coiInvalid(t, f) { return coiMeta.coi_valid[t][f] === 0; }

    function drawHatch(ctx) {
      ctx.save();
      ctx.strokeStyle = 'rgba(255,255,255,0.35)';
      ctx.lineWidth = 1;
      for (let t = 0; t < T; t++) {
        for (let f = 0; f < F; f++) {
          if (!coiInvalid(t, f)) continue;
          const x = t * cellW, y = (F - 1 - f) * cellH;
          ctx.beginPath();
          ctx.moveTo(x, y + cellH); ctx.lineTo(x + cellW, y);
          ctx.stroke();
        }
      }
      ctx.restore();
    }

    // sequential blue: coherence 0..1
    function seqRGB(v) {
      const stops = [[0, [13,54,107]], [0.4,[24,79,149]], [0.6,[37,135,229]], [0.8,[134,182,239]], [1,[205,226,251]]];
      for (let i=0;i<stops.length-1;i++){
        if (v<=stops[i+1][0]) {
          const t=(v-stops[i][0])/Math.max(stops[i+1][0]-stops[i][0],1e-6);
          const a=stops[i][1], b=stops[i+1][1];
          return [a[0]+(b[0]-a[0])*t, a[1]+(b[1]-a[1])*t, a[2]+(b[2]-a[2])*t];
        }
      }
      return stops[stops.length-1][1];
    }
    // diverging blue<->red ramp, t normalized 0..1, gray at midpoint
    function divRamp(t) {
      const c = Math.max(0, Math.min(1, t));
      const blue=[57,135,229], gray=[56,56,53], red=[230,103,103];
      if (c <= 0.5) {
        const tt = c / 0.5;
        return [blue[0]+(gray[0]-blue[0])*tt, blue[1]+(gray[1]-blue[1])*tt, blue[2]+(gray[2]-blue[2])*tt];
      } else {
        const tt = (c - 0.5) / 0.5;
        return [gray[0]+(red[0]-gray[0])*tt, gray[1]+(red[1]-gray[1])*tt, gray[2]+(red[2]-gray[2])*tt];
      }
    }
    // cyclic hue ramp, t normalized 0..1 -- standard HSL hue wheel
    function hueRamp(t) {
      return hslToRgb(Math.max(0, Math.min(1, t)), 0.7, 0.55);
    }
    function hslToRgb(h,s,l){
      let r,g,b;
      if(s===0){r=g=b=l;}else{
        const hue2rgb=(p,q,t)=>{if(t<0)t+=1;if(t>1)t-=1;if(t<1/6)return p+(q-p)*6*t;if(t<1/2)return q;if(t<2/3)return p+(q-p)*(2/3-t)*6;return p;};
        const q=l<0.5?l*(1+s):l+s-l*s, p=2*l-q;
        r=hue2rgb(p,q,h+1/3); g=hue2rgb(p,q,h); b=hue2rgb(p,q,h-1/3);
      }
      return [r*255,g*255,b*255];
    }
    // significance (raw range ~[-1, 0.15], threshold at 0) -- cyclic hue,
    // mapped continuously across the real significance value range
    function significanceRGB(v) {
      return hueRamp((v - (-1)) / (0.15 - (-1)));
    }
    // phase (-pi..pi) -- diverging blue<->red, wrapped into the ramp's 0..1
    // domain (gray at 0 rad, blue/red at the +/-pi wrap)
    function phaseRGB(v) {
      return divRamp((v + Math.PI) / (2 * Math.PI));
    }

    function drawPanel(values, colorFn, invalidColor) {
      const canvas = makeCanvas();
      const ctx = canvas.getContext('2d');
      for (let t = 0; t < T; t++) {
        for (let f = 0; f < F; f++) {
          let rgb;
          if (coiInvalid(t, f)) rgb = invalidColor;
          else rgb = colorFn(values[t][f]);
          ctx.fillStyle = `rgb(${rgb[0]|0},${rgb[1]|0},${rgb[2]|0})`;
          ctx.fillRect(t * cellW, (F - 1 - f) * cellH, cellW, cellH);
        }
      }
      drawHatch(ctx);
      return canvas;
    }

    const rows = [
      { label: 'coherence |coh|', values: data.coh, colorFn: seqRGB, invalid: [20,20,20], legend: ['0', '1'], grad: 'linear-gradient(90deg,#0d366b,#3987e5,#cde2fb)' },
      { label: 'significance', values: data.significance, colorFn: significanceRGB, invalid: [20,20,20], legend: ['below threshold', 'above threshold'], grad: 'linear-gradient(90deg,hsl(0,70%,55%),hsl(120,70%,55%),hsl(240,70%,55%),hsl(360,70%,55%))' },
      { label: 'phase (rad)', values: data.phase, colorFn: phaseRGB, invalid: [20,20,20], legend: ['−π', '+π'], grad: 'linear-gradient(90deg,#3987e5,#383835,#e66767)' },
    ];

    rows.forEach(row => {
      const rowEl = document.createElement('div');
      rowEl.className = 'panel-row';
      const label = document.createElement('div');
      label.className = 'panel-label';
      label.textContent = row.label;
      const wrap = document.createElement('div');
      wrap.className = 'panel-canvas-wrap';
      const canvas = drawPanel(row.values, row.colorFn, row.invalid);
      wrap.appendChild(canvas);
      const legendEl = document.createElement('div');
      legendEl.className = 'legend-strip';
      legendEl.innerHTML = `<span class="legend-bar" style="background:${row.grad}"></span><span class="legend-label">${row.legend[0]} → ${row.legend[1]} &middot; hatched = COI-invalid</span>`;
      wrap.appendChild(legendEl);
      rowEl.appendChild(label);
      rowEl.appendChild(wrap);
      container.appendChild(rowEl);
    });
  }
})();
</script>
</body>
</html>