Default pixel fetches to the last year and add a history slider.

Slice Zarr reads by the selected window for faster first loads, and harden background prefetch against unhandled rejections.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Anastasiia Ivanchenko

src/app/globals.css

@@ -727,6 +727,47 @@ button {
   line-height: 1.55;
 }
 
+.map-readout-control {
+  display: grid;
+  gap: 10px;
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border-strong);
+}
+
+.map-readout-control-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.map-readout-control-label {
+  font-size: 12px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.map-readout-control-value {
+  font-size: 13px;
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.map-readout-slider {
+  width: 100%;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.map-readout-control-hint {
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
 .map-readout-grid {
   display: grid;
   gap: 12px;

src/components/map/EarthMap.tsx

@@ -11,6 +11,7 @@ import { TEAL_ON_DARK_RGB } from "@/lib/constants/theme";
 import { DEFAULT_MAP_VIEW, MAP_BASE_STYLES } from "@/lib/map/viewState";
 import { openZarrStore } from "@/lib/zarr/store";
 import { ZarrChunkReader } from "@/lib/zarr/ZarrChunkReader";
+import { DEFAULT_HISTORY_YEARS } from "@/lib/zarr/timeRange";
 import type { MapSelection } from "@/types/map";
 import { useTheme } from "@/providers/ThemeProvider";
 import { MapReadout } from "@/components/map/MapReadout";
@@ -25,54 +26,70 @@ export function EarthMap({ className }: EarthMapProps) {
   const requestIdRef = useRef(0);
 
   const [selection, setSelection] = useState<MapSelection | null>(null);
+  const [historyYears, setHistoryYears] = useState(DEFAULT_HISTORY_YEARS);
   const [loadingSeries, setLoadingSeries] = useState(false);
   const [seriesError, setSeriesError] = useState<string | null>(null);
   const [seriesLength, setSeriesLength] = useState<number | null>(null);
   const [seriesPreview, setSeriesPreview] = useState<number[] | null>(null);
   const [seriesUnits, setSeriesUnits] = useState<string | null>(null);
 
-  const loadTimeSeries = useCallback(async (nextSelection: MapSelection) => {
-    const requestId = ++requestIdRef.current;
-    setLoadingSeries(true);
-    setSeriesError(null);
-    setSeriesLength(null);
-    setSeriesPreview(null);
-    setSeriesUnits(null);
-
-    try {
-      if (!readerPromiseRef.current) {
-        readerPromiseRef.current = openZarrStore()
-          .then((ds) => new ZarrChunkReader(ds))
-          .catch((error) => {
-            readerPromiseRef.current = null;
-            throw error;
-          });
+  const loadTimeSeries = useCallback(
+    async (nextSelection: MapSelection, years: number) => {
+      const requestId = ++requestIdRef.current;
+      setLoadingSeries(true);
+      setSeriesError(null);
+      setSeriesLength(null);
+      setSeriesPreview(null);
+      setSeriesUnits(null);
+
+      try {
+        if (!readerPromiseRef.current) {
+          readerPromiseRef.current = openZarrStore()
+            .then((ds) => new ZarrChunkReader(ds))
+            .catch((error) => {
+              readerPromiseRef.current = null;
+              throw error;
+            });
+        }
+
+        const reader = await readerPromiseRef.current;
+
+        const { values, units } = await reader.getTimeSeries(
+          nextSelection.grid,
+          undefined,
+          years,
+        );
+
+        if (requestId !== requestIdRef.current) return;
+
+        setSeriesLength(values.length);
+        setSeriesPreview(Array.from(values.subarray(0, 3)));
+        setSeriesUnits(units ?? null);
+      } catch (error) {
+        if (requestId !== requestIdRef.current) return;
+        setSeriesError(
+          error instanceof Error
+            ? error.message
+            : "Could not load the Zarr time series.",
+        );
+      } finally {
+        if (requestId === requestIdRef.current) {
+          setLoadingSeries(false);
+        }
       }
+    },
+    [],
+  );
 
-      const reader = await readerPromiseRef.current;
-
-      const { values, units } = await reader.getTimeSeries(
-        nextSelection.grid,
-      );
-
-      if (requestId !== requestIdRef.current) return;
-
-      setSeriesLength(values.length);
-      setSeriesPreview(Array.from(values.subarray(0, 3)));
-      setSeriesUnits(units ?? null);
-    } catch (error) {
-      if (requestId !== requestIdRef.current) return;
-      setSeriesError(
-        error instanceof Error
-          ? error.message
-          : "Could not load the Zarr time series.",
-      );
-    } finally {
-      if (requestId === requestIdRef.current) {
-        setLoadingSeries(false);
+  const handleHistoryYearsChange = useCallback(
+    (years: number) => {
+      setHistoryYears(years);
+      if (selection) {
+        void loadTimeSeries(selection, years);
       }
-    }
-  }, []);
+    },
+    [selection, loadTimeSeries],
+  );
 
   const handleClick = useCallback(
     (info: PickingInfo) => {
@@ -85,9 +102,9 @@ export function EarthMap({ className }: EarthMapProps) {
       };
 
       setSelection(nextSelection);
-      void loadTimeSeries(nextSelection);
+      void loadTimeSeries(nextSelection, historyYears);
     },
-    [loadTimeSeries],
+    [historyYears, loadTimeSeries],
   );
 
   const layers = useMemo(() => {
@@ -130,6 +147,8 @@ export function EarthMap({ className }: EarthMapProps) {
 
       <MapReadout
         selection={selection}
+        historyYears={historyYears}
+        onHistoryYearsChange={handleHistoryYearsChange}
         loadingSeries={loadingSeries}
         seriesError={seriesError}
         seriesLength={seriesLength}

src/components/map/MapReadout.tsx

@@ -3,9 +3,12 @@
 import type { MapSelection } from "@/types/map";
 import { formatGeoPoint } from "@/lib/map/geogrid";
 import { ZARR_STORE } from "@/lib/constants/store";
+import { ZARR_TIME } from "@/lib/zarr/timeRange";
 
 type MapReadoutProps = {
   selection: MapSelection | null;
+  historyYears: number;
+  onHistoryYearsChange: (years: number) => void;
   loadingSeries: boolean;
   seriesError: string | null;
   seriesLength: number | null;
@@ -15,12 +18,17 @@ type MapReadoutProps = {
 
 export function MapReadout({
   selection,
+  historyYears,
+  onHistoryYearsChange,
   loadingSeries,
   seriesError,
   seriesLength,
   seriesPreview,
   seriesUnits,
 }: MapReadoutProps) {
+  const historyLabel =
+    historyYears === 1 ? "Last 1 year" : `Last ${historyYears} years`;
+
   return (
     <aside className="map-readout" aria-live="polite">
       <p className="map-readout-kicker mono">{ZARR_STORE.kicker}</p>
@@ -30,6 +38,30 @@ export function MapReadout({
         grid used by the Zarr Store.
       </p>
 
+      <div className="map-readout-control">
+        <div className="map-readout-control-header">
+          <label className="map-readout-control-label" htmlFor="history-years">
+            History window
+          </label>
+          <span className="map-readout-control-value mono">{historyLabel}</span>
+        </div>
+        <input
+          id="history-years"
+          className="map-readout-slider"
+          type="range"
+          min={ZARR_TIME.defaultHistoryYears}
+          max={ZARR_TIME.maxHistoryYears}
+          step={1}
+          value={historyYears}
+          onChange={(event) =>
+            onHistoryYearsChange(Number(event.currentTarget.value))
+          }
+        />
+        <p className="map-readout-control-hint">
+          Fetch only the most recent window to keep pixel loads fast.
+        </p>
+      </div>
+
       {selection ? (
         <dl className="map-readout-grid mono">
           <div>

src/lib/zarr/ZarrChunkReader.ts

@@ -5,11 +5,17 @@ import {
   extractPixelFromNativeChunk,
   nativeChunkKey,
   pixelToNativeChunkContext,
-  stitchTimeSeries,
+  stitchTimeSeriesForRange,
   type ArrayChunkSizes,
+  type AxisSlice,
   type LocalOffset,
   type PixelNativeChunkContext,
 } from "@/lib/zarr/chunks";
+import {
+  chunkIndexToStartDay,
+  DEFAULT_HISTORY_YEARS,
+  yearsToDayRange,
+} from "@/lib/zarr/timeRange";
 import {
   fetchPixelTimeSeries,
   type ZarrArrayHandle,
@@ -117,10 +123,6 @@ export class ZarrChunkReader {
         this.cache.set(key, entry);
         return entry;
       })
-      .catch((error: unknown) => {
-        this.chunkLoadsInFlight.delete(key);
-        throw error;
-      })
       .finally(() => {
         this.chunkLoadsInFlight.delete(key);
       });
@@ -132,6 +134,9 @@ export class ZarrChunkReader {
   private buildFromNativeCache(
     variable: string,
     context: PixelNativeChunkContext,
+    timeRange: AxisSlice,
+    hourCount: number,
+    chunkTime: number,
     units?: string,
   ): { values: Float32Array; variable: string; units?: string } {
     const localOffset: LocalOffset = {
@@ -145,15 +150,18 @@ export class ZarrChunkReader {
         this.nativeCoords(context, timeChunkIdx),
       );
       const chunk = this.cache.get(key)!;
-      return extractPixelFromNativeChunk(
-        chunk.data,
-        chunk.shape,
-        localOffset,
-      );
+      return {
+        values: extractPixelFromNativeChunk(
+          chunk.data,
+          chunk.shape,
+          localOffset,
+        ),
+        chunkStartDay: chunkIndexToStartDay(timeChunkIdx, chunkTime),
+      };
     });
 
     return {
-      values: stitchTimeSeries(segments),
+      values: stitchTimeSeriesForRange(segments, timeRange, hourCount),
       variable,
       units,
     };
@@ -187,6 +195,9 @@ export class ZarrChunkReader {
       ),
     )
       .then(() => undefined)
+      .catch(() => {
+        // Prefetch is best-effort; explicit requests retry failed chunks.
+      })
       .finally(() => {
         this.prefetchInFlight.delete(prefetchKey);
       });
@@ -197,24 +208,34 @@ export class ZarrChunkReader {
   async getTimeSeries(
     grid: GridCell,
     variable = ZARR_STORE.defaultVariable,
+    historyYears?: number,
   ): Promise<{ values: Float32Array; variable: string; units?: string }> {
     const array = await this.getArray(variable);
     const chunkSizes = this.getChunkSizes(array);
-    const [timeCount] = array.shape;
+    const [timeCount, hourCount] = array.shape;
+    const timeRange = yearsToDayRange(historyYears ?? DEFAULT_HISTORY_YEARS, timeCount);
     const context = pixelToNativeChunkContext(
       grid.latIndex,
       grid.lonIndex,
       timeCount,
       chunkSizes,
+      timeRange,
     );
     const units =
       typeof array.attrs.units === "string" ? array.attrs.units : undefined;
 
     if (this.hasAllNativeChunks(variable, context)) {
-      return this.buildFromNativeCache(variable, context, units);
+      return this.buildFromNativeCache(
+        variable,
+        context,
+        timeRange,
+        hourCount,
+        chunkSizes.time,
+        units,
+      );
     }
 
-    const pixel = await fetchPixelTimeSeries(array, grid, variable);
+    const pixel = await fetchPixelTimeSeries(array, grid, variable, timeRange);
     this.prefetchNativeChunks(array, variable, context);
     return pixel;
   }