viewer: tile-loading spinner + zoom-adaptive point sizing

index.html

@@ -117,13 +117,20 @@
     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; } }
+  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } #spin { animation: none; } }
 </style>
 </head>
 <body>
@@ -145,6 +152,7 @@
 </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>
@@ -202,12 +210,12 @@
   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_matchOnly;
+    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 = u_pt * (0.65 + 1.9 * a_deg);
+      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); }
@@ -230,7 +238,7 @@
   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"),
+    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);
@@ -393,8 +401,15 @@
     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);
-    // 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))));
+    // 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);
@@ -591,8 +606,15 @@
   window.addEventListener("resize", resize);
 
   // ── render loop ─────────────────────────────────────────────────────────────────────────────
-  let fFrames = 0, fT = performance.now();
+  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) + "×";