feat(netcdf): mark sampled pixels and float the spectral profile (#1713)

* feat(netcdf): mark sampled pixels and float the spectral profile

A click now records the pixel as a sampled point, drawn on the map as a
numbered dot in that point's chart color. Nothing previously showed where a
spectrum had been read from, so several lines on one chart could not be told
apart by location. This turns the profile store from a list of readings into a
list of points: the point goes in on the click so its marker lands with the
popup, and the band-axis read attaches to it by id when it resolves. A result
addressed to a point that has since been cleared, or aged off the six-point
cap, lands nowhere, so a slow read no longer needs cancelling. Points keep
their number and color when an older one falls off the cap, and Clear drops
the markers along with the chart since both derive from the same list.

The chart can also be popped out of the Style panel into a window over the
map, which is draggable and resizable -- the panel is narrow and scrolls, a
poor place to read a 285-band spectrum closely. It opens top-left because its
only resize grip is the bottom-right one, which on the right would sit against
the Style panel with nowhere to grow. The drag/resize gesture is extracted from
the Time Slider's pixel chart, which is the same kind of window over the same
container, and both now share it.

Profiles export as PNG (through the existing chart export, which resolves the
theme variables the SVG references) or CSV, one column per sampled pixel with
fill readings left empty so they read as gaps.

The x-axis labels round multiples rather than just its two ends and the
midpoint, which on a 381-2493 nm axis told you nothing about where a feature
sat. The step is chosen by which candidate's tick *count* lands nearest the
target: rounding the interval up to the next round number overshoots badly
here, turning eight labels into four.

A pixel from a 2-D grid is now kept as a point too, rather than clearing the
list. It has no band axis to profile, so it charts nothing, but it still gets
a marker and a list entry -- the readout is worth a mark on the map even when
there is no spectrum behind it.

* Address review feedback

- Give `id` its own counter that is never reset, so only `order` restarts
  after a clear. Sharing one counter meant a clear recycled ids, and a band-axis
  read still in flight could resolve onto an unrelated later sample that reused
  its number -- silently violating the invariant that a stale read lands nowhere.
- Put the profile CSV's axis header through `displayUnits`, as the chart's own
  axis label already does, so a coordinate declaring `unitless`/`1` no longer
  exports as "wavelength (1)" while the chart it came from says "wavelength".
- Guard that header with `spreadsheetSafeText`: the axis name and units are free
  text out of the file's own metadata, and `csvCell` escapes quotes and commas
  but not a leading `=`, which a spreadsheet would execute. The point columns
  are built from numbers and stay verbatim.
- Move `displayUnits` into a dependency-free `lib/cf-units` (re-exported from
  `netcdf-image-symbology`, so callers are unchanged). Importing it from
  `netcdf-image-symbology` reaches the plugin barrel and, through it,
  `maplibre-gl-earth-engine`, which throws "window is not defined" and would have
  taken the CSV builder's `node --test` run down with it.
- Repoint the stale `{@link PixelTimeSeriesControl.measureRect}` in
  PixelTimeSeriesControl's geometry doc, since `measureRect` moved into
  `useFloatingPanelRect`.

* Address review feedback

- Thread `mapReadyGeneration` into NetcdfSampleMarkers, the way
  `useNetcdfIdentify` already takes it. The marker effect keyed only on
  `samples`, so a map teardown/recreate left the markers on the discarded map
  and they would not reappear until the next click changed the list.
- Give the chart's export error `role="alert"`, matching the Time Slider
  chart's export error. The message lands after the click that caused it, so
  without a live region a screen-reader user was never told the export failed.
- Drop `aria-hidden` from the sample list's swatch. The color is decorative but
  the digit inside it is the number tying that row to its marker, and the
  marker itself is hidden from assistive tech, so this list is the only place
  the number can be read.
- Reuse `chart-export`'s `triggerDownload` (now exported) for the CSV instead
  of a second local anchor-and-revoke helper.
- Correct the marker effect's comment: it also re-runs when a band-axis read
  resolves and replaces the `samples` array, not only on a click. Left as a
  full rebuild -- at MAX_PROFILE_SAMPLES markers that beats reconciling them.
- Match `FALLBACK_RECT` to the CSS default it stands in for (512x416, not
  520x420), so the doc comment's claim that the two agree is true of the size
  as well as the corner.
- Replace the tests' `as never` casts with a `charted()` narrowing helper, so a
  change to `netcdfAxisPositions`' parameter type still fails the test file.

* Address review feedback

- Drop the `disposed` guard on a resolved band-axis read. The effect tears down
  whenever the identify target changes, so switching away from a NetCDF layer
  and back during a read that takes tens of seconds left that point permanently
  profile-less even though the fetch completed. The store's own guard is what
  makes the read safe to let land: a result for a point that has since been
  cleared or aged off the cap attaches to nothing. Pending timeouts are still
  cleared on teardown, so no *new* read starts after the session ends.

* Address review feedback

- Cascade the profile window's default placement 64px down. The Time Slider's
  pixel chart opens at the same corner and z-index, and the two are gated
  independently, so a user with a time-slider stack and a popped-out NetCDF
  profile got two windows exactly on top of each other. The offset leaves that
  panel's drag header exposed, and keeps this window top-left, which is what
  its bottom-right resize grip needs.
- Drop the now-unused `ReactPointerEvent` type import from
  PixelTimeSeriesControl, left behind when the gesture handlers moved into
  `useFloatingPanelRect`.

Author: giswqs

apps/geolibre-desktop/src/components/layout/DesktopShell.tsx

@@ -126,6 +126,8 @@ import { useCollaboration } from "../../hooks/useCollaboration";
 import { MapModeBanner } from "./MapModeBanner";
 import { QuickAnalysisBanner } from "./QuickAnalysisBanner";
 import { PixelTimeSeriesControl } from "./PixelTimeSeriesControl";
+import { NetcdfSampleMarkers } from "./NetcdfSampleMarkers";
+import { NetcdfProfileWindow } from "./NetcdfProfileWindow";
 import { MapLegendPanel } from "../legend/MapLegendPanel";
 import { RasterSubsetPanel } from "./RasterSubsetPanel";
 import { BasemapExtractPanel } from "./BasemapExtractPanel";
@@ -2282,6 +2284,11 @@ export function DesktopShell({
               <MapModeBanner mapControllerRef={mapControllerRef} />
               <QuickAnalysisBanner />
               <PixelTimeSeriesControl mapControllerRef={mapControllerRef} />
+              <NetcdfSampleMarkers
+                mapControllerRef={mapControllerRef}
+                mapReadyGeneration={mapReadyGeneration}
+              />
+              <NetcdfProfileWindow />
               <MapLegendPanel
                 mapControllerRef={mapControllerRef}
                 mapReadyGeneration={mapReadyGeneration}

apps/geolibre-desktop/src/components/layout/NetcdfProfileWindow.tsx

@@ -0,0 +1,128 @@
+import { Button } from "@geolibre/ui";
+import { GripVertical, LineChart, X } from "lucide-react";
+import { useSyncExternalStore } from "react";
+import { useTranslation } from "react-i18next";
+import { useFloatingPanelRect } from "../../hooks/useFloatingPanelRect";
+import {
+  clearNetcdfProfileSamples,
+  getNetcdfProfileSamples,
+  isNetcdfProfilePoppedOut,
+  setNetcdfProfilePoppedOut,
+  subscribeNetcdfProfile,
+} from "../../lib/netcdf-profile-store";
+import { NetcdfProfileChart } from "../panels/NetcdfProfileChart";
+
+/** Panel geometry (px). The window opens near the top-left corner and can then
+ * be dragged and resized anywhere on the map. Top-left because the only resize
+ * grip is the bottom-right one: opening on the right would put that grip against
+ * the Style panel with nowhere to grow. The CSS default below and
+ * {@link FALLBACK_RECT} describe the same spot, so a drag that starts from the
+ * untouched default does not jump. */
+const PANEL_MIN_W = 360;
+const PANEL_MIN_H = 260;
+const PANEL_MARGIN = 12;
+/**
+ * Vertical offset from the top inset. The Time Slider's pixel chart opens at the
+ * same corner and z-index, and the two are gated independently, so a user with a
+ * time-slider stack *and* a popped-out NetCDF profile would otherwise get two
+ * windows stacked exactly on top of each other. Cascading this one down leaves
+ * that panel's drag header exposed and grabbable underneath.
+ */
+const PANEL_TOP = 64;
+// 512x416 is the CSS default below (32rem x 26rem at a 16px root) in px, so the
+// fallback matches the size as well as the corner.
+const FALLBACK_RECT = { x: PANEL_MARGIN, y: PANEL_TOP, w: 512, h: 416 };
+
+/**
+ * The spectral profile detached from the Style panel into a movable, resizable
+ * window over the map.
+ *
+ * The Style panel is narrow and scrolls, which is a poor home for a chart the
+ * user wants to read closely; floating it gives the chart room and lets it sit
+ * beside the pixels it was sampled from. The store holds one layer's samples at
+ * a time, so the window charts "the current samples" without tracking a layer.
+ *
+ * Mounted in the map area so it is positioned against the map, not the shell.
+ *
+ * @returns The window, or null while the chart is docked or has nothing to show.
+ */
+export function NetcdfProfileWindow() {
+  const { t } = useTranslation();
+  const samples = useSyncExternalStore(
+    subscribeNetcdfProfile,
+    getNetcdfProfileSamples,
+    getNetcdfProfileSamples,
+  );
+  const poppedOut = useSyncExternalStore(
+    subscribeNetcdfProfile,
+    isNetcdfProfilePoppedOut,
+    isNetcdfProfilePoppedOut,
+  );
+  const { panelRef, rect, handleDragStart, handleResizeStart } = useFloatingPanelRect({
+    minWidth: PANEL_MIN_W,
+    minHeight: PANEL_MIN_H,
+    margin: PANEL_MARGIN,
+    fallback: FALLBACK_RECT,
+  });
+
+  if (!poppedOut || samples.length === 0) return null;
+
+  return (
+    <div
+      ref={panelRef}
+      className={
+        rect
+          ? "pointer-events-auto absolute z-20 flex flex-col overflow-hidden rounded-lg border bg-background shadow-xl"
+          : "pointer-events-auto absolute start-3 top-16 z-20 flex h-[26rem] max-h-[calc(100%-9rem)] w-[min(32rem,calc(100vw-1.5rem))] flex-col overflow-hidden rounded-lg border bg-background shadow-xl"
+      }
+      style={rect ? { left: rect.x, top: rect.y, width: rect.w, height: rect.h } : undefined}
+      role="region"
+      aria-label={t("netcdfProfile.heading")}
+      data-testid="netcdf-profile-window"
+    >
+      <div
+        className="flex cursor-move touch-none select-none items-center justify-between gap-2 border-b px-3 py-2"
+        onPointerDown={handleDragStart}
+      >
+        <div className="flex items-center gap-2 text-sm font-semibold">
+          <GripVertical className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+          <LineChart className="h-4 w-4 text-primary" aria-hidden="true" />
+          {t("netcdfProfile.heading")}
+        </div>
+        <div className="flex items-center gap-1">
+          <Button type="button" variant="ghost" size="sm" onClick={clearNetcdfProfileSamples}>
+            {t("netcdfProfile.clear")}
+          </Button>
+          <button
+            type="button"
+            className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring"
+            onClick={() => setNetcdfProfilePoppedOut(false)}
+            aria-label={t("netcdfProfile.dock")}
+            title={t("netcdfProfile.dock")}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col overflow-auto p-3">
+        {/* `flex-1` rather than a fixed height: the chart scales with the
+            window, which is the point of resizing it. */}
+        <NetcdfProfileChart samples={samples} chartClassName="flex-1" />
+      </div>
+
+      {/* Resize grip (bottom-right). The diagonal lines hint the affordance.
+          Mouse/touch-only, so it is presentational — there is no keyboard
+          resize to expose to assistive tech. */}
+      <div
+        className="absolute bottom-0 right-0 h-4 w-4 cursor-se-resize touch-none"
+        onPointerDown={handleResizeStart}
+        role="presentation"
+      >
+        <svg viewBox="0 0 10 10" className="h-full w-full text-muted-foreground" aria-hidden="true">
+          <path d="M9 1 L1 9 M9 5 L5 9" stroke="currentColor" strokeWidth={1} fill="none" />
+        </svg>
+      </div>
+    </div>
+  );
+}

apps/geolibre-desktop/src/components/layout/NetcdfSampleMarkers.tsx

@@ -0,0 +1,91 @@
+import maplibregl from "maplibre-gl";
+import { type RefObject, useEffect, useSyncExternalStore } from "react";
+import type { MapController } from "@geolibre/map";
+import { netcdfSeriesColor } from "../../lib/netcdf-profile-series";
+import {
+  getNetcdfProfileSamples,
+  type NetcdfProfileSample,
+  subscribeNetcdfProfile,
+} from "../../lib/netcdf-profile-store";
+
+/**
+ * Builds a sampled point's marker element: a numbered dot in the point's series
+ * color, so a line in the spectral profile and the pixel it was read from are
+ * matched by both color and number.
+ *
+ * A custom element rather than MapLibre's default pin because the series colors
+ * include `hsl(var(--primary))`, and a CSS variable does not resolve in the
+ * `fill` *attribute* the built-in pin sets — only in a CSS property, which is
+ * what `style.backgroundColor` writes here.
+ *
+ * @param sample - The sampled pixel the marker represents.
+ * @returns The marker element.
+ */
+function buildMarkerElement(sample: NetcdfProfileSample): HTMLElement {
+  const element = document.createElement("div");
+  element.className =
+    "flex h-5 w-5 items-center justify-center rounded-full border-2 border-white text-[10px] font-semibold leading-none text-white shadow-md";
+  element.style.backgroundColor = netcdfSeriesColor(sample);
+  element.textContent = String(sample.order);
+  // The profile panel already lists every point as text, and a marker that
+  // swallowed clicks would block sampling the pixel underneath it.
+  element.style.pointerEvents = "none";
+  element.setAttribute("aria-hidden", "true");
+  return element;
+}
+
+/**
+ * Shows where each NetCDF pixel sampled with Identify was read from.
+ *
+ * Renders no React output: the markers are imperative map objects reconciled
+ * against the sample store, so "Clear", the oldest point aging off the cap, and
+ * a switch to another layer all clear the map without bookkeeping of their own.
+ *
+ * Mounted in the map area so its re-renders (one per sample change) stay off
+ * the shell.
+ *
+ * @param props.mapControllerRef - The live map controller.
+ * @param props.mapReadyGeneration - Bumped by the shell each time the map
+ *   (re)initialises. A ref's `.current` pointing at a new map does not re-run an
+ *   effect, so without this the markers would stay on the discarded map and not
+ *   reappear on the new one until the next click changed `samples`. The same
+ *   signal `useNetcdfIdentify` takes, for the same reason.
+ * @returns Nothing.
+ */
+export function NetcdfSampleMarkers({
+  mapControllerRef,
+  mapReadyGeneration,
+}: {
+  mapControllerRef: RefObject<MapController | null>;
+  mapReadyGeneration: number;
+}) {
+  const samples = useSyncExternalStore(
+    subscribeNetcdfProfile,
+    getNetcdfProfileSamples,
+    getNetcdfProfileSamples,
+  );
+
+  useEffect(() => {
+    const map = mapControllerRef.current?.getMap();
+    if (!map) return;
+    const live = new Map<number, maplibregl.Marker>();
+    for (const sample of samples) {
+      live.set(
+        sample.id,
+        new maplibregl.Marker({ element: buildMarkerElement(sample), anchor: "center" })
+          .setLngLat([sample.lng, sample.lat])
+          .addTo(map),
+      );
+    }
+    // Rebuilding the whole set each time keeps this to one short effect. It runs
+    // more often than the markers actually change — every resolved band-axis
+    // read replaces the `samples` array too, without moving or recoloring
+    // anything — but at MAX_PROFILE_SAMPLES markers that is cheaper than the
+    // bookkeeping to reconcile them.
+    return () => {
+      for (const marker of live.values()) marker.remove();
+    };
+  }, [samples, mapControllerRef, mapReadyGeneration]);
+
+  return null;
+}