Spaces:

malteos
/

web-graph-embeddings

Running

File size: 34,818 Bytes

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Web-graph embeddings — 2D map (streaming)</title>
<!-- Streaming (fetch-based) LOD viewer. Reads ./manifest.json + ./t/<id>.bin tiles produced by
     embed_2d_tile.py, lazy-loading tiles by viewport + zoom so the full ~53 M-node map fits without
     inlining anything. Serve its directory over HTTP (python -m http.server) and open this file. -->
<style>
  :root {
    --bg: #0b0e15; --panel: rgba(18,23,34,.80); --solid: #141a26; --ink: #e7ecf5;
    --muted: #8b95a8; --line: rgba(255,255,255,.10); --accent: #56c7f5; --hot: #ffb454;
    --shadow: 0 8px 30px rgba(0,0,0,.45);
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f3f3ee; --panel: rgba(255,255,255,.86); --solid: #ffffff; --ink: #1a2230;
      --muted: #5c6675; --line: rgba(0,0,0,.10); --accent: #0a84c4; --hot: #c9700c;
      --shadow: 0 8px 26px rgba(30,40,60,.16);
    }
  }
  :root[data-theme="dark"] {
    --bg: #0b0e15; --panel: rgba(18,23,34,.80); --solid: #141a26; --ink: #e7ecf5;
    --muted: #8b95a8; --line: rgba(255,255,255,.10); --accent: #56c7f5; --hot: #ffb454;
    --shadow: 0 8px 30px rgba(0,0,0,.45);
  }
  :root[data-theme="light"] {
    --bg: #f3f3ee; --panel: rgba(255,255,255,.86); --solid: #ffffff; --ink: #1a2230;
    --muted: #5c6675; --line: rgba(0,0,0,.10); --accent: #0a84c4; --hot: #c9700c;
    --shadow: 0 8px 26px rgba(30,40,60,.16);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    background: var(--bg); color: var(--ink); overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  #stage { position: fixed; inset: 0; }
  canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

  .panel {
    position: fixed; background: var(--panel); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow);
    backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  }
  #rail { top: 16px; left: 16px; width: 268px; padding: 14px 15px 15px; display: flex;
    flex-direction: column; gap: 13px; }
  .brand { display: flex; align-items: baseline; gap: 8px; }
  .brand h1 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
  .brand .n { margin-left: auto; font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--accent); font-variant-numeric: tabular-nums; }
  .lede { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
  .lede a { color: var(--accent); overflow-wrap: anywhere; word-break: break-word; }
  .grp { display: flex; flex-direction: column; gap: 6px; }
  .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
    font-weight: 600; }
  .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .seg button {
    appearance: none; border: 1px solid var(--line); background: transparent; color: var(--ink);
    padding: 7px 8px; border-radius: 8px; font: 500 12px/1 system-ui, sans-serif; cursor: pointer;
    transition: background .12s, border-color .12s; text-align: left;
  }
  .seg button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .seg button[aria-pressed="true"] {
    border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--ink); font-weight: 600;
  }
  .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .search { position: relative; }
  .search input {
    width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--solid); color: var(--ink); font: 500 12.5px ui-monospace, Menlo, monospace;
  }
  .search input::placeholder { color: var(--muted); }
  .search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
  #hits { list-style: none; margin: 5px 0 0; padding: 0; max-height: 176px; overflow-y: auto;
    border-radius: 8px; }
  #hits li { padding: 6px 9px; border-radius: 6px; cursor: pointer;
    font: 500 12px ui-monospace, Menlo, monospace; color: var(--ink); display: flex; gap: 8px; }
  #hits li:hover, #hits li[aria-selected="true"] { background: color-mix(in srgb, var(--hot) 22%, transparent); }
  #hits li .deg { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

  #legend { left: 16px; bottom: 16px; max-width: 268px; padding: 11px 13px; display: none;
    flex-direction: column; gap: 8px; }
  #legend.on { display: flex; }
  #legend .lbl { margin-bottom: 1px; }
  .swatches { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
  .sw { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink);
    appearance: none; border: 1px solid transparent; background: transparent; text-align: left;
    width: 100%; padding: 3px 6px; border-radius: 6px; cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s; }
  .sw:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .sw[aria-pressed="true"] { border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent); }
  .sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .sw i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
  .sw .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sw .ct { color: var(--muted); font-variant-numeric: tabular-nums;
    font: 500 10px ui-monospace, Menlo, monospace; }

  #tip {
    position: fixed; pointer-events: none; z-index: 40; padding: 8px 10px; border-radius: 9px;
    background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow);
    font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace; max-width: 300px; display: none;
    transform: translate(12px, 12px);
  }
  #tip .host { color: var(--accent); word-break: break-all; font-weight: 600; }
  #tip .row { color: var(--muted); margin-top: 3px; display: flex; gap: 7px; }
  #tip .row b { color: var(--ink); font-weight: 600; }

  #hud { right: 16px; bottom: 16px; padding: 8px 11px; display: flex; gap: 12px; align-items: center;
    font: 500 11px ui-monospace, Menlo, monospace; color: var(--muted); font-variant-numeric: tabular-nums; }
  #hud b { color: var(--ink); font-weight: 600; }
  #hud button { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--muted);
    border-radius: 7px; padding: 4px 8px; cursor: pointer; font: inherit; }
  #hud button:hover { color: var(--ink); border-color: var(--accent); }

  #spin { position: fixed; top: 16px; right: 16px; z-index: 45; width: 17px; height: 17px;
    border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--accent);
    box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s;
    animation: spin .7s linear infinite; }
  #spin.on { opacity: .95; }
  @keyframes spin { to { transform: rotate(360deg); } }

  #err { position: fixed; inset: 0; display: none; place-items: center; padding: 24px; text-align: center; }
  #err div { max-width: 400px; color: var(--muted); font-size: 13px; line-height: 1.5; }
  @media (max-width: 560px) {
    #rail { width: calc(100vw - 32px); }
    #legend { max-width: calc(100vw - 32px); }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } #spin { animation: none; } }
</style>
</head>
<body>
<div id="stage"><canvas id="cv" aria-label="2D map of host embeddings"></canvas></div>

<section id="rail" class="panel" aria-label="Controls">
  <div class="brand"><h1>Web-graph embeddings</h1><span class="n" id="nnodes">—</span></div>
  <p class="lede" id="lede">The link-prediction embeddings, projected to 2D and streamed by tile.
    Structure the model learned is the shape you see. Recolor to ask which properties it separates.</p>
  <div class="grp">
    <span class="lbl">Color by</span>
    <div class="seg" id="colorby" role="group" aria-label="Color by"></div>
  </div>
  <div class="grp search">
    <span class="lbl" id="findlbl">Find a top-20k host</span>
    <input id="q" type="search" placeholder="search hostname…" autocomplete="off" spellcheck="false" />
    <ul id="hits" role="listbox" aria-label="Search results"></ul>
  </div>
</section>

<aside id="legend" class="panel" aria-label="Legend"></aside>
<div id="spin" role="status" aria-label="Loading tiles" aria-hidden="true"></div>
<div id="tip" role="tooltip"></div>
<div id="hud" class="panel">
  <span><b id="fps">—</b> fps</span><span><b id="tiles">0</b> tiles</span>
  <span>zoom <b id="zoom">1.0×</b></span><button id="reset" title="Reset view">reset</button>
</div>
<div id="err"><div id="errmsg"></div></div>

<script>
(function () {
  "use strict";
  const $ = (id) => document.getElementById(id);
  function fail(msg) { $("errmsg").textContent = msg; $("err").style.display = "grid"; }

  const params = new URLSearchParams(location.search);
  const BASE = (params.get("base") || ".").replace(/\/$/, "");   // tile root; default = page dir

  // ── palettes ──────────────────────────────────────────────────────────────────────────────
  // 24-colour categorical palette, greedy farthest-point ordered so the most frequent classes
  // (rank 0,1,2,…) are the most distinct; legible on both dark and light grounds.
  const CAT = [
    [85, 158, 231], [237, 70, 29], [29, 237, 29], [240, 76, 208],
    [190, 211, 105], [29, 237, 153], [142, 76, 240], [133, 237, 29],
    [200, 65, 119], [237, 174, 29], [223, 144, 152], [105, 211, 115],
    [29, 237, 237], [184, 144, 223], [65, 92, 200], [144, 207, 223],
    [200, 119, 65], [90, 226, 185], [65, 200, 65], [29, 133, 237],
    [244, 123, 244], [29, 237, 91], [184, 218, 47], [186, 65, 200],
  ];
  const UNLAB = [110, 120, 135];
  function rampColor(t) {
    t = Math.max(0, Math.min(1, t));
    const stops = [[36, 52, 96], [50, 130, 190], [86, 199, 245], [255, 180, 84]];
    const s = t * (stops.length - 1); const i = Math.floor(s), f = s - i;
    const a = stops[i], b = stops[Math.min(i + 1, stops.length - 1)];
    return [a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f, a[2] + (b[2] - a[2]) * f];
  }
  const DIM = 26;                          // dimmed alpha (~10%) for filtered-out nodes
  let DEG_BUCKETS = 6;
  function degBucket(b) { return Math.min(DEG_BUCKETS - 1, Math.floor(b / (256 / DEG_BUCKETS))); }
  function fmtN(n) {
    n = Math.round(n);
    if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
    if (n >= 1e3) return (n / 1e3).toFixed(n >= 1e4 ? 0 : 1) + "k";
    return "" + n;
  }

  // ── WebGL ─────────────────────────────────────────────────────────────────────────────────
  const cv = $("cv");
  const gl = cv.getContext("webgl", { antialias: true, alpha: false, premultipliedAlpha: false });
  if (!gl) { fail("This viewer needs WebGL, which your browser has disabled."); return; }
  function sh(type, src) {
    const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
    return s;
  }
  const prog = gl.createProgram();
  gl.attachShader(prog, sh(gl.VERTEX_SHADER, `
    attribute vec2 a_xy; attribute vec3 a_col; attribute float a_deg; attribute float a_alpha;
    uniform vec2 u_scale; uniform vec2 u_off; uniform float u_pt; uniform float u_ptMin; uniform float u_matchOnly;
    varying vec3 v_col; varying float v_alpha;
    void main() {
      vec2 p = a_xy * u_scale + u_off;
      gl_Position = vec4(p, 0.0, 1.0);
      gl_PointSize = max(u_ptMin, u_pt * (0.65 + 1.9 * a_deg));
      v_col = a_col; v_alpha = a_alpha;
      // foreground pass: draw only the filter-matched points (alpha==1), cull the dimmed rest
      if (u_matchOnly > 0.5 && a_alpha < 0.99) { gl_PointSize = 0.0; gl_Position = vec4(2.0, 2.0, 2.0, 1.0); }
    }`));
  gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, `
    precision mediump float; varying vec3 v_col; varying float v_alpha; uniform float u_alpha;
    void main() {
      vec2 d = gl_PointCoord - 0.5; float r = dot(d, d);
      if (r > 0.25) discard;
      float a = smoothstep(0.25, 0.14, r);
      gl_FragColor = vec4(v_col, a * u_alpha * v_alpha);
    }`));
  gl.linkProgram(prog);
  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { fail("Shader link failed."); return; }
  gl.useProgram(prog);
  const A = {
    xy: gl.getAttribLocation(prog, "a_xy"), col: gl.getAttribLocation(prog, "a_col"),
    deg: gl.getAttribLocation(prog, "a_deg"), alpha: gl.getAttribLocation(prog, "a_alpha"),
  };
  const U = {
    scale: gl.getUniformLocation(prog, "u_scale"), off: gl.getUniformLocation(prog, "u_off"),
    pt: gl.getUniformLocation(prog, "u_pt"), alpha: gl.getUniformLocation(prog, "u_alpha"),
    ptMin: gl.getUniformLocation(prog, "u_ptMin"), matchOnly: gl.getUniformLocation(prog, "u_matchOnly"),
  };
  gl.enableVertexAttribArray(A.xy); gl.enableVertexAttribArray(A.col);
  gl.enableVertexAttribArray(A.deg); gl.enableVertexAttribArray(A.alpha);

  // ── state ─────────────────────────────────────────────────────────────────────────────────
  let META = null, N = 0, nCat = 0, active = 0, filterVal = -1, defaultSet = 0;
  let view = { s: 0.9, cx: 0, cy: 0 };
  let asp = 1, dpr = Math.min(window.devicePixelRatio || 1, 2), dirty = true;
  const tileMeta = new Map();               // id -> manifest tile {id,z,n,bbox}
  const colorRank = {};                     // setIdx -> [classIdx -> frequency rank] for CAT color
  const ready = new Map();                  // id -> loaded tile object
  let activeIds = new Set();
  const MAXKEEP = 600;                       // evict non-visible tiles beyond this many
  let inflight = 0; const MAXFETCH = 8; const queue = [];
  let pin = null;                            // {id, li} pinned/searched node

  // ── boot: fetch manifest ────────────────────────────────────────────────────────────────────
  fetch(BASE + "/manifest.json").then((r) => {
    if (!r.ok) throw new Error("manifest.json " + r.status);
    return r.json();
  }).then((m) => { META = m; boot(); }).catch((e) =>
    fail("Could not load manifest.json from " + BASE + " — serve this folder over HTTP "
      + "(python -m http.server) and open the page from there. (" + e.message + ")"));

  function boot() {
    N = META.n; DEG_BUCKETS = META.degBuckets || 6;
    nCat = META.labelSets.filter((l) => l.kind === "cat").length;
    META.tiles.forEach((t) => tileMeta.set(t.id, t));
    // colors follow frequency rank (most frequent class -> CAT[0]) so the top classes are distinct
    META.labelSets.forEach((ls, i) => {
      if (ls.kind !== "cat") return;
      const cnt = ls.counts || ls.classes.map(() => 0);
      const rank = new Array(ls.classes.length);
      ls.classes.map((_, k) => k).sort((a, b) => cnt[b] - cnt[a]).forEach((k, pos) => { rank[k] = pos; });
      colorRank[i] = rank;
    });
    $("nnodes").textContent = N >= 1e6 ? (N / 1e6).toFixed(N % 1e6 ? 1 : 0) + "M"
      : (N / 1e3).toFixed(0) + "k";
    if (META.lede) $("lede").innerHTML = META.lede;   // trusted manifest string (may contain a link)
    defaultSet = Math.max(0, META.labelSets.findIndex((l) => l.name === "language"));  // color by language on load
    const nSearch = (META.search || []).length;   // label the search box with its actual coverage
    if (nSearch) $("findlbl").textContent = "Find a top-" + fmtN(nSearch) + " host";
    buildColorBy(); buildSearch();
    resize(); recolor(defaultSet); requestAnimationFrame(loop);
  }

  // ── tile loading ────────────────────────────────────────────────────────────────────────────
  function pump() {
    while (inflight < MAXFETCH && queue.length) { const id = queue.shift(); doLoad(id); }
  }
  function startLoad(id) {
    if (ready.has(id) || queue.includes(id)) return;
    ready.set(id, { id, status: "queued" }); queue.push(id); pump();
  }
  function doLoad(id) {
    const t = ready.get(id); const meta = tileMeta.get(id); if (!t || !meta) return;
    // tiles are sharded into t/<d>/ subdirs (manifest ``d``); fall back to flat t/ for old manifests
    const tdir = "/t/" + (meta.d != null ? meta.d + "/" : "") + id;
    t.status = "loading"; inflight++;
    fetch(BASE + tdir + ".bin").then((r) => r.arrayBuffer()).then((buf) => {
      const K = meta.n; let o = 0;
      t.n = K;
      t.xy = new Int16Array(buf, o, K * 2); o += K * 4;
      t.labs = [];
      for (let c = 0; c < nCat; c++) { t.labs.push(new Uint8Array(buf, o, K)); o += K; }
      t.deg = new Uint8Array(buf, o, K); o += K;
      t.bXY = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, t.bXY);
      gl.bufferData(gl.ARRAY_BUFFER, t.xy, gl.STATIC_DRAW);
      t.bDeg = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, t.bDeg);
      gl.bufferData(gl.ARRAY_BUFFER, t.deg, gl.STATIC_DRAW);
      t.bCol = gl.createBuffer(); t.bAlpha = gl.createBuffer();
      t.names = null;
      colorTile(t); alphaTile(t);
      t.status = "ready"; dirty = true;
      if (META.hasNames) fetch(BASE + tdir + ".nm").then((r) => r.text())
        .then((txt) => { t.names = txt.length ? txt.split("\n") : []; });
    }).catch(() => { ready.delete(id); }).finally(() => { inflight--; pump(); });
  }
  function evictTile(t) {
    if (t.bXY) gl.deleteBuffer(t.bXY); if (t.bDeg) gl.deleteBuffer(t.bDeg);
    if (t.bCol) gl.deleteBuffer(t.bCol); if (t.bAlpha) gl.deleteBuffer(t.bAlpha);
  }

  function colorTile(t) {
    if (t.status === "queued" || !t.deg) return;
    const set = META.labelSets[active], K = t.n, buf = new Uint8Array(K * 3);
    if (set.kind === "degree") {
      for (let i = 0; i < K; i++) { const c = rampColor(t.deg[i] / 255), j = i * 3;
        buf[j] = c[0]; buf[j + 1] = c[1]; buf[j + 2] = c[2]; }
    } else {
      const lab = t.labs[active], rank = colorRank[active];
      for (let i = 0; i < K; i++) { const v = lab[i], c = v === 255 ? UNLAB : CAT[rank[v] % CAT.length];
        const j = i * 3; buf[j] = c[0]; buf[j + 1] = c[1]; buf[j + 2] = c[2]; }
    }
    gl.bindBuffer(gl.ARRAY_BUFFER, t.bCol); gl.bufferData(gl.ARRAY_BUFFER, buf, gl.STATIC_DRAW);
  }
  function alphaTile(t) {
    if (t.status === "queued" || !t.deg) return;
    const set = META.labelSets[active], K = t.n, buf = new Uint8Array(K);
    if (filterVal < 0) {
      buf.fill(255);
    } else if (set.kind === "degree") {
      for (let i = 0; i < K; i++) buf[i] = degBucket(t.deg[i]) === filterVal ? 255 : DIM;
    } else {
      const lab = t.labs[active];
      for (let i = 0; i < K; i++) buf[i] = lab[i] === filterVal ? 255 : DIM;
    }
    gl.bindBuffer(gl.ARRAY_BUFFER, t.bAlpha); gl.bufferData(gl.ARRAY_BUFFER, buf, gl.DYNAMIC_DRAW);
  }

  // ── LOD + viewport → which tiles are active ─────────────────────────────────────────────────
  // LOD = highest degree band shown at the current zoom. The bands themselves are baked into the
  // tiles; this only controls WHEN each appears. LOD_RATE = bands revealed per zoom-doubling (lower
  // ⇒ low-degree hosts hold off until you zoom deeper); LOD_BIAS = bands the overview already shows.
  const LOD_RATE = 0.7, LOD_BIAS = 0.4;
  function lodLevel() {
    return Math.max(0, Math.min(META.zMax, Math.round(Math.log2(view.s) * LOD_RATE + LOD_BIAS)));
  }
  function viewport() {
    const hw = 1 / (view.s * asp), hh = 1 / view.s, m = 0.25;   // 25% prefetch margin
    return [view.cx - hw * (1 + m), view.cy - hh * (1 + m),
            view.cx + hw * (1 + m), view.cy + hh * (1 + m)];
  }
  function updateActive() {
    // Tiles loaded = current LOD band + viewport, ALWAYS (a filter never changes this). Filtering
    // only dims the non-matching points among what this zoom already shows — it must not pull in the
    // low-degree hosts that are meant to stay hidden until you zoom in.
    const maxZ = lodLevel(), vp = viewport(); activeIds = new Set();
    for (const t of META.tiles) {
      if (t.z > maxZ) continue;
      const b = t.bbox;
      if (b[0] < vp[2] && b[2] > vp[0] && b[1] < vp[3] && b[3] > vp[1]) {
        activeIds.add(t.id); if (!ready.has(t.id)) startLoad(t.id);
      }
    }
    if (ready.size > MAXKEEP) {                 // drop non-visible tiles to bound GPU memory
      for (const [id, t] of ready) {
        if (ready.size <= MAXKEEP) break;
        if (!activeIds.has(id) && t.status === "ready") { evictTile(t); ready.delete(id); }
      }
    }
  }

  // ── draw ────────────────────────────────────────────────────────────────────────────────────
  function drawTiles() {                          // bind + draw each ready active tile; returns count
    let drawn = 0;
    for (const id of activeIds) {
      const t = ready.get(id); if (!t || t.status !== "ready") continue;
      gl.bindBuffer(gl.ARRAY_BUFFER, t.bXY); gl.vertexAttribPointer(A.xy, 2, gl.SHORT, true, 0, 0);
      gl.bindBuffer(gl.ARRAY_BUFFER, t.bCol); gl.vertexAttribPointer(A.col, 3, gl.UNSIGNED_BYTE, true, 0, 0);
      gl.bindBuffer(gl.ARRAY_BUFFER, t.bDeg); gl.vertexAttribPointer(A.deg, 1, gl.UNSIGNED_BYTE, true, 0, 0);
      gl.bindBuffer(gl.ARRAY_BUFFER, t.bAlpha); gl.vertexAttribPointer(A.alpha, 1, gl.UNSIGNED_BYTE, true, 0, 0);
      gl.drawArrays(gl.POINTS, 0, t.n); drawn++;
    }
    return drawn;
  }
  function draw() {
    const bg = getComputedStyle(document.body).backgroundColor.match(/\d+/g) || [11, 14, 21];
    gl.clearColor(bg[0] / 255, bg[1] / 255, bg[2] / 255, 1); gl.clear(gl.COLOR_BUFFER_BIT);
    gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.uniform2f(U.scale, view.s * asp, view.s);
    gl.uniform2f(U.off, -view.cx * view.s * asp, -view.cy * view.s);
    // point size = a hump in log-zoom: grow through the hub-only overview (declutter), then SHRINK
    // once LOD reveals the dense low-degree crowd at high zoom (screen density peaks there, so smaller
    // dots keep the map readable). Peaks ~4× zoom, decays toward a 2px floor at 150–500×+.
    const L = Math.log2(view.s);
    gl.uniform1f(U.pt, Math.max(1.2, dpr * (2.0 + 5.0 * Math.exp(-(L - 2.0) * (L - 2.0) / 8.0))));
    // floor on-screen size so points stay visible when zoomed way in: off through the good low/mid
    // zoom (≤~22×), then ramps in to a 10px minimum by ~128× (per-point max, so it lifts only the
    // too-small dots rather than inflating the whole map).
    gl.uniform1f(U.ptMin, dpr * 10 * Math.min(1, Math.max(0, (L - 4.6) / 2.4)));
    // pass 1: whole scene (filtered-out points already dimmed to ~10% via per-vertex alpha)
    gl.uniform1f(U.matchOnly, 0);
    gl.uniform1f(U.alpha, N > 4e6 ? 0.5 : 0.75);
    const drawn = drawTiles();
    // pass 2 (filter active): redraw only the matched points, opaque and on top (foreground)
    if (filterVal >= 0) {
      gl.uniform1f(U.matchOnly, 1);
      gl.uniform1f(U.alpha, N > 4e6 ? 0.9 : 1.0);
      drawTiles();
      gl.uniform1f(U.matchOnly, 0);
    }
    $("tiles").textContent = drawn;
    if (pin) drawPin();
  }
  const bPin = gl.createBuffer();
  function drawPin() {
    const t = ready.get(pin.id); if (!t || t.status !== "ready") return;
    gl.bindBuffer(gl.ARRAY_BUFFER, bPin);
    gl.bufferData(gl.ARRAY_BUFFER, new Int16Array([t.xy[pin.li * 2], t.xy[pin.li * 2 + 1]]), gl.STATIC_DRAW);
    gl.vertexAttribPointer(A.xy, 2, gl.SHORT, true, 0, 0);
    const hot = getComputedStyle(document.body).getPropertyValue("--hot").trim();
    const m = hot.match(/\w\w/g).map((h) => parseInt(h, 16));
    gl.disableVertexAttribArray(A.col); gl.disableVertexAttribArray(A.deg);
    gl.disableVertexAttribArray(A.alpha);
    gl.vertexAttrib3f(A.col, m[0] / 255, m[1] / 255, m[2] / 255);
    gl.vertexAttrib1f(A.deg, 1); gl.vertexAttrib1f(A.alpha, 1);
    gl.uniform1f(U.pt, 16 * dpr); gl.uniform1f(U.alpha, 1);
    gl.drawArrays(gl.POINTS, 0, 1);
    gl.enableVertexAttribArray(A.col); gl.enableVertexAttribArray(A.deg);
    gl.enableVertexAttribArray(A.alpha);
  }

  // ── recolor + legend ────────────────────────────────────────────────────────────────────────
  function recolor(idx) {
    active = idx; filterVal = -1;
    for (const t of ready.values()) { colorTile(t); alphaTile(t); }
    drawLegend(idx); dirty = true;
  }
  function buildColorBy() {
    const seg = $("colorby");
    META.labelSets.forEach((ls, i) => {
      const b = document.createElement("button"); b.textContent = ls.name;
      b.setAttribute("aria-pressed", i === defaultSet ? "true" : "false");
      b.onclick = () => { [...seg.children].forEach((c) => c.setAttribute("aria-pressed", "false"));
        b.setAttribute("aria-pressed", "true"); recolor(i); };
      seg.appendChild(b);
    });
  }
  function degLabel(b) { return Math.round(Math.pow(10, (b / 255) * (META.degLogMax || 4))); }
  function drawLegend(idx) {
    const ls = META.labelSets[idx], el = $("legend");
    el.innerHTML = "";
    const head = document.createElement("span"); head.className = "lbl";
    head.textContent = ls.name + (ls.note ? " · " + ls.note : "");
    el.appendChild(head);
    let entries;
    if (ls.kind === "degree") {
      const w = 256 / DEG_BUCKETS, c = META.degCounts || []; entries = [];
      for (let k = 0; k < DEG_BUCKETS; k++) {
        const lo = degLabel(Math.round(k * w)), hi = degLabel(Math.round(Math.min(255, (k + 1) * w)));
        entries.push({ val: k, color: rampColor((k + 0.5) * w / 255),
          text: fmtN(lo) + "–" + fmtN(hi), count: c[k] || 0 });
      }
    } else {
      const c = ls.counts || ls.classes.map(() => 0), rank = colorRank[idx];
      entries = ls.classes.map((cl, k) => ({ val: k, color: CAT[rank[k] % CAT.length], text: cl,
        count: c[k] || 0 })).filter((e) => e.count > 0).sort((a, b) => b.count - a.count);
      const na = N - c.reduce((s, v) => s + (v || 0), 0);   // unlabelled = 255 sentinel
      if (na > 0) entries.push({ val: 255, color: UNLAB, text: "N/A", count: na });
    }
    const wrap = document.createElement("div"); wrap.className = "swatches";
    entries.forEach((e) => {
      const b = document.createElement("button"); b.type = "button"; b.className = "sw";
      b.setAttribute("aria-pressed", filterVal === e.val ? "true" : "false");
      b.title = "Show only these — click again to clear";
      const c = e.color;
      b.innerHTML = `<i style="background:rgb(${c[0] | 0},${c[1] | 0},${c[2] | 0})"></i>` +
        `<span class="nm">${e.text}</span><span class="ct">${fmtN(e.count)}</span>`;
      b.onclick = () => {
        filterVal = (filterVal === e.val) ? -1 : e.val;
        for (const t of ready.values()) alphaTile(t);
        drawLegend(idx); dirty = true;
      };
      wrap.appendChild(b);
    });
    el.appendChild(wrap); el.classList.add("on");
  }

  // ── hover pick (linear scan over visible tiles) ─────────────────────────────────────────────
  const PICK_PX = 15;
  function pick(px, py) {
    const w = cv.clientWidth, h = cv.clientHeight;
    const ndcx = (px / w) * 2 - 1, ndcy = 1 - (py / h) * 2;
    const wx = ndcx / (view.s * asp) + view.cx, wy = ndcy / view.s + view.cy;
    const sx = wx * 32768, sy = wy * 32768;
    const supx = (2 / w) / (view.s * asp) * 32768, supy = (2 / h) / view.s * 32768;
    let best = null, bd = PICK_PX * PICK_PX;
    for (const id of activeIds) {
      const t = ready.get(id); if (!t || t.status !== "ready") continue;
      const xy = t.xy;
      for (let i = 0; i < t.n; i++) {
        const dxp = (xy[i * 2] - sx) / supx, dyp = (xy[i * 2 + 1] - sy) / supy;
        const d = dxp * dxp + dyp * dyp;
        if (d < bd) { bd = d; best = { id, li: i, t }; }
      }
    }
    return best;
  }
  function hover(px, py) {
    const hit = pick(px, py); const tip = $("tip");
    if (!hit) { tip.style.display = "none"; return; }
    const t = hit.t, i = hit.li;
    const name = t.names ? (t.names[i] || null) : null;
    let rows = "";
    META.labelSets.forEach((ls, k) => {
      if (ls.kind === "degree") return;
      const v = t.labs[k][i], nm = v === 255 ? "—" : ls.classes[v];
      rows += `<span class="row"><b>${ls.name}</b> ${nm}</span>`;
    });
    tip.innerHTML = `<div class="host">${name || "(loading name…)"}</div>` +
      `<span class="row"><b>degree</b> ~${degLabel(t.deg[i])}</span>` + rows;
    tip.style.left = px + "px"; tip.style.top = py + "px"; tip.style.display = "block";
  }

  // ── search (global top-degree index from manifest) ──────────────────────────────────────────
  function buildSearch() {
    const idxList = META.search || [];
    const lo = idxList.map((e) => e[0].toLowerCase());
    const q = $("q"), hits = $("hits");
    q.addEventListener("input", () => {
      const term = q.value.trim().toLowerCase(); hits.innerHTML = "";
      if (!term) return;
      const out = [];
      for (let k = 0; k < idxList.length && out.length < 30; k++)
        if (lo[k].includes(term)) out.push(idxList[k]);
      out.forEach((e) => {
        const li = document.createElement("li"); li.setAttribute("role", "option");
        li.innerHTML = `<span>${e[0]}</span><span class="deg">~${degLabel(e[3])}</span>`;
        li.onclick = () => flyTo(e); hits.appendChild(li);
      });
    });
  }
  function flyTo(entry) {                          // entry = [name, tileId, localIdx, deg8]
    const [, tid, liLocal] = entry; const meta = tileMeta.get(tid); if (!meta) return;
    startLoad(tid);
    const b = meta.bbox, tx = (b[0] + b[2]) / 2, ty = (b[1] + b[3]) / 2;   // fallback: tile centre
    const finish = () => {
      const t = ready.get(tid);
      const px = (t && t.xy) ? t.xy[liLocal * 2] / 32768 : tx;
      const py = (t && t.xy) ? t.xy[liLocal * 2 + 1] / 32768 : ty;
      pin = { id: tid, li: liLocal };
      const s0 = view.s, cx0 = view.cx, cy0 = view.cy, ts = Math.max(40, view.s), t0 = performance.now(), D = 620;
      const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
      (function step(now) {
        const p = reduce ? 1 : Math.min(1, (now - t0) / D), e = 1 - Math.pow(1 - p, 3);
        view.s = s0 + (ts - s0) * e; view.cx = cx0 + (px - cx0) * e; view.cy = cy0 + (py - cy0) * e;
        dirty = true; if (p < 1) requestAnimationFrame(step);
      })(t0);
    };
    const t = ready.get(tid);
    if (t && t.status === "ready") finish();
    else { const iv = setInterval(() => { const tt = ready.get(tid);
      if (tt && tt.status === "ready") { clearInterval(iv); finish(); } }, 60); }
  }

  // ── interaction ─────────────────────────────────────────────────────────────────────────────
  let drag = null;
  cv.addEventListener("pointerdown", (e) => { drag = { x: e.clientX, y: e.clientY }; cv.setPointerCapture(e.pointerId); });
  cv.addEventListener("pointerup", () => { drag = null; });
  cv.addEventListener("pointermove", (e) => {
    if (drag) {
      const w = cv.clientWidth, h = cv.clientHeight;
      view.cx -= ((e.clientX - drag.x) / w) * 2 / (view.s * asp);
      view.cy += ((e.clientY - drag.y) / h) * 2 / view.s;
      drag.x = e.clientX; drag.y = e.clientY; dirty = true; $("tip").style.display = "none";
    } else { hover(e.clientX, e.clientY); }
  });
  cv.addEventListener("pointerleave", () => { $("tip").style.display = "none"; });
  cv.addEventListener("wheel", (e) => {
    e.preventDefault();
    const w = cv.clientWidth, h = cv.clientHeight;
    const ndcx = (e.clientX / w) * 2 - 1, ndcy = 1 - (e.clientY / h) * 2;
    const wx = (ndcx / (view.s * asp)) + view.cx, wy = (ndcy / view.s) + view.cy;
    const f = Math.exp(-e.deltaY * 0.0016); view.s = Math.max(0.15, Math.min(1200, view.s * f));
    view.cx = wx - (ndcx / (view.s * asp)); view.cy = wy - (ndcy / view.s); dirty = true;
  }, { passive: false });
  $("reset").onclick = () => { view = { s: 0.9, cx: 0, cy: 0 }; pin = null; dirty = true; };

  function resize() {
    const w = cv.clientWidth, h = cv.clientHeight;
    cv.width = Math.round(w * dpr); cv.height = Math.round(h * dpr);
    gl.viewport(0, 0, cv.width, cv.height); asp = h / w; dirty = true;
  }
  window.addEventListener("resize", resize);

  // ── render loop ─────────────────────────────────────────────────────────────────────────────
  let fFrames = 0, fT = performance.now(), spinOn = false, spinUntil = 0;
  function syncSpinner(now) {                        // ring visible while any tile is queued/fetching
    const busy = inflight > 0 || queue.length > 0;   // ...held ≥350ms so fast local loads still flash
    if (busy) spinUntil = now + 350;
    const show = busy || now < spinUntil;
    if (show !== spinOn) { spinOn = show; $("spin").classList.toggle("on", show); }
  }
  function loop(now) {
    syncSpinner(now);
    if (dirty) {
      updateActive(); draw(); dirty = false;
      $("zoom").textContent = view.s.toFixed(view.s < 10 ? 1 : 0) + "×";
    }
    fFrames++;
    if (now - fT > 500) { $("fps").textContent = Math.round((fFrames * 1000) / (now - fT)); fFrames = 0; fT = now; }
    requestAnimationFrame(loop);
  }
})();
</script>
</body>
</html>