UI polish: script.js

script.js

@@ -13,20 +13,20 @@ const PLOTLY_CMAP = {
   magma:['Magma',false], YlGnBu:['YlGnBu',false], RdBu:['RdBu',false],
   RdBu_r:['RdBu',true],
 };
-const R = 1.0;           // sphere radius
-const COAST_R = 1.004;   // coastline shell, just above the surface
-const LON0 = -90;        // deg offset so lon 0° faces the default camera
+const R = 1.0;
+const COAST_R = 1.010;   // coastline shell above the surface (higher = fewer occlusion gaps)
 const DEG = Math.PI / 180;
 
 const app = {
   index:null, coast:null, meta:null,
-  truthF32:null,                          // base file: denorm ground truth (T·nLon·nLat)
-  meanCache:{}, curMean:null,             // n -> denorm mean field; active one
-  loadingN:0,                             // ensemble size currently being fetched
-  meanFrames:null, rightFrames:null,      // per-t 2D surfacecolor (nLat × W)
-  geom:null, coastXYZ:null,               // shared sphere mesh + coastline lines
+  truthF32:null,
+  meanCache:{}, curMean:null,
+  loadingN:0,
+  meanFrames:null, rightFrames:null,
+  geom:null, coastXYZ:null,
   M:0, T:0, nLon:0, nLat:0, W:0,
   vmean:0, vstd:1,
+  LON0: -100,                             // default: ~10°E (Europe); overridden by geolocation
   rightMode:'truth', n:16, t:0, dragging:false,
   curHash:null, curCache:null,
   currentIC:null, currentVar:null, playing:false, timer:null, autoplay:true,
@@ -43,12 +43,26 @@ function h2f(h) {
 const _MON = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 function fmtIC(s){ const [y,m] = s.split('-'); return `${_MON[+m-1]} ${y}`; }  // Feb 2016
 
+// Try to get user longitude for globe centering; falls back to 10°E within 500 ms.
+function getInitialLon() {
+  return new Promise(resolve => {
+    if (!navigator.geolocation) { resolve(10); return; }
+    navigator.geolocation.getCurrentPosition(
+      pos => resolve(pos.coords.longitude),
+      ()  => resolve(10),
+      { timeout: 500, maximumAge: Infinity }
+    );
+  });
+}
+
 async function init() {
-  const [index, coast] = await Promise.all([
+  const [index, coast, userLon] = await Promise.all([
     fetch(INDEX_URL).then(r => r.json()),
     fetch(COAST_URL).then(r => r.json()),
+    getInitialLon(),
   ]);
   app.index = index; app.coast = coast;
+  app.LON0 = -90 - userLon;
 
   buildTokens('ic-tokens',
     app.index.ics.map(ic => ({ label: fmtIC(ic.init_time), val: ic.hash })),
@@ -84,13 +98,28 @@ function markActive(id, val) {
     t.classList.toggle('active', t.dataset.val === val));
 }
 
-// One unit-sphere mesh (nLat × W, W = nLon+1 wrap column) shared by both
-// scenes, and the coastline polylines as sphere xyz. Rotation is the 3D
-// camera (synced across the two scenes), so geometry is static.
+// Subdivide polyline segments longer than maxDeg° to keep coastlines on the
+// sphere surface (long chords dip below the surface and get occluded).
+function interpPoly(poly, maxDeg = 3) {
+  const out = [];
+  for (let i = 0; i < poly.length; i++) {
+    out.push(poly[i]);
+    if (i < poly.length - 1) {
+      const [lo0, la0] = poly[i], [lo1, la1] = poly[i + 1];
+      const d = Math.sqrt((lo1-lo0)**2 + (la1-la0)**2);
+      const n = Math.ceil(d / maxDeg);
+      for (let k = 1; k < n; k++)
+        out.push([lo0 + (lo1-lo0)*k/n, la0 + (la1-la0)*k/n]);
+    }
+  }
+  return out;
+}
+
 function buildGeometry() {
   const lon = app.index.lon, lat = app.index.lat;
   const nLon = lon.length, nLat = lat.length, W = nLon + 1;
   app.nLon = nLon; app.nLat = nLat; app.W = W;
+  const L0 = app.LON0;
 
   const mk = () => Array.from({ length: nLat }, () => new Float32Array(W));
   const x = mk(), y = mk(), z = mk();
@@ -98,7 +127,7 @@ function buildGeometry() {
     const clat = Math.cos(lat[j] * DEG), slat = Math.sin(lat[j] * DEG);
     for (let i = 0; i < W; i++) {
       const lonDeg = (i < nLon ? lon[i] : lon[0] + 360);
-      const lr = (lonDeg + LON0) * DEG;
+      const lr = (lonDeg + L0) * DEG;
       x[j][i] = R * clat * Math.cos(lr);
       y[j][i] = R * clat * Math.sin(lr);
       z[j][i] = R * slat;
@@ -108,8 +137,8 @@ function buildGeometry() {
 
   const X = [], Y = [], Z = [];
   for (const poly of app.coast) {
-    for (const [lo, la] of poly) {
-      const lr = (lo + LON0) * DEG, clat = Math.cos(la * DEG);
+    for (const [lo, la] of interpPoly(poly, 3)) {
+      const lr = (lo + L0) * DEG, clat = Math.cos(la * DEG);
       X.push(COAST_R * clat * Math.cos(lr));
       Y.push(COAST_R * clat * Math.sin(lr));
       Z.push(COAST_R * Math.sin(la * DEG));
@@ -249,18 +278,14 @@ function sceneCfg(domainX) {
   };
 }
 
-// Fixed (paper-anchored) titles — NOT scene annotations, so they don't rotate
-// with the globe.
-function titleAnn(x, text) {
-  return { x, y:1.0, xref:'paper', yref:'paper', text, showarrow:false,
-           xanchor:'center', yanchor:'top',
-           font:{ family:'IBM Plex Mono, monospace', size:16, color:'#aab0bb' } };
-}
-
 function drawFigure() {
   const m = app.meta, g = app.geom, c = app.coastXYZ, { t } = app;
   const [cmap, rev] = PLOTLY_CMAP[m.cmap] || ['Viridis', false];
   const diff = app.rightMode === 'diff';
+
+  const rl = document.getElementById('right-label');
+  if (rl) rl.textContent = diff ? 'ERROR (MEAN − TRUTH)' : 'ERA5 — GROUND TRUTH';
+
   const light = { ambient:0.92, diffuse:0.32, specular:0.04, roughness:0.9, fresnel:0.0 };
   const lightpos = { x:-5000, y:-8000, z:12000 };
   const surf = (scene, color, scl, reverse, cmin, cmax) => ({
@@ -270,7 +295,7 @@ function drawFigure() {
   });
   const coast = (scene) => ({
     type:'scatter3d', mode:'lines', scene, x:c.x, y:c.y, z:c.z,
-    line:{ color:'#aeb4bf', width:1.4 }, opacity:0.9,
+    line:{ color:'#c8cdd6', width:2.5 }, opacity:1,
     hoverinfo:'skip', showlegend:false,
   });
 
@@ -283,15 +308,11 @@ function drawFigure() {
     coast('scene2'),
   ];
   const layout = {
-    autosize:true, margin:{ l:0, r:0, t:8, b:0 },
+    autosize:true, margin:{ l:0, r:0, t:0, b:0 },
     paper_bgcolor:'rgba(0,0,0,0)', font:{ family:'Inter, sans-serif' },
     showlegend:false,
     scene:  sceneCfg([0.055, 0.43]),
     scene2: sceneCfg([0.57, 0.945]),
-    annotations:[
-      titleAnn(0.2425, 'MOSAIC — ENSEMBLE MEAN'),
-      titleAnn(0.7575, diff ? 'ERROR (MEAN − TRUTH)' : 'ERA5 — GROUND TRUTH'),
-    ],
   };
 
   Plotly.newPlot('plot', data, layout,