Progressive globe: source links, filtering, and stats clarity (#53)

rdhyee · claude · web-flow · commit a2c677d19831 · 2026-03-13T08:04:22.000-07:00
* Clarify stats labels: distinguish clusters vs samples, loaded vs in-view Labels now say "Clusters Loaded" / "Samples Loaded" on initial load, and "Clusters in View / Loaded" / "Samples in View" when zoomed in. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Add "View at source" links resolving pids via n2t.net - Sample card shows "View at [Source Name] →" link using n2t.net/{pid} - All 4 sources resolve: OpenContext (ark:/28722), SESAR (IGSN:), GEOME (ark:/21547), Smithsonian (ark:/65665) - Nearby samples list: sample labels are now clickable links to source - Removed generic "Open in Analysis Tool" link Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Add source filter checkboxes to progressive globe Legend dots are now clickable checkboxes that filter data by source (SESAR, OpenContext, GEOME, Smithsonian). Unchecking a source: - Removes its clusters from H3 aggregate views - Excludes its samples from point mode viewport queries - Excludes from nearby samples on cluster click - Visually dims the unchecked legend item Filter is applied via SQL WHERE clause injected into all parquet queries. Changing filters triggers immediate reload of current view. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix review findings: all-unchecked edge case and loadRes race condition - sourceFilterSQL returns AND 1=0 when no sources checked (shows nothing) - Add generation counter to loadRes to discard stale async results - Add missing await on loadViewportSamples in filter handler Addresses Codex and Gemini review feedback on PR #53. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
diff --git a/tutorials/progressive_globe.qmd b/tutorials/progressive_globe.qmd
@@ -69,9 +69,11 @@ Circle size = log(sample count). Color = dominant data source.
     }
     .stat-box .val { font-weight: bold; font-size: 16px; font-family: monospace; display: block; }
     .stat-box .lbl { color: #aaa; font-size: 11px; }
-    .legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
-    .legend-item { display: flex; align-items: center; gap: 3px; }
+    .legend { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
+    .legend-item { display: flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
+    .legend-item.disabled { opacity: 0.3; }
     .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
+    .legend-item input[type="checkbox"] { margin: 0; width: 12px; height: 12px; cursor: pointer; }
     .source-badge { color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; white-space: nowrap; }
     .cluster-card { border-left: 4px solid #ccc; padding: 10px 12px; background: white; border-radius: 0 6px 6px 0; }
     .sample-row { padding: 6px 0; border-bottom: 1px solid #eee; line-height: 1.4; }
@@ -104,11 +106,11 @@ Circle size = log(sample count). Color = dominant data source.
 <div class="stat-box"><span id="sTime" class="val">-</span><span class="lbl">Load Time</span></div>
 </div>
 <div style="margin-top: 8px;">
-<div class="legend">
-<span class="legend-item"><span class="legend-dot" style="background:#3366CC"></span> SESAR</span>
-<span class="legend-item"><span class="legend-dot" style="background:#DC3912"></span> OpenContext</span>
-<span class="legend-item"><span class="legend-dot" style="background:#109618"></span> GEOME</span>
-<span class="legend-item"><span class="legend-dot" style="background:#FF9900"></span> Smithsonian</span>
+<div class="legend" id="sourceFilter">
+<label class="legend-item"><input type="checkbox" value="SESAR" checked><span class="legend-dot" style="background:#3366CC"></span> SESAR</label>
+<label class="legend-item"><input type="checkbox" value="OPENCONTEXT" checked><span class="legend-dot" style="background:#DC3912"></span> OpenContext</label>
+<label class="legend-item"><input type="checkbox" value="GEOME" checked><span class="legend-dot" style="background:#109618"></span> GEOME</label>
+<label class="legend-item"><input type="checkbox" value="SMITHSONIAN" checked><span class="legend-dot" style="background:#FF9900"></span> Smithsonian</label>
 </div>
 </div>
 <div style="margin-top: 8px; display: flex; gap: 8px; align-items: center;">
@@ -152,6 +154,29 @@ SOURCE_NAMES = ({
     GEOME: 'GEOME', SMITHSONIAN: 'Smithsonian'
 })
 
+// === Source URL: resolve pid to original repository ===
+function sourceUrl(pid) {
+    if (!pid) return null;
+    // All sources resolve via n2t.net:
+    // ARK pids (OpenContext, GEOME, Smithsonian) → n2t.net/ark:/...
+    // IGSN pids (SESAR) → n2t.net/IGSN:...
+    return `https://n2t.net/${pid}`;
+}
+
+// === Source Filter: get active sources and build SQL clause ===
+function getActiveSources() {
+    const checks = document.querySelectorAll('#sourceFilter input[type="checkbox"]');
+    return Array.from(checks).filter(c => c.checked).map(c => c.value);
+}
+
+function sourceFilterSQL(col) {
+    const active = getActiveSources();
+    if (active.length === 0) return ' AND 1=0';  // nothing checked = show nothing
+    if (active.length === 4) return '';           // all checked = no filter
+    const list = active.map(s => `'${s}'`).join(',');
+    return ` AND ${col} IN (${list})`;
+}
+
 // === URL State: encode/decode globe state in hash fragment ===
 function parseNum(val, def, min, max) {
     if (val == null) return def;
@@ -246,6 +271,7 @@ function updateSampleCard(sample) {
     const placeStr = Array.isArray(placeParts) && placeParts.length > 0
         ? placeParts.filter(Boolean).join(' › ')
         : '';
+    const srcUrl = sourceUrl(sample.pid);
     el.innerHTML = `<h4>Sample</h4>
         <div class="cluster-card" style="border-left-color: ${color}">
             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
@@ -259,6 +285,7 @@ function updateSampleCard(sample) {
             </div>
             ${placeStr ? `<div style="font-size: 12px; color: #555; margin-bottom: 4px;">${placeStr}</div>` : ''}
             ${sample.result_time ? `<div style="font-size: 11px; color: #888;">Date: ${sample.result_time}</div>` : ''}
+            ${srcUrl ? `<div style="margin-top: 4px;"><a class="detail-link" href="${srcUrl}" target="_blank" rel="noopener noreferrer">View at ${name} →</a></div>` : ''}
             <div id="sampleDetail" class="detail-loading">Loading full details...</div>
         </div>`;
 }
@@ -273,10 +300,7 @@ function updateSampleDetail(detail) {
     const desc = detail.description
         ? (detail.description.length > 300 ? detail.description.slice(0, 300) + '...' : detail.description)
         : '';
-    el.innerHTML = `${desc ? `<div style="font-size: 12px; color: #444; margin-top: 6px; line-height: 1.4;">${desc}</div>` : ''}
-        <div style="margin-top: 8px;">
-            <a class="detail-link" href="zenodo_isamples_analysis.html" target="_blank" rel="noopener noreferrer">Open in Analysis Tool →</a>
-        </div>`;
+    el.innerHTML = `${desc ? `<div style="font-size: 12px; color: #444; margin-top: 6px; line-height: 1.4;">${desc}</div>` : ''}`;
 }
 
 function updateSamples(samples) {
@@ -294,9 +318,10 @@ function updateSamples(samples) {
         const desc = Array.isArray(placeParts) && placeParts.length > 0
             ? placeParts.filter(Boolean).join(' › ')
             : '';
+        const sUrl = sourceUrl(s.pid);
         h += `<div class="sample-row">
             <div style="display: flex; align-items: center; gap: 6px;">
-                <span class="sample-label">${s.label || s.pid}</span>
+                ${sUrl ? `<a class="sample-label" href="${sUrl}" target="_blank" rel="noopener noreferrer" style="color: #1565c0; text-decoration: none;">${s.label || s.pid}</a>` : `<span class="sample-label">${s.label || s.pid}</span>`}
                 <span class="source-badge" style="background: ${color}; font-size: 10px;">${name}</span>
             </div>
             ${desc ? `<div class="sample-desc">${desc}</div>` : ''}
@@ -443,6 +468,7 @@ viewer = {
                     FROM read_parquet('${lite_url}')
                     WHERE latitude BETWEEN ${meta.lat - delta} AND ${meta.lat + delta}
                       AND longitude BETWEEN ${meta.lng - delta} AND ${meta.lng + delta}
+                      ${sourceFilterSQL('source')}
                     LIMIT 30
                 `);
                 updateSamples(samples);
@@ -469,6 +495,7 @@ phase1 = {
         SELECT h3_cell, sample_count, center_lat, center_lng,
                dominant_source, source_count
         FROM read_parquet('${h3_res4_url}')
+        WHERE 1=1${sourceFilterSQL('dominant_source')}
     `);
 
     const scalar = new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.5);
@@ -528,8 +555,9 @@ zoomWatcher = {
     let cachedData = null;    // array of rows
 
     // --- H3 cluster loading (existing logic) ---
+    let loadResGen = 0;  // generation counter to discard stale results
     const loadRes = async (res, url) => {
-        if (loading) return;
+        const gen = ++loadResGen;  // claim a generation
         loading = true;
         updatePhaseMsg(`Loading H3 res${res}...`, 'loading');
 
@@ -539,8 +567,10 @@ zoomWatcher = {
                 SELECT h3_cell, sample_count, center_lat, center_lng,
                        dominant_source, source_count
                 FROM read_parquet('${url}')
+                WHERE 1=1${sourceFilterSQL('dominant_source')}
             `);
 
+            if (gen !== loadResGen) return;  // stale — a newer call superseded this one
             viewer.h3Points.removeAll();
             const scalar = new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.3);
             let total = 0;
@@ -650,6 +680,7 @@ zoomWatcher = {
                 FROM read_parquet('${lite_url}')
                 WHERE latitude BETWEEN ${padded.south} AND ${padded.north}
                   AND longitude BETWEEN ${padded.west} AND ${padded.east}
+                  ${sourceFilterSQL('source')}
                 LIMIT ${POINT_BUDGET}
             `);
             performance.mark('sp-e');
@@ -739,6 +770,23 @@ zoomWatcher = {
         console.log('Exited point mode');
     }
 
+    // --- Source filter change handler ---
+    const resUrls = { 4: h3_res4_url, 6: h3_res6_url, 8: h3_res8_url };
+    document.getElementById('sourceFilter').addEventListener('change', async () => {
+        // Toggle visual state on labels
+        document.querySelectorAll('#sourceFilter .legend-item').forEach(li => {
+            const cb = li.querySelector('input');
+            li.classList.toggle('disabled', !cb.checked);
+        });
+        if (mode === 'cluster') {
+            loading = false;  // allow loadRes to run (gen counter discards stale results)
+            await loadRes(currentRes, resUrls[currentRes]);
+        } else {
+            cachedBounds = null;  // force re-query
+            await loadViewportSamples();
+        }
+    });
+
     // --- Camera change handler ---
     let timer = null;
     viewer.camera.changed.addEventListener(() => {
