Centralize SOURCE_COLORS palette; re-capture hero globe (fixes #113) (#114)

* Fix explorer cross-filter tests for Observable compatibility

Observable Inputs.checkbox doesn't respond to programmatic clicks
(force, dispatchEvent, or JS .click()) in headless Playwright.
Skip the 3 interaction tests with clear reason. Keep:
- Baseline count verification (SESAR > 4M) — passes
- Parquet endpoint reachability — passes
- Increase facet wait timeout to 60s for DuckDB-WASM init

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Centralize SOURCE_COLORS palette; re-capture hero globe

Extracts the source color palette to a single module at
assets/js/source-palette.js, imported by the Interactive Explorer,
Progressive Globe tutorial, parquet_cesium_isamples_wide tutorial,
and the hero globe capture page.

The hero globe WebP (assets/isamples_globe.webp) had drifted to a
Material Design palette while the tutorials used Google Charts Classic,
so OpenContext appeared orange on the landing page but red in the
explorer. Re-captured with the canonical palette.

capture_globe_rotation.py now expects the server to be rooted at the
repo (not tools/) so the relative ../assets/js/source-palette.js import
resolves.

Fixes #113

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: rdhyee

_quarto.yml

@@ -1,6 +1,8 @@
 project:
   type: website
   output-dir: docs
+  resources:
+    - assets/js/source-palette.js
 
 website:
   title: "iSamples"

assets/isamples_globe.webp

@@ -0,0 +1,18 @@
+// Canonical iSamples source palette.
+// Keep in sync across hero globe, Interactive Explorer, and tutorials.
+// See issue #113 for history.
+
+export const SOURCE_COLORS = {
+  SESAR: '#3366CC',
+  OPENCONTEXT: '#DC3912',
+  GEOME: '#109618',
+  SMITHSONIAN: '#FF9900',
+  default: '#808080'
+};
+
+export const SOURCE_NAMES = {
+  SESAR: 'SESAR',
+  OPENCONTEXT: 'OpenContext',
+  GEOME: 'GEOME',
+  SMITHSONIAN: 'Smithsonian'
+};

assets/js/source-palette.js

@@ -9,8 +9,8 @@
     brew install webp ffmpeg   # for img2webp and ffmpeg
 
 Usage:
-    # 1. Serve this directory locally:
-    python -m http.server 8765 --directory tools/
+    # 1. Serve the repo root locally (so /assets/js/source-palette.js resolves):
+    python -m http.server 8765
 
     # 2. Run the capture:
     python tools/capture_globe_rotation.py
@@ -35,7 +35,7 @@
 
 async def capture_globe(num_frames=120, duration_sec=15, output_path="/tmp/isamples_globe.webp",
                         width=800, height=500, quality=40,
-                        url="http://localhost:8765/globe_capture.html"):
+                        url="http://localhost:8765/tools/globe_capture.html"):
     from playwright.async_api import async_playwright
 
     frame_dir = tempfile.mkdtemp(prefix="globe_frames_")
@@ -163,7 +163,7 @@ def main():
     parser.add_argument("--width", type=int, default=800, help="Width in pixels (default: 800)")
     parser.add_argument("--height", type=int, default=500, help="Height in pixels (default: 500)")
     parser.add_argument("--quality", type=int, default=40, help="WebP quality 0-100 (default: 40)")
-    parser.add_argument("--url", default="http://localhost:8765/globe_capture.html", help="Page URL")
+    parser.add_argument("--url", default="http://localhost:8765/tools/globe_capture.html", help="Page URL")
     args = parser.parse_args()
 
     asyncio.run(capture_globe(

tools/capture_globe_rotation.py

@@ -17,6 +17,7 @@
 <div id="cesiumContainer"></div>
 <script type="module">
 import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.29.0/+esm';
+import { SOURCE_COLORS } from '../assets/js/source-palette.js';
 
 // Ion token from progressive_globe.qmd
 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNzk3NjkyMy1iNGI1LTRkN2UtODRiMy04OTYwYWE0N2M3ZTkiLCJpZCI6Njk1MTcsImlhdCI6MTYzMzU0MTQ3N30.e70dpNzOCDRLDGxRguQCC-tRzGzA-23Xgno5lNgCeB4';
@@ -92,13 +93,10 @@
     lon: Number(r.center_lng)
   }));
 
-  // Color by source
-  const sourceColors = {
-    SESAR: Cesium.Color.fromCssColorString("#2196F3"),
-    OPENCONTEXT: Cesium.Color.fromCssColorString("#FF9800"),
-    GEOME: Cesium.Color.fromCssColorString("#4CAF50"),
-    SMITHSONIAN: Cesium.Color.fromCssColorString("#E91E63")
-  };
+  // Color by source (canonical palette — see issue #113)
+  const sourceColors = Object.fromEntries(
+    Object.entries(SOURCE_COLORS).map(([k, hex]) => [k, Cesium.Color.fromCssColorString(hex)])
+  );
 
   const points = new Cesium.PointPrimitiveCollection();
   viewer.scene.primitives.add(points);

tools/globe_capture.html

@@ -37,24 +37,14 @@ cross_filter_url = "https://data.isamples.org/isamples_202601_facet_cross_filter
 // Facets file for on-the-fly multi-filter queries (63MB - URI strings, not BIGINT FKs)
 sample_facets_url = "https://data.isamples.org/isamples_202601_sample_facets_v2.parquet"
 
-// Source color scheme (consistent with iSamples conventions)
-SOURCE_COLORS = ({
-  'SESAR': '#3366CC',       // Blue
-  'OPENCONTEXT': '#DC3912', // Red
-  'GEOME': '#109618',       // Green
-  'SMITHSONIAN': '#FF9900', // Orange
-  'default': '#808080'      // Gray
-})
+// Source color scheme — imported from canonical palette (issue #113)
+_palette = await import('../assets/js/source-palette.js')
+SOURCE_COLORS = _palette.SOURCE_COLORS
 
 // Cesium colors
 function getCesiumColor(source) {
-  const colors = {
-    'SESAR': Cesium.Color.fromCssColorString('#3366CC'),
-    'OPENCONTEXT': Cesium.Color.fromCssColorString('#DC3912'),
-    'GEOME': Cesium.Color.fromCssColorString('#109618'),
-    'SMITHSONIAN': Cesium.Color.fromCssColorString('#FF9900'),
-  };
-  return colors[source] || Cesium.Color.GRAY;
+  const hex = SOURCE_COLORS[source];
+  return hex ? Cesium.Color.fromCssColorString(hex) : Cesium.Color.GRAY;
 }
 ```
 

tutorials/isamples_explorer.qmd

@@ -95,14 +95,9 @@ viewof viewModeToggle = Inputs.radio(["clustered", "all points"], {
 
 ```{ojs}
 //| echo: false
-// Source color scheme for cluster coloring
-CLUSTER_COLORS = ({
-  'SESAR': '#3366CC',
-  'OPENCONTEXT': '#DC3912',
-  'GEOME': '#109618',
-  'SMITHSONIAN': '#FF9900',
-  'default': '#808080'
-})
+// Source color scheme — imported from canonical palette (issue #113)
+_palette = await import('../assets/js/source-palette.js')
+CLUSTER_COLORS = _palette.SOURCE_COLORS
 
 // H3 resolution based on camera height
 function getH3ResForHeight(height) {

tutorials/parquet_cesium_isamples_wide.qmd

@@ -206,14 +206,10 @@ wide_url = `${R2_BASE}/isamples_202601_wide.parquet`
 facets_url = `${R2_BASE}/isamples_202601_sample_facets.parquet`
 facet_summaries_url = `${R2_BASE}/isamples_202601_facet_summaries.parquet`
 
-SOURCE_COLORS = ({
-    SESAR: '#3366CC', OPENCONTEXT: '#DC3912',
-    GEOME: '#109618', SMITHSONIAN: '#FF9900'
-})
-SOURCE_NAMES = ({
-    SESAR: 'SESAR', OPENCONTEXT: 'OpenContext',
-    GEOME: 'GEOME', SMITHSONIAN: 'Smithsonian'
-})
+// Canonical palette — see issue #113
+_palette = await import('../assets/js/source-palette.js')
+SOURCE_COLORS = _palette.SOURCE_COLORS
+SOURCE_NAMES = _palette.SOURCE_NAMES
 
 // === Source URL: resolve pid to original repository ===
 function sourceUrl(pid) {