Update viewer (default language, LOD tuning, filter foreground, embeddings text)

index.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Web-graph embedding — 2D map (streaming)</title>
+<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. -->
@@ -129,8 +129,8 @@
 <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 embedding</h1><span class="n" id="nnodes">—</span></div>
-  <p class="lede" id="lede">The link-prediction embedding, projected to 2D and streamed by tile.
+  <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>
@@ -201,13 +201,15 @@
   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 vec2 u_scale; uniform vec2 u_off; uniform float u_pt; 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 = 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;
@@ -227,12 +229,13 @@
   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"),
+    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;
+  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}
@@ -266,8 +269,9 @@
     $("nnodes").textContent = N >= 1e6 ? (N / 1e6).toFixed(N % 1e6 ? 1 : 0) + "M"
       : (N / 1e3).toFixed(0) + "k";
     if (META.lede) $("lede").textContent = META.lede;
+    defaultSet = Math.max(0, META.labelSets.findIndex((l) => l.name === "language"));  // color by language on load
     buildColorBy(); buildSearch();
-    resize(); recolor(0); requestAnimationFrame(loop);
+    resize(); recolor(defaultSet); requestAnimationFrame(loop);
   }
 
   // ── tile loading ────────────────────────────────────────────────────────────────────────────
@@ -335,9 +339,13 @@
   }
 
   // ── LOD + viewport → which tiles are active ─────────────────────────────────────────────────
-  // LOD = degree band shown: overview leads with the top-degree bands; zooming lowers the threshold
-  // so lower-degree hosts fade in uniformly (not per-tile, so no sharp density edges).
-  function lodLevel() { return Math.max(0, Math.min(META.zMax, Math.round(Math.log2(view.s) + 1))); }
+  // 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),
@@ -364,6 +372,18 @@
   }
 
   // ── 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);
@@ -372,15 +392,16 @@
     gl.uniform2f(U.off, -view.cx * view.s * asp, -view.cy * view.s);
     // sub-linear (sqrt) point growth: gaps outpace dots on zoom-in so clusters declutter
     gl.uniform1f(U.pt, Math.max(1.2, dpr * (1.5 + 3.4 * Math.sqrt(view.s))));
+    // 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);
-    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++;
+    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();
@@ -413,7 +434,7 @@
     const seg = $("colorby");
     META.labelSets.forEach((ls, i) => {
       const b = document.createElement("button"); b.textContent = ls.name;
-      b.setAttribute("aria-pressed", i === 0 ? "true" : "false");
+      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);