feat(weather): add globe wind, observed weather and cyclone context (#617)

Wind (NOAA GFS and ECMWF IFS: animated particles, colour field, a reading at map centre), observed weather (NOAA MRMS radar, GOES and NESDIS infrared clouds, lightning density) on one shared history timeline, NHC and CPHC cyclone advisories with tracks and cones, and a WEATHER panel in the right rail. On 3D Tiles the observed products render as raised shells with a sharper window around the view.

Co-authored-by: Gustavo Beneduzi <[email protected]>
Co-authored-by: Daniel Slay <[email protected]>
Co-authored-by: Rehaan Delmotra <[email protected]>
Co-authored-by: Cursor Agent <[email protected]>

src/ui/layerPanel.test.mjs

@@ -89,3 +89,88 @@ test('partial feed controls distinguish incomplete records from stale data and o
   panel._syncToggleButton(button, layer);
   assert.equal(button.textContent, 'OFF');
 });
+
+test('readout rows contain only toggles and metadata; ordinary rows retain controls', async () => {
+  const { LayerPanel } = await import('./layerPanel.js');
+  const { railFixture } = await import('./railTestFixture.mjs');
+  const f = railFixture();
+  const previousDocument = globalThis.document;
+  globalThis.document = f.document;
+  const ids = [
+    'wind',
+    'weather-radar',
+    'weather-satellite',
+    'weather-lightning',
+    'weather-cyclones',
+    'other',
+  ];
+  let refresh;
+  const layers = ids.map((id) => ({
+    id,
+    name: id,
+    icon: '*',
+    source: 'Source',
+    enabled: true,
+    showInTogglePanel: true,
+    stats: {},
+  }));
+  const calls = [];
+  const panel = new LayerPanel({
+    getLayers: () => layers,
+    isEnabled: () => true,
+    setEnabled: (...args) => calls.push(args),
+    setLayerParams: (...args) => calls.push(args),
+    hasRowControls: () => true,
+    subscribeRowControls: (_id, callback) => {
+      refresh = callback;
+    },
+    getRowControls: (id) => ({
+      readout: id !== 'other',
+      summary: { status: 'Loading' },
+      info: 'Detailed time',
+      chips: [{ id: 'config', label: 'Soft', params: { opacity: 'light' } }],
+      legend: [{ label: 'Rain', color: '#abcdef' }],
+      list: {
+        items: [{ id: 'storm', text: 'Storm', params: { focus: true } }],
+      },
+    }),
+  });
+  try {
+    panel.mount(f.container);
+    for (const id of ids.slice(0, -1)) {
+      const row = f.find((n) => n.dataset.layerId === id);
+      assert.equal(row.children.length, 2);
+      assert.ok(row.querySelector('.data-name'));
+      assert.ok(row.querySelector('.data-toggle-meta'));
+      for (const cls of [
+        'data-toggle-chip',
+        'data-count',
+        'data-toggle-controls',
+        'data-toggle-controls-status',
+        'data-row-list',
+      ])
+        assert.equal(row.querySelector(`.${cls}`), null);
+      row.querySelector('.data-toggle-btn').click();
+    }
+    assert.deepEqual(
+      calls.map(([id]) => id),
+      ids.slice(0, -1),
+    );
+    const ordinary = f.find((n) => n.dataset.layerId === 'other');
+    assert.equal(
+      ordinary.querySelector('.data-toggle-controls-info').textContent,
+      'Detailed time',
+    );
+    assert.ok(ordinary.querySelector('.data-toggle-legend-item'));
+    ordinary.querySelector('.data-toggle-chip').click();
+    assert.deepEqual(calls.at(-1), [
+      'other',
+      { opacity: 'light' },
+      { origin: 'user' },
+    ]);
+    assert.equal(typeof refresh, 'function');
+  } finally {
+    panel.destroy();
+    globalThis.document = previousDocument;
+  }
+});