Add loading progress bar for time series fetch (#26) (#56)

* Add loading progress bar for time series fetch (#26) (#50)

* Add loading progress bar for the pixel time series fetch (#26)

Introduce a reusable ProgressBar (src/components/ui/ProgressBar.tsx) and
show it in the sidebar readout while a pixel time series is downloading.

It runs in indeterminate mode: the pixel fetch is a single slice request
with no per-chunk hook and no known total, so an honest percentage is not
available without a byte-streaming store wrapper. The bar therefore shows
real activity via a sweeping accent segment rather than a fabricated
percent. The component already accepts a `value` prop, so a determinate
mode can be wired later if we add that wrapper.

Styling uses the editor/accent design tokens with a reduced-motion
fallback. Closes #26 once merged.

* Rework left panel into a flat inspector with a real progress percentage

Redesign the sidebar readout away from three stacked bordered cards into
one continuous inspector split by hairline rules:
- The clicked coordinate leads, the daily-mean chart is the hero, grid
  cell and array index drop to a quiet two-up row, history control sits
  at the foot.
- Inviting empty state before a point is picked.

Replace the indeterminate loader with a determinate percentage. The
reader now fetches the pixel series one time-chunk at a time in parallel
and reports completed-of-total as each chunk arrives, so the bar shows a
real "n of N chunks · X%". Segments are stitched back in chunk order, so
the values are identical to the previous single-slice fetch and the same
bytes are downloaded. Falls back to the animated bar until the first
count arrives.

The chart skeleton becomes a decorative axis frame so the percentage is
the single loading status.

* Fix stuck progress with byte-level percentage; reorder sidebar sections

Address panel feedback:
- Move the history-window control above the chart, and group it with the
  chart so there is no divider between them.
- Vertically center the empty "Click the map" state.
- The percentage was stuck at 0 because the default window is a single
  time-chunk, so chunk-counting only ever read 0 of 1. Progress is now
  byte-level: a custom fetch on the zarr store streams each chunk
  response and reports loaded/total bytes, so the bar ramps smoothly and
  shows a real percent plus a MB readout. If a response has no
  Content-Length it falls back to the animated bar, never blocking the
  fetch. Verified against the live store that the percent passes through
  intermediate values and ends at 100%.

This reverts the earlier per-time-chunk fetch back to the single-slice
pixel fetch, since byte progress no longer needs it.

* Harden ProgressBar: drop aria-busy, spread div props, guard NaN (#26)

---------

Co-authored-by: Anastasiia Ivanchenko <a.ivanchenko.eu@gmai.com>

* Bind byte-progress sink per request to fix concurrency races

Capture the active sink synchronously at the start of progressFetch so an
in-flight fetch keeps reporting to the request that started it even if a
newer request swaps the global sink in mid-await. Guard the reader's
cleanup with an identity check via getActiveByteSink so an older request's
finally block cannot clear a newer request's active sink.

Addresses review feedback on #26.

---------

Co-authored-by: Anastasiia Ivanchenko <a.ivanchenko.eu@gmai.com>

Author: aivanchenk

src/app/globals.css

@@ -193,3 +193,27 @@
     transform: scale(1);
   }
 }
+
+/* Indeterminate progress: a segment sweeping across the track while a
+   download is in flight. We show motion rather than a fabricated percent,
+   since the pixel fetch is a single slice request with no per-chunk hook. */
+@keyframes progressIndeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+
+.progress-bar-indeterminate {
+  animation: progressIndeterminate 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar-indeterminate {
+    animation: none;
+    width: 100%;
+    opacity: 0.55;
+  }
+}

src/components/map/EarthMap.tsx

@@ -60,6 +60,10 @@ export function EarthMap() {
   const [showPatch, setShowPatch] = useState(true);
   const [historyYears, setHistoryYears] = useState(DEFAULT_HISTORY_YEARS);
   const [loadingSeries, setLoadingSeries] = useState(false);
+  const [seriesProgress, setSeriesProgress] = useState<{
+    loaded: number;
+    total: number;
+  } | null>(null);
   const [seriesError, setSeriesError] = useState<string | null>(null);
   const [seriesValues, setSeriesValues] = useState<Float32Array | null>(null);
   const [seriesUnits, setSeriesUnits] = useState<string | null>(null);
@@ -85,6 +89,7 @@ export function EarthMap() {
     async (nextSelection: MapSelection, years: number) => {
       const requestId = ++requestIdRef.current;
       setLoadingSeries(true);
+      setSeriesProgress(null);
       setSeriesError(null);
       setSeriesValues(null);
       setSeriesUnits(null);
@@ -105,6 +110,10 @@ export function EarthMap() {
           nextSelection.grid,
           undefined,
           years,
+          (loaded, total) => {
+            if (requestId !== requestIdRef.current) return;
+            setSeriesProgress({ loaded, total });
+          },
         );
 
         if (requestId !== requestIdRef.current) return;
@@ -121,6 +130,7 @@ export function EarthMap() {
       } finally {
         if (requestId === requestIdRef.current) {
           setLoadingSeries(false);
+          setSeriesProgress(null);
         }
       }
     },
@@ -241,6 +251,7 @@ export function EarthMap() {
           historyYears={historyYears}
           onHistoryYearsChange={handleHistoryYearsChange}
           loadingSeries={loadingSeries}
+          seriesProgress={seriesProgress}
           seriesError={seriesError}
           seriesValues={seriesValues}
           seriesUnits={seriesUnits}

src/components/map/MapReadout.tsx

@@ -1,134 +1,196 @@
 "use client";
 
 import type { MapSelection } from "@/types/map";
-import { formatGeoPoint } from "@/lib/map/geogrid";
+import { formatCoordinate, formatGeoPoint } from "@/lib/map/geogrid";
 import { ZARR_STORE } from "@/lib/constants/store";
 import { ZARR_TIME } from "@/lib/zarr/timeRange";
 import { TimeSeriesPlot } from "@/components/map/TimeSeriesPlot";
 import { TimeSeriesPlotLoading } from "@/components/map/TimeSeriesPlotLoading";
+import { ProgressBar } from "@/components/ui/ProgressBar";
 
-const PANEL_CLASS =
-  "grid gap-3 rounded-editor-md border border-editor-border bg-editor-bg-secondary p-4 shadow-editor";
-const HINT_CLASS = "text-[13px] leading-[1.55] text-editor-fg-tertiary";
-const LABEL_CLASS = "text-[13px] font-medium text-editor-fg-secondary";
+type SeriesProgress = { loaded: number; total: number };
 
 type MapReadoutProps = {
   selection: MapSelection | null;
   historyYears: number;
   onHistoryYearsChange: (years: number) => void;
   loadingSeries: boolean;
+  seriesProgress: SeriesProgress | null;
   seriesError: string | null;
   seriesValues: Float32Array | null;
   seriesUnits: string | null;
 };
 
+const SECTION_LABEL = "text-[13px] font-semibold text-editor-fg-primary";
+const META = "font-mono text-[11px] text-editor-fg-tertiary";
+
 export function MapReadout({
   selection,
   historyYears,
   onHistoryYearsChange,
   loadingSeries,
+  seriesProgress,
   seriesError,
   seriesValues,
   seriesUnits,
 }: MapReadoutProps) {
   const historyLabel =
     historyYears === 1 ? "Last 1 year" : `Last ${historyYears} years`;
 
+  if (!selection) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-2 py-8 text-center">
+        <div
+          className="grid h-9 w-9 place-items-center rounded-full border border-dashed border-editor-border-strong"
+          aria-hidden="true"
+        >
+          <span className="block h-2 w-2 rounded-full bg-accent" />
+        </div>
+        <p className="text-[13.5px] font-semibold text-editor-fg-secondary">
+          Click the map
+        </p>
+        <p className="text-[12.5px] text-editor-fg-tertiary">
+          Pick a point to load its record
+        </p>
+      </div>
+    );
+  }
+
   const patchCells = ZARR_STORE.nativeChunks.lon;
   const patchDeg = patchCells * ZARR_STORE.spatialResolutionDeg;
 
+  const historyControl = (
+    <section>
+      <div className="mb-3 flex items-baseline justify-between gap-3">
+        <label className={SECTION_LABEL} htmlFor="history-years">
+          History window
+        </label>
+        <span className="font-mono text-[12.5px] font-semibold text-accent">
+          {historyLabel}
+        </span>
+      </div>
+      <input
+        id="history-years"
+        className="w-full cursor-pointer [accent-color:var(--accent)]"
+        type="range"
+        min={ZARR_TIME.defaultHistoryYears}
+        max={ZARR_TIME.maxHistoryYears}
+        step={1}
+        value={historyYears}
+        onChange={(event) =>
+          onHistoryYearsChange(Number(event.currentTarget.value))
+        }
+      />
+    </section>
+  );
+
+  const chart = (
+    <section aria-live="polite">
+      <div className="mb-3 flex items-baseline justify-between gap-3">
+        <span className={SECTION_LABEL}>Daily mean</span>
+        {!loadingSeries && !seriesError && seriesValues && seriesUnits ? (
+          <span className={META}>{seriesUnits}</span>
+        ) : null}
+      </div>
+
+      {loadingSeries ? (
+        <div className="grid gap-3">
+          <SeriesLoader progress={seriesProgress} />
+          <TimeSeriesPlotLoading historyYears={historyYears} />
+        </div>
+      ) : seriesError ? (
+        <p className="text-[13px] leading-[1.55] text-editor-fg-tertiary">
+          {seriesError}
+        </p>
+      ) : seriesValues ? (
+        <TimeSeriesPlot
+          values={seriesValues}
+          units={seriesUnits}
+          hoursPerDay={ZARR_TIME.hoursPerDay}
+        />
+      ) : null}
+    </section>
+  );
+
   return (
-    <>
-      <section className={PANEL_CLASS}>
-        <header className="flex items-baseline justify-between gap-3">
-          <h2 className="text-[15px] font-semibold tracking-[-0.02em] text-editor-fg-primary">
-            Pixel location
+    <div className="flex flex-col divide-y divide-editor-border">
+      <section className="pb-4">
+        <div className="flex items-baseline justify-between gap-3">
+          <h2 className="font-mono text-[20px] leading-none tracking-tight tabular-nums text-editor-fg-primary">
+            {formatCoordinate(selection.click.lat)}
+            <span className="text-editor-fg-tertiary">, </span>
+            {formatCoordinate(selection.click.lon)}
           </h2>
-          <span className="flex-shrink-0 font-mono text-[11px] text-editor-fg-tertiary">
-            {ZARR_STORE.kicker}
-          </span>
-        </header>
-        <p className={HINT_CLASS}>
-          Click the map to sample a {ZARR_STORE.spatialResolutionDeg}° cell.
+          <span className={`flex-shrink-0 ${META}`}>{ZARR_STORE.kicker}</span>
+        </div>
+        <p className="mt-2 text-[12.5px] leading-[1.5] text-editor-fg-tertiary">
+          Snapped to the nearest {ZARR_STORE.spatialResolutionDeg}° cell ·
+          variable {ZARR_STORE.defaultVariable}
         </p>
-        <p className={HINT_CLASS}>
+        <p className="mt-2 text-[12.5px] leading-[1.5] text-editor-fg-tertiary">
           Each click downloads a {patchCells}×{patchCells} patch ({patchDeg}° ×{" "}
           {patchDeg}°), drawn as the dashed box. Toggle it with the patch button
           in the top bar.
         </p>
       </section>
 
-      <section className={PANEL_CLASS}>
-        <div className="flex items-baseline justify-between gap-3">
-          <label className={LABEL_CLASS} htmlFor="history-years">
-            History window
-          </label>
-          <span className="font-mono text-[13px] font-semibold text-accent">
-            {historyLabel}
-          </span>
-        </div>
-        <input
-          id="history-years"
-          className="w-full cursor-pointer [accent-color:var(--accent)]"
-          type="range"
-          min={ZARR_TIME.defaultHistoryYears}
-          max={ZARR_TIME.maxHistoryYears}
-          step={1}
-          value={historyYears}
-          onChange={(event) =>
-            onHistoryYearsChange(Number(event.currentTarget.value))
-          }
-        />
-      </section>
+      {/* History drives the chart, so they sit together with no divider. */}
+      <div className="grid gap-4 py-4">
+        {historyControl}
+        {chart}
+      </div>
 
-      <section className={`${PANEL_CLASS} flex-1`} aria-live="polite">
-        {selection ? (
-          <>
-            <dl className="grid grid-cols-2 gap-x-4 gap-y-3 [&_dd]:font-mono [&_dd]:text-[13px] [&_dd]:font-medium [&_dd]:leading-[1.45] [&_dd]:text-editor-fg-secondary [&_div]:grid [&_div]:min-w-0 [&_div]:gap-1 [&_dt]:text-[12px] [&_dt]:text-editor-fg-tertiary">
-              <div>
-                <dt>Click</dt>
-                <dd>{formatGeoPoint(selection.click)}</dd>
-              </div>
-              <div>
-                <dt>Grid cell</dt>
-                <dd>{formatGeoPoint(selection.grid)}</dd>
-              </div>
-              <div>
-                <dt>Indices</dt>
-                <dd>
-                  lon {selection.grid.lonIndex}, lat {selection.grid.latIndex}
-                </dd>
-              </div>
-              <div>
-                <dt>Variable</dt>
-                <dd>{ZARR_STORE.defaultVariable}</dd>
-              </div>
-            </dl>
-
-            <section
-              className="grid min-w-0 gap-3 pt-4"
-              aria-label="Time series"
-            >
-              <p className={LABEL_CLASS}>Time series</p>
-              {loadingSeries && (
-                <TimeSeriesPlotLoading historyYears={historyYears} />
-              )}
-              {!loadingSeries && seriesError && (
-                <p className={HINT_CLASS}>{seriesError}</p>
-              )}
-              {!loadingSeries && !seriesError && seriesValues && (
-                <TimeSeriesPlot
-                  values={seriesValues}
-                  units={seriesUnits}
-                  hoursPerDay={ZARR_TIME.hoursPerDay}
-                />
-              )}
-            </section>
-          </>
-        ) : (
-          <p className={HINT_CLASS}>Pick a point on the map to begin.</p>
-        )}
+      <section className="pt-4">
+        <dl className="grid grid-cols-2 gap-x-4 gap-y-3">
+          <Fact label="Grid cell" value={formatGeoPoint(selection.grid)} />
+          <Fact
+            label="Array index"
+            value={`lon ${selection.grid.lonIndex} · lat ${selection.grid.latIndex}`}
+          />
+        </dl>
       </section>
-    </>
+    </div>
+  );
+}
+
+function Fact({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="grid min-w-0 gap-0.5">
+      <dt className="text-[11.5px] text-editor-fg-tertiary">{label}</dt>
+      <dd className="font-mono text-[13px] tabular-nums text-editor-fg-secondary">
+        {value}
+      </dd>
+    </div>
+  );
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${bytes} B`;
+}
+
+function SeriesLoader({ progress }: { progress: SeriesProgress | null }) {
+  const hasBytes = progress !== null && progress.total > 0;
+  const value = hasBytes ? progress.loaded / progress.total : undefined;
+  const pct = value === undefined ? null : Math.min(100, Math.round(value * 100));
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-baseline justify-between gap-3">
+        <span className="text-[12.5px] text-editor-fg-secondary">
+          Loading time series
+        </span>
+        <span className="font-mono text-[12.5px] font-semibold tabular-nums text-accent">
+          {pct === null ? "…" : `${pct}%`}
+        </span>
+      </div>
+      <ProgressBar value={value} label="Fetching time series" />
+      {hasBytes ? (
+        <p className={META}>
+          {formatBytes(progress.loaded)} / {formatBytes(progress.total)}
+        </p>
+      ) : null}
+    </div>
   );
 }

src/components/map/TimeSeriesPlotLoading.tsx

@@ -28,13 +28,7 @@ export function TimeSeriesPlotLoading({
   const dayCount = dayCountForHistory(historyYears);
 
   return (
-    <div
-      className="relative w-full min-w-0"
-      role="status"
-      aria-live="polite"
-      aria-busy="true"
-      aria-label="Loading time series"
-    >
+    <div className="relative w-full min-w-0" aria-hidden="true">
       <ResponsiveContainer width="100%" height={TIME_SERIES_PLOT_HEIGHT}>
         <LineChart data={[]} margin={TIME_SERIES_CHART_MARGIN}>
           <CartesianGrid stroke={grid} vertical={false} />
@@ -65,9 +59,6 @@ export function TimeSeriesPlotLoading({
           />
         </LineChart>
       </ResponsiveContainer>
-      <p className="pointer-events-none absolute inset-[12px_8px_28px_48px] m-0 grid place-items-center text-[13px] text-editor-fg-tertiary">
-        Loading…
-      </p>
     </div>
   );
 }