fix(energy): wire energy variant atlas panels and renewable coverage (koala73#3445)

* fix(energy): wire energy variant atlas panels and renewable coverage

* fix(settings): scope happy-only categories so energy variant doesn't render "Happy Planet" pill

Two follow-ups from review of koala73#3445:

- panels.ts: tag `happyNews` and `happyPlanet` with `variants: ['happy']`.
  ENERGY_PANELS now enables `renewable`, so without this the
  `categoryMatchesVariant` filter passed `happyPlanet` through (its
  `panelKeys` includes `renewable`) and energy users saw a "Happy Planet"
  category pill containing only the Renewable Energy toggle.

- panel-layout.ts: drop the `&& !this.ctx.panels['renewable']` clause on
  the shared lazyPanel guard. `lazyPanel` writes `this.ctx.panels[key]`
  only after the dynamic-import promise resolves, so the check never
  protects against a synchronous double-call — and `lazyPanel` already
  calls `shouldCreatePanel(key)` internally.

---------

Co-authored-by: Elie Habib <elie.habib@gmail.com>

Author: FayezBast

e2e/map-harness.spec.ts

@@ -11,13 +11,13 @@ type OverlaySnapshot = {
 
 type VisualScenarioSummary = {
   id: string;
-  variant: 'both' | 'full' | 'tech' | 'finance';
+  variant: 'both' | 'full' | 'tech' | 'finance' | 'energy';
 };
 
 type HarnessWindow = Window & {
   __mapHarness?: {
     ready: boolean;
-    variant: 'full' | 'tech' | 'finance';
+    variant: 'full' | 'tech' | 'finance' | 'energy';
     seedAllDynamicData: () => void;
     setProtestsScenario: (scenario: 'alpha' | 'beta') => void;
     setPulseProtestsScenario: (
@@ -126,6 +126,27 @@ const EXPECTED_FINANCE_DECK_LAYERS = [
   'gulf-investments-layer',
 ];
 
+const EXPECTED_ENERGY_DECK_LAYERS = [
+  'pipelines-layer',
+  'storage-facilities-layer',
+  'fuel-shortages-layer',
+  'live-tankers-layer',
+  'ais-density-layer',
+  'ais-disruptions-layer',
+  'commodity-hubs-layer',
+  'commodity-ports-layer',
+  'trade-routes-layer',
+  'trade-chokepoints-layer',
+  'waterways-layer',
+  'weather-layer',
+  'outages-layer',
+  'earthquakes-layer',
+  'natural-events-layer',
+  'minerals-layer',
+  'fires-layer',
+  'climate-heatmap-layer',
+];
+
 const waitForHarnessReady = async (
   page: import('@playwright/test').Page
 ): Promise<void> => {
@@ -177,6 +198,8 @@ test.describe('DeckGL map harness', () => {
 
     const expectedVariant = process.env.VITE_VARIANT === 'tech'
       ? 'tech'
+      : process.env.VITE_VARIANT === 'energy'
+      ? 'energy'
       : process.env.VITE_VARIANT === 'finance'
       ? 'finance'
       : 'full';
@@ -232,6 +255,8 @@ test.describe('DeckGL map harness', () => {
 
     const expectedDeckLayers = variant === 'tech'
       ? EXPECTED_TECH_DECK_LAYERS
+      : variant === 'energy'
+      ? EXPECTED_ENERGY_DECK_LAYERS
       : variant === 'finance'
       ? EXPECTED_FINANCE_DECK_LAYERS
       : EXPECTED_FULL_DECK_LAYERS;
@@ -434,6 +459,10 @@ test.describe('DeckGL map harness', () => {
       const w = window as HarnessWindow;
       return w.__mapHarness?.variant ?? 'full';
     });
+    // Energy currently reuses the shared "both" visual scenarios; until we
+    // record Atlas-only golden scenes, compare those shared scenarios against
+    // the existing full baselines rather than silently coercing the runtime.
+    const screenshotVariant = variant === 'energy' ? 'full' : variant;
 
     const scenarios = await page.evaluate(() => {
       const w = window as HarnessWindow;
@@ -449,7 +478,7 @@ test.describe('DeckGL map harness', () => {
       await test.step(`visual baseline: ${scenario.id}`, async () => {
         await prepareVisualScenario(page, scenario.id);
         await expect(mapWrapper).toHaveScreenshot(
-          `layer-${variant}-${scenario.id}.png`,
+          `layer-${screenshotVariant}-${scenario.id}.png`,
           {
             animations: 'disabled',
             caret: 'hide',

src/App.ts

@@ -1569,6 +1569,48 @@ export class App {
       () => this.isPanelNearViewport('oil-inventories')
     );
 
+    this.refreshScheduler.scheduleRefresh(
+      'pipeline-status',
+      () => (this.state.panels['pipeline-status'] as PipelineStatusPanel).fetchData(),
+      REFRESH_INTERVALS.pipelineStatus,
+      () => this.isPanelNearViewport('pipeline-status')
+    );
+
+    this.refreshScheduler.scheduleRefresh(
+      'storage-facility-map',
+      () => (this.state.panels['storage-facility-map'] as StorageFacilityMapPanel).fetchData(),
+      REFRESH_INTERVALS.storageFacilityMap,
+      () => this.isPanelNearViewport('storage-facility-map')
+    );
+
+    this.refreshScheduler.scheduleRefresh(
+      'fuel-shortages',
+      () => (this.state.panels['fuel-shortages'] as FuelShortagePanel).fetchData(),
+      REFRESH_INTERVALS.fuelShortages,
+      () => this.isPanelNearViewport('fuel-shortages')
+    );
+
+    this.refreshScheduler.scheduleRefresh(
+      'energy-disruptions',
+      () => (this.state.panels['energy-disruptions'] as EnergyDisruptionsPanel).fetchData(),
+      REFRESH_INTERVALS.energyDisruptions,
+      () => this.isPanelNearViewport('energy-disruptions')
+    );
+
+    this.refreshScheduler.scheduleRefresh(
+      'energy-risk-overview',
+      () => (this.state.panels['energy-risk-overview'] as EnergyRiskOverviewPanel).fetchData(),
+      REFRESH_INTERVALS.energyRiskOverview,
+      () => this.isPanelNearViewport('energy-risk-overview')
+    );
+
+    this.refreshScheduler.scheduleRefresh(
+      'chokepoint-strip',
+      () => (this.state.panels['chokepoint-strip'] as ChokepointStripPanel).fetchData(),
+      REFRESH_INTERVALS.chokepointStrip,
+      () => this.isPanelNearViewport('chokepoint-strip')
+    );
+
     this.refreshScheduler.scheduleRefresh(
       'climate-news',
       () => (this.state.panels['climate-news'] as ClimateNewsPanel).fetchData(),

src/app/data-loader.ts

@@ -501,12 +501,6 @@ export class DataLoaderManager implements AppModule {
           task: runGuarded('species', () => this.loadSpeciesData()),
         });
       }
-      if (shouldLoad('renewable')) {
-        tasks.push({
-          name: 'renewable',
-          task: runGuarded('renewable', () => this.loadRenewableData()),
-        });
-      }
       tasks.push({
         name: 'happinessMap',
         task: runGuarded('happinessMap', async () => {
@@ -523,6 +517,14 @@ export class DataLoaderManager implements AppModule {
       });
     }
 
+    // Renewable panel is shared by happy and energy variants.
+    if (shouldLoad('renewable')) {
+      tasks.push({
+        name: 'renewable',
+        task: runGuarded('renewable', () => this.loadRenewableData()),
+      });
+    }
+
     if (shouldLoad('giving')) {
       tasks.push({
         name: 'giving',

src/app/panel-layout.ts

@@ -1330,6 +1330,10 @@ export class PanelLayoutManager implements AppModule {
         }),
       );
 
+    }
+
+    // Renewable Energy is shared by happy and energy variants.
+    if (this.shouldCreatePanel('renewable')) {
       this.lazyPanel('renewable', () =>
         import('@/components/RenewableEnergyPanel').then(m => {
           const p = new m.RenewableEnergyPanel();

src/components/UnifiedSettings.ts

@@ -598,13 +598,18 @@ export class UnifiedSettings {
     });
   }
 
+  private categoryMatchesVariant(catDef: { variants?: string[] }): boolean {
+    return !catDef.variants || catDef.variants.includes(SITE_VARIANT);
+  }
+
   private getAvailablePanelCategories(): Array<{ key: string; label: string }> {
     const settings = this.config.getPanelSettings();
     const categories: Array<{ key: string; label: string }> = [
       { key: 'all', label: t('header.sourceRegionAll') }
     ];
 
     for (const [catKey, catDef] of Object.entries(PANEL_CATEGORY_MAP)) {
+      if (!this.categoryMatchesVariant(catDef)) continue;
       const hasEnabledPanel = catDef.panelKeys.some(pk => settings[pk]?.enabled);
       if (hasEnabledPanel) {
         categories.push({ key: catKey, label: t(catDef.labelKey) });
@@ -623,6 +628,9 @@ export class UnifiedSettings {
     if (this.activePanelCategory !== 'all') {
       const catDef = PANEL_CATEGORY_MAP[this.activePanelCategory];
       if (catDef) {
+        if (!this.categoryMatchesVariant(catDef)) {
+          return [];
+        }
         const allowed = new Set(catDef.panelKeys);
         entries = entries.filter(([key]) => allowed.has(key));
       }

src/config/panels.ts

@@ -1325,10 +1325,12 @@ export const PANEL_CATEGORY_MAP: Record<string, { labelKey: string; panelKeys: s
   happyNews: {
     labelKey: 'header.panelCatHappyNews',
     panelKeys: ['positive-feed', 'progress', 'counters', 'spotlight', 'breakthroughs', 'digest'],
+    variants: ['happy'],
   },
   happyPlanet: {
     labelKey: 'header.panelCatHappyPlanet',
     panelKeys: ['species', 'renewable', 'giving'],
+    variants: ['happy'],
   },
 };
 

src/config/variants/base.ts

@@ -58,6 +58,12 @@ export const REFRESH_INTERVALS = {
   hormuzTracker: 60 * 60 * 1000, // 1h — data updates daily
   hyperliquidFlow: 5 * 60 * 1000, // 5min — matches Railway seed cadence
   energyCrisis: 6 * 60 * 60 * 1000, // 6h — policy data updates infrequently
+  pipelineStatus: 24 * 60 * 60 * 1000, // curated registry reseeds weekly; daily poll keeps long-lived sessions fresh
+  storageFacilityMap: 24 * 60 * 60 * 1000, // curated registry reseeds weekly; daily poll keeps long-lived sessions fresh
+  fuelShortages: 60 * 60 * 1000, // active shortage alerts can change intra-day
+  energyDisruptions: 60 * 60 * 1000, // disruption log is low-volume but needs intra-day freshness
+  energyRiskOverview: 15 * 60 * 1000, // mixed market + supply-chain overview; refresh more often than the underlying weekly registries
+  chokepointStrip: 90 * 60 * 1000, // matches chokepoint client cache TTL / freshness budget
   macroTiles: 30 * 60 * 1000,
   fsi: 30 * 60 * 1000,
   yieldCurve: 30 * 60 * 1000,