support v3 stores consolidated_metadata (#652)

* updates for zarrita v0.7, supports now consolidated_metadata in v3 stores

* suggestions

Author: lazarusA

package.json

@@ -79,7 +79,7 @@
     "input-otp": "^1.4.2",
     "js-colormaps-es": "^0.0.5",
     "lucide-react": "^0.562.0",
-    "next": "^16.2.0",
+    "next": "^16.2.7",
     "next-themes": "^0.4.6",
     "radix-ui": "1.4.3",
     "react": "^19.0.0",
@@ -95,7 +95,7 @@
     "three-stdlib": "^2.36.0",
     "vaul": "^1.1.2",
     "webgpu-utils": "^1.11.0",
-    "zarrita": "^0.6.2",
+    "zarrita": "^0.7.3",
     "zod": "^4.3.6",
     "zustand": "^5.0.8"
   },
@@ -109,7 +109,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.1.8",
     "eslint": "^9",
     "eslint-config-next": "^16.2.0",
     "eslint-plugin-next": "^0.0.0",
@@ -119,6 +119,6 @@
     "tw-animate-css": "^1.3.4",
     "typescript": "^5",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.1.2"
+    "vitest": "^4.1.8"
   }
 }

src/components/ui/MainPanel/LocalZarr.tsx

@@ -37,16 +37,16 @@ const LocalZarr = ({setShowLocal, setOpenVariables, setInitStore}:LocalZarrType)
     }
 
     // Create a custom zarrita store from the Map
-    const customStore: zarr.AsyncReadable<any> = {
-      async get(key: string) {
+    const customStore: zarr.AsyncReadable = {
+      async get(key: string): Promise<Uint8Array | undefined> {
         const file = fileMap.get(key)
         const buffer = await file?.arrayBuffer();
         return buffer ? new Uint8Array(buffer) : undefined;
       }
     };
     try {
       // Open the Zarr store using the custom store
-      let store = await zarr.tryWithConsolidated(customStore);
+      let store = await zarr.withMaybeConsolidatedMetadata(customStore);
       if (!('contents' in store)){
         // Metadata is missing. We will need to parse variables here. 
         store = await ZarrParser(files, customStore)

src/components/ui/MainPanel/RemoteZarr.tsx

@@ -36,7 +36,7 @@ type Props = {
 };
 
 const RemoteZarr = ({ initStore, setInitStore, onOpenDescription }: Props) => {
-  const [showOverrides, setShowOverrides] = useState(false);
+  const [showFetchOptions, setShowFetchOptions] = useState(false);
   const [preset, setPreset] = useState<AuthPreset>('none');
   const [presetValue, setPresetValue] = useState('');
   const [headers, setHeaders] = useState<HeaderRow[]>([{ key: '', value: '' }]);
@@ -47,7 +47,7 @@ const RemoteZarr = ({ initStore, setInitStore, onOpenDescription }: Props) => {
   const updateHeader = (i: number, field: 'key' | 'value', val: string) =>
     setHeaders(h => h.map((row, idx) => idx === i ? { ...row, [field]: val } : row));
 
-  const buildOverrides = (): RequestInit | undefined => {
+  const buildFetchHandler = (): ((request: Request) => Promise<Response>) | undefined => {
     const builtHeaders: Record<string, string> = {};
 
     // Preset auth header
@@ -60,9 +60,12 @@ const RemoteZarr = ({ initStore, setInitStore, onOpenDescription }: Props) => {
       .filter(r => r.key.trim())
       .forEach(r => { builtHeaders[r.key.trim()] = r.value.trim(); });
 
-    return Object.keys(builtHeaders).length > 0
-      ? { headers: builtHeaders }
-      : undefined;
+    if (Object.keys(builtHeaders).length === 0) return undefined;
+
+    return (request: Request) => {
+      Object.entries(builtHeaders).forEach(([k, v]) => request.headers.set(k, v));
+      return fetch(request);
+    };
   };
 
   return (
@@ -74,18 +77,18 @@ const RemoteZarr = ({ initStore, setInitStore, onOpenDescription }: Props) => {
         const url = input.value;
         if (!url) return;
 
-        const overrides = buildOverrides();
-        if (overrides && url.startsWith('http://')) {
+        const fetchHandler = buildFetchHandler();
+        if (fetchHandler && url.startsWith('http://')) {
           useGlobalStore.getState().setStatus('Error: Cannot send auth headers over plain HTTP — use HTTPS.');
           return;
         }
         const fetchOptions = {
-          ...(overrides && { overrides }),
+          ...(fetchHandler && { fetch: fetchHandler}),
         };
 
         useZarrStore.getState().setIcechunkOptions(null);
         useZarrStore.getState().setFetchOptions(
-          Object.keys(fetchOptions).length > 0 ? fetchOptions : null
+          fetchOptions.fetch !== undefined ? fetchOptions : null
         );
         useGlobalStore.getState().setStatus('Fetching...');
 
@@ -102,19 +105,19 @@ const RemoteZarr = ({ initStore, setInitStore, onOpenDescription }: Props) => {
         </Button>
       </div>
 
-      {/* Overrides */}
+      {/* FetchOptions */}
       <div>
         <Button
           type="button"
           variant="ghost"
           className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-          onClick={() => setShowOverrides(v => !v)}
+          onClick={() => setShowFetchOptions(v => !v)}
         >
-          {showOverrides ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
-          Overrides
+          {showFetchOptions ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+          fetchOptions
         </Button>
 
-        {showOverrides && (
+        {showFetchOptions && (
           <div className="flex flex-col gap-3 mt-2">
 
             {/* Auth preset selector */}

src/components/zarr/Interfaces.ts

@@ -1,7 +1,7 @@
 import type { FetchClient } from "icechunk-js";
 
 export interface FetchStoreOptions {
-  overrides?: RequestInit;
+  fetch?: (request: Request) => Promise<Response>;
   maxRetries?: number;
   retryDelay?: number;
 }

src/components/zarr/ZarrGetters.ts

@@ -100,7 +100,7 @@ export async function GetStore(storePath: string): Promise<zarr.Group<zarr.Fetch
         const {setStatus} = useGlobalStore.getState();
         for (let attempt = 0; attempt <= maxRetries; attempt++) {
             try {
-                const d_store = zarr.tryWithConsolidated(
+                const d_store = zarr.withMaybeConsolidatedMetadata(
                     new zarr.FetchStore(storePath)
                 );
                 const gs = await d_store.then(store => zarr.open(store, {kind: 'group'}));

src/components/zarr/ZarrParser.ts

@@ -1,5 +1,5 @@
 import * as zarr from 'zarrita'
-import { json_decode_object, json_encode_object } from 'node_modules/zarrita/dist/src/util';
+import { jsonDecodeObject, jsonEncodeObject } from 'node_modules/zarrita/dist/src/util';
 
 function is_meta_key(key: string) {
     return (key.endsWith(".zarray") ||
@@ -26,7 +26,7 @@ async function ZarrParser(files: any, store: any){
     }
     for (const variable of vars){
         const decoded = await store.get(variable)
-        metadata[variable.slice(1)] = json_decode_object(decoded)
+        metadata[variable.slice(1)] = jsonDecodeObject(decoded)
     }
     const v2_meta = {metadata, zarr_consolidated_format: 1}
     const known_meta: { [key: string]: any } = {};
@@ -36,11 +36,11 @@ async function ZarrParser(files: any, store: any){
     return {
         async get(key: string, opts?: any): Promise<any> {
             if (known_meta[key]) {
-            return json_encode_object(known_meta[key]);
+            return jsonEncodeObject(known_meta[key]);
             }
             const maybe_bytes = await store.get(key, opts);
             if (is_meta_key(key) && maybe_bytes) {
-            const meta = json_decode_object(maybe_bytes);
+            const meta = jsonDecodeObject(maybe_bytes);
             known_meta[key] = meta;
             }
             return maybe_bytes;

src/components/zarr/zarrita-store.ts

@@ -14,8 +14,8 @@ export async function getFetchStore(
 
   for (let attempt = 0; attempt <= maxRetries; attempt++) {
     try {
-      const d_store = zarr.tryWithConsolidated(
-        new zarr.FetchStore(storePath, { overrides: fetchOptions?.overrides })
+      const d_store = zarr.withMaybeConsolidatedMetadata(
+        new zarr.FetchStore(storePath, { fetch: fetchOptions?.fetch })
       );
       const gs = await d_store.then(store => zarr.open(store, { kind: 'group' }));
       useGlobalStore.setState({ status: null });
@@ -92,7 +92,10 @@ export async function getFetchStoreAttributes(
   cacheName: string
 ) {
   const outVar = await zarr.open(group.resolve(variable), { kind: 'array' });
-  const meta = outVar.attrs;
+  const meta = {
+        ...outVar.attrs as Record<string, unknown>,
+        shape: outVar.shape,
+    };
   useCacheStore.getState().cache.set(cacheName, meta);
   return meta;
 }
@@ -111,8 +114,9 @@ export async function getFetchStoreDims(
   meta.shape = outVar.shape;
   cache.set(`${initStore}_${variable}_meta`, meta);
 
-  const dimNames = meta._ARRAY_DIMENSIONS as string[] | undefined;
-
+  const dimNames = (meta._ARRAY_DIMENSIONS as string[] | undefined)
+    ?? (outVar.dimensionNames as string[] | undefined);
+  
   if (dimNames) {
     for (const dim of dimNames) {
       const dimArray = await zarr.open(group.resolve(dim), { kind: 'array' })