From 376a644ecebdb2469e8468849cf7e2b2db940324 Mon Sep 17 00:00:00 2001
From: Anastasiia Ivanchenko <a.ivanchenko.eu@gmai.com>
Date: Tue, 14 Jul 2026 10:15:58 +0300
Subject: [PATCH 1/4] Show cached patches as blue boxes on the map

---
 src/components/layout/Nav.tsx                | 19 +++++++++
 src/components/map/EarthMap.tsx              | 33 +++++++++++++++-
 src/components/map/GlobeSelectionOverlay.tsx | 28 ++++++++++++-
 src/icons/CacheIcon.tsx                      | 18 +++++++++
 src/lib/cache/lru.ts                         |  5 +++
 src/lib/constants/theme.ts                   |  4 ++
 src/lib/map/geogrid.test.ts                  | 16 ++++++++
 src/lib/map/geogrid.ts                       | 36 +++++++++++++++--
 src/lib/map/selectionStyle.ts                | 14 +++++++
 src/lib/zarr/ZarrChunkReader.ts              | 41 ++++++++++++++++++++
 10 files changed, 208 insertions(+), 6 deletions(-)
 create mode 100644 src/icons/CacheIcon.tsx

diff --git a/src/components/layout/Nav.tsx b/src/components/layout/Nav.tsx
index fa1f637..aef2246 100644
--- a/src/components/layout/Nav.tsx
+++ b/src/components/layout/Nav.tsx
@@ -6,6 +6,7 @@ import { NavActions } from "@/components/nav/NavActions";
 import { IconButton } from "@/components/ui/IconButton";
 import { CrosshairIcon } from "@/icons/CrosshairIcon";
 import { PatchIcon } from "@/icons/PatchIcon";
+import { CacheIcon } from "@/icons/CacheIcon";
 import type { MapViewMode } from "@/types/map";
 
 type NavProps = {
@@ -15,6 +16,8 @@ type NavProps = {
   onZoomToSelection?: () => void;
   showPatch?: boolean;
   onTogglePatch?: () => void;
+  showCached?: boolean;
+  onToggleCached?: () => void;
 };
 
 export function Nav({
@@ -24,6 +27,8 @@ export function Nav({
   onZoomToSelection,
   showPatch = false,
   onTogglePatch,
+  showCached = false,
+  onToggleCached,
 }: NavProps) {
   return (
     <nav className="relative z-[100] flex w-full flex-col gap-0 overflow-visible">
@@ -59,6 +64,20 @@ export function Nav({
                 <PatchIcon />
               </IconButton>
             ) : null}
+            {onToggleCached ? (
+              <IconButton
+                className="animate-[zoomToSelectionIn_0.18s_cubic-bezier(0.16,1,0.3,1)]"
+                aria-label={
+                  showCached
+                    ? "Hide cached patches"
+                    : "Show cached patches"
+                }
+                aria-pressed={showCached}
+                onClick={onToggleCached}
+              >
+                <CacheIcon />
+              </IconButton>
+            ) : null}
           </div>
           <NavActions />
         </div>
diff --git a/src/components/map/EarthMap.tsx b/src/components/map/EarthMap.tsx
index 2694731..0347b7c 100644
--- a/src/components/map/EarthMap.tsx
+++ b/src/components/map/EarthMap.tsx
@@ -7,7 +7,9 @@ import Map, {
   type ViewStateChangeEvent,
 } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { geoPointToZarrGrid } from "@/lib/map/geogrid";
+import { chunkIndicesToPatchBounds, geoPointToZarrGrid } from "@/lib/map/geogrid";
+import type { GridCellBounds } from "@/lib/map/geogrid";
+import { ZARR_STORE } from "@/lib/constants/store";
 import { brightenDarkMapPlaceLabels } from "@/lib/map/mapLabels";
 import type { MapLibreEvent, MapStyleDataEvent } from "maplibre-gl";
 import {
@@ -58,6 +60,9 @@ export function EarthMap() {
   const [mapSize, setMapSize] = useState({ width: 0, height: 0 });
   const [selection, setSelection] = useState<MapSelection | null>(null);
   const [showPatch, setShowPatch] = useState(true);
+  const [showCached, setShowCached] = useState(true);
+  const [reader, setReader] = useState<ZarrChunkReader | null>(null);
+  const [cachedBounds, setCachedBounds] = useState<GridCellBounds[]>([]);
   const [historyYears, setHistoryYears] = useState(DEFAULT_HISTORY_YEARS);
   const [loadingSeries, setLoadingSeries] = useState(false);
   const [seriesError, setSeriesError] = useState<string | null>(null);
@@ -81,6 +86,24 @@ export function EarthMap() {
     return () => observer.disconnect();
   }, []);
 
+  useEffect(() => {
+    if (!reader) return;
+    const update = () => {
+      setCachedBounds(
+        reader.getCachedPatches().map((patch) =>
+          chunkIndicesToPatchBounds(
+            patch.latChunkIdx,
+            patch.lonChunkIdx,
+            ZARR_STORE.nativeChunks.lat,
+            ZARR_STORE.nativeChunks.lon,
+          ),
+        ),
+      );
+    };
+    update();
+    return reader.subscribe(update);
+  }, [reader]);
+
   const loadTimeSeries = useCallback(
     async (nextSelection: MapSelection, years: number) => {
       const requestId = ++requestIdRef.current;
@@ -100,6 +123,7 @@ export function EarthMap() {
         }
 
         const reader = await readerPromiseRef.current;
+        setReader(reader);
 
         const { values, units } = await reader.getTimeSeries(
           nextSelection.grid,
@@ -189,6 +213,10 @@ export function EarthMap() {
     setShowPatch((previous) => !previous);
   }, []);
 
+  const handleToggleCached = useCallback(() => {
+    setShowCached((previous) => !previous);
+  }, []);
+
   const handleMove = useCallback(
     (event: ViewStateChangeEvent) => {
       setViewState(toMapViewState(event.viewState, viewMode));
@@ -233,6 +261,8 @@ export function EarthMap() {
           onZoomToSelection={handleZoomToSelection}
           showPatch={showPatch}
           onTogglePatch={handleTogglePatch}
+          showCached={showCached}
+          onToggleCached={cachedBounds.length > 0 ? handleToggleCached : undefined}
         />
       }
       sidebar={
@@ -284,6 +314,7 @@ export function EarthMap() {
                 isLight={isLight}
                 isSphere={isSphere}
                 showPatch={showPatch}
+                cachedBounds={showCached ? cachedBounds : undefined}
               />
             ) : null}
           </Map>
diff --git a/src/components/map/GlobeSelectionOverlay.tsx b/src/components/map/GlobeSelectionOverlay.tsx
index 23a2108..426106d 100644
--- a/src/components/map/GlobeSelectionOverlay.tsx
+++ b/src/components/map/GlobeSelectionOverlay.tsx
@@ -11,12 +11,14 @@ import {
 import { ZARR_STORE } from "@/lib/constants/store";
 import {
   rgba,
+  SELECTION_CACHED_COLOR,
   SELECTION_CELL_COLOR,
   SELECTION_GUIDE_COLOR,
   SELECTION_PATCH_COLOR,
 } from "@/lib/map/selectionStyle";
 import { viewportToGeoBounds } from "@/lib/map/viewportBounds";
 import type { GridCell, MapViewState } from "@/types/map";
+import type { GridCellBounds } from "@/lib/map/geogrid";
 
 type GlobeSelectionOverlayProps = {
   cell: GridCell;
@@ -25,6 +27,7 @@ type GlobeSelectionOverlayProps = {
   isLight: boolean;
   isSphere?: boolean;
   showPatch?: boolean;
+  cachedBounds?: GridCellBounds[];
 };
 
 export function GlobeSelectionOverlay({
@@ -34,6 +37,7 @@ export function GlobeSelectionOverlay({
   isLight,
   isSphere = false,
   showPatch = false,
+  cachedBounds,
 }: GlobeSelectionOverlayProps) {
   const data = useMemo(() => {
     const guidePaths = gridCellToGuidePaths(
@@ -45,12 +49,16 @@ export function GlobeSelectionOverlay({
       patchBounds: showPatch
         ? chunkPatchBounds(cell, ZARR_STORE.nativeChunks.lat, ZARR_STORE.nativeChunks.lon)
         : null,
+      cachedBounds,
     });
-  }, [cell, isSphere, mapSize.height, mapSize.width, showPatch, viewState]);
+  }, [cachedBounds, cell, isSphere, mapSize.height, mapSize.width, showPatch, viewState]);
 
   const guideColor = rgba(
     isLight ? SELECTION_GUIDE_COLOR.light : SELECTION_GUIDE_COLOR.dark,
   );
+  const cachedColor = isLight
+    ? SELECTION_CACHED_COLOR.light
+    : SELECTION_CACHED_COLOR.dark;
   const cellColor = isLight ? SELECTION_CELL_COLOR.light : SELECTION_CELL_COLOR.dark;
   const patchColor = isLight
     ? SELECTION_PATCH_COLOR.light
@@ -68,6 +76,24 @@ export function GlobeSelectionOverlay({
           "line-dasharray": [6, 5],
         }}
       />
+      <Layer
+        id="map-selection-cached-fill"
+        type="fill"
+        filter={["==", ["get", "kind"], "cached"]}
+        paint={{
+          "fill-color": rgba(cachedColor.fill),
+        }}
+      />
+      <Layer
+        id="map-selection-cached-line"
+        type="line"
+        filter={["==", ["get", "kind"], "cached"]}
+        paint={{
+          "line-color": rgba(cachedColor.line),
+          "line-width": 1,
+          "line-dasharray": [2, 3],
+        }}
+      />
       <Layer
         id="map-selection-patch-fill"
         type="fill"
diff --git a/src/icons/CacheIcon.tsx b/src/icons/CacheIcon.tsx
new file mode 100644
index 0000000..473b8a7
--- /dev/null
+++ b/src/icons/CacheIcon.tsx
@@ -0,0 +1,18 @@
+export function CacheIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="8" y="8" width="12" height="12" rx="2" />
+      <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
+    </svg>
+  );
+}
diff --git a/src/lib/cache/lru.ts b/src/lib/cache/lru.ts
index eac965d..adcb5b3 100644
--- a/src/lib/cache/lru.ts
+++ b/src/lib/cache/lru.ts
@@ -37,6 +37,11 @@ export class LRUCache<K, V> {
     return this.cache.has(key);
   }
 
+  /** Current keys in LRU order (oldest first). Does not affect recency. */
+  keys(): IterableIterator<K> {
+    return this.cache.keys();
+  }
+
   delete(key: K): boolean {
     return this.cache.delete(key);
   }
diff --git a/src/lib/constants/theme.ts b/src/lib/constants/theme.ts
index 3c83956..c1354ed 100644
--- a/src/lib/constants/theme.ts
+++ b/src/lib/constants/theme.ts
@@ -9,6 +9,10 @@ export const TEAL_ON_DARK_RGB = [82, 212, 200] as const;
 export const VIOLET_RGB = [85, 71, 206] as const;
 export const VIOLET_ON_DARK_RGB = [137, 124, 253] as const;
 
+/** Azure blue for patches already cached in memory. */
+export const BLUE_RGB = [1, 64, 151] as const;
+export const BLUE_ON_DARK_RGB = [73, 151, 255] as const;
+
 export const COLD_RGB = {
   light: [120, 120, 118] as const,
   dark: [150, 150, 150] as const,
diff --git a/src/lib/map/geogrid.test.ts b/src/lib/map/geogrid.test.ts
index 189295a..68755db 100644
--- a/src/lib/map/geogrid.test.ts
+++ b/src/lib/map/geogrid.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import {
+  chunkIndicesToPatchBounds,
   chunkPatchBounds,
   geoPointToZarrGrid,
   gridCellToBounds,
@@ -57,6 +58,21 @@ describe("chunkPatchBounds", () => {
     expect(bounds.south).toBeLessThanOrEqual(cellBounds.south);
     expect(bounds.north).toBeGreaterThanOrEqual(cellBounds.north);
   });
+
+  it("matches chunkIndicesToPatchBounds for the cell's chunk", () => {
+    const { lat, lon } = ZARR_STORE.nativeChunks;
+    const cell = geoPointToZarrGrid({ lon: 10.012, lat: 51.998 });
+
+    const fromCell = chunkPatchBounds(cell, lat, lon);
+    const fromIndices = chunkIndicesToPatchBounds(
+      Math.floor(cell.latIndex / lat),
+      Math.floor(cell.lonIndex / lon),
+      lat,
+      lon,
+    );
+
+    expect(fromIndices).toEqual(fromCell);
+  });
 });
 
 describe("gridCellToGuidePaths", () => {
diff --git a/src/lib/map/geogrid.ts b/src/lib/map/geogrid.ts
index e58772f..09c04c2 100644
--- a/src/lib/map/geogrid.ts
+++ b/src/lib/map/geogrid.ts
@@ -78,9 +78,24 @@ export function chunkPatchBounds(
   chunkLat: number,
   chunkLon: number,
 ): GridCellBounds {
-  const firstLatIdx = Math.floor(cell.latIndex / chunkLat) * chunkLat;
+  return chunkIndicesToPatchBounds(
+    Math.floor(cell.latIndex / chunkLat),
+    Math.floor(cell.lonIndex / chunkLon),
+    chunkLat,
+    chunkLon,
+  );
+}
+
+/** Geographic bounds of a chunk addressed directly by its lat/lon chunk index. */
+export function chunkIndicesToPatchBounds(
+  latChunkIdx: number,
+  lonChunkIdx: number,
+  chunkLat: number,
+  chunkLon: number,
+): GridCellBounds {
+  const firstLatIdx = latChunkIdx * chunkLat;
   const lastLatIdx = Math.min(firstLatIdx + chunkLat, dimensions.lat) - 1;
-  const firstLonIdx = Math.floor(cell.lonIndex / chunkLon) * chunkLon;
+  const firstLonIdx = lonChunkIdx * chunkLon;
   const lastLonIdx = Math.min(firstLonIdx + chunkLon, dimensions.lon) - 1;
 
   const latEdgeA = grid.latStart + firstLatIdx * grid.latStep;
@@ -162,7 +177,7 @@ export type SelectionGuideGeoJson = {
   type: "FeatureCollection";
   features: Array<{
     type: "Feature";
-    properties: { kind: "guide" | "cell" | "patch" };
+    properties: { kind: "guide" | "cell" | "patch" | "cached" };
     geometry:
       | { type: "LineString"; coordinates: LonLatPath }
       | { type: "Polygon"; coordinates: LonLatPath[] };
@@ -179,10 +194,15 @@ function closedRing(corners: GeoPoint[]): LonLatPath {
 export function selectionGuideGeoJson(
   cell: GridCell,
   guidePaths: LonLatPath[],
-  options?: { densifyGuides?: boolean; patchBounds?: GridCellBounds | null },
+  options?: {
+    densifyGuides?: boolean;
+    patchBounds?: GridCellBounds | null;
+    cachedBounds?: GridCellBounds[] | null;
+  },
 ): SelectionGuideGeoJson {
   const densifyGuides = options?.densifyGuides ?? true;
   const patchBounds = options?.patchBounds ?? null;
+  const cachedBounds = options?.cachedBounds ?? null;
 
   return {
     type: "FeatureCollection",
@@ -195,6 +215,14 @@ export function selectionGuideGeoJson(
           coordinates: densifyGuides ? densifyLonLatPath(path) : path,
         },
       })),
+      ...(cachedBounds ?? []).map((bounds) => ({
+        type: "Feature" as const,
+        properties: { kind: "cached" as const },
+        geometry: {
+          type: "Polygon" as const,
+          coordinates: [closedRing(boundsToPolygon(bounds))],
+        },
+      })),
       ...(patchBounds
         ? [
             {
diff --git a/src/lib/map/selectionStyle.ts b/src/lib/map/selectionStyle.ts
index f554c3b..527c231 100644
--- a/src/lib/map/selectionStyle.ts
+++ b/src/lib/map/selectionStyle.ts
@@ -1,4 +1,6 @@
 import {
+  BLUE_ON_DARK_RGB,
+  BLUE_RGB,
   TEAL_ON_DARK_RGB,
   TEAL_RGB,
   VIOLET_ON_DARK_RGB,
@@ -33,6 +35,18 @@ export const SELECTION_PATCH_COLOR = {
   },
 };
 
+/** Patches already held in the LRU cache: a faint blue fill and outline. */
+export const SELECTION_CACHED_COLOR = {
+  light: {
+    fill: [...BLUE_RGB, 12] as const,
+    line: [...BLUE_RGB, 120] as const,
+  },
+  dark: {
+    fill: [...BLUE_ON_DARK_RGB, 16] as const,
+    line: [...BLUE_ON_DARK_RGB, 140] as const,
+  },
+};
+
 export function rgba(
   [r, g, b, a]: readonly [number, number, number, number],
 ): string {
diff --git a/src/lib/zarr/ZarrChunkReader.ts b/src/lib/zarr/ZarrChunkReader.ts
index fc48afa..eb5703b 100644
--- a/src/lib/zarr/ZarrChunkReader.ts
+++ b/src/lib/zarr/ZarrChunkReader.ts
@@ -28,6 +28,12 @@ type CachedNativeChunk = {
   shape: readonly number[];
 };
 
+/** A distinct lat/lon patch currently held in the native-chunk cache. */
+export type CachedPatch = {
+  latChunkIdx: number;
+  lonChunkIdx: number;
+};
+
 type ZarrArray = ZarrArrayHandle & {
   getChunk(
     chunkCoords: number[],
@@ -40,6 +46,8 @@ export class ZarrChunkReader {
   private arrayPromises = new Map<string, Promise<ZarrArray>>();
   private chunkLoadsInFlight = new Map<string, Promise<CachedNativeChunk>>();
   private prefetchInFlight = new Map<string, Promise<void>>();
+  private cacheVersion = 0;
+  private listeners = new Set<() => void>();
 
   /** Default holds ~8 pixels of full history (6 native chunks per pixel). */
   constructor(ds: ZarrStore, maxCacheSize = 48) {
@@ -47,6 +55,38 @@ export class ZarrChunkReader {
     this.cache = new LRUCache(maxCacheSize);
   }
 
+  /** Subscribe to cache mutations (for `useSyncExternalStore`). */
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  /** Snapshot that changes whenever the cache contents change. */
+  getCacheVersion = (): number => this.cacheVersion;
+
+  /** Distinct lat/lon patches currently held in the cache. */
+  getCachedPatches(): CachedPatch[] {
+    const seen = new Set<string>();
+    const patches: CachedPatch[] = [];
+    for (const key of this.cache.keys()) {
+      const parts = key.split(":");
+      const latChunkIdx = Number(parts[3]);
+      const lonChunkIdx = Number(parts[4]);
+      const patchKey = `${latChunkIdx}:${lonChunkIdx}`;
+      if (seen.has(patchKey)) continue;
+      seen.add(patchKey);
+      patches.push({ latChunkIdx, lonChunkIdx });
+    }
+    return patches;
+  }
+
+  private onCacheChanged(): void {
+    this.cacheVersion += 1;
+    for (const listener of this.listeners) listener();
+  }
+
   private getArray(variable: string): Promise<ZarrArray> {
     const existing = this.arrayPromises.get(variable);
     if (existing) return existing;
@@ -121,6 +161,7 @@ export class ZarrChunkReader {
           shape: chunk.shape,
         };
         this.cache.set(key, entry);
+        this.onCacheChanged();
         return entry;
       })
       .finally(() => {

From b3feed6fda8c6709a82f188986b661c1d571a2cb Mon Sep 17 00:00:00 2001
From: Anastasiia Ivanchenko <a.ivanchenko.eu@gmai.com>
Date: Tue, 14 Jul 2026 10:25:14 +0300
Subject: [PATCH 2/4] Fix patch toggle hidden by cached box; clearer cache icon

---
 src/components/map/EarthMap.tsx | 48 ++++++++++++++++++++++-----------
 src/icons/CacheIcon.tsx         |  5 ++--
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/map/EarthMap.tsx b/src/components/map/EarthMap.tsx
index 0347b7c..2b9e073 100644
--- a/src/components/map/EarthMap.tsx
+++ b/src/components/map/EarthMap.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Map, {
   type MapMouseEvent,
   type MapRef,
@@ -8,7 +8,6 @@ import Map, {
 } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { chunkIndicesToPatchBounds, geoPointToZarrGrid } from "@/lib/map/geogrid";
-import type { GridCellBounds } from "@/lib/map/geogrid";
 import { ZARR_STORE } from "@/lib/constants/store";
 import { brightenDarkMapPlaceLabels } from "@/lib/map/mapLabels";
 import type { MapLibreEvent, MapStyleDataEvent } from "maplibre-gl";
@@ -20,7 +19,7 @@ import {
   viewStateForMode,
 } from "@/lib/map/viewState";
 import { openZarrStore } from "@/lib/zarr/store";
-import { ZarrChunkReader } from "@/lib/zarr/ZarrChunkReader";
+import { ZarrChunkReader, type CachedPatch } from "@/lib/zarr/ZarrChunkReader";
 import { DEFAULT_HISTORY_YEARS } from "@/lib/zarr/timeRange";
 import type { MapSelection, MapViewMode, MapViewState } from "@/types/map";
 import { useTheme } from "@/providers/ThemeProvider";
@@ -62,7 +61,7 @@ export function EarthMap() {
   const [showPatch, setShowPatch] = useState(true);
   const [showCached, setShowCached] = useState(true);
   const [reader, setReader] = useState<ZarrChunkReader | null>(null);
-  const [cachedBounds, setCachedBounds] = useState<GridCellBounds[]>([]);
+  const [cachedPatches, setCachedPatches] = useState<CachedPatch[]>([]);
   const [historyYears, setHistoryYears] = useState(DEFAULT_HISTORY_YEARS);
   const [loadingSeries, setLoadingSeries] = useState(false);
   const [seriesError, setSeriesError] = useState<string | null>(null);
@@ -88,22 +87,39 @@ export function EarthMap() {
 
   useEffect(() => {
     if (!reader) return;
-    const update = () => {
-      setCachedBounds(
-        reader.getCachedPatches().map((patch) =>
-          chunkIndicesToPatchBounds(
-            patch.latChunkIdx,
-            patch.lonChunkIdx,
-            ZARR_STORE.nativeChunks.lat,
-            ZARR_STORE.nativeChunks.lon,
-          ),
-        ),
-      );
-    };
+    const update = () => setCachedPatches(reader.getCachedPatches());
     update();
     return reader.subscribe(update);
   }, [reader]);
 
+  // Blue boxes for cached patches, minus the active selection's patch — that
+  // rectangle belongs to the violet patch overlay, so drawing both would make
+  // the patch toggle look like it does nothing.
+  const cachedBounds = useMemo(() => {
+    const { lat: chunkLat, lon: chunkLon } = ZARR_STORE.nativeChunks;
+    const activeLatChunk = selection
+      ? Math.floor(selection.grid.latIndex / chunkLat)
+      : null;
+    const activeLonChunk = selection
+      ? Math.floor(selection.grid.lonIndex / chunkLon)
+      : null;
+
+    return cachedPatches
+      .filter(
+        (patch) =>
+          patch.latChunkIdx !== activeLatChunk ||
+          patch.lonChunkIdx !== activeLonChunk,
+      )
+      .map((patch) =>
+        chunkIndicesToPatchBounds(
+          patch.latChunkIdx,
+          patch.lonChunkIdx,
+          chunkLat,
+          chunkLon,
+        ),
+      );
+  }, [cachedPatches, selection]);
+
   const loadTimeSeries = useCallback(
     async (nextSelection: MapSelection, years: number) => {
       const requestId = ++requestIdRef.current;
diff --git a/src/icons/CacheIcon.tsx b/src/icons/CacheIcon.tsx
index 473b8a7..134aa56 100644
--- a/src/icons/CacheIcon.tsx
+++ b/src/icons/CacheIcon.tsx
@@ -11,8 +11,9 @@ export function CacheIcon() {
       strokeLinejoin="round"
       aria-hidden="true"
     >
-      <rect x="8" y="8" width="12" height="12" rx="2" />
-      <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
+      <ellipse cx="12" cy="5" rx="8" ry="3" />
+      <path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5" />
+      <path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" />
     </svg>
   );
 }

From 71793de6000e58ce9ff71410f86d9809797848ba Mon Sep 17 00:00:00 2001
From: Anastasiia Ivanchenko <a.ivanchenko.eu@gmai.com>
Date: Tue, 14 Jul 2026 10:31:40 +0300
Subject: [PATCH 3/4] Revert "Fix patch toggle hidden by cached box; clearer
 cache icon"

This reverts commit b3feed6fda8c6709a82f188986b661c1d571a2cb.
---
 src/components/map/EarthMap.tsx | 48 +++++++++++----------------------
 src/icons/CacheIcon.tsx         |  5 ++--
 2 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/src/components/map/EarthMap.tsx b/src/components/map/EarthMap.tsx
index 2b9e073..0347b7c 100644
--- a/src/components/map/EarthMap.tsx
+++ b/src/components/map/EarthMap.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Map, {
   type MapMouseEvent,
   type MapRef,
@@ -8,6 +8,7 @@ import Map, {
 } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { chunkIndicesToPatchBounds, geoPointToZarrGrid } from "@/lib/map/geogrid";
+import type { GridCellBounds } from "@/lib/map/geogrid";
 import { ZARR_STORE } from "@/lib/constants/store";
 import { brightenDarkMapPlaceLabels } from "@/lib/map/mapLabels";
 import type { MapLibreEvent, MapStyleDataEvent } from "maplibre-gl";
@@ -19,7 +20,7 @@ import {
   viewStateForMode,
 } from "@/lib/map/viewState";
 import { openZarrStore } from "@/lib/zarr/store";
-import { ZarrChunkReader, type CachedPatch } from "@/lib/zarr/ZarrChunkReader";
+import { ZarrChunkReader } from "@/lib/zarr/ZarrChunkReader";
 import { DEFAULT_HISTORY_YEARS } from "@/lib/zarr/timeRange";
 import type { MapSelection, MapViewMode, MapViewState } from "@/types/map";
 import { useTheme } from "@/providers/ThemeProvider";
@@ -61,7 +62,7 @@ export function EarthMap() {
   const [showPatch, setShowPatch] = useState(true);
   const [showCached, setShowCached] = useState(true);
   const [reader, setReader] = useState<ZarrChunkReader | null>(null);
-  const [cachedPatches, setCachedPatches] = useState<CachedPatch[]>([]);
+  const [cachedBounds, setCachedBounds] = useState<GridCellBounds[]>([]);
   const [historyYears, setHistoryYears] = useState(DEFAULT_HISTORY_YEARS);
   const [loadingSeries, setLoadingSeries] = useState(false);
   const [seriesError, setSeriesError] = useState<string | null>(null);
@@ -87,39 +88,22 @@ export function EarthMap() {
 
   useEffect(() => {
     if (!reader) return;
-    const update = () => setCachedPatches(reader.getCachedPatches());
+    const update = () => {
+      setCachedBounds(
+        reader.getCachedPatches().map((patch) =>
+          chunkIndicesToPatchBounds(
+            patch.latChunkIdx,
+            patch.lonChunkIdx,
+            ZARR_STORE.nativeChunks.lat,
+            ZARR_STORE.nativeChunks.lon,
+          ),
+        ),
+      );
+    };
     update();
     return reader.subscribe(update);
   }, [reader]);
 
-  // Blue boxes for cached patches, minus the active selection's patch — that
-  // rectangle belongs to the violet patch overlay, so drawing both would make
-  // the patch toggle look like it does nothing.
-  const cachedBounds = useMemo(() => {
-    const { lat: chunkLat, lon: chunkLon } = ZARR_STORE.nativeChunks;
-    const activeLatChunk = selection
-      ? Math.floor(selection.grid.latIndex / chunkLat)
-      : null;
-    const activeLonChunk = selection
-      ? Math.floor(selection.grid.lonIndex / chunkLon)
-      : null;
-
-    return cachedPatches
-      .filter(
-        (patch) =>
-          patch.latChunkIdx !== activeLatChunk ||
-          patch.lonChunkIdx !== activeLonChunk,
-      )
-      .map((patch) =>
-        chunkIndicesToPatchBounds(
-          patch.latChunkIdx,
-          patch.lonChunkIdx,
-          chunkLat,
-          chunkLon,
-        ),
-      );
-  }, [cachedPatches, selection]);
-
   const loadTimeSeries = useCallback(
     async (nextSelection: MapSelection, years: number) => {
       const requestId = ++requestIdRef.current;
diff --git a/src/icons/CacheIcon.tsx b/src/icons/CacheIcon.tsx
index 134aa56..473b8a7 100644
--- a/src/icons/CacheIcon.tsx
+++ b/src/icons/CacheIcon.tsx
@@ -11,9 +11,8 @@ export function CacheIcon() {
       strokeLinejoin="round"
       aria-hidden="true"
     >
-      <ellipse cx="12" cy="5" rx="8" ry="3" />
-      <path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5" />
-      <path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" />
+      <rect x="8" y="8" width="12" height="12" rx="2" />
+      <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
     </svg>
   );
 }

From 5922409b820988c31d00410db1224504c910a8b0 Mon Sep 17 00:00:00 2001
From: Anastasiia Ivanchenko <a.ivanchenko.eu@gmai.com>
Date: Tue, 14 Jul 2026 10:31:40 +0300
Subject: [PATCH 4/4] Revert "Show cached patches as blue boxes on the map"

This reverts commit 376a644ecebdb2469e8468849cf7e2b2db940324.
---
 src/components/layout/Nav.tsx                | 19 ---------
 src/components/map/EarthMap.tsx              | 33 +---------------
 src/components/map/GlobeSelectionOverlay.tsx | 28 +------------
 src/icons/CacheIcon.tsx                      | 18 ---------
 src/lib/cache/lru.ts                         |  5 ---
 src/lib/constants/theme.ts                   |  4 --
 src/lib/map/geogrid.test.ts                  | 16 --------
 src/lib/map/geogrid.ts                       | 36 ++---------------
 src/lib/map/selectionStyle.ts                | 14 -------
 src/lib/zarr/ZarrChunkReader.ts              | 41 --------------------
 10 files changed, 6 insertions(+), 208 deletions(-)
 delete mode 100644 src/icons/CacheIcon.tsx

diff --git a/src/components/layout/Nav.tsx b/src/components/layout/Nav.tsx
index aef2246..fa1f637 100644
--- a/src/components/layout/Nav.tsx
+++ b/src/components/layout/Nav.tsx
@@ -6,7 +6,6 @@ import { NavActions } from "@/components/nav/NavActions";
 import { IconButton } from "@/components/ui/IconButton";
 import { CrosshairIcon } from "@/icons/CrosshairIcon";
 import { PatchIcon } from "@/icons/PatchIcon";
-import { CacheIcon } from "@/icons/CacheIcon";
 import type { MapViewMode } from "@/types/map";
 
 type NavProps = {
@@ -16,8 +15,6 @@ type NavProps = {
   onZoomToSelection?: () => void;
   showPatch?: boolean;
   onTogglePatch?: () => void;
-  showCached?: boolean;
-  onToggleCached?: () => void;
 };
 
 export function Nav({
@@ -27,8 +24,6 @@ export function Nav({
   onZoomToSelection,
   showPatch = false,
   onTogglePatch,
-  showCached = false,
-  onToggleCached,
 }: NavProps) {
   return (
     <nav className="relative z-[100] flex w-full flex-col gap-0 overflow-visible">
@@ -64,20 +59,6 @@ export function Nav({
                 <PatchIcon />
               </IconButton>
             ) : null}
-            {onToggleCached ? (
-              <IconButton
-                className="animate-[zoomToSelectionIn_0.18s_cubic-bezier(0.16,1,0.3,1)]"
-                aria-label={
-                  showCached
-                    ? "Hide cached patches"
-                    : "Show cached patches"
-                }
-                aria-pressed={showCached}
-                onClick={onToggleCached}
-              >
-                <CacheIcon />
-              </IconButton>
-            ) : null}
           </div>
           <NavActions />
         </div>
diff --git a/src/components/map/EarthMap.tsx b/src/components/map/EarthMap.tsx
index 0347b7c..2694731 100644
--- a/src/components/map/EarthMap.tsx
+++ b/src/components/map/EarthMap.tsx
@@ -7,9 +7,7 @@ import Map, {
   type ViewStateChangeEvent,
 } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { chunkIndicesToPatchBounds, geoPointToZarrGrid } from "@/lib/map/geogrid";
-import type { GridCellBounds } from "@/lib/map/geogrid";
-import { ZARR_STORE } from "@/lib/constants/store";
+import { geoPointToZarrGrid } from "@/lib/map/geogrid";
 import { brightenDarkMapPlaceLabels } from "@/lib/map/mapLabels";
 import type { MapLibreEvent, MapStyleDataEvent } from "maplibre-gl";
 import {
@@ -60,9 +58,6 @@ export function EarthMap() {
   const [mapSize, setMapSize] = useState({ width: 0, height: 0 });
   const [selection, setSelection] = useState<MapSelection | null>(null);
   const [showPatch, setShowPatch] = useState(true);
-  const [showCached, setShowCached] = useState(true);
-  const [reader, setReader] = useState<ZarrChunkReader | null>(null);
-  const [cachedBounds, setCachedBounds] = useState<GridCellBounds[]>([]);
   const [historyYears, setHistoryYears] = useState(DEFAULT_HISTORY_YEARS);
   const [loadingSeries, setLoadingSeries] = useState(false);
   const [seriesError, setSeriesError] = useState<string | null>(null);
@@ -86,24 +81,6 @@ export function EarthMap() {
     return () => observer.disconnect();
   }, []);
 
-  useEffect(() => {
-    if (!reader) return;
-    const update = () => {
-      setCachedBounds(
-        reader.getCachedPatches().map((patch) =>
-          chunkIndicesToPatchBounds(
-            patch.latChunkIdx,
-            patch.lonChunkIdx,
-            ZARR_STORE.nativeChunks.lat,
-            ZARR_STORE.nativeChunks.lon,
-          ),
-        ),
-      );
-    };
-    update();
-    return reader.subscribe(update);
-  }, [reader]);
-
   const loadTimeSeries = useCallback(
     async (nextSelection: MapSelection, years: number) => {
       const requestId = ++requestIdRef.current;
@@ -123,7 +100,6 @@ export function EarthMap() {
         }
 
         const reader = await readerPromiseRef.current;
-        setReader(reader);
 
         const { values, units } = await reader.getTimeSeries(
           nextSelection.grid,
@@ -213,10 +189,6 @@ export function EarthMap() {
     setShowPatch((previous) => !previous);
   }, []);
 
-  const handleToggleCached = useCallback(() => {
-    setShowCached((previous) => !previous);
-  }, []);
-
   const handleMove = useCallback(
     (event: ViewStateChangeEvent) => {
       setViewState(toMapViewState(event.viewState, viewMode));
@@ -261,8 +233,6 @@ export function EarthMap() {
           onZoomToSelection={handleZoomToSelection}
           showPatch={showPatch}
           onTogglePatch={handleTogglePatch}
-          showCached={showCached}
-          onToggleCached={cachedBounds.length > 0 ? handleToggleCached : undefined}
         />
       }
       sidebar={
@@ -314,7 +284,6 @@ export function EarthMap() {
                 isLight={isLight}
                 isSphere={isSphere}
                 showPatch={showPatch}
-                cachedBounds={showCached ? cachedBounds : undefined}
               />
             ) : null}
           </Map>
diff --git a/src/components/map/GlobeSelectionOverlay.tsx b/src/components/map/GlobeSelectionOverlay.tsx
index 426106d..23a2108 100644
--- a/src/components/map/GlobeSelectionOverlay.tsx
+++ b/src/components/map/GlobeSelectionOverlay.tsx
@@ -11,14 +11,12 @@ import {
 import { ZARR_STORE } from "@/lib/constants/store";
 import {
   rgba,
-  SELECTION_CACHED_COLOR,
   SELECTION_CELL_COLOR,
   SELECTION_GUIDE_COLOR,
   SELECTION_PATCH_COLOR,
 } from "@/lib/map/selectionStyle";
 import { viewportToGeoBounds } from "@/lib/map/viewportBounds";
 import type { GridCell, MapViewState } from "@/types/map";
-import type { GridCellBounds } from "@/lib/map/geogrid";
 
 type GlobeSelectionOverlayProps = {
   cell: GridCell;
@@ -27,7 +25,6 @@ type GlobeSelectionOverlayProps = {
   isLight: boolean;
   isSphere?: boolean;
   showPatch?: boolean;
-  cachedBounds?: GridCellBounds[];
 };
 
 export function GlobeSelectionOverlay({
@@ -37,7 +34,6 @@ export function GlobeSelectionOverlay({
   isLight,
   isSphere = false,
   showPatch = false,
-  cachedBounds,
 }: GlobeSelectionOverlayProps) {
   const data = useMemo(() => {
     const guidePaths = gridCellToGuidePaths(
@@ -49,16 +45,12 @@ export function GlobeSelectionOverlay({
       patchBounds: showPatch
         ? chunkPatchBounds(cell, ZARR_STORE.nativeChunks.lat, ZARR_STORE.nativeChunks.lon)
         : null,
-      cachedBounds,
     });
-  }, [cachedBounds, cell, isSphere, mapSize.height, mapSize.width, showPatch, viewState]);
+  }, [cell, isSphere, mapSize.height, mapSize.width, showPatch, viewState]);
 
   const guideColor = rgba(
     isLight ? SELECTION_GUIDE_COLOR.light : SELECTION_GUIDE_COLOR.dark,
   );
-  const cachedColor = isLight
-    ? SELECTION_CACHED_COLOR.light
-    : SELECTION_CACHED_COLOR.dark;
   const cellColor = isLight ? SELECTION_CELL_COLOR.light : SELECTION_CELL_COLOR.dark;
   const patchColor = isLight
     ? SELECTION_PATCH_COLOR.light
@@ -76,24 +68,6 @@ export function GlobeSelectionOverlay({
           "line-dasharray": [6, 5],
         }}
       />
-      <Layer
-        id="map-selection-cached-fill"
-        type="fill"
-        filter={["==", ["get", "kind"], "cached"]}
-        paint={{
-          "fill-color": rgba(cachedColor.fill),
-        }}
-      />
-      <Layer
-        id="map-selection-cached-line"
-        type="line"
-        filter={["==", ["get", "kind"], "cached"]}
-        paint={{
-          "line-color": rgba(cachedColor.line),
-          "line-width": 1,
-          "line-dasharray": [2, 3],
-        }}
-      />
       <Layer
         id="map-selection-patch-fill"
         type="fill"
diff --git a/src/icons/CacheIcon.tsx b/src/icons/CacheIcon.tsx
deleted file mode 100644
index 473b8a7..0000000
--- a/src/icons/CacheIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-export function CacheIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.7"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <rect x="8" y="8" width="12" height="12" rx="2" />
-      <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
-    </svg>
-  );
-}
diff --git a/src/lib/cache/lru.ts b/src/lib/cache/lru.ts
index adcb5b3..eac965d 100644
--- a/src/lib/cache/lru.ts
+++ b/src/lib/cache/lru.ts
@@ -37,11 +37,6 @@ export class LRUCache<K, V> {
     return this.cache.has(key);
   }
 
-  /** Current keys in LRU order (oldest first). Does not affect recency. */
-  keys(): IterableIterator<K> {
-    return this.cache.keys();
-  }
-
   delete(key: K): boolean {
     return this.cache.delete(key);
   }
diff --git a/src/lib/constants/theme.ts b/src/lib/constants/theme.ts
index c1354ed..3c83956 100644
--- a/src/lib/constants/theme.ts
+++ b/src/lib/constants/theme.ts
@@ -9,10 +9,6 @@ export const TEAL_ON_DARK_RGB = [82, 212, 200] as const;
 export const VIOLET_RGB = [85, 71, 206] as const;
 export const VIOLET_ON_DARK_RGB = [137, 124, 253] as const;
 
-/** Azure blue for patches already cached in memory. */
-export const BLUE_RGB = [1, 64, 151] as const;
-export const BLUE_ON_DARK_RGB = [73, 151, 255] as const;
-
 export const COLD_RGB = {
   light: [120, 120, 118] as const,
   dark: [150, 150, 150] as const,
diff --git a/src/lib/map/geogrid.test.ts b/src/lib/map/geogrid.test.ts
index 68755db..189295a 100644
--- a/src/lib/map/geogrid.test.ts
+++ b/src/lib/map/geogrid.test.ts
@@ -1,6 +1,5 @@
 import { describe, expect, it } from "vitest";
 import {
-  chunkIndicesToPatchBounds,
   chunkPatchBounds,
   geoPointToZarrGrid,
   gridCellToBounds,
@@ -58,21 +57,6 @@ describe("chunkPatchBounds", () => {
     expect(bounds.south).toBeLessThanOrEqual(cellBounds.south);
     expect(bounds.north).toBeGreaterThanOrEqual(cellBounds.north);
   });
-
-  it("matches chunkIndicesToPatchBounds for the cell's chunk", () => {
-    const { lat, lon } = ZARR_STORE.nativeChunks;
-    const cell = geoPointToZarrGrid({ lon: 10.012, lat: 51.998 });
-
-    const fromCell = chunkPatchBounds(cell, lat, lon);
-    const fromIndices = chunkIndicesToPatchBounds(
-      Math.floor(cell.latIndex / lat),
-      Math.floor(cell.lonIndex / lon),
-      lat,
-      lon,
-    );
-
-    expect(fromIndices).toEqual(fromCell);
-  });
 });
 
 describe("gridCellToGuidePaths", () => {
diff --git a/src/lib/map/geogrid.ts b/src/lib/map/geogrid.ts
index 09c04c2..e58772f 100644
--- a/src/lib/map/geogrid.ts
+++ b/src/lib/map/geogrid.ts
@@ -78,24 +78,9 @@ export function chunkPatchBounds(
   chunkLat: number,
   chunkLon: number,
 ): GridCellBounds {
-  return chunkIndicesToPatchBounds(
-    Math.floor(cell.latIndex / chunkLat),
-    Math.floor(cell.lonIndex / chunkLon),
-    chunkLat,
-    chunkLon,
-  );
-}
-
-/** Geographic bounds of a chunk addressed directly by its lat/lon chunk index. */
-export function chunkIndicesToPatchBounds(
-  latChunkIdx: number,
-  lonChunkIdx: number,
-  chunkLat: number,
-  chunkLon: number,
-): GridCellBounds {
-  const firstLatIdx = latChunkIdx * chunkLat;
+  const firstLatIdx = Math.floor(cell.latIndex / chunkLat) * chunkLat;
   const lastLatIdx = Math.min(firstLatIdx + chunkLat, dimensions.lat) - 1;
-  const firstLonIdx = lonChunkIdx * chunkLon;
+  const firstLonIdx = Math.floor(cell.lonIndex / chunkLon) * chunkLon;
   const lastLonIdx = Math.min(firstLonIdx + chunkLon, dimensions.lon) - 1;
 
   const latEdgeA = grid.latStart + firstLatIdx * grid.latStep;
@@ -177,7 +162,7 @@ export type SelectionGuideGeoJson = {
   type: "FeatureCollection";
   features: Array<{
     type: "Feature";
-    properties: { kind: "guide" | "cell" | "patch" | "cached" };
+    properties: { kind: "guide" | "cell" | "patch" };
     geometry:
       | { type: "LineString"; coordinates: LonLatPath }
       | { type: "Polygon"; coordinates: LonLatPath[] };
@@ -194,15 +179,10 @@ function closedRing(corners: GeoPoint[]): LonLatPath {
 export function selectionGuideGeoJson(
   cell: GridCell,
   guidePaths: LonLatPath[],
-  options?: {
-    densifyGuides?: boolean;
-    patchBounds?: GridCellBounds | null;
-    cachedBounds?: GridCellBounds[] | null;
-  },
+  options?: { densifyGuides?: boolean; patchBounds?: GridCellBounds | null },
 ): SelectionGuideGeoJson {
   const densifyGuides = options?.densifyGuides ?? true;
   const patchBounds = options?.patchBounds ?? null;
-  const cachedBounds = options?.cachedBounds ?? null;
 
   return {
     type: "FeatureCollection",
@@ -215,14 +195,6 @@ export function selectionGuideGeoJson(
           coordinates: densifyGuides ? densifyLonLatPath(path) : path,
         },
       })),
-      ...(cachedBounds ?? []).map((bounds) => ({
-        type: "Feature" as const,
-        properties: { kind: "cached" as const },
-        geometry: {
-          type: "Polygon" as const,
-          coordinates: [closedRing(boundsToPolygon(bounds))],
-        },
-      })),
       ...(patchBounds
         ? [
             {
diff --git a/src/lib/map/selectionStyle.ts b/src/lib/map/selectionStyle.ts
index 527c231..f554c3b 100644
--- a/src/lib/map/selectionStyle.ts
+++ b/src/lib/map/selectionStyle.ts
@@ -1,6 +1,4 @@
 import {
-  BLUE_ON_DARK_RGB,
-  BLUE_RGB,
   TEAL_ON_DARK_RGB,
   TEAL_RGB,
   VIOLET_ON_DARK_RGB,
@@ -35,18 +33,6 @@ export const SELECTION_PATCH_COLOR = {
   },
 };
 
-/** Patches already held in the LRU cache: a faint blue fill and outline. */
-export const SELECTION_CACHED_COLOR = {
-  light: {
-    fill: [...BLUE_RGB, 12] as const,
-    line: [...BLUE_RGB, 120] as const,
-  },
-  dark: {
-    fill: [...BLUE_ON_DARK_RGB, 16] as const,
-    line: [...BLUE_ON_DARK_RGB, 140] as const,
-  },
-};
-
 export function rgba(
   [r, g, b, a]: readonly [number, number, number, number],
 ): string {
diff --git a/src/lib/zarr/ZarrChunkReader.ts b/src/lib/zarr/ZarrChunkReader.ts
index eb5703b..fc48afa 100644
--- a/src/lib/zarr/ZarrChunkReader.ts
+++ b/src/lib/zarr/ZarrChunkReader.ts
@@ -28,12 +28,6 @@ type CachedNativeChunk = {
   shape: readonly number[];
 };
 
-/** A distinct lat/lon patch currently held in the native-chunk cache. */
-export type CachedPatch = {
-  latChunkIdx: number;
-  lonChunkIdx: number;
-};
-
 type ZarrArray = ZarrArrayHandle & {
   getChunk(
     chunkCoords: number[],
@@ -46,8 +40,6 @@ export class ZarrChunkReader {
   private arrayPromises = new Map<string, Promise<ZarrArray>>();
   private chunkLoadsInFlight = new Map<string, Promise<CachedNativeChunk>>();
   private prefetchInFlight = new Map<string, Promise<void>>();
-  private cacheVersion = 0;
-  private listeners = new Set<() => void>();
 
   /** Default holds ~8 pixels of full history (6 native chunks per pixel). */
   constructor(ds: ZarrStore, maxCacheSize = 48) {
@@ -55,38 +47,6 @@ export class ZarrChunkReader {
     this.cache = new LRUCache(maxCacheSize);
   }
 
-  /** Subscribe to cache mutations (for `useSyncExternalStore`). */
-  subscribe = (listener: () => void): (() => void) => {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  };
-
-  /** Snapshot that changes whenever the cache contents change. */
-  getCacheVersion = (): number => this.cacheVersion;
-
-  /** Distinct lat/lon patches currently held in the cache. */
-  getCachedPatches(): CachedPatch[] {
-    const seen = new Set<string>();
-    const patches: CachedPatch[] = [];
-    for (const key of this.cache.keys()) {
-      const parts = key.split(":");
-      const latChunkIdx = Number(parts[3]);
-      const lonChunkIdx = Number(parts[4]);
-      const patchKey = `${latChunkIdx}:${lonChunkIdx}`;
-      if (seen.has(patchKey)) continue;
-      seen.add(patchKey);
-      patches.push({ latChunkIdx, lonChunkIdx });
-    }
-    return patches;
-  }
-
-  private onCacheChanged(): void {
-    this.cacheVersion += 1;
-    for (const listener of this.listeners) listener();
-  }
-
   private getArray(variable: string): Promise<ZarrArray> {
     const existing = this.arrayPromises.get(variable);
     if (existing) return existing;
@@ -161,7 +121,6 @@ export class ZarrChunkReader {
           shape: chunk.shape,
         };
         this.cache.set(key, entry);
-        this.onCacheChanged();
         return entry;
       })
       .finally(() => {