Add Data Library: live-fetched dataset, tile and pack layers

scripts/qa-data-library.mjs

@@ -0,0 +1,636 @@
+#!/usr/bin/env node
+/**
+ * Data Library live gate. Run against this candidate's dev or preview server:
+ *
+ *   npm run qa:data-library -- --url http://localhost:4173
+ *
+ * Every upstream a library entry names is answered from fixtures in the
+ * browser (EONET, the EIA ArcGIS pages, the GIBS tiles and the proxied
+ * volcano route), so the gate is deterministic and offline apart from the
+ * app itself. It drives the real panel and dialog: Browse opens a modal,
+ * Add registers a layer under the Library heading and switches it on, the
+ * share link carries `lib=`, a reload restores the selection, Escape and
+ * clean view close the dialog, and Remove destroys the layer.
+ */
+import assert from 'node:assert/strict';
+
+const { default: puppeteer } = await import('puppeteer');
+const args = process.argv.slice(2);
+const urlIndex = args.indexOf('--url');
+const base = urlIndex >= 0 ? args[urlIndex + 1] : 'http://localhost:4173';
+
+const point = (lon, lat, properties) => ({
+  type: 'Feature',
+  geometry: { type: 'Point', coordinates: [lon, lat] },
+  properties,
+});
+const collection = (features, extra = {}) =>
+  JSON.stringify({ type: 'FeatureCollection', features, ...extra });
+// 1×1 transparent PNG.
+const PNG = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
+  'base64',
+);
+
+const seen = {
+  eonet: 0,
+  arcgisPages: [],
+  tiles: 0,
+  proxied: 0,
+  structureBoxes: [],
+};
+function fixtureFor(url) {
+  const cors = { 'Access-Control-Allow-Origin': '*' };
+  if (url.hostname === 'eonet.gsfc.nasa.gov') {
+    seen.eonet += 1;
+    return {
+      status: 200,
+      headers: cors,
+      contentType: 'application/json',
+      body: collection([
+        point(-120, 38, {
+          title: 'Fixture Fire',
+          date: '2026-10-20T00:00:00Z',
+        }),
+        point(140, 35, {
+          title: 'Fixture Storm',
+          date: '2026-10-19T00:00:00Z',
+        }),
+      ]),
+    };
+  }
+  if (
+    url.hostname === 'services2.arcgis.com' &&
+    url.pathname.includes('USA_Structures')
+  ) {
+    seen.structureBoxes.push(url.searchParams.get('geometry'));
+    const square = (lon, lat) => ({
+      type: 'Feature',
+      geometry: {
+        type: 'Polygon',
+        coordinates: [
+          [
+            [lon, lat],
+            [lon + 0.0004, lat],
+            [lon + 0.0004, lat + 0.0003],
+            [lon, lat + 0.0003],
+            [lon, lat],
+          ],
+        ],
+      },
+      properties: { OCC_CLS: 'Government', HEIGHT: 30 },
+    });
+    return {
+      status: 200,
+      headers: cors,
+      contentType: 'application/json',
+      body: collection([
+        square(-77.035, 38.892),
+        square(-77.03, 38.893),
+        square(-77.025, 38.894),
+      ]),
+    };
+  }
+  if (url.hostname === 'services2.arcgis.com') {
+    const offset = Number(url.searchParams.get('resultOffset'));
+    seen.arcgisPages.push(offset);
+    const features =
+      offset === 0
+        ? [
+            point(-118.9, 47.9, { Plant_Name: 'Fixture Dam', Total_MW: 6809 }),
+            point(-112.9, 33.4, {
+              Plant_Name: 'Fixture Nuclear',
+              Total_MW: 3937,
+            }),
+          ]
+        : [point(-97.6, 28.8, { Plant_Name: 'Fixture Coast', Total_MW: 2560 })];
+    return {
+      status: 200,
+      headers: cors,
+      contentType: 'application/json',
+      body: collection(features, {
+        properties: { exceededTransferLimit: offset === 0 },
+      }),
+    };
+  }
+  if (url.hostname === 'gibs.earthdata.nasa.gov') {
+    seen.tiles += 1;
+    return { status: 200, headers: cors, contentType: 'image/png', body: PNG };
+  }
+  if (url.pathname === '/api/library/data/gvp-holocene-volcanoes') {
+    seen.proxied += 1;
+    return {
+      status: 200,
+      contentType: 'application/json',
+      body: collection([
+        point(-121.76, 46.85, { name: 'Fixture Volcano', __gevDetails: [] }),
+      ]),
+    };
+  }
+  return null;
+}
+
+const browser = await puppeteer.launch({
+  headless: true,
+  executablePath:
+    process.env.PUPPETEER_EXECUTABLE_PATH || (await puppeteer.executablePath()),
+  defaultViewport: { width: 1440, height: 900 },
+  protocolTimeout: 300_000,
+  args: ['--no-sandbox', '--use-gl=angle', '--use-angle=swiftshader'],
+});
+const errors = [];
+let count = 0;
+const step = async (label, fn) => {
+  await fn();
+  console.log(`ok ${++count} ${label}`);
+};
+
+async function open(page, hash = '') {
+  await page.goto(`${base}/${hash}`, { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(
+    () =>
+      window.__gevDataLibrary?.library.ready &&
+      window.__godsEyeView?.dataManager &&
+      document.getElementById('loading-screen')?.classList.contains('hidden'),
+    { timeout: 180_000 },
+  );
+}
+
+const libraryRows = (page) =>
+  page.evaluate(() =>
+    [...document.querySelectorAll('#data-toggles [data-library-entry]')].map(
+      (row) => ({
+        id: row.dataset.libraryEntry,
+        on: row.querySelector('.data-toggle-btn')?.classList.contains('active'),
+        count: row.querySelector('.data-count')?.textContent,
+      }),
+    ),
+  );
+
+try {
+  const page = await browser.newPage();
+  page.on('console', (message) => {
+    if (message.type() === 'error' && /Library|library/.test(message.text()))
+      errors.push(message.text());
+  });
+  page.on('pageerror', (error) => errors.push(String(error)));
+  await page.setRequestInterception(true);
+  page.on('request', (request) => {
+    const fixture = fixtureFor(new URL(request.url()));
+    if (fixture) request.respond(fixture);
+    else request.continue();
+  });
+  await page.evaluateOnNewDocument(() => {
+    try {
+      // Start empty once; the reload step needs what this run stored.
+      if (!sessionStorage.getItem('qa-data-library')) {
+        localStorage.removeItem('gev:library:v1');
+        sessionStorage.setItem('qa-data-library', '1');
+      }
+      // Skip the first-run chooser (src/firstRunExperience.js).
+      localStorage.setItem('gev:first-run-mission:v1', 'suppressed');
+    } catch {
+      /* storage may be blocked; the gate still runs */
+    }
+  });
+  await open(page);
+
+  await step(
+    'the panel offers Browse and lists no library layer by default',
+    async () => {
+      assert.deepEqual(await libraryRows(page), []);
+      const hidden = await page.$eval(
+        '#data-library-browse',
+        (node) => node.hidden,
+      );
+      assert.equal(hidden, false);
+    },
+  );
+
+  await step(
+    'Browse opens a labelled modal with addable entries first and packs last',
+    async () => {
+      await page.evaluate(() => {
+        document.getElementById('data-panel')?.classList.remove('collapsed');
+        document.getElementById('data-library-browse').click();
+      });
+      const dialog = await page.$eval('#data-library', (node) => ({
+        open: node.open,
+        modal: node.matches(':modal'),
+        title: document.getElementById(node.getAttribute('aria-labelledby'))
+          ?.textContent,
+        focus: document.activeElement?.type,
+        order: [...node.querySelectorAll('.data-library-item')].map(
+          (item) => item.dataset.libraryId,
+        ),
+      }));
+      assert.equal(dialog.open, true);
+      assert.equal(dialog.modal, true);
+      assert.equal(dialog.title, 'DATA LIBRARY');
+      assert.equal(dialog.focus, 'search');
+      assert.ok(dialog.order.at(-1).startsWith('cctv-'), dialog.order.join());
+      assert.ok(!dialog.order[0].startsWith('cctv-'));
+    },
+  );
+
+  await step(
+    'a pack explains the operator switch instead of offering Add',
+    async () => {
+      const pack = await page.$eval(
+        '#data-library .data-library-item[data-library-id="cctv-nyc-dot"]',
+        (item) => ({
+          action: Boolean(item.querySelector('.data-library-action')),
+          reason: item.querySelector('.data-library-reason')?.textContent,
+        }),
+      );
+      assert.equal(pack.action, false);
+      assert.match(pack.reason, /CCTV_NYC_ENABLED=1/);
+    },
+  );
+
+  for (const [id, expected] of [
+    ['nasa-eonet-events', '2'],
+    ['eia-power-plants', '3'],
+    ['gvp-holocene-volcanoes', '1'],
+    ['nasa-black-marble', 'DRAPED'],
+  ])
+    await step(
+      `Add ${id} registers it under Library and switches it on`,
+      async () => {
+        await page.click(
+          `#data-library button[data-library-id="${id}"][data-library-action="add"]`,
+        );
+        await page.waitForFunction(
+          (layerId, text) => {
+            const row = document.querySelector(
+              `#data-toggles [data-layer-id="${layerId}"]`,
+            );
+            return (
+              row
+                ?.querySelector('.data-toggle-btn')
+                ?.classList.contains('active') &&
+              row.querySelector('.data-count')?.textContent === text
+            );
+          },
+          { timeout: 60_000 },
+          `lib-${id}`,
+          expected,
+        );
+      },
+    );
+
+  await step(
+    'the fixtures were reached the way each manifest says',
+    async () => {
+      assert.ok(seen.eonet >= 1);
+      assert.deepEqual(seen.arcgisPages.slice(0, 2), [0, 2]);
+      assert.ok(seen.proxied >= 1);
+      const draped = await page.evaluate(
+        () =>
+          window.__godsEyeView.dataManager.layers
+            .get('lib-nasa-black-marble')
+            .module.getDiagnostics().draped,
+      );
+      assert.equal(draped, true);
+      // Imagery requests tiles on the following frames, not on enable.
+      for (let waited = 0; seen.tiles === 0 && waited < 30_000; waited += 250)
+        await new Promise((resolve) => setTimeout(resolve, 250));
+      assert.ok(seen.tiles >= 1, 'the drape requested its tiles');
+      const headings = await page.$$eval(
+        '#data-toggles .data-layer-group-heading',
+        (nodes) => nodes.map((node) => node.textContent),
+      );
+      assert.equal(headings.at(-1), 'Library');
+    },
+  );
+
+  await step(
+    'the stats strip sits above the intro and counts what is on the map',
+    async () => {
+      await page.waitForFunction(
+        () =>
+          document.querySelector(
+            '[data-stat="features"] .data-library-stat-value',
+          )?.textContent === '6',
+        { timeout: 15_000 },
+      );
+      const strip = await page.evaluate(() => {
+        const stats = document.querySelector(
+          '#data-library .data-library-stats',
+        );
+        const read = (id) =>
+          [...document.querySelectorAll(`[data-stat="${id}"] dd`)].map(
+            (node) => node.textContent,
+          );
+        return {
+          beforeIntro:
+            stats?.nextElementSibling?.classList.contains('data-library-intro'),
+          label: stats?.getAttribute('aria-label'),
+          entries: read('entries'),
+          added: read('added'),
+          features: read('features'),
+        };
+      });
+      assert.equal(strip.beforeIntro, true);
+      assert.equal(strip.label, 'Data Library at a glance');
+      // Counted from the shipped catalog, so a new entry does not break this.
+      const kinds = await page.evaluate(() => {
+        const counts = { dataset: 0, tiles: 0, pack: 0 };
+        for (const { entry } of window.__gevDataLibrary.library.list())
+          counts[entry.kind] += 1;
+        return counts;
+      });
+      assert.deepEqual(strip.entries, [
+        String(kinds.dataset + kinds.tiles + kinds.pack),
+        `${kinds.dataset} datasets · ${kinds.tiles} tile layers · ${kinds.pack} packs`,
+      ]);
+      assert.deepEqual(strip.added, ['4', '4 on the map']);
+      // Fixtures: 2 EONET events, 3 power plants, 1 volcano.
+      assert.deepEqual(strip.features, ['6', 'from 3 datasets']);
+    },
+  );
+
+  await step('the share link carries lib= with the ledger tokens', async () => {
+    await page.waitForFunction(
+      () => /(?:^|&)lib=00\.02\.01\.03(?:&|$)/.test(location.hash.slice(1)),
+      { timeout: 15_000 },
+    );
+  });
+
+  await step(
+    'Escape closes the dialog and returns focus to Browse',
+    async () => {
+      await page.focus('#data-library input[type="search"]');
+      await page.keyboard.press('Escape');
+      const state = await page.evaluate(() => ({
+        open: document.getElementById('data-library').open,
+        focus: document.activeElement?.id,
+      }));
+      assert.deepEqual(state, { open: false, focus: 'data-library-browse' });
+    },
+  );
+
+  await step('clean view closes an open dialog', async () => {
+    const open = await page.evaluate(async () => {
+      window.__gevDataLibrary.browser.open();
+      document.body.classList.add('ui-clean-view');
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      const result = document.getElementById('data-library').open;
+      document.body.classList.remove('ui-clean-view');
+      return result;
+    });
+    assert.equal(open, false);
+  });
+
+  await step(
+    'a reload restores the added entries and what was on',
+    async () => {
+      await page.evaluate(() => {
+        document
+          .querySelector(
+            '#data-toggles [data-layer-id="lib-gvp-holocene-volcanoes"] .data-toggle-btn',
+          )
+          .click();
+      });
+      await page.waitForFunction(
+        () =>
+          JSON.parse(localStorage.getItem('gev:library:v1')).on.length === 3,
+      );
+      await open(page, '');
+      await page.waitForFunction(
+        () =>
+          document.querySelectorAll('#data-toggles [data-library-entry]')
+            .length === 4,
+        { timeout: 60_000 },
+      );
+      const rows = await libraryRows(page);
+      assert.deepEqual(rows.map(({ id, on }) => [id, on]).sort(), [
+        ['eia-power-plants', true],
+        ['gvp-holocene-volcanoes', false],
+        ['nasa-black-marble', true],
+        ['nasa-eonet-events', true],
+      ]);
+    },
+  );
+
+  const cameraCenter = () =>
+    page.evaluate(() => {
+      const { camera } = window.__godsEyeView.viewer;
+      const carto = camera.positionCartographic;
+      return {
+        lon: (carto.longitude * 180) / Math.PI,
+        lat: (carto.latitude * 180) / Math.PI,
+        height: carto.height,
+      };
+    });
+  const waitForFlight = () =>
+    page.waitForFunction(
+      () => !window.__godsEyeView.viewer.camera._currentFlight,
+      { timeout: 30_000, polling: 200 },
+    );
+
+  await step(
+    'Zoom to layer on the row works while off: it switches on and flies',
+    async () => {
+      const chip =
+        '#data-toggles [data-layer-id="lib-eia-power-plants"] [data-chip-id="zoom"]';
+      await page.evaluate(() =>
+        document.getElementById('data-panel')?.classList.remove('collapsed'),
+      );
+      // The icons work while the layer is off; Zoom switches it back on.
+      await page.evaluate(() =>
+        window.__godsEyeView.dataManager.setEnabled(
+          'lib-eia-power-plants',
+          false,
+          { origin: 'user' },
+        ),
+      );
+      await page.waitForSelector(chip, { visible: true, timeout: 30_000 });
+      await page.evaluate(
+        (selector) => document.querySelector(selector).click(),
+        chip,
+      );
+      await page.waitForFunction(
+        () =>
+          window.__godsEyeView.dataManager.isEnabled('lib-eia-power-plants'),
+        { timeout: 30_000 },
+      );
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      await waitForFlight();
+      const center = await cameraCenter();
+      // Fixture plants span -118.9…-97.6 °E and 28.8…47.9 °N.
+      assert.ok(center.lon > -125 && center.lon < -90, JSON.stringify(center));
+      assert.ok(center.lat > 22 && center.lat < 55, JSON.stringify(center));
+    },
+  );
+
+  await step(
+    'ZOOM in the dialog closes it and flies to that entry',
+    async () => {
+      await page.evaluate(() => window.__gevDataLibrary.browser.open());
+      const zoom =
+        '#data-library button[data-library-id="gvp-holocene-volcanoes"][data-library-action="zoom"]';
+      assert.ok(await page.$(zoom), 'Zoom is offered for an entry that is off');
+      await page.click(
+        '#data-library button[data-library-id="nasa-eonet-events"][data-library-action="zoom"]',
+      );
+      const open = await page.$eval('#data-library', (node) => node.open);
+      assert.equal(open, false);
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      await waitForFlight();
+      const center = await cameraCenter();
+      // Fixture events at (-120, 38) and (140, 35): the frame sits between them.
+      assert.ok(center.lat > 20 && center.lat < 55, JSON.stringify(center));
+    },
+  );
+
+  await step('Remove destroys the layer and forgets it', async () => {
+    await page.evaluate(() => window.__gevDataLibrary.browser.open());
+    await page.click(
+      '#data-library button[data-library-id="nasa-black-marble"][data-library-action="remove"]',
+    );
+    await page.waitForFunction(
+      () =>
+        !document.querySelector(
+          '#data-toggles [data-layer-id="lib-nasa-black-marble"]',
+        ) &&
+        !window.__godsEyeView.dataManager.layers.has('lib-nasa-black-marble'),
+      { timeout: 30_000 },
+    );
+    const stored = await page.evaluate(() =>
+      JSON.parse(localStorage.getItem('gev:library:v1')),
+    );
+    assert.equal(stored.added.includes('nasa-black-marble'), false);
+  });
+
+  await step(
+    'the row delete icon removes that entry, even while it is off',
+    async () => {
+      await page.evaluate(() => {
+        window.__gevDataLibrary.browser.close();
+        document.getElementById('data-panel')?.classList.remove('collapsed');
+      });
+      const chip =
+        '#data-toggles [data-layer-id="lib-eia-power-plants"] [data-chip-id="remove"]';
+      await page.evaluate(() =>
+        window.__godsEyeView.dataManager.setEnabled(
+          'lib-eia-power-plants',
+          false,
+          { origin: 'user' },
+        ),
+      );
+      await page.waitForSelector(chip, { visible: true, timeout: 30_000 });
+      const label = await page.$eval(chip, (node) => ({
+        name: node.getAttribute('aria-label'),
+        glyph: node.textContent,
+        pressed: node.getAttribute('aria-pressed'),
+      }));
+      assert.deepEqual(label, {
+        name: 'Remove from Data Layers',
+        glyph: 'delete',
+        pressed: null,
+      });
+      await page.evaluate(
+        (selector) => document.querySelector(selector).click(),
+        chip,
+      );
+      await page.waitForFunction(
+        () =>
+          !window.__godsEyeView.dataManager.layers.has(
+            'lib-eia-power-plants',
+          ) &&
+          !document.querySelector(
+            '#data-toggles [data-layer-id="lib-eia-power-plants"]',
+          ),
+        { timeout: 30_000 },
+      );
+    },
+  );
+
+  await step(
+    'a view-bounded layer asks to zoom in, then loads only what is in view',
+    async () => {
+      await page.evaluate(() =>
+        window.__gevDataLibrary.library.add('fema-usa-structures'),
+      );
+      const row = '#data-toggles [data-layer-id="lib-fema-usa-structures"]';
+      await page.waitForFunction(
+        (selector) =>
+          /zoom in to load this layer/.test(
+            document.querySelector(`${selector} .data-toggle-meta`)
+              ?.textContent || '',
+          ),
+        { timeout: 30_000 },
+        row,
+      );
+      assert.equal(seen.structureBoxes.length, 0, 'nothing loads from orbit');
+      await page.evaluate(() =>
+        window.__gevDataLibrary.library.zoom('fema-usa-structures'),
+      );
+      await page.waitForFunction(
+        () =>
+          window.__godsEyeView.dataManager.layers
+            .get('lib-fema-usa-structures')
+            .module.getDiagnostics().count === 3,
+        { timeout: 60_000, polling: 250 },
+      );
+      const altitude = (await cameraCenter()).height;
+      assert.ok(altitude <= 4000, `landed at ${Math.round(altitude)} m`);
+      const [west, south, east, north] = seen.structureBoxes
+        .at(-1)
+        .split(',')
+        .map(Number);
+      assert.ok(east - west < 0.2 && north - south < 0.2, 'a view-sized box');
+      assert.ok(
+        west < -77.03 && east > -77.03 && south < 38.893 && north > 38.893,
+      );
+      // Climbing back out clears the buildings and shows the guidance again.
+      await page.evaluate(() => {
+        const { viewer, requestRender } = window.__godsEyeView;
+        viewer.camera.zoomOut(60_000);
+        requestRender?.('qa-data-library');
+      });
+      await page.waitForFunction(
+        () =>
+          window.__godsEyeView.dataManager.layers
+            .get('lib-fema-usa-structures')
+            .module.getDiagnostics().tooHigh,
+        { timeout: 30_000, polling: 250 },
+      );
+    },
+  );
+
+  await step('Remove all asks twice, then clears the library', async () => {
+    await page.evaluate(() => window.__gevDataLibrary.browser.open());
+    await page.click('#data-library .data-library-reset');
+    const armed = await page.$eval(
+      '#data-library .data-library-reset',
+      (node) => ({
+        text: node.textContent,
+        armed: node.classList.contains('is-armed'),
+      }),
+    );
+    assert.equal(armed.armed, true);
+    assert.match(armed.text, /CONFIRM/);
+    assert.ok(
+      (await page.$$('#data-toggles [data-library-entry]')).length > 0,
+      'one press removes nothing',
+    );
+    await page.click('#data-library .data-library-reset');
+    await page.waitForFunction(
+      () =>
+        !document.querySelector('#data-toggles [data-library-entry]') &&
+        document.querySelector('#data-library .data-library-reset').hidden,
+      { timeout: 30_000 },
+    );
+    const stored = await page.evaluate(() =>
+      JSON.parse(localStorage.getItem('gev:library:v1')),
+    );
+    assert.deepEqual(stored, { added: [], on: [] });
+  });
+
+  assert.deepEqual(errors, [], 'no library errors on the page');
+  console.log(`# ${count} passed`);
+} finally {
+  await browser.close();
+}