From 425c53f425d6615c2a8e107867c7fb9ccf25a150 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 7 Jun 2024 14:32:13 +0100
Subject: [PATCH 01/33] Handle 404 for /zarr.json AND /.zattrs

---
 src/App.svelte |  6 +++---
 src/utils.js   | 40 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index a62e5dd..6d2131c 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -6,7 +6,7 @@
   import Modal from "svelte-simple-modal";
   import SplashScreen from "./SplashScreen.svelte";
 
-  import { getJson } from "./utils";
+  import { getZarrJson } from "./utils";
   import CheckMark from "./CheckMark.svelte";
 
   const searchParams = new URLSearchParams(window.location.search);
@@ -21,8 +21,8 @@
 
   if (source) {
     // load JSON to be validated...
-    console.log("Loading JSON... " + source + "/.zattrs");
-    promise = getJson(source + "/.zattrs");
+    console.log("Loading JSON... " + source);
+    promise = getZarrJson(source);
   }
 </script>
 
diff --git a/src/utils.js b/src/utils.js
index 1008304..b45827d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -3,6 +3,7 @@
 import Ajv from "ajv";
 
 export const CURRENT_VERSION = "0.4";
+export const FILE_NOT_FOUND = "File not found";
 
 const ajv = new Ajv({ strict: false }); // options can be passed, e.g. {allErrors: true}
 
@@ -18,7 +19,14 @@ async function fetchHandleError(url) {
     rsp = await fetch(url).then(function (response) {
       if (!response.ok) {
         // make the promise be rejected if we didn't get a 2xx response
-        msg += ` ${response.statusText}`;
+        console.log("response.statusText", response.statusText, 'statusCode', response.status)
+        // NB. statusText could be "Not Found" or "File not found" depending on server
+        // Standardise based on response.status
+        if (response.status == 404) {
+          msg += ` ${FILE_NOT_FOUND}`;
+        } else {
+          msg += ` ${response.statusText}`;
+        }
       } else {
         return response;
       }
@@ -44,6 +52,36 @@ async function fetchHandleError(url) {
   throw Error(msg);
 }
 
+
+export async function getZarrJson(zarr_dir) {
+  let zarrJson;
+  let msg;
+  // try to load v2 /.zattrs or v3 /zarr.json
+  try {
+    zarrJson = await getJson(zarr_dir + "/zarr.json");
+  } catch (error) {
+    console.log("getZarrJson", error)
+    if (!error.message.includes(FILE_NOT_FOUND)) {
+      throw error;
+    }
+    // IF we got a 404 then try other URL
+    try {
+      zarrJson = await getJson(zarr_dir + "/.zattrs");
+    } catch (err2) {
+      if (err2.message.includes(FILE_NOT_FOUND)) {
+        throw Error(`No .zattrs or zarr.json at ${zarr_dir}: ${FILE_NOT_FOUND}`);
+      } else {
+        // First error was 404 but this isn't...
+        throw err2;
+      }
+    }
+
+  }
+  if (zarrJson) {
+    return zarrJson;
+  }
+}
+
 export async function getJson(url) {
   return fetchHandleError(url).then((rsp) => rsp.json());
 }

From d7093528b73dd58dd4374ea7a0f81e4e9e0548f0 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 7 Jun 2024 16:49:29 +0100
Subject: [PATCH 02/33] Load v0.5 schemas from github PR branch

---
 src/JsonValidator/index.svelte |  2 +-
 src/utils.js                   | 65 ++++++++++++++++++++++------------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index de70a83..7fdbd1e 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -42,7 +42,7 @@
   Using schema{schemaUrls.length > 1 ? "s" : ""}: 
   {#each schemaUrls as url, i}
     {i > 0 ? " and " : ""}
-    <a href={url} target="_blank">{url.split("main")[1]}</a>
+    <a href={url} target="_blank">{url}</a>
   {/each}
 
   {#await promise}
diff --git a/src/utils.js b/src/utils.js
index b45827d..17ae143 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -2,15 +2,30 @@
 
 import Ajv from "ajv";
 
-export const CURRENT_VERSION = "0.4";
+export const CURRENT_VERSION = "0.5";
+// versions to check for e.g. attributes['https://ngff.openmicroscopy.org/0.5']
+// which start at version 0.5
+export const NAMESPACED_VERSIONS = ["0.5"]
 export const FILE_NOT_FOUND = "File not found";
 
 const ajv = new Ajv({ strict: false }); // options can be passed, e.g. {allErrors: true}
 
 export function getSchemaUrl(schemaName, version) {
+  if (version == "0.5") {
+    // TEMP: use open PR branch
+    return `https://raw.githubusercontent.com/normanrz/ngff/spec-rfc2/latest/schemas/${schemaName}.schema`;
+  }
   return `https://raw.githubusercontent.com/ome/ngff/main/${version}/schemas/${schemaName}.schema`;
 }
 
+function getNamespacedKey(version) {
+  if (!version) {
+    version = CURRENT_VERSION;
+  }
+  return `https://ngff.openmicroscopy.org/${version}`;
+}
+
+
 // fetch() doesn't error for 404 etc.
 async function fetchHandleError(url) {
   let msg = `Error Loading ${url}:`;
@@ -19,7 +34,6 @@ async function fetchHandleError(url) {
     rsp = await fetch(url).then(function (response) {
       if (!response.ok) {
         // make the promise be rejected if we didn't get a 2xx response
-        console.log("response.statusText", response.statusText, 'statusCode', response.status)
         // NB. statusText could be "Not Found" or "File not found" depending on server
         // Standardise based on response.status
         if (response.status == 404) {
@@ -101,24 +115,26 @@ export async function getText(url) {
 
 let schemas = {};
 
-export async function getSchema(version, schemaName = "image") {
-  let cacheKey = schemaName + version;
-  if (!schemas[cacheKey]) {
-    const schema_url = getSchemaUrl(schemaName, version);
-    console.log("Loading schema... " + schema_url);
-    try {
-      const schema = await getJson(schema_url);
-      // delete to avoid invalid: $schema: "https://json-schema.org/draft/2020-12/schema" not found
-      delete schema["$schema"];
-      schemas[cacheKey] = schema;
-    } catch (error) {
-      throw new Error(`No schema at ${schema_url}. Version ${version} may be invalid.`);
-    }
+export async function getSchema(schemaUrl) {
+  if (!schemas[schemaUrl]) {
+    console.log("Loading schema... " + schemaUrl);
+    const schema = await getJson(schemaUrl);
+    // delete to avoid invalid: $schema: "https://json-schema.org/draft/2020-12/schema" not found
+    delete schema["$schema"];
+    schemas[schemaUrl] = schema;
   }
-  return schemas[cacheKey];
+  return schemas[schemaUrl];
 }
 
 export function getVersion(jsonData) {
+  if (jsonData.attributes) {
+    for(let v=0; v<NAMESPACED_VERSIONS.length; v++) {
+      let key = getNamespacedKey(NAMESPACED_VERSIONS[v]);
+      if (jsonData.attributes.hasOwnProperty(key)) {
+        return (NAMESPACED_VERSIONS[v]);
+      }
+    }
+  }
   let version = jsonData.multiscales
     ? jsonData.multiscales[0].version
     : jsonData.plate
@@ -167,6 +183,10 @@ export function getSchemaNames(jsonData) {
 export function getSchemaUrlsForJson(rootAttrs) {
   const msVersion = getVersion(rootAttrs);
   const version = msVersion || CURRENT_VERSION;
+  // for v0.5 onwards, rootAttrs is nested under attributes.namespace...
+  if (NAMESPACED_VERSIONS.includes(version)) {
+    rootAttrs = rootAttrs.attributes[getNamespacedKey(version)];
+  }
   const schemaNames = getSchemaNames(rootAttrs);
   return schemaNames.map(name => getSchemaUrl(name, version));
 }
@@ -184,22 +204,23 @@ export function validateData(schema, jsonData) {
 
 export async function validate(jsonData) {
   // get version, lookup schema, do validation...
-  const schemaNames = getSchemaNames(jsonData);
+  let version = getVersion(jsonData);
+  console.log("VERSION", version);
+
+  const schemaUrls = getSchemaUrlsForJson(jsonData);
 
-  if (schemaNames.length == 0) {
+  if (schemaUrls.length == 0) {
     return ["Unrecognised JSON data"];
   }
 
-  let version = getVersion(jsonData);
-
   if (!version) {
     console.log("No version found, using: " + CURRENT_VERSION);
     version = CURRENT_VERSION;
   }
 
   let errors = [];
-  for (let s=0; s<schemaNames.length; s++) {
-    let schema = await getSchema(version, schemaNames[s]);
+  for (let s=0; s<schemaUrls.length; s++) {
+    let schema = await getSchema(schemaUrls[s]);
     let errs = validateData(schema, jsonData);
     errors = errors.concat(errs);
   }

From 23d9b26cb4a7e6776f0f8e0dfe3c32427dbddc45 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 12 Jun 2024 13:12:08 +0100
Subject: [PATCH 03/33] Fix display of Array info for Zarr v3

---
 .../MultiscaleArrays/Multiscale.svelte        | 10 ++--
 .../ZarrArray/ChunkLoader.svelte              |  4 +-
 .../MultiscaleArrays/ZarrArray/Cube3D.svelte  |  3 +-
 .../MultiscaleArrays/ZarrArray/index.svelte   | 16 +++---
 src/JsonValidator/index.svelte                | 17 ++++---
 src/utils.js                                  | 50 +++++++++++++------
 6 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
index 7ddbeef..97e5130 100644
--- a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
+++ b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getJson } from "../../utils";
+  import { getZarrArrayJson, getChunkShape } from "../../utils";
   import CheckMark from "../../CheckMark.svelte";
 
   export let source;
@@ -32,11 +32,13 @@
 
     for (let i = 0; i < datasets.length; i++) {
       let dataset = datasets[i];
-      let zarray = await getJson(source + "/" + dataset.path + "/.zarray");
+      let zarray = await getZarrArrayJson(source + "/" + dataset.path);
+      console.log('zarray', zarray);
+      // Need to handle Zarr v2 and Zarr v3:
       dimCounts.push(zarray.shape.length);
-      dtypes.push(zarray.dtype);
+      dtypes.push(zarray.dtype || zarray.data_type);
       shapes.push(zarray.shape);
-      dimSeparators.push(zarray.dimension_separator);
+      dimSeparators.push(zarray.dimension_separator || zarray.chunk_key_encoding?.configuration?.separator);
     }
 
     // Each check is {msg: "Message"}, with status: "warning" if it isn't an Error.
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
index 2fedd11..3834b96 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
@@ -1,6 +1,6 @@
 <script>
   import { openArray, slice } from "zarr";
-  import { range } from "../../../utils";
+  import { range, getChunkShape } from "../../../utils";
   import { get, writable } from "svelte/store";
   import ChunkViewer from "./ChunkViewer.svelte";
 
@@ -11,7 +11,7 @@
   let showChunks = false;
   let chunk;
 
-  const chunks = zarray.chunks;
+  const chunks = getChunkShape(zarray);
   const chunkCounts = zarray.shape.map((sh, index) =>
     Math.ceil(sh / chunks[index])
   );
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte
index e30b365..415c21b 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { getChunkShape } from "../../../utils";
   export let zarray;
 
   // reference to parent element
@@ -21,7 +22,7 @@
   const scaledZ = sizeZ * scale;
 
   const minC = 5;
-  const chunks = zarray.chunks;
+  const chunks = getChunkShape(zarray);
   const chunkX = Math.max(minC, chunks[chunks.length - 1] * scale);
   const chunkY = Math.max(minC, chunks[chunks.length - 2] * scale);
   const chunkZ = Math.max(minC, chunks[chunks.length - 3] * scale);
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
index 2892319..46fc33e 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
@@ -1,24 +1,26 @@
 <script>
-  import { getJson, formatBytes, range } from "../../../utils";
+  import { getZarrArrayJson, formatBytes, getChunkShape, getArrayDtype } from "../../../utils";
   import Cube3D from "./Cube3D.svelte";
   import ChunkLoader from "./ChunkLoader.svelte";
 
   export let source;
   export let path;
 
-  const promise = getJson(source + "/" + path + "/.zarray");
+  const promise = getZarrArrayJson(source + "/" + path);
 
   function totalChunkCount(zarray) {
     return chunkCounts(zarray).reduce((prev, curr) => prev * curr, 1);
   }
 
   function chunkCounts(zarray) {
-    const ch = zarray.chunks;
+    const ch = getChunkShape(zarray);
     return zarray.shape.map((sh, index) => Math.ceil(sh / ch[index]));
   }
 
   function getBytes(shape, zarray) {
-    let bytesPerPixel = [1, 2, 4, 8].find((n) => zarray.dtype.includes(n));
+    // handle v2 and v3 zarr
+    let dtype = getArrayDtype(zarray)
+    let bytesPerPixel = [1, 2, 4, 8].find((n) => dtype.includes(n));
     if (!bytesPerPixel) return "";
     let pixels = shape.reduce((i, p) => i * p, 1);
     return formatBytes(bytesPerPixel * pixels);
@@ -38,12 +40,12 @@
       <tr>
         <th>Bytes</th>
         <td>{getBytes(zarray.shape, zarray)}</td>
-        <td>{getBytes(zarray.chunks, zarray)}</td>
+        <td>{getBytes(getChunkShape(zarray), zarray)}</td>
       </tr>
       <tr>
         <th>Shape</th>
         <td>{JSON.stringify(zarray.shape)}</td>
-        <td>{JSON.stringify(zarray.chunks)}</td>
+        <td>{JSON.stringify(getChunkShape(zarray))}</td>
       </tr>
       <tr>
         <th>Counts</th>
@@ -52,7 +54,7 @@
       </tr>
       <tr>
         <th>Type</th>
-        <td>{zarray.dtype}</td>
+        <td>{getArrayDtype(zarray)}</td>
         <td>numpy.ndarray</td>
       </tr>
     </table>
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index 7fdbd1e..87f8222 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -11,6 +11,7 @@
     CURRENT_VERSION,
     getSchemaUrlsForJson,
     validate,
+    getNgffData,
     getJson,
     getVersion,
     getDataType,
@@ -22,7 +23,9 @@
   const msVersion = getVersion(rootAttrs);
 
   const dtype = getDataType(rootAttrs);
+  const ngffData = getNgffData(rootAttrs);
   const schemaUrls = getSchemaUrlsForJson(rootAttrs);
+  console.log("index.svelte schemaUrls", schemaUrls)
   const promise = validate(rootAttrs);
 
   const dirs = source.split("/").filter(Boolean);
@@ -42,7 +45,7 @@
   Using schema{schemaUrls.length > 1 ? "s" : ""}: 
   {#each schemaUrls as url, i}
     {i > 0 ? " and " : ""}
-    <a href={url} target="_blank">{url}</a>
+    <a href={url} target="_blank">{url.split("ngff")[1]}</a>
   {/each}
 
   {#await promise}
@@ -77,12 +80,12 @@
   {/await}
 </article>
 
-{#if rootAttrs.multiscales}
-  <MultiscaleArrays {source} {rootAttrs} />
-{:else if rootAttrs.plate}
-  <Plate {source} {rootAttrs} />
-{:else if rootAttrs.well}
-  <Well {source} {rootAttrs} />
+{#if ngffData.multiscales}
+  <MultiscaleArrays {source} rootAttrs={ngffData} />
+{:else if ngffData.plate}
+  <Plate {source} rootAttrs={ngffData} />
+{:else if ngffData.well}
+  <Well {source} rootAttrs={ngffData} />
 {/if}
 
 <style>
diff --git a/src/utils.js b/src/utils.js
index 17ae143..5a162bd 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -67,7 +67,11 @@ async function fetchHandleError(url) {
 }
 
 
-export async function getZarrJson(zarr_dir) {
+export async function getZarrArrayJson(zarr_dir) {
+  return getZarrJson(zarr_dir, ".zarray");
+}
+
+export async function getZarrJson(zarr_dir, alternative=".zattrs") {
   let zarrJson;
   let msg;
   // try to load v2 /.zattrs or v3 /zarr.json
@@ -80,10 +84,10 @@ export async function getZarrJson(zarr_dir) {
     }
     // IF we got a 404 then try other URL
     try {
-      zarrJson = await getJson(zarr_dir + "/.zattrs");
+      zarrJson = await getJson(zarr_dir + `/${alternative}`);
     } catch (err2) {
       if (err2.message.includes(FILE_NOT_FOUND)) {
-        throw Error(`No .zattrs or zarr.json at ${zarr_dir}: ${FILE_NOT_FOUND}`);
+        throw Error(`No ${alternative} or zarr.json at ${zarr_dir}: ${FILE_NOT_FOUND}`);
       } else {
         // First error was 404 but this isn't...
         throw err2;
@@ -126,21 +130,28 @@ export async function getSchema(schemaUrl) {
   return schemas[schemaUrl];
 }
 
-export function getVersion(jsonData) {
+export function getNgffData(jsonData) {
+  // Handle nesting of NGFF data under namespace key for v0.5+
   if (jsonData.attributes) {
     for(let v=0; v<NAMESPACED_VERSIONS.length; v++) {
       let key = getNamespacedKey(NAMESPACED_VERSIONS[v]);
       if (jsonData.attributes.hasOwnProperty(key)) {
-        return (NAMESPACED_VERSIONS[v]);
+        return jsonData.attributes[key];
       }
     }
   }
-  let version = jsonData.multiscales
-    ? jsonData.multiscales[0].version
-    : jsonData.plate
-    ? jsonData.plate.version
-    : jsonData.well
-    ? jsonData.well.version
+  return jsonData;
+}
+
+export function getVersion(jsonData) {
+  let ngffData = getNgffData(jsonData);
+  console.log("getVersion", jsonData, ngffData);
+  let version = ngffData.multiscales
+    ? ngffData.multiscales[0].version
+    : ngffData.plate
+    ? ngffData.plate.version
+    : ngffData.well
+    ? ngffData.well.version
     : undefined;
   return version;
 }
@@ -164,17 +175,18 @@ export function getSchemaName(jsonData) {
 }
 
 export function getSchemaNames(jsonData) {
+  let ngffData = getNgffData(jsonData);
   let names = [];
-  if (jsonData.multiscales) {
+  if (ngffData.multiscales) {
     names.push("image");
   }
-  if (jsonData.plate) {
+  if (ngffData.plate) {
     names.push("plate");
   }
-  if (jsonData.well) {
+  if (ngffData.well) {
     names.push("well");
   }
-  if (jsonData["image-label"]) {
+  if (ngffData["image-label"]) {
     names.push("label");
   }
   return names;
@@ -234,6 +246,14 @@ export function formatBytes(bytes) {
   return (bytes / Math.pow(1000, i)).toFixed(2) + " " + sizes[i];
 }
 
+export function getChunkShape(zarray) {
+  return zarray.chunks || zarray.chunk_grid?.configuration?.chunk_shape;
+}
+
+export function getArrayDtype(zarray) {
+  return zarray.dtype || zarray.data_type;
+}
+
 export function getSearchParam(key) {
   const searchParams = new URLSearchParams(window.location.search);
   let value = searchParams.get(key);

From 190c0b7027279d5eeba16d764df2eba8574649f4 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 12 Jun 2024 13:50:45 +0100
Subject: [PATCH 04/33] Fix display of .zarray .zattrs and zarr.json in UI

---
 .../MultiscaleArrays/ZarrArray/index.svelte        |  8 ++++----
 src/JsonValidator/MultiscaleArrays/index.svelte    |  6 +++++-
 src/JsonValidator/index.svelte                     |  6 ++++--
 src/utils.js                                       | 14 ++++++++++++++
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
index 46fc33e..7206b97 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
@@ -1,12 +1,12 @@
 <script>
-  import { getZarrArrayJson, formatBytes, getChunkShape, getArrayDtype } from "../../../utils";
+  import { getJson, formatBytes, getChunkShape, getArrayDtype } from "../../../utils";
   import Cube3D from "./Cube3D.svelte";
   import ChunkLoader from "./ChunkLoader.svelte";
 
   export let source;
   export let path;
 
-  const promise = getZarrArrayJson(source + "/" + path);
+  const promise = getJson(source + "/" + path);
 
   function totalChunkCount(zarray) {
     return chunkCounts(zarray).reduce((prev, curr) => prev * curr, 1);
@@ -28,7 +28,7 @@
 </script>
 
 <div class="array">
-  <p>Path <a href="{source + "/" + path + '/.zarray'} ">{path + "/.zarray"}</a></p>
+  <p>Path <a href="{source + "/" + path} ">{path}</a></p>
 
   {#await promise}
     <div>loading array .zarray ...</div>
@@ -64,7 +64,7 @@
     <Cube3D {zarray} />
 
     <details>
-      <summary>{path}/.zarray</summary>
+      <summary>{path}</summary>
       <pre><code>{JSON.stringify(zarray, null, 2)}</code></pre>
     </details>
   {:catch error}
diff --git a/src/JsonValidator/MultiscaleArrays/index.svelte b/src/JsonValidator/MultiscaleArrays/index.svelte
index 1ba56cf..d654097 100644
--- a/src/JsonValidator/MultiscaleArrays/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/index.svelte
@@ -1,9 +1,13 @@
 <script>
   import ZarrArray from "./ZarrArray/index.svelte";
   import Multiscale from "./Multiscale.svelte";
+  import {getVersion, getZarrArrayAttrsFileName} from "../../utils";
 
   export let source;
   export let rootAttrs;
+
+  const msVersion = getVersion(rootAttrs);
+  const zarrAttrsFileName = getZarrArrayAttrsFileName(msVersion);
 </script>
 
 {#each rootAttrs.multiscales as multiscale, idx}
@@ -11,7 +15,7 @@
     <h2>Multiscale {idx}</h2>
     <Multiscale {source} {multiscale} /> 
     {#each multiscale.datasets as dataset}
-      <ZarrArray {source} path={dataset.path} />
+      <ZarrArray {source} path={dataset.path + "/" + zarrAttrsFileName} />
     {/each}
   </article>
 {/each}
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index 87f8222..97a4514 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -15,6 +15,7 @@
     getJson,
     getVersion,
     getDataType,
+    getZarrGroupAttrsFileName,
   } from "../utils";
 
   export let source;
@@ -32,12 +33,13 @@
   const zarrName = dirs[dirs.length - 1];
 
   // check for labels/.zattrs
-  const labelsPromise = getJson(source + '/labels/.zattrs');
+  const zarrAttrsFileName = getZarrGroupAttrsFileName(msVersion);
+  const labelsPromise = getJson(source + '/labels/' + zarrAttrsFileName);
 </script>
 
 <article>
   <p>
-    Validating: <a href={source}>/{zarrName}/.zattrs</a>
+    Validating: <a href={source}>/{zarrName}/{zarrAttrsFileName}</a>
   </p>
 
   {#if !msVersion}No version found. Using {CURRENT_VERSION}<br />{/if}
diff --git a/src/utils.js b/src/utils.js
index 5a162bd..b5a9329 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -66,6 +66,19 @@ async function fetchHandleError(url) {
   throw Error(msg);
 }
 
+export function getZarrGroupAttrsFileName(ngffVersion) {
+  if (["0.1", "0.2", "0.3", "0.4"].includes(ngffVersion)) {
+    return ".zattrs";
+  }
+  return "zarr.json";
+}
+
+export function getZarrArrayAttrsFileName(ngffVersion) {
+  if (["0.1", "0.2", "0.3", "0.4"].includes(ngffVersion)) {
+    return ".zarray";
+  }
+  return "zarr.json";
+}
 
 export async function getZarrArrayJson(zarr_dir) {
   return getZarrJson(zarr_dir, ".zarray");
@@ -145,6 +158,7 @@ export function getNgffData(jsonData) {
 
 export function getVersion(jsonData) {
   let ngffData = getNgffData(jsonData);
+  // TODO: v0.5 won't likely have version at multiscales[0].version
   console.log("getVersion", jsonData, ngffData);
   let version = ngffData.multiscales
     ? ngffData.multiscales[0].version

From 6940281bb1df7da4f2405dd19635d8d7e8366f0f Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 13 Jun 2024 21:59:27 +0100
Subject: [PATCH 05/33] Update loading of zarr chunks with zarrita

---
 package-lock.json                             | 248 +++++++++++++-----
 package.json                                  |   3 +-
 .../ZarrArray/ChunkLoader.svelte              |  32 ++-
 .../ZarrArray/ChunkViewer.svelte              |  26 +-
 vite.config.js                                |  12 +-
 5 files changed, 236 insertions(+), 85 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 981019f..3291474 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,10 @@
       "version": "0.3.0",
       "dependencies": {
         "ajv": "^8.11.0",
+        "ndarray": "^1.0.19",
         "svelte-icons-pack": "^1.4.6",
         "svelte-simple-modal": "^1.4.1",
-        "zarr": "^0.6.0"
+        "zarrita": "^0.4.0-next.13"
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
@@ -59,6 +60,40 @@
         }
       }
     },
+    "node_modules/@zarrita/core": {
+      "version": "0.1.0-next.11",
+      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.11.tgz",
+      "integrity": "sha512-x2sjxKD8R9O+Bu7ldoRDsOSFoHzWT/owG1qjUnB3I4AQ0/aHay4rDU1ePXz27RZRmlZX32s9GCQh7UtX4nRXtg==",
+      "dependencies": {
+        "@zarrita/storage": "^0.1.0-next.5",
+        "@zarrita/typedarray": "^0.1.0-next.3",
+        "numcodecs": "^0.3.1"
+      }
+    },
+    "node_modules/@zarrita/indexing": {
+      "version": "0.1.0-next.13",
+      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.13.tgz",
+      "integrity": "sha512-qxBIUHpBRLChc71uY8+GkQKaRip1sgFGA1STnSxDee6gMuqEaB0f1SBoa+VPf8eMK6mLEatTE9KXm6pRzRYj/A==",
+      "dependencies": {
+        "@zarrita/core": "^0.1.0-next.11",
+        "@zarrita/storage": "^0.1.0-next.5",
+        "@zarrita/typedarray": "^0.1.0-next.3"
+      }
+    },
+    "node_modules/@zarrita/storage": {
+      "version": "0.1.0-next.5",
+      "resolved": "https://registry.npmjs.org/@zarrita/storage/-/storage-0.1.0-next.5.tgz",
+      "integrity": "sha512-E1VSxhNGZHL4RsKfIuyaz0HRsDk7hOU8Y7R+8yvKolaHDjK31XQsUgu97oaR24qS1j1OOg5vGyFyd+y0q7FNOA==",
+      "dependencies": {
+        "reference-spec-reader": "^0.2.0",
+        "unzipit": "^1.4.3"
+      }
+    },
+    "node_modules/@zarrita/typedarray": {
+      "version": "0.1.0-next.3",
+      "resolved": "https://registry.npmjs.org/@zarrita/typedarray/-/typedarray-0.1.0-next.3.tgz",
+      "integrity": "sha512-DpSaU3Cr6HmYDC/v8oM+e219cHU/kzKma309Z9E+QbpRnZycKNbSTKcxFR7FqB6HgB9640gzNUVFG5P+wzX5Xg=="
+    },
     "node_modules/ajv": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
@@ -461,16 +496,16 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
-    "node_modules/eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -503,6 +538,16 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/iota-array": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz",
+      "integrity": "sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA=="
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
     "node_modules/is-core-module": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
@@ -559,38 +604,21 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/numcodecs": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.2.2.tgz",
-      "integrity": "sha512-Y5K8mv80yb4MgVpcElBkUeMZqeE4TrovxRit/dTZvoRl6YkB6WEjY+fiUjGCblITnt3T3fmrDg8yRWu0gOLjhQ==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/p-queue": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-7.3.0.tgz",
-      "integrity": "sha512-5fP+yVQ0qp0rEfZoDTlP2c3RYBgxvRsw30qO+VtPPc95lyvSG+x6USSh1TuLB4n96IO6I8/oXQGsTgtna4q2nQ==",
+    "node_modules/ndarray": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/ndarray/-/ndarray-1.0.19.tgz",
+      "integrity": "sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==",
       "dependencies": {
-        "eventemitter3": "^4.0.7",
-        "p-timeout": "^5.0.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "iota-array": "^1.0.0",
+        "is-buffer": "^1.0.2"
       }
     },
-    "node_modules/p-timeout": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-5.1.0.tgz",
-      "integrity": "sha512-auFDyzzzGZZZdHz3BtET9VEz0SE/uMEAx7uWfGPucfzEwwe/xH0iVeZibQmANYE/hp9T2+UUZT5m+BKyrDp3Ew==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+    "node_modules/numcodecs": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.3.1.tgz",
+      "integrity": "sha512-ywIyGpJ+c6Ojktq9a8jsWSy12ZSUcW/W+I3jlH0q0zv9aR/ZiMsN7IrWaNq9YV2FRdLu6r/M6lp35jMA6fug/A==",
+      "dependencies": {
+        "fflate": "^0.8.0"
       }
     },
     "node_modules/path-parse": {
@@ -649,6 +677,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/reference-spec-reader": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/reference-spec-reader/-/reference-spec-reader-0.2.0.tgz",
+      "integrity": "sha512-q0mfCi5yZSSHXpCyxjgQeaORq3tvDsxDyzaadA/5+AbAUwRyRuuTh0aRQuE/vAOt/qzzxidJ5iDeu1cLHaNBlQ=="
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -749,6 +782,17 @@
         "svelte": "^3.31.2"
       }
     },
+    "node_modules/unzipit": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unzipit/-/unzipit-1.4.3.tgz",
+      "integrity": "sha512-gsq2PdJIWWGhx5kcdWStvNWit9FVdTewm4SEG7gFskWs+XCVaULt9+BwuoBtJiRE8eo3L1IPAOrbByNLtLtIlg==",
+      "dependencies": {
+        "uzip-module": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -757,6 +801,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/uzip-module": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/uzip-module/-/uzip-module-1.0.3.tgz",
+      "integrity": "sha512-AMqwWZaknLM77G+VPYNZLEruMGWGzyigPK3/Whg99B3S6vGHuqsyl5ZrOv1UUF3paGK1U6PM0cnayioaryg/fA=="
+    },
     "node_modules/vite": {
       "version": "2.9.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
@@ -794,16 +843,14 @@
         }
       }
     },
-    "node_modules/zarr": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/zarr/-/zarr-0.6.0.tgz",
-      "integrity": "sha512-WgGe+aFyK6EmTyZcqJ2OFeFQ9fJFuJqeJgM5sKnbap7HJboaI+rBpDp0rPXSTq5ITu/rLEQjZQ2mPlcfYk7DYA==",
+    "node_modules/zarrita": {
+      "version": "0.4.0-next.13",
+      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.13.tgz",
+      "integrity": "sha512-F0ujRsh5G8uuNe1CH12I9o/Q88Jc3YnRp4s7QzOIjvXvXzEv8Ht2VLCbZsTiS/pI4ynxKr1+9XS1LZixhoGDVA==",
       "dependencies": {
-        "numcodecs": "^0.2.2",
-        "p-queue": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=12"
+        "@zarrita/core": "^0.1.0-next.11",
+        "@zarrita/indexing": "^0.1.0-next.13",
+        "@zarrita/storage": "^0.1.0-next.5"
       }
     }
   },
@@ -832,6 +879,40 @@
         "svelte-hmr": "^0.14.11"
       }
     },
+    "@zarrita/core": {
+      "version": "0.1.0-next.11",
+      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.11.tgz",
+      "integrity": "sha512-x2sjxKD8R9O+Bu7ldoRDsOSFoHzWT/owG1qjUnB3I4AQ0/aHay4rDU1ePXz27RZRmlZX32s9GCQh7UtX4nRXtg==",
+      "requires": {
+        "@zarrita/storage": "^0.1.0-next.5",
+        "@zarrita/typedarray": "^0.1.0-next.3",
+        "numcodecs": "^0.3.1"
+      }
+    },
+    "@zarrita/indexing": {
+      "version": "0.1.0-next.13",
+      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.13.tgz",
+      "integrity": "sha512-qxBIUHpBRLChc71uY8+GkQKaRip1sgFGA1STnSxDee6gMuqEaB0f1SBoa+VPf8eMK6mLEatTE9KXm6pRzRYj/A==",
+      "requires": {
+        "@zarrita/core": "^0.1.0-next.11",
+        "@zarrita/storage": "^0.1.0-next.5",
+        "@zarrita/typedarray": "^0.1.0-next.3"
+      }
+    },
+    "@zarrita/storage": {
+      "version": "0.1.0-next.5",
+      "resolved": "https://registry.npmjs.org/@zarrita/storage/-/storage-0.1.0-next.5.tgz",
+      "integrity": "sha512-E1VSxhNGZHL4RsKfIuyaz0HRsDk7hOU8Y7R+8yvKolaHDjK31XQsUgu97oaR24qS1j1OOg5vGyFyd+y0q7FNOA==",
+      "requires": {
+        "reference-spec-reader": "^0.2.0",
+        "unzipit": "^1.4.3"
+      }
+    },
+    "@zarrita/typedarray": {
+      "version": "0.1.0-next.3",
+      "resolved": "https://registry.npmjs.org/@zarrita/typedarray/-/typedarray-0.1.0-next.3.tgz",
+      "integrity": "sha512-DpSaU3Cr6HmYDC/v8oM+e219cHU/kzKma309Z9E+QbpRnZycKNbSTKcxFR7FqB6HgB9640gzNUVFG5P+wzX5Xg=="
+    },
     "ajv": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
@@ -1032,16 +1113,16 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
-    "eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
-    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1064,6 +1145,16 @@
         "function-bind": "^1.1.1"
       }
     },
+    "iota-array": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz",
+      "integrity": "sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA=="
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
     "is-core-module": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
@@ -1105,24 +1196,22 @@
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true
     },
-    "numcodecs": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.2.2.tgz",
-      "integrity": "sha512-Y5K8mv80yb4MgVpcElBkUeMZqeE4TrovxRit/dTZvoRl6YkB6WEjY+fiUjGCblITnt3T3fmrDg8yRWu0gOLjhQ=="
-    },
-    "p-queue": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-7.3.0.tgz",
-      "integrity": "sha512-5fP+yVQ0qp0rEfZoDTlP2c3RYBgxvRsw30qO+VtPPc95lyvSG+x6USSh1TuLB4n96IO6I8/oXQGsTgtna4q2nQ==",
+    "ndarray": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/ndarray/-/ndarray-1.0.19.tgz",
+      "integrity": "sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==",
       "requires": {
-        "eventemitter3": "^4.0.7",
-        "p-timeout": "^5.0.2"
+        "iota-array": "^1.0.0",
+        "is-buffer": "^1.0.2"
       }
     },
-    "p-timeout": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-5.1.0.tgz",
-      "integrity": "sha512-auFDyzzzGZZZdHz3BtET9VEz0SE/uMEAx7uWfGPucfzEwwe/xH0iVeZibQmANYE/hp9T2+UUZT5m+BKyrDp3Ew=="
+    "numcodecs": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.3.1.tgz",
+      "integrity": "sha512-ywIyGpJ+c6Ojktq9a8jsWSy12ZSUcW/W+I3jlH0q0zv9aR/ZiMsN7IrWaNq9YV2FRdLu6r/M6lp35jMA6fug/A==",
+      "requires": {
+        "fflate": "^0.8.0"
+      }
     },
     "path-parse": {
       "version": "1.0.7",
@@ -1158,6 +1247,11 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "reference-spec-reader": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/reference-spec-reader/-/reference-spec-reader-0.2.0.tgz",
+      "integrity": "sha512-q0mfCi5yZSSHXpCyxjgQeaORq3tvDsxDyzaadA/5+AbAUwRyRuuTh0aRQuE/vAOt/qzzxidJ5iDeu1cLHaNBlQ=="
+    },
     "require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -1224,6 +1318,14 @@
       "integrity": "sha512-em/uxH1xvQZoXTOq81Kk0u9ltjf/EyQkNiKTQJQmdCygDMqyUfMCFzLnbIQ4ApfV4BcRh6eYbwbCeeWTOyfpsg==",
       "requires": {}
     },
+    "unzipit": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unzipit/-/unzipit-1.4.3.tgz",
+      "integrity": "sha512-gsq2PdJIWWGhx5kcdWStvNWit9FVdTewm4SEG7gFskWs+XCVaULt9+BwuoBtJiRE8eo3L1IPAOrbByNLtLtIlg==",
+      "requires": {
+        "uzip-module": "^1.0.2"
+      }
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -1232,6 +1334,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "uzip-module": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/uzip-module/-/uzip-module-1.0.3.tgz",
+      "integrity": "sha512-AMqwWZaknLM77G+VPYNZLEruMGWGzyigPK3/Whg99B3S6vGHuqsyl5ZrOv1UUF3paGK1U6PM0cnayioaryg/fA=="
+    },
     "vite": {
       "version": "2.9.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
@@ -1245,13 +1352,14 @@
         "rollup": "^2.59.0"
       }
     },
-    "zarr": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/zarr/-/zarr-0.6.0.tgz",
-      "integrity": "sha512-WgGe+aFyK6EmTyZcqJ2OFeFQ9fJFuJqeJgM5sKnbap7HJboaI+rBpDp0rPXSTq5ITu/rLEQjZQ2mPlcfYk7DYA==",
+    "zarrita": {
+      "version": "0.4.0-next.13",
+      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.13.tgz",
+      "integrity": "sha512-F0ujRsh5G8uuNe1CH12I9o/Q88Jc3YnRp4s7QzOIjvXvXzEv8Ht2VLCbZsTiS/pI4ynxKr1+9XS1LZixhoGDVA==",
       "requires": {
-        "numcodecs": "^0.2.2",
-        "p-queue": "^7.1.0"
+        "@zarrita/core": "^0.1.0-next.11",
+        "@zarrita/indexing": "^0.1.0-next.13",
+        "@zarrita/storage": "^0.1.0-next.5"
       }
     }
   }
diff --git a/package.json b/package.json
index f66b677..8831a69 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,9 @@
   },
   "dependencies": {
     "ajv": "^8.11.0",
+    "ndarray": "^1.0.19",
     "svelte-icons-pack": "^1.4.6",
     "svelte-simple-modal": "^1.4.1",
-    "zarr": "^0.6.0"
+    "zarrita": "^0.4.0-next.13"
   }
 }
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
index 3834b96..5735e86 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
@@ -1,13 +1,19 @@
 <script>
-  import { openArray, slice } from "zarr";
+  // import { openArray, slice } from "zarr";
   import { range, getChunkShape } from "../../../utils";
   import { get, writable } from "svelte/store";
   import ChunkViewer from "./ChunkViewer.svelte";
+  // import * as zarr from "zarrita";
+  import { slice } from "@zarrita/indexing";
+
 
   export let source;
   export let path;
   export let zarray;
 
+  // zarrita wants /path/to/data.zarr directory
+  let zarrPath = path.replace("/zarr.json", "").replace("/.zarray", "")
+
   let showChunks = false;
   let chunk;
 
@@ -33,20 +39,36 @@
     if (!showChunks) return;
     // clear previous chunk
     chunk = undefined;
-    const store = await openArray({ store: source + "/" + path, mode: "r" });
+
+    // Use zarr like this, otherwise we get "Error: Unknown codec: bytes"
+    let zarr = await import("https://cdn.jsdelivr.net/npm/zarrita@next/+esm");
+    let url = source + "/" + zarrPath;
+    const store = new zarr.FetchStore(url);
+    console.log("store", store)
+    const arr = await zarr.open(store, { kind: "array" });
+    console.log("arr", arr)
+    const view = await zarr.get(arr, [0, 0, null, null]);
+
+    console.log("view", view)
 
     // we want to get exactly 1 chunk
     // e.g. chunkIndices is (0, 1, 0, 0) and chunk is (1, 125, 125, 125)
     // we want to get [0, 125:250, 0:125, 0:125]
-    let ch = store.meta.chunks;
-    const indices = get(chunkIndices).map((index, dim) => {
+    console.log('arr', arr, arr.chunks);
+    let ch = arr.chunks;
+    const indices = get(chunkIndices);
+    console.log('indices', indices);
+    let slices = indices.map((index, dim) => {
       if (ch[dim] > 1) {
+        console.log('dim', dim, 'slice', index * ch[dim], (index + 1) * ch[dim])
         return slice(index * ch[dim], (index + 1) * ch[dim]);
       } else {
+        console.log('-', index * ch[dim])
         return index * ch[dim];
       }
     });
-    chunk = await store.get(indices);
+    chunk = await zarr.get(arr, slices);
+    console.log("slices chunk2", chunk);
   }
 
   chunkIndices.subscribe(function () {
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkViewer.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkViewer.svelte
index ffd4a75..ade21f8 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkViewer.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkViewer.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount, afterUpdate } from "svelte";
-  import { slice } from "zarr";
+  import { slice, get } from "@zarrita/indexing";
+  import ndarray from "ndarray";
 
   export let chunk;
   // e.g. chunkSlice is [1,0,0]...
@@ -19,12 +20,11 @@
     const shape = chunk2d.shape;
     const height = shape[0];
     const width = shape[1];
-    const data = chunk2d.data;
     let maxV = 0;
     let minV = Infinity;
     for (let y = 0; y < height; y++) {
       for (let x = 0; x < width; x++) {
-        let rawValue = data[y][x];
+        let rawValue = chunk2d.get(y, x);
         maxV = Math.max(maxV, rawValue);
         minV = Math.min(minV, rawValue);
       }
@@ -34,10 +34,18 @@
 
   function sliceArray(ndChunk, toSlice) {
     let slice2D = [...toSlice];
+    slice2D[slice2D.length - 1] = null;
+    slice2D[slice2D.length - 2] = null;
     // don't slice last 2 dims - so we get 2D array
-    slice2D[slice2D.length - 1] = slice(null);
-    slice2D[slice2D.length - 2] = slice(null);
-    return ndChunk.get(slice2D);
+    let nddata = ndarray(ndChunk.data, ndChunk.shape, ndChunk.stride);
+
+    console.log(nddata.shape);
+
+    let data2d = nddata.pick(...slice2D);
+    console.log('nddata', data2d)
+
+
+    return data2d;
   }
 
   export function renderTo8bitArray(ndChunks, minMaxValues) {
@@ -60,9 +68,8 @@
     for (let y = 0; y < height; y++) {
       for (let x = 0; x < width; x++) {
         for (let p = 0; p < ndChunks.length; p++) {
-          let data = ndChunks[p].data;
           let range = minMaxValues[p];
-          let rawValue = data[y][x];
+          let rawValue = ndChunks[p].get(y, x);
           let fraction = (rawValue - range[0]) / (range[1] - range[0]);
           // for red, green, blue,
           for (let i = 0; i < 3; i++) {
@@ -83,7 +90,9 @@
     let chunk2d = chunk;
     if (chunkSlice) {
       try {
+        console.log('renderImageToCanvas...', chunk.shape)
         chunk2d = sliceArray(chunk, chunkSlice);
+        // chunk2d = chunk;
         errorMsg = undefined;
       } catch (error) {
         errorMsg = `Slicing (${chunk.shape}) failed with slice (${chunkSlice})`;
@@ -91,6 +100,7 @@
     }
     if (!errorMsg) {
       let minMax = getMinMaxValues(chunk2d);
+      console.log('minMax', minMax);
       minMaxMsg = `Min: ${minMax[0]} Max: ${minMax[1]}`;
       let rgb = renderTo8bitArray([chunk2d], [minMax]);
       ctx.putImageData(new ImageData(rgb, width, height), 0, 0);
diff --git a/vite.config.js b/vite.config.js
index abb051d..a11c4c3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,7 +2,17 @@ import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 let config = {
-  plugins: [svelte()]
+  plugins: [svelte()],
+
+  // https://stackoverflow.com/questions/75576741/how-to-solve-error-big-integer-literals-are-not-available-in-the-configured-tar
+  build: {
+    target: 'esnext', // you can also use 'es2020' here
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      target: 'esnext', // you can also use 'es2020' here
+    },
+  },
 };
 // this will be undefined when deployed from netlify, but is used by gh-pages
 if (process.env.GITHUB_REPOSITORY_OWNER) {

From f6de93d0d3e2710ceb41f8618004bf0e60b03643 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 14 Jun 2024 12:21:40 +0100
Subject: [PATCH 06/33] Handle 0.5-dev version

---
 src/App.svelte                                |  4 +--
 .../MultiscaleArrays/ZarrArray/index.svelte   |  2 +-
 src/JsonValidator/index.svelte                | 14 ++++----
 src/utils.js                                  | 33 ++++++++-----------
 4 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 6d2131c..faafd2a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -6,7 +6,7 @@
   import Modal from "svelte-simple-modal";
   import SplashScreen from "./SplashScreen.svelte";
 
-  import { getZarrJson } from "./utils";
+  import { getZarrGroupAttrs } from "./utils";
   import CheckMark from "./CheckMark.svelte";
 
   const searchParams = new URLSearchParams(window.location.search);
@@ -22,7 +22,7 @@
   if (source) {
     // load JSON to be validated...
     console.log("Loading JSON... " + source);
-    promise = getZarrJson(source);
+    promise = getZarrGroupAttrs(source);
   }
 </script>
 
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
index 7206b97..9634667 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
@@ -31,7 +31,7 @@
   <p>Path <a href="{source + "/" + path} ">{path}</a></p>
 
   {#await promise}
-    <div>loading array .zarray ...</div>
+    <div>loading array data ...</div>
   {:then zarray}
     <table>
       <tr>
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index 97a4514..75b6208 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -11,7 +11,6 @@
     CURRENT_VERSION,
     getSchemaUrlsForJson,
     validate,
-    getNgffData,
     getJson,
     getVersion,
     getDataType,
@@ -24,7 +23,6 @@
   const msVersion = getVersion(rootAttrs);
 
   const dtype = getDataType(rootAttrs);
-  const ngffData = getNgffData(rootAttrs);
   const schemaUrls = getSchemaUrlsForJson(rootAttrs);
   console.log("index.svelte schemaUrls", schemaUrls)
   const promise = validate(rootAttrs);
@@ -82,12 +80,12 @@
   {/await}
 </article>
 
-{#if ngffData.multiscales}
-  <MultiscaleArrays {source} rootAttrs={ngffData} />
-{:else if ngffData.plate}
-  <Plate {source} rootAttrs={ngffData} />
-{:else if ngffData.well}
-  <Well {source} rootAttrs={ngffData} />
+{#if rootAttrs.multiscales}
+  <MultiscaleArrays {source} rootAttrs={rootAttrs} />
+{:else if rootAttrs.plate}
+  <Plate {source} rootAttrs={rootAttrs} />
+{:else if rootAttrs.well}
+  <Well {source} rootAttrs={rootAttrs} />
 {/if}
 
 <style>
diff --git a/src/utils.js b/src/utils.js
index b5a9329..6c9373d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -14,6 +14,8 @@ export function getSchemaUrl(schemaName, version) {
   if (version == "0.5") {
     // TEMP: use open PR branch
     return `https://raw.githubusercontent.com/normanrz/ngff/spec-rfc2/latest/schemas/${schemaName}.schema`;
+  } else if (version == "0.5-dev") {
+    return `https://raw.githubusercontent.com/d-v-b/ngff/multiple_zarr_versions/0.5-dev1/schemas/${schemaName}.schema`;
   }
   return `https://raw.githubusercontent.com/ome/ngff/main/${version}/schemas/${schemaName}.schema`;
 }
@@ -80,11 +82,17 @@ export function getZarrArrayAttrsFileName(ngffVersion) {
   return "zarr.json";
 }
 
+export async function getZarrGroupAttrs(zarr_dir) {
+  let rawJson = await getZarrJson(zarr_dir, ".zattrs");
+  let groupAttrs = rawJson.attributes || rawJson;
+  return groupAttrs;
+}
+
 export async function getZarrArrayJson(zarr_dir) {
   return getZarrJson(zarr_dir, ".zarray");
 }
 
-export async function getZarrJson(zarr_dir, alternative=".zattrs") {
+async function getZarrJson(zarr_dir, alternative=".zattrs") {
   let zarrJson;
   let msg;
   // try to load v2 /.zattrs or v3 /zarr.json
@@ -143,23 +151,7 @@ export async function getSchema(schemaUrl) {
   return schemas[schemaUrl];
 }
 
-export function getNgffData(jsonData) {
-  // Handle nesting of NGFF data under namespace key for v0.5+
-  if (jsonData.attributes) {
-    for(let v=0; v<NAMESPACED_VERSIONS.length; v++) {
-      let key = getNamespacedKey(NAMESPACED_VERSIONS[v]);
-      if (jsonData.attributes.hasOwnProperty(key)) {
-        return jsonData.attributes[key];
-      }
-    }
-  }
-  return jsonData;
-}
-
-export function getVersion(jsonData) {
-  let ngffData = getNgffData(jsonData);
-  // TODO: v0.5 won't likely have version at multiscales[0].version
-  console.log("getVersion", jsonData, ngffData);
+export function getVersion(ngffData) {
   let version = ngffData.multiscales
     ? ngffData.multiscales[0].version
     : ngffData.plate
@@ -167,6 +159,7 @@ export function getVersion(jsonData) {
     : ngffData.well
     ? ngffData.well.version
     : undefined;
+  console.log("version", version);
   return version;
 }
 
@@ -188,8 +181,7 @@ export function getSchemaName(jsonData) {
   return names[0];
 }
 
-export function getSchemaNames(jsonData) {
-  let ngffData = getNgffData(jsonData);
+export function getSchemaNames(ngffData) {
   let names = [];
   if (ngffData.multiscales) {
     names.push("image");
@@ -207,6 +199,7 @@ export function getSchemaNames(jsonData) {
 }
 
 export function getSchemaUrlsForJson(rootAttrs) {
+  console.log('getSchemaUrlsForJson rootAttrs', rootAttrs)
   const msVersion = getVersion(rootAttrs);
   const version = msVersion || CURRENT_VERSION;
   // for v0.5 onwards, rootAttrs is nested under attributes.namespace...

From 1054356ab22ab83ad78ea3e0f5fa14e0e86e50ca Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 14 Jun 2024 12:53:35 +0100
Subject: [PATCH 07/33] Top of 3D cube - align lines with front face

---
 src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte
index 415c21b..df7387c 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte
@@ -126,7 +126,7 @@
   .top {
     top: calc((var(--size-y) - var(--size-z)) / 2);
     height: var(--size-z);
-    transform: rotateX(90deg) translateZ(calc(var(--size-y) / 2));
+    transform: rotateX(270deg) translateZ(calc(var(--size-y)* -1 / 2));
     background-image: repeating-linear-gradient(
         0deg,
         rgba(70, 70, 70, 0.7) 0px,

From f650c1ed7a52327daa0b1e327837a87dfcd9ad5f Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Tue, 25 Jun 2024 14:59:47 +0100
Subject: [PATCH 08/33] Update to zarrita.js 0.4.0-next.14

---
 package-lock.json                             | 50 +++++++++----------
 package.json                                  |  2 +-
 .../ZarrArray/ChunkLoader.svelte              | 18 ++-----
 3 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3291474..ca88052 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "ndarray": "^1.0.19",
         "svelte-icons-pack": "^1.4.6",
         "svelte-simple-modal": "^1.4.1",
-        "zarrita": "^0.4.0-next.13"
+        "zarrita": "^0.4.0-next.14"
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
@@ -61,9 +61,9 @@
       }
     },
     "node_modules/@zarrita/core": {
-      "version": "0.1.0-next.11",
-      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.11.tgz",
-      "integrity": "sha512-x2sjxKD8R9O+Bu7ldoRDsOSFoHzWT/owG1qjUnB3I4AQ0/aHay4rDU1ePXz27RZRmlZX32s9GCQh7UtX4nRXtg==",
+      "version": "0.1.0-next.12",
+      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.12.tgz",
+      "integrity": "sha512-Y3TsUBqyQ86Z7Z/1uI9CllI8clm0fFGi0URlVn+YrSfuoZV377DBfYwksoycyb2KtPyo/tfRvwahYXW71RrWhQ==",
       "dependencies": {
         "@zarrita/storage": "^0.1.0-next.5",
         "@zarrita/typedarray": "^0.1.0-next.3",
@@ -71,11 +71,11 @@
       }
     },
     "node_modules/@zarrita/indexing": {
-      "version": "0.1.0-next.13",
-      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.13.tgz",
-      "integrity": "sha512-qxBIUHpBRLChc71uY8+GkQKaRip1sgFGA1STnSxDee6gMuqEaB0f1SBoa+VPf8eMK6mLEatTE9KXm6pRzRYj/A==",
+      "version": "0.1.0-next.14",
+      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.14.tgz",
+      "integrity": "sha512-13Af1eQgdkp9Cw+tQf3jQ5YYirkR2YEIiPFRcwNuHV3u2ycM1okuY2lilIjQ1hgeJzrmIc3q/y72ioT4bgiwcQ==",
       "dependencies": {
-        "@zarrita/core": "^0.1.0-next.11",
+        "@zarrita/core": "^0.1.0-next.12",
         "@zarrita/storage": "^0.1.0-next.5",
         "@zarrita/typedarray": "^0.1.0-next.3"
       }
@@ -844,12 +844,12 @@
       }
     },
     "node_modules/zarrita": {
-      "version": "0.4.0-next.13",
-      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.13.tgz",
-      "integrity": "sha512-F0ujRsh5G8uuNe1CH12I9o/Q88Jc3YnRp4s7QzOIjvXvXzEv8Ht2VLCbZsTiS/pI4ynxKr1+9XS1LZixhoGDVA==",
+      "version": "0.4.0-next.14",
+      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.14.tgz",
+      "integrity": "sha512-B5a3Nw31EEaxjI0yh+CJuSdqDo3f0KnCrf8aZiDj4Nhrsi/Jau7Mtc7Yo6T3SmM6AInTmA/VNv/FKT5ZLfADTQ==",
       "dependencies": {
-        "@zarrita/core": "^0.1.0-next.11",
-        "@zarrita/indexing": "^0.1.0-next.13",
+        "@zarrita/core": "^0.1.0-next.12",
+        "@zarrita/indexing": "^0.1.0-next.14",
         "@zarrita/storage": "^0.1.0-next.5"
       }
     }
@@ -880,9 +880,9 @@
       }
     },
     "@zarrita/core": {
-      "version": "0.1.0-next.11",
-      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.11.tgz",
-      "integrity": "sha512-x2sjxKD8R9O+Bu7ldoRDsOSFoHzWT/owG1qjUnB3I4AQ0/aHay4rDU1ePXz27RZRmlZX32s9GCQh7UtX4nRXtg==",
+      "version": "0.1.0-next.12",
+      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.12.tgz",
+      "integrity": "sha512-Y3TsUBqyQ86Z7Z/1uI9CllI8clm0fFGi0URlVn+YrSfuoZV377DBfYwksoycyb2KtPyo/tfRvwahYXW71RrWhQ==",
       "requires": {
         "@zarrita/storage": "^0.1.0-next.5",
         "@zarrita/typedarray": "^0.1.0-next.3",
@@ -890,11 +890,11 @@
       }
     },
     "@zarrita/indexing": {
-      "version": "0.1.0-next.13",
-      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.13.tgz",
-      "integrity": "sha512-qxBIUHpBRLChc71uY8+GkQKaRip1sgFGA1STnSxDee6gMuqEaB0f1SBoa+VPf8eMK6mLEatTE9KXm6pRzRYj/A==",
+      "version": "0.1.0-next.14",
+      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.14.tgz",
+      "integrity": "sha512-13Af1eQgdkp9Cw+tQf3jQ5YYirkR2YEIiPFRcwNuHV3u2ycM1okuY2lilIjQ1hgeJzrmIc3q/y72ioT4bgiwcQ==",
       "requires": {
-        "@zarrita/core": "^0.1.0-next.11",
+        "@zarrita/core": "^0.1.0-next.12",
         "@zarrita/storage": "^0.1.0-next.5",
         "@zarrita/typedarray": "^0.1.0-next.3"
       }
@@ -1353,12 +1353,12 @@
       }
     },
     "zarrita": {
-      "version": "0.4.0-next.13",
-      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.13.tgz",
-      "integrity": "sha512-F0ujRsh5G8uuNe1CH12I9o/Q88Jc3YnRp4s7QzOIjvXvXzEv8Ht2VLCbZsTiS/pI4ynxKr1+9XS1LZixhoGDVA==",
+      "version": "0.4.0-next.14",
+      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.14.tgz",
+      "integrity": "sha512-B5a3Nw31EEaxjI0yh+CJuSdqDo3f0KnCrf8aZiDj4Nhrsi/Jau7Mtc7Yo6T3SmM6AInTmA/VNv/FKT5ZLfADTQ==",
       "requires": {
-        "@zarrita/core": "^0.1.0-next.11",
-        "@zarrita/indexing": "^0.1.0-next.13",
+        "@zarrita/core": "^0.1.0-next.12",
+        "@zarrita/indexing": "^0.1.0-next.14",
         "@zarrita/storage": "^0.1.0-next.5"
       }
     }
diff --git a/package.json b/package.json
index 8831a69..467e274 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,6 @@
     "ndarray": "^1.0.19",
     "svelte-icons-pack": "^1.4.6",
     "svelte-simple-modal": "^1.4.1",
-    "zarrita": "^0.4.0-next.13"
+    "zarrita": "^0.4.0-next.14"
   }
 }
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
index 5735e86..e32deb5 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
@@ -3,7 +3,7 @@
   import { range, getChunkShape } from "../../../utils";
   import { get, writable } from "svelte/store";
   import ChunkViewer from "./ChunkViewer.svelte";
-  // import * as zarr from "zarrita";
+  import * as zarr from "zarrita";
   import { slice } from "@zarrita/indexing";
 
 
@@ -41,34 +41,26 @@
     chunk = undefined;
 
     // Use zarr like this, otherwise we get "Error: Unknown codec: bytes"
-    let zarr = await import("https://cdn.jsdelivr.net/npm/zarrita@next/+esm");
+    // let zarr = await import("https://cdn.jsdelivr.net/npm/zarrita@next/+esm");
     let url = source + "/" + zarrPath;
     const store = new zarr.FetchStore(url);
-    console.log("store", store)
     const arr = await zarr.open(store, { kind: "array" });
-    console.log("arr", arr)
-    const view = await zarr.get(arr, [0, 0, null, null]);
-
-    console.log("view", view)
 
     // we want to get exactly 1 chunk
     // e.g. chunkIndices is (0, 1, 0, 0) and chunk is (1, 125, 125, 125)
     // we want to get [0, 125:250, 0:125, 0:125]
-    console.log('arr', arr, arr.chunks);
     let ch = arr.chunks;
     const indices = get(chunkIndices);
-    console.log('indices', indices);
     let slices = indices.map((index, dim) => {
       if (ch[dim] > 1) {
-        console.log('dim', dim, 'slice', index * ch[dim], (index + 1) * ch[dim])
         return slice(index * ch[dim], (index + 1) * ch[dim]);
       } else {
-        console.log('-', index * ch[dim])
-        return index * ch[dim];
+        return index;
       }
     });
+    // Updating chunk will trigger ChunkViewer to re-render
+    console.log("loading chunk", slices)
     chunk = await zarr.get(arr, slices);
-    console.log("slices chunk2", chunk);
   }
 
   chunkIndices.subscribe(function () {

From e5b5bef98fa87f60c644f3454bab8f71124d0778 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 28 Jun 2024 14:48:32 +0100
Subject: [PATCH 09/33] Update version check to correspond to fix in schemas PR

---
 src/utils.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/utils.js b/src/utils.js
index 6c9373d..41a3e4c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -14,7 +14,8 @@ export function getSchemaUrl(schemaName, version) {
   if (version == "0.5") {
     // TEMP: use open PR branch
     return `https://raw.githubusercontent.com/normanrz/ngff/spec-rfc2/latest/schemas/${schemaName}.schema`;
-  } else if (version == "0.5-dev") {
+  } else if (version == "0.5-dev1") {
+    https://raw.githubusercontent.com/d-v-b/ngff/multiple_zarr_versions/0.5-dev1/schemas/image.schema
     return `https://raw.githubusercontent.com/d-v-b/ngff/multiple_zarr_versions/0.5-dev1/schemas/${schemaName}.schema`;
   }
   return `https://raw.githubusercontent.com/ome/ngff/main/${version}/schemas/${schemaName}.schema`;

From fdd8a55f9112b944f8e446f0ab509c8bb0131592 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 3 Jul 2024 15:37:07 +0100
Subject: [PATCH 10/33] Handle v0.5-dev2 data

---
 src/JsonValidator/Plate/index.svelte |  6 +++---
 src/JsonValidator/index.svelte       | 21 ++++++++++++---------
 src/utils.js                         | 23 ++++++++---------------
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/JsonValidator/Plate/index.svelte b/src/JsonValidator/Plate/index.svelte
index ad25c38..381275d 100644
--- a/src/JsonValidator/Plate/index.svelte
+++ b/src/JsonValidator/Plate/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { CURRENT_VERSION, getVersion, getSchema, getSearchParam, range } from "../../utils";
+  import { CURRENT_VERSION, getVersion, getSchema, getSchemaUrl, getSearchParam, range } from "../../utils";
 
   import WellContainer from "./WellContainer/index.svelte";
 
@@ -30,8 +30,8 @@
 
   // wait for schemas to be cached, so we don't load them multiple times
   let schemasPromise = Promise.all([
-    getSchema(version, "well"),
-    getSchema(version, "image"),
+    getSchema(getSchemaUrl("well", version)),
+    getSchema(getSchemaUrl("image", version)),
   ]);
 
   function handleSelect(event) {
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index 75b6208..2ec315a 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -20,12 +20,15 @@
   export let source;
   export let rootAttrs;
 
+  // v0.5+ unwrap the attrs under "ome"
+  const omeAttrs = rootAttrs.ome || rootAttrs;
+
   const msVersion = getVersion(rootAttrs);
 
-  const dtype = getDataType(rootAttrs);
-  const schemaUrls = getSchemaUrlsForJson(rootAttrs);
+  const dtype = getDataType(omeAttrs);
+  const schemaUrls = getSchemaUrlsForJson(omeAttrs);
   console.log("index.svelte schemaUrls", schemaUrls)
-  const promise = validate(rootAttrs);
+  const promise = validate(omeAttrs);
 
   const dirs = source.split("/").filter(Boolean);
   const zarrName = dirs[dirs.length - 1];
@@ -80,12 +83,12 @@
   {/await}
 </article>
 
-{#if rootAttrs.multiscales}
-  <MultiscaleArrays {source} rootAttrs={rootAttrs} />
-{:else if rootAttrs.plate}
-  <Plate {source} rootAttrs={rootAttrs} />
-{:else if rootAttrs.well}
-  <Well {source} rootAttrs={rootAttrs} />
+{#if omeAttrs.multiscales}
+  <MultiscaleArrays {source} rootAttrs={omeAttrs} />
+{:else if omeAttrs.plate}
+  <Plate {source} rootAttrs={omeAttrs} />
+{:else if omeAttrs.well}
+  <Well {source} rootAttrs={omeAttrs} />
 {/if}
 
 <style>
diff --git a/src/utils.js b/src/utils.js
index 41a3e4c..c683ccd 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -3,31 +3,20 @@
 import Ajv from "ajv";
 
 export const CURRENT_VERSION = "0.5";
-// versions to check for e.g. attributes['https://ngff.openmicroscopy.org/0.5']
-// which start at version 0.5
-export const NAMESPACED_VERSIONS = ["0.5"]
 export const FILE_NOT_FOUND = "File not found";
 
 const ajv = new Ajv({ strict: false }); // options can be passed, e.g. {allErrors: true}
 
 export function getSchemaUrl(schemaName, version) {
-  if (version == "0.5") {
+  if (version == "0.5" || version == "0.5-dev2") {
     // TEMP: use open PR branch
     return `https://raw.githubusercontent.com/normanrz/ngff/spec-rfc2/latest/schemas/${schemaName}.schema`;
   } else if (version == "0.5-dev1") {
-    https://raw.githubusercontent.com/d-v-b/ngff/multiple_zarr_versions/0.5-dev1/schemas/image.schema
     return `https://raw.githubusercontent.com/d-v-b/ngff/multiple_zarr_versions/0.5-dev1/schemas/${schemaName}.schema`;
   }
   return `https://raw.githubusercontent.com/ome/ngff/main/${version}/schemas/${schemaName}.schema`;
 }
 
-function getNamespacedKey(version) {
-  if (!version) {
-    version = CURRENT_VERSION;
-  }
-  return `https://ngff.openmicroscopy.org/${version}`;
-}
-
 
 // fetch() doesn't error for 404 etc.
 async function fetchHandleError(url) {
@@ -153,6 +142,10 @@ export async function getSchema(schemaUrl) {
 }
 
 export function getVersion(ngffData) {
+  console.log("getVersion...", ngffData, ngffData.ome?.version)
+  if (ngffData.ome?.version) {
+    return ngffData.ome.version;
+  }
   let version = ngffData.multiscales
     ? ngffData.multiscales[0].version
     : ngffData.plate
@@ -203,9 +196,9 @@ export function getSchemaUrlsForJson(rootAttrs) {
   console.log('getSchemaUrlsForJson rootAttrs', rootAttrs)
   const msVersion = getVersion(rootAttrs);
   const version = msVersion || CURRENT_VERSION;
-  // for v0.5 onwards, rootAttrs is nested under attributes.namespace...
-  if (NAMESPACED_VERSIONS.includes(version)) {
-    rootAttrs = rootAttrs.attributes[getNamespacedKey(version)];
+  // for v0.5 onwards, rootAttrs is nested under attributes.ome...
+  if (rootAttrs.ome) {
+    rootAttrs = rootAttrs.ome;
   }
   const schemaNames = getSchemaNames(rootAttrs);
   return schemaNames.map(name => getSchemaUrl(name, version));

From e150aa91e7ba8bca3105dcc3bc3abbc88e69aac1 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 4 Jul 2024 10:23:19 +0100
Subject: [PATCH 11/33] Load version.schema for v0.5 schemas

---
 src/JsonValidator/index.svelte |  4 ++--
 src/utils.js                   | 43 ++++++++++++++++++++++++----------
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index 2ec315a..fd74388 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -21,14 +21,14 @@
   export let rootAttrs;
 
   // v0.5+ unwrap the attrs under "ome"
-  const omeAttrs = rootAttrs.ome || rootAttrs;
+  const omeAttrs = rootAttrs?.attributes?.ome || rootAttrs;
 
   const msVersion = getVersion(rootAttrs);
 
   const dtype = getDataType(omeAttrs);
   const schemaUrls = getSchemaUrlsForJson(omeAttrs);
   console.log("index.svelte schemaUrls", schemaUrls)
-  const promise = validate(omeAttrs);
+  const promise = validate(rootAttrs);
 
   const dirs = source.split("/").filter(Boolean);
   const zarrName = dirs[dirs.length - 1];
diff --git a/src/utils.js b/src/utils.js
index c683ccd..026e692 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -73,8 +73,7 @@ export function getZarrArrayAttrsFileName(ngffVersion) {
 }
 
 export async function getZarrGroupAttrs(zarr_dir) {
-  let rawJson = await getZarrJson(zarr_dir, ".zattrs");
-  let groupAttrs = rawJson.attributes || rawJson;
+  let groupAttrs = await getZarrJson(zarr_dir, ".zattrs");
   return groupAttrs;
 }
 
@@ -146,6 +145,9 @@ export function getVersion(ngffData) {
   if (ngffData.ome?.version) {
     return ngffData.ome.version;
   }
+  if (ngffData.version) {
+    return ngffData.version;
+  }
   let version = ngffData.multiscales
     ? ngffData.multiscales[0].version
     : ngffData.plate
@@ -194,18 +196,24 @@ export function getSchemaNames(ngffData) {
 
 export function getSchemaUrlsForJson(rootAttrs) {
   console.log('getSchemaUrlsForJson rootAttrs', rootAttrs)
-  const msVersion = getVersion(rootAttrs);
+  // v0.5+ unwrap the attrs under "attributes.ome"
+  let omeAttrs = rootAttrs?.attributes?.ome || rootAttrs;
+
+  const msVersion = getVersion(omeAttrs);
   const version = msVersion || CURRENT_VERSION;
   // for v0.5 onwards, rootAttrs is nested under attributes.ome...
-  if (rootAttrs.ome) {
-    rootAttrs = rootAttrs.ome;
+  if (omeAttrs.ome) {
+    console.trace("WARNING - FIXME!")
+    omeAttrs = omeAttrs.ome;
   }
-  const schemaNames = getSchemaNames(rootAttrs);
+  const schemaNames = getSchemaNames(omeAttrs);
   return schemaNames.map(name => getSchemaUrl(name, version));
 }
 
-export function validateData(schema, jsonData) {
-  const validate = ajv.compile(schema);
+export function validateData(schema, jsonData, extraSchemas) {
+  // call ajv.addSchema(schema) for each schema
+  let withSchema = extraSchemas.reduce((prev, curr) => prev.addSchema(curr), ajv);
+  const validate = withSchema.compile(schema);
   const valid = validate(jsonData);
   let errors = [];
   if (!valid) {
@@ -217,13 +225,15 @@ export function validateData(schema, jsonData) {
 
 export async function validate(jsonData) {
   // get version, lookup schema, do validation...
-  let version = getVersion(jsonData);
-  console.log("VERSION", version);
+  // v0.5+ unwrap the attrs under "attributes.ome"
+  let omeAttrs = jsonData?.attributes?.ome || jsonData;
+  let version = getVersion(omeAttrs);
+  console.log("validate VERSION", version, jsonData);
 
   const schemaUrls = getSchemaUrlsForJson(jsonData);
 
   if (schemaUrls.length == 0) {
-    return ["Unrecognised JSON data"];
+    return ["No schemas found. Unrecognised JSON data"];
   }
 
   if (!version) {
@@ -231,10 +241,19 @@ export async function validate(jsonData) {
     version = CURRENT_VERSION;
   }
 
+  let refSchemas = [];
+  // TODO: need to know whether to load other schemas...
+  // For now, we can use version check... 
+  if (version === "0.5") {
+    // const ctSchema = await getSchema(version, "coordinate_transformation");
+    // const csSchema = await getSchema(version, "coordinate_systems");
+    const versionSchema = await getSchema(getSchemaUrl("version", version));
+    refSchemas = [versionSchema];
+  }
   let errors = [];
   for (let s=0; s<schemaUrls.length; s++) {
     let schema = await getSchema(schemaUrls[s]);
-    let errs = validateData(schema, jsonData);
+    let errs = validateData(schema, jsonData, refSchemas);
     errors = errors.concat(errs);
   }
   return errors;

From e12265f6dd1a82c7e8de3bdd6311e84b26f531d7 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 4 Jul 2024 12:26:46 +0100
Subject: [PATCH 12/33] Check dimension_names for all zarr.json

---
 .../MultiscaleArrays/Multiscale.svelte        | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
index 97e5130..11bd22a 100644
--- a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
+++ b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
@@ -15,6 +15,11 @@
 
   const permitDtypeMismatch = ["0.1", "0.2", "0.3", "0.4"].includes(version);
   const checkDimSeparator = ["0.2", "0.3", "0.4"].includes(version);
+  const allowMissingDimNames = ["0.1", "0.2", "0.3", "0.4"].includes(version);
+  let successMsg = "dtypes match and shapes are consistent";
+  if (!allowMissingDimNames) {
+    successMsg = "dimension_names checked, " + successMsg;
+  }
 
   function allEqual(items) {
     return items.every((value) => value == items[0]);
@@ -29,11 +34,12 @@
     let dimCounts = [];
     let shapes = [];
     let dimSeparators = [];
+    let zarrayJsonList = [];
 
     for (let i = 0; i < datasets.length; i++) {
       let dataset = datasets[i];
       let zarray = await getZarrArrayJson(source + "/" + dataset.path);
-      console.log('zarray', zarray);
+      zarrayJsonList.push(zarray);
       // Need to handle Zarr v2 and Zarr v3:
       dimCounts.push(zarray.shape.length);
       dtypes.push(zarray.dtype || zarray.data_type);
@@ -74,6 +80,24 @@
           });
         }
       });
+
+      if (!allowMissingDimNames) {
+        let axesNames = JSON.stringify(axes.map(axis => axis.name));
+        zarrayJsonList.forEach((arrData, i) => {
+          let msg;
+          if (!arrData.dimension_names) {
+            msg = `No dimension_names found for dataset ${i}`;
+          } else {
+            let dimNames = JSON.stringify(arrData.dimension_names);
+            if (dimNames != axesNames) {
+              msg = `dimension_names: ${dimNames} don't match axes names: ${axesNames}`;
+            }
+          }
+          if (msg) {
+            checks.push({msg});
+          }
+        });
+      }
     }
     if (checkDimSeparator) {
       dimSeparators.forEach((sep) => {
@@ -97,7 +121,7 @@
     <!-- only show X if not valid - no tick if valid -->
     <CheckMark valid={false} />
   {:else}
-    <p title="dtypes match and shapes are consistent">
+    <p title="{successMsg}">
       {datasets.length} Datasets checked <span style="color:green">✓</span>
     </p>
   {/if}

From 4f54cb46878b3d6bc234ac4691eca805c8a3f6ac Mon Sep 17 00:00:00 2001
From: Josh Moore <josh@openmicroscopy.org>
Date: Thu, 11 Jul 2024 16:35:22 +0200
Subject: [PATCH 13/33] Temporarily hard-code zarr3 for neuroglancer

---
 public/ngff_viewers.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/ngff_viewers.json b/public/ngff_viewers.json
index 633f950..3ffbb86 100644
--- a/public/ngff_viewers.json
+++ b/public/ngff_viewers.json
@@ -14,7 +14,7 @@
       "name": "neuroglancer",
       "logo": "/neuroglancer.png",
       "//": "NB: The {URL} in the href is replaced with NGFF image URL",
-      "href": "https://neuroglancer-demo.appspot.com/#!{%22layers%22:[{%22source%22:%22zarr://{URL}%22,%22name%22:%22OME-NGFF%22}]}"
+      "href": "https://neuroglancer-demo.appspot.com/#!{%22layers%22:[{%22source%22:%22zarr3://{URL}%22,%22name%22:%22OME-NGFF%22}]}"
     },
     {
       "name": "Allen Cell Feature Explorer 3D viewer",

From 8070bc50215f2c49aa91ddff71470da1437d553c Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 11 Jul 2024 17:29:52 +0100
Subject: [PATCH 14/33] Fix loading of zarr v3 plates

---
 .../Plate/WellContainer/PlateWell.svelte              | 11 +++++++----
 src/JsonValidator/Plate/WellContainer/index.svelte    |  4 ++--
 src/JsonValidator/Well/ImageContainer.svelte          |  5 ++---
 src/JsonValidator/Well/index.svelte                   |  4 ++--
 src/utils.js                                          |  2 +-
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/JsonValidator/Plate/WellContainer/PlateWell.svelte b/src/JsonValidator/Plate/WellContainer/PlateWell.svelte
index 8c64c3c..e0a7d94 100644
--- a/src/JsonValidator/Plate/WellContainer/PlateWell.svelte
+++ b/src/JsonValidator/Plate/WellContainer/PlateWell.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getJson, validate, getSearchParam, range } from "../../../utils";
+  import { getZarrGroupAttrs, validate, getSearchParam, range } from "../../../utils";
 
   export let wellAttrs;
   export let source;
@@ -20,16 +20,19 @@
 
   async function loadAndValidate() {
     let errs = [];
-    const imgs = wellAttrs.well.images;
+    console.log("loadAndValidate wellAttrs", wellAttrs);
+
+    const imgs = wellAttrs.attributes?.ome?.well.images || wellAttrs.well.images;
     for (let i=0; i < wellIndices.length; i++) {
-      // this will fail if e.g. any getJson() raises exception
+      // this will fail if e.g. any getZarrGroupAttrs() raises exception
       let index = wellIndices[i];
       if (index >= imgs.length) {
         return ["Invalid Well index: " + index];
       }
       loadingIndex = index;
-      let imgAttrs = await getJson(source + "/" + path + "/" + imgs[index].path + "/.zattrs");
+      let imgAttrs = await getZarrGroupAttrs(source + "/" + path + "/" + imgs[index].path);
       errs = errs.concat(await validate(imgAttrs));
+      console.log("PlateWell imgAttrs errs", errs);
     };
     return errs;
   }
diff --git a/src/JsonValidator/Plate/WellContainer/index.svelte b/src/JsonValidator/Plate/WellContainer/index.svelte
index a6f4148..780dd3d 100644
--- a/src/JsonValidator/Plate/WellContainer/index.svelte
+++ b/src/JsonValidator/Plate/WellContainer/index.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { getJson } from "../../../utils";
+  import { getZarrGroupAttrs } from "../../../utils";
   import PlateWell from "./PlateWell.svelte";
   export let source;
   export let path;
 
-  const promise = getJson(source + "/" + path + "/.zattrs");
+  const promise = getZarrGroupAttrs(source + "/" + path);
 </script>
 
 {#await promise}
diff --git a/src/JsonValidator/Well/ImageContainer.svelte b/src/JsonValidator/Well/ImageContainer.svelte
index dbfbfdd..6bb8ab8 100644
--- a/src/JsonValidator/Well/ImageContainer.svelte
+++ b/src/JsonValidator/Well/ImageContainer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getJson, validate } from "../../utils";
+  import { getZarrGroupAttrs, validate } from "../../utils";
 
   export let source;
   export let path;
@@ -7,8 +7,7 @@
   // const promise = getJson(source + path + "/.zattrs");
 
   async function loadAndValidate() {
-    let imgAttrs = await getJson(source + "/" + path + "/.zattrs");
-    console.log("imgAttrs", imgAttrs);
+    let imgAttrs = await getZarrGroupAttrs(source + "/" + path);
     let errs = await validate(imgAttrs);
     return errs;
   }
diff --git a/src/JsonValidator/Well/index.svelte b/src/JsonValidator/Well/index.svelte
index 44464af..ef5cdd4 100644
--- a/src/JsonValidator/Well/index.svelte
+++ b/src/JsonValidator/Well/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { CURRENT_VERSION, getVersion, getSchema } from "../../utils";
+  import { CURRENT_VERSION, getVersion, getSchema, getSchemaUrl } from "../../utils";
 
   import ImageContainer from "./ImageContainer.svelte";
 
@@ -13,7 +13,7 @@
   const version = getVersion(rootAttrs) || CURRENT_VERSION;
 
   // wait for schema to be cached, so we don't load them multiple times
-  let schemasPromise = getSchema(version, "image")
+  let schemasPromise = getSchema(getSchemaUrl("image", version))
 </script>
 
 <article>
diff --git a/src/utils.js b/src/utils.js
index 026e692..1d923ae 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -5,7 +5,6 @@ import Ajv from "ajv";
 export const CURRENT_VERSION = "0.5";
 export const FILE_NOT_FOUND = "File not found";
 
-const ajv = new Ajv({ strict: false }); // options can be passed, e.g. {allErrors: true}
 
 export function getSchemaUrl(schemaName, version) {
   if (version == "0.5" || version == "0.5-dev2") {
@@ -212,6 +211,7 @@ export function getSchemaUrlsForJson(rootAttrs) {
 
 export function validateData(schema, jsonData, extraSchemas) {
   // call ajv.addSchema(schema) for each schema
+  const ajv = new Ajv({ strict: false }); // options can be passed, e.g. {allErrors: true}
   let withSchema = extraSchemas.reduce((prev, curr) => prev.addSchema(curr), ajv);
   const validate = withSchema.compile(schema);
   const valid = validate(jsonData);

From 3a1ecfb288f20fc38dcda4319db4090860787b90 Mon Sep 17 00:00:00 2001
From: Josh Moore <josh@openmicroscopy.org>
Date: Mon, 15 Jul 2024 23:21:52 +0200
Subject: [PATCH 15/33] Temporarily hard-code a zarrita-version of vizarr

---
 public/ngff_viewers.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/ngff_viewers.json b/public/ngff_viewers.json
index 3ffbb86..0e1fc45 100644
--- a/public/ngff_viewers.json
+++ b/public/ngff_viewers.json
@@ -3,7 +3,7 @@
     {
       "name": "vizarr",
       "logo": "/vizarr_logo.png",
-      "href": "https://hms-dbmi.github.io/vizarr/?source="
+      "href": "https://deploy-preview-172--vizarr.netlify.app/?source="
     },
     {
       "name": "itk-vtk-viewer",

From 205ce33e89e087da4f03fa81434b12118f43fc39 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 7 Aug 2024 18:16:52 +0100
Subject: [PATCH 16/33] Revert "Temporarily hard-code a zarrita-version of
 vizarr"

vizarr PR is now merged
This reverts commit 3a1ecfb288f20fc38dcda4319db4090860787b90.
---
 public/ngff_viewers.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/ngff_viewers.json b/public/ngff_viewers.json
index 0e1fc45..3ffbb86 100644
--- a/public/ngff_viewers.json
+++ b/public/ngff_viewers.json
@@ -3,7 +3,7 @@
     {
       "name": "vizarr",
       "logo": "/vizarr_logo.png",
-      "href": "https://deploy-preview-172--vizarr.netlify.app/?source="
+      "href": "https://hms-dbmi.github.io/vizarr/?source="
     },
     {
       "name": "itk-vtk-viewer",

From 56b21f419caa8f6878116b2dde1d1d5260de1956 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 14 Aug 2024 16:38:24 +0100
Subject: [PATCH 17/33] Support display of shards

---
 .../MultiscaleArrays/Multiscale.svelte        |  2 +-
 .../ZarrArray/ChunkLoader.svelte              |  4 +-
 .../MultiscaleArrays/ZarrArray/Cube3D.svelte  | 79 ++++++++++++++++---
 .../MultiscaleArrays/ZarrArray/index.svelte   | 29 +++++--
 src/utils.js                                  | 19 ++++-
 5 files changed, 111 insertions(+), 22 deletions(-)

diff --git a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
index 11bd22a..ebe95ff 100644
--- a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
+++ b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getZarrArrayJson, getChunkShape } from "../../utils";
+  import { getZarrArrayJson, getChunkAndShardShapes } from "../../utils";
   import CheckMark from "../../CheckMark.svelte";
 
   export let source;
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
index e32deb5..2a90789 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte
@@ -1,6 +1,6 @@
 <script>
   // import { openArray, slice } from "zarr";
-  import { range, getChunkShape } from "../../../utils";
+  import { range, getChunkAndShardShapes } from "../../../utils";
   import { get, writable } from "svelte/store";
   import ChunkViewer from "./ChunkViewer.svelte";
   import * as zarr from "zarrita";
@@ -17,7 +17,7 @@
   let showChunks = false;
   let chunk;
 
-  const chunks = getChunkShape(zarray);
+  const [chunks, shards] = getChunkAndShardShapes(zarray);
   const chunkCounts = zarray.shape.map((sh, index) =>
     Math.ceil(sh / chunks[index])
   );
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte
index df7387c..443b6b9 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte
@@ -1,9 +1,7 @@
 <script>
-  import { getChunkShape } from "../../../utils";
+  import { getChunkAndShardShapes } from "../../../utils";
   export let zarray;
 
-  // reference to parent element
-  let parent;
   let scrollX = 50;
   function handleMousemove(event) {
     // scrollX goes from 20 -> 50. parent is 200px wide
@@ -15,20 +13,31 @@
   const sizeY = shape[shape.length - 2];
   const sizeZ = shape.length < 3 ? 1 : shape[shape.length - 3];
 
-  // Scale 3D so the longest dimension is 200px...
-  const scale = 200 / Math.max(sizeX, sizeY, sizeZ);
+  // Scale 3D so the longest dimension is 300px...
+  const scale = 300 / Math.max(sizeX, sizeY, sizeZ);
   const scaledX = sizeX * scale;
   const scaledY = sizeY * scale;
   const scaledZ = sizeZ * scale;
 
-  const minC = 5;
-  const chunks = getChunkShape(zarray);
-  const chunkX = Math.max(minC, chunks[chunks.length - 1] * scale);
-  const chunkY = Math.max(minC, chunks[chunks.length - 2] * scale);
-  const chunkZ = Math.max(minC, chunks[chunks.length - 3] * scale);
+  const [chunks, shards] = getChunkAndShardShapes(zarray);
+  let chunkX = chunks[chunks.length - 1] * scale;
+  let chunkY = chunks[chunks.length - 2] * scale;
+  let chunkZ = chunks[chunks.length - 3] * scale;
+
+  let shardX = 100;
+  let shardY = 100;
+  let shardZ = 100;
+  let shardColor = "transparent";
+  
+  if (shards) {
+    shardX = shards[shards.length - 1] * scale;
+    shardY = shards[shards.length - 2] * scale;
+    shardZ = shards[shards.length - 3] * scale;
+    shardColor = "#ff512f"
+  }
 </script>
 
-<div class="parent" bind:this={parent} on:mousemove={handleMousemove}>
+<div class="parent" on:mousemove={handleMousemove}>
   <div
     class="container"
     style="
@@ -38,6 +47,10 @@
     --chunkX: {chunkX}px;
     --chunkY: {chunkY}px;
     --chunkZ: {chunkZ}px;
+    --shardX: {shardX}px;
+    --shardY: {shardY}px;
+    --shardZ: {shardZ}px;
+    --shardColor: {shardColor};
     --scrollX: {scrollX}deg"
   >
     <div class="cube">
@@ -58,7 +71,7 @@
 
 <style>
   .parent {
-    width: 200px;
+    width: 400px;
     margin: auto;
   }
   .container {
@@ -85,6 +98,20 @@
     width: 100%;
     height: 100%;
     background-image: repeating-linear-gradient(
+        0deg,
+        var(--shardColor) 0px,
+        var(--shardColor) 2px,
+        transparent 2px,
+        transparent calc(var(--shardY))
+      ),
+      repeating-linear-gradient(
+        90deg,
+        var(--shardColor) 0px,
+        var(--shardColor) 2px,
+        transparent 2px,
+        transparent calc(var(--shardX))
+      ),
+      repeating-linear-gradient(
         0deg,
         rgba(70, 70, 70, 0.7) 0px,
         rgba(70, 70, 70, 0.7) 1px,
@@ -128,6 +155,20 @@
     height: var(--size-z);
     transform: rotateX(270deg) translateZ(calc(var(--size-y)* -1 / 2));
     background-image: repeating-linear-gradient(
+        0deg,
+        var(--shardColor) 0px,
+        var(--shardColor) 2px,
+        transparent 2px,
+        transparent calc(var(--shardZ))
+      ),
+      repeating-linear-gradient(
+        90deg,
+        var(--shardColor) 0px,
+        var(--shardColor) 2px,
+        transparent 2px,
+        transparent calc(var(--shardX))
+      ),
+      repeating-linear-gradient(
         0deg,
         rgba(70, 70, 70, 0.7) 0px,
         rgba(70, 70, 70, 0.7) 1px,
@@ -159,6 +200,20 @@
     left: calc((var(--size-x) - var(--size-z)) / 2);
     transform: rotateY(-90deg) translateZ(calc(var(--size-x) / 2));
     background-image: repeating-linear-gradient(
+        0deg,
+        var(--shardColor) 0px,
+        var(--shardColor) 2px,
+        transparent 2px,
+        transparent calc(var(--shardY))
+      ),
+      repeating-linear-gradient(
+        90deg,
+        var(--shardColor) 0px,
+        var(--shardColor) 2px,
+        transparent 2px,
+        transparent calc(var(--shardZ))
+      ),
+      repeating-linear-gradient(
         0deg,
         rgba(70, 70, 70, 0.7) 0px,
         rgba(70, 70, 70, 0.7) 1px,
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
index 9634667..7e9cb45 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getJson, formatBytes, getChunkShape, getArrayDtype } from "../../../utils";
+  import { getJson, formatBytes, getChunkAndShardShapes, getArrayDtype } from "../../../utils";
   import Cube3D from "./Cube3D.svelte";
   import ChunkLoader from "./ChunkLoader.svelte";
 
@@ -12,11 +12,23 @@
     return chunkCounts(zarray).reduce((prev, curr) => prev * curr, 1);
   }
 
+  function totalShardCount(zarray) {
+    return shardCounts(zarray).reduce((prev, curr) => prev * curr, 1);
+  }
+
   function chunkCounts(zarray) {
-    const ch = getChunkShape(zarray);
+    const [ch, shards] = getChunkAndShardShapes(zarray);
     return zarray.shape.map((sh, index) => Math.ceil(sh / ch[index]));
   }
 
+  function shardCounts(zarray) {
+    const [ch, shards] = getChunkAndShardShapes(zarray);
+    if (!shards) {
+      return [];
+    }
+    return zarray.shape.map((sh, index) => Math.ceil(sh / shards[index]));
+  }
+
   function getBytes(shape, zarray) {
     // handle v2 and v3 zarr
     let dtype = getArrayDtype(zarray)
@@ -33,24 +45,31 @@
   {#await promise}
     <div>loading array data ...</div>
   {:then zarray}
+    {@const shard = getChunkAndShardShapes(zarray)[1]}
     <table>
       <tr>
-        <th /><th>Array</th><th>Chunk</th>
+        <th />
+        <th>Array</th>
+        <th>Chunk</th>
+        {#if shard}<th style:border-color="#ff512f">Shard</th>{/if}
       </tr>
       <tr>
         <th>Bytes</th>
         <td>{getBytes(zarray.shape, zarray)}</td>
-        <td>{getBytes(getChunkShape(zarray), zarray)}</td>
+        <td>{getBytes(getChunkAndShardShapes(zarray)[0], zarray)}</td>
+        {#if shard}<td>{getBytes(shard, zarray)}</td>{/if}
       </tr>
       <tr>
         <th>Shape</th>
         <td>{JSON.stringify(zarray.shape)}</td>
-        <td>{JSON.stringify(getChunkShape(zarray))}</td>
+        <td>{JSON.stringify(getChunkAndShardShapes(zarray)[0])}</td>
+        {#if shard}<td>{JSON.stringify(shard)}</td>{/if}
       </tr>
       <tr>
         <th>Counts</th>
         <td>{chunkCounts(zarray)}</td>
         <td>{totalChunkCount(zarray)} Chunks</td>
+        {#if shard}<td>{totalShardCount(zarray)} Shards</td>{/if}
       </tr>
       <tr>
         <th>Type</th>
diff --git a/src/utils.js b/src/utils.js
index 1d923ae..dc0a613 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -266,8 +266,23 @@ export function formatBytes(bytes) {
   return (bytes / Math.pow(1000, i)).toFixed(2) + " " + sizes[i];
 }
 
-export function getChunkShape(zarray) {
-  return zarray.chunks || zarray.chunk_grid?.configuration?.chunk_shape;
+export function getChunkAndShardShapes(zarray) {
+  // Returns [chunkShape, shardShape]. shardShape may be undefined
+  // For zarr v2 we just have chunks:
+  if (zarray.chunks) {
+    return [zarray.chunks, undefined]
+  }
+  // For zarr v3 we check for sharding
+  // Based on https://github.com/zarr-developers/zarr-specs/blob/main/docs/v3/codecs/sharding-indexed/v1.0.rst#configuration-parameters
+  const chunk_shape = zarray.chunk_grid?.configuration?.chunk_shape;
+  let sharding_codecs = zarray.codecs?.filter(codec => codec.name == "sharding_indexed");
+  const sub_chunks = sharding_codecs?.[0].configuration?.chunk_shape;
+  // if we have sharding, a 'chunk' is the sub-chunk of a shard
+  if (sub_chunks) {
+    return [sub_chunks, chunk_shape]
+  } else {
+    return [chunk_shape, undefined];
+  }
 }
 
 export function getArrayDtype(zarray) {

From 7d1f32a51bc2212f6bf36a0a1d36b2bd34583e1b Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 16 Aug 2024 13:34:06 +0100
Subject: [PATCH 18/33] Handle labels for v0.5 data

---
 src/JsonValidator/Labels/LabelsInfoLink.svelte       | 7 +++++--
 src/JsonValidator/MultiscaleArrays/Multiscale.svelte | 2 +-
 src/JsonValidator/index.svelte                       | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/JsonValidator/Labels/LabelsInfoLink.svelte b/src/JsonValidator/Labels/LabelsInfoLink.svelte
index 5f882be..20537db 100644
--- a/src/JsonValidator/Labels/LabelsInfoLink.svelte
+++ b/src/JsonValidator/Labels/LabelsInfoLink.svelte
@@ -1,11 +1,14 @@
 <script>
     export let source;
     export let labelsAttrs;
+    export let zarrAttrsFileName;
     console.log("labelsAttrs:", labelsAttrs);
     const url = window.location.origin + window.location.pathname;
     let labelsPaths;
     if (labelsAttrs.labels) {
       labelsPaths = labelsAttrs.labels;
+    } else if (labelsAttrs?.attributes?.ome?.labels) {
+      labelsPaths = labelsAttrs.attributes.ome.labels;
     }
   </script>
   
@@ -19,11 +22,11 @@
       {/each}
       </ul>
     {:else}
-      <div style="color:red">labels/.zattrs has no 'labels' list</div>
+      <div style="color:red">labels/{zarrAttrsFileName} has no 'labels' list</div>
     {/if}
   
     <details>
-      <summary>labels/.zattrs</summary>
+      <summary>labels/{zarrAttrsFileName}</summary>
       <pre><code>{JSON.stringify(labelsAttrs, null, 2)}</code></pre>
     </details>
   </div>
diff --git a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
index ebe95ff..b13d6af 100644
--- a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
+++ b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getZarrArrayJson, getChunkAndShardShapes } from "../../utils";
+  import { getZarrArrayJson } from "../../utils";
   import CheckMark from "../../CheckMark.svelte";
 
   export let source;
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index fd74388..52e008a 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -77,7 +77,7 @@
   {#await labelsPromise}
     <p>checking for labels...</p>
   {:then labelsAttrs}
-    <LabelsInfoLink {labelsAttrs} source={source}></LabelsInfoLink>
+    <LabelsInfoLink {labelsAttrs} source={source} {zarrAttrsFileName}></LabelsInfoLink>
   {:catch error}
     <!-- <p>No table data</p> -->
   {/await}

From 290a066f53ce00045126ac5d4f8546f74f078f13 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 16 Aug 2024 13:50:01 +0100
Subject: [PATCH 19/33] Update zarrita to 0.4.0-next.15

---
 package-lock.json | 62 +++++++++++++++++++++++------------------------
 package.json      |  2 +-
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ca88052..43a26bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "ndarray": "^1.0.19",
         "svelte-icons-pack": "^1.4.6",
         "svelte-simple-modal": "^1.4.1",
-        "zarrita": "^0.4.0-next.14"
+        "zarrita": "^0.4.0-next.15"
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
@@ -61,9 +61,9 @@
       }
     },
     "node_modules/@zarrita/core": {
-      "version": "0.1.0-next.12",
-      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.12.tgz",
-      "integrity": "sha512-Y3TsUBqyQ86Z7Z/1uI9CllI8clm0fFGi0URlVn+YrSfuoZV377DBfYwksoycyb2KtPyo/tfRvwahYXW71RrWhQ==",
+      "version": "0.1.0-next.13",
+      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.13.tgz",
+      "integrity": "sha512-aoGq1mS3SAfDhmMVtCQAcgNeD4O2SKbCqFmJ/hyAeHoCpAwOWpc+6grpKqMtuVNQdFtRl+r4pt7UQPZgsxdIrQ==",
       "dependencies": {
         "@zarrita/storage": "^0.1.0-next.5",
         "@zarrita/typedarray": "^0.1.0-next.3",
@@ -71,11 +71,11 @@
       }
     },
     "node_modules/@zarrita/indexing": {
-      "version": "0.1.0-next.14",
-      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.14.tgz",
-      "integrity": "sha512-13Af1eQgdkp9Cw+tQf3jQ5YYirkR2YEIiPFRcwNuHV3u2ycM1okuY2lilIjQ1hgeJzrmIc3q/y72ioT4bgiwcQ==",
+      "version": "0.1.0-next.15",
+      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.15.tgz",
+      "integrity": "sha512-1WAHDZvWYq0bnMquwWbCsKnx1rsuvDNcgersD5e6tNMpYnqPRUZUyOFpYaxBhrvJjEf5AM9CI3uCPE8RGYg7ag==",
       "dependencies": {
-        "@zarrita/core": "^0.1.0-next.12",
+        "@zarrita/core": "^0.1.0-next.13",
         "@zarrita/storage": "^0.1.0-next.5",
         "@zarrita/typedarray": "^0.1.0-next.3"
       }
@@ -614,9 +614,9 @@
       }
     },
     "node_modules/numcodecs": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.3.1.tgz",
-      "integrity": "sha512-ywIyGpJ+c6Ojktq9a8jsWSy12ZSUcW/W+I3jlH0q0zv9aR/ZiMsN7IrWaNq9YV2FRdLu6r/M6lp35jMA6fug/A==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.3.2.tgz",
+      "integrity": "sha512-6YSPnmZgg0P87jnNhi3s+FVLOcIn3y+1CTIgUulA3IdASzK9fJM87sUFkpyA+be9GibGRaST2wCgkD+6U+fWKw==",
       "dependencies": {
         "fflate": "^0.8.0"
       }
@@ -844,12 +844,12 @@
       }
     },
     "node_modules/zarrita": {
-      "version": "0.4.0-next.14",
-      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.14.tgz",
-      "integrity": "sha512-B5a3Nw31EEaxjI0yh+CJuSdqDo3f0KnCrf8aZiDj4Nhrsi/Jau7Mtc7Yo6T3SmM6AInTmA/VNv/FKT5ZLfADTQ==",
+      "version": "0.4.0-next.15",
+      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.15.tgz",
+      "integrity": "sha512-s2ZElXObBqmsTZOkSMuamc1c05pc2Ar+OBlPndFPvzAcnx/G8cQoLe5Yo3mdqwTd7a28Lq/zrTvFc/Qbpj22VA==",
       "dependencies": {
-        "@zarrita/core": "^0.1.0-next.12",
-        "@zarrita/indexing": "^0.1.0-next.14",
+        "@zarrita/core": "^0.1.0-next.13",
+        "@zarrita/indexing": "^0.1.0-next.15",
         "@zarrita/storage": "^0.1.0-next.5"
       }
     }
@@ -880,9 +880,9 @@
       }
     },
     "@zarrita/core": {
-      "version": "0.1.0-next.12",
-      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.12.tgz",
-      "integrity": "sha512-Y3TsUBqyQ86Z7Z/1uI9CllI8clm0fFGi0URlVn+YrSfuoZV377DBfYwksoycyb2KtPyo/tfRvwahYXW71RrWhQ==",
+      "version": "0.1.0-next.13",
+      "resolved": "https://registry.npmjs.org/@zarrita/core/-/core-0.1.0-next.13.tgz",
+      "integrity": "sha512-aoGq1mS3SAfDhmMVtCQAcgNeD4O2SKbCqFmJ/hyAeHoCpAwOWpc+6grpKqMtuVNQdFtRl+r4pt7UQPZgsxdIrQ==",
       "requires": {
         "@zarrita/storage": "^0.1.0-next.5",
         "@zarrita/typedarray": "^0.1.0-next.3",
@@ -890,11 +890,11 @@
       }
     },
     "@zarrita/indexing": {
-      "version": "0.1.0-next.14",
-      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.14.tgz",
-      "integrity": "sha512-13Af1eQgdkp9Cw+tQf3jQ5YYirkR2YEIiPFRcwNuHV3u2ycM1okuY2lilIjQ1hgeJzrmIc3q/y72ioT4bgiwcQ==",
+      "version": "0.1.0-next.15",
+      "resolved": "https://registry.npmjs.org/@zarrita/indexing/-/indexing-0.1.0-next.15.tgz",
+      "integrity": "sha512-1WAHDZvWYq0bnMquwWbCsKnx1rsuvDNcgersD5e6tNMpYnqPRUZUyOFpYaxBhrvJjEf5AM9CI3uCPE8RGYg7ag==",
       "requires": {
-        "@zarrita/core": "^0.1.0-next.12",
+        "@zarrita/core": "^0.1.0-next.13",
         "@zarrita/storage": "^0.1.0-next.5",
         "@zarrita/typedarray": "^0.1.0-next.3"
       }
@@ -1206,9 +1206,9 @@
       }
     },
     "numcodecs": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.3.1.tgz",
-      "integrity": "sha512-ywIyGpJ+c6Ojktq9a8jsWSy12ZSUcW/W+I3jlH0q0zv9aR/ZiMsN7IrWaNq9YV2FRdLu6r/M6lp35jMA6fug/A==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/numcodecs/-/numcodecs-0.3.2.tgz",
+      "integrity": "sha512-6YSPnmZgg0P87jnNhi3s+FVLOcIn3y+1CTIgUulA3IdASzK9fJM87sUFkpyA+be9GibGRaST2wCgkD+6U+fWKw==",
       "requires": {
         "fflate": "^0.8.0"
       }
@@ -1353,12 +1353,12 @@
       }
     },
     "zarrita": {
-      "version": "0.4.0-next.14",
-      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.14.tgz",
-      "integrity": "sha512-B5a3Nw31EEaxjI0yh+CJuSdqDo3f0KnCrf8aZiDj4Nhrsi/Jau7Mtc7Yo6T3SmM6AInTmA/VNv/FKT5ZLfADTQ==",
+      "version": "0.4.0-next.15",
+      "resolved": "https://registry.npmjs.org/zarrita/-/zarrita-0.4.0-next.15.tgz",
+      "integrity": "sha512-s2ZElXObBqmsTZOkSMuamc1c05pc2Ar+OBlPndFPvzAcnx/G8cQoLe5Yo3mdqwTd7a28Lq/zrTvFc/Qbpj22VA==",
       "requires": {
-        "@zarrita/core": "^0.1.0-next.12",
-        "@zarrita/indexing": "^0.1.0-next.14",
+        "@zarrita/core": "^0.1.0-next.13",
+        "@zarrita/indexing": "^0.1.0-next.15",
         "@zarrita/storage": "^0.1.0-next.5"
       }
     }
diff --git a/package.json b/package.json
index 467e274..e88da54 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,6 @@
     "ndarray": "^1.0.19",
     "svelte-icons-pack": "^1.4.6",
     "svelte-simple-modal": "^1.4.1",
-    "zarrita": "^0.4.0-next.14"
+    "zarrita": "^0.4.0-next.15"
   }
 }

From 723a104791ceca5af19a9a3bb22645d89feb257c Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 21 Aug 2024 13:03:22 +0100
Subject: [PATCH 20/33] Load and display Ro-create json

---
 src/JsonBrowser/DetailsPrePanel.svelte        | 30 +++++++++++++++++++
 .../MultiscaleArrays/ZarrArray/index.svelte   | 29 +++---------------
 src/JsonValidator/RoCrate/index.svelte        | 18 +++++++++++
 src/JsonValidator/index.svelte                |  3 ++
 4 files changed, 55 insertions(+), 25 deletions(-)
 create mode 100644 src/JsonBrowser/DetailsPrePanel.svelte
 create mode 100644 src/JsonValidator/RoCrate/index.svelte

diff --git a/src/JsonBrowser/DetailsPrePanel.svelte b/src/JsonBrowser/DetailsPrePanel.svelte
new file mode 100644
index 0000000..3eb68ed
--- /dev/null
+++ b/src/JsonBrowser/DetailsPrePanel.svelte
@@ -0,0 +1,30 @@
+
+
+<script>
+    export let jsonData;
+    export let summary;
+</script>
+
+<details>
+    <summary>{summary}</summary>
+    <pre><code>{JSON.stringify(jsonData, null, 2)}</code></pre>
+  </details>
+
+
+<style>
+
+details {
+    font-size: 1.1em;
+    text-align: left;
+  }
+  pre {
+    margin-top: 10px;
+    color: #faebd7;
+    background-color: #2c3e50;
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 10px;
+    overflow: auto;
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
index 7e9cb45..379ac15 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
@@ -2,6 +2,7 @@
   import { getJson, formatBytes, getChunkAndShardShapes, getArrayDtype } from "../../../utils";
   import Cube3D from "./Cube3D.svelte";
   import ChunkLoader from "./ChunkLoader.svelte";
+  import DetailsPrePanel from "../../../JsonBrowser/DetailsPrePanel.svelte";
 
   export let source;
   export let path;
@@ -82,10 +83,9 @@
 
     <Cube3D {zarray} />
 
-    <details>
-      <summary>{path}</summary>
-      <pre><code>{JSON.stringify(zarray, null, 2)}</code></pre>
-    </details>
+    <div style="margin: 0 15px">
+      <DetailsPrePanel jsonData={zarray} summary={path} />
+    </div>
   {:catch error}
     <p style="color: red">{error.message}</p>
   {/await}
@@ -101,13 +101,6 @@
     text-align: center;
   }
 
-  pre {
-    color: #faebd7;
-    background-color: #2c3e50;
-    padding: 10px;
-    font-size: 14px;
-  }
-
   table {
     background-color: white;
     font-size: 14px;
@@ -133,18 +126,4 @@
   a:visited {
     color: #ff512f;
   }
-
-  details {
-    font-size: 1.1em;
-    margin: 0 15px;
-    text-align: left;
-  }
-  pre {
-    margin-top: 10px;
-    color: #faebd7;
-    background-color: #2c3e50;
-    padding: 10px;
-    font-size: 14px;
-    border-radius: 10px;
-  }
 </style>
diff --git a/src/JsonValidator/RoCrate/index.svelte b/src/JsonValidator/RoCrate/index.svelte
new file mode 100644
index 0000000..9a19696
--- /dev/null
+++ b/src/JsonValidator/RoCrate/index.svelte
@@ -0,0 +1,18 @@
+<script>
+  import DetailsPrePanel from "../../JsonBrowser/DetailsPrePanel.svelte";
+  import { getJson } from "../../utils.js";
+
+  export let source;
+
+  const promise = getJson(source + "/ro-crate-metadata.json");
+</script>
+
+{#await promise}
+  <p>Loading ro-crate-metadata.json...</p>
+{:then jsonData}
+  {#if jsonData}
+    <DetailsPrePanel {jsonData} summary="Ro-Crate Metadata" />
+  {/if}
+{:catch error}
+  <p>No ro-crate-metadata.json found</p>
+{/await}
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index 52e008a..75e9778 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -1,6 +1,7 @@
 <script>
   import MultiscaleArrays from "./MultiscaleArrays/index.svelte";
   import Plate from "./Plate/index.svelte";
+  import RoCrate from "./RoCrate/index.svelte";
   import Well from "./Well/index.svelte"
   import JsonBrowser from "../JsonBrowser/index.svelte";
   import CheckMark from "../CheckMark.svelte";
@@ -74,6 +75,8 @@
     <JsonBrowser name="" version={msVersion || CURRENT_VERSION} contents={rootAttrs} expanded />
   </div>
 
+  <RoCrate version={msVersion} {source}></RoCrate>
+
   {#await labelsPromise}
     <p>checking for labels...</p>
   {:then labelsAttrs}

From 5159b0cf27842e0ba77ff24e636aa00b71bc8cd2 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 21 Aug 2024 13:54:55 +0100
Subject: [PATCH 21/33] Check Ro-Crate name, description, license

---
 src/JsonBrowser/DetailsPrePanel.svelte        |  1 +
 .../MultiscaleArrays/ZarrArray/index.svelte   |  4 +-
 .../RoCrate/RoCrateValidator.svelte           | 48 +++++++++++++++++++
 src/JsonValidator/RoCrate/index.svelte        | 26 +++++++++-
 src/JsonValidator/index.svelte                |  5 +-
 5 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 src/JsonValidator/RoCrate/RoCrateValidator.svelte

diff --git a/src/JsonBrowser/DetailsPrePanel.svelte b/src/JsonBrowser/DetailsPrePanel.svelte
index 3eb68ed..c50071f 100644
--- a/src/JsonBrowser/DetailsPrePanel.svelte
+++ b/src/JsonBrowser/DetailsPrePanel.svelte
@@ -16,6 +16,7 @@
 details {
     font-size: 1.1em;
     text-align: left;
+    margin: 0 15px;
   }
   pre {
     margin-top: 10px;
diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
index 379ac15..e32add8 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
@@ -83,9 +83,7 @@
 
     <Cube3D {zarray} />
 
-    <div style="margin: 0 15px">
-      <DetailsPrePanel jsonData={zarray} summary={path} />
-    </div>
+    <DetailsPrePanel jsonData={zarray} summary={path} />
   {:catch error}
     <p style="color: red">{error.message}</p>
   {/await}
diff --git a/src/JsonValidator/RoCrate/RoCrateValidator.svelte b/src/JsonValidator/RoCrate/RoCrateValidator.svelte
new file mode 100644
index 0000000..7c2a60e
--- /dev/null
+++ b/src/JsonValidator/RoCrate/RoCrateValidator.svelte
@@ -0,0 +1,48 @@
+
+<script>
+    export let jsonData;
+
+    let license = jsonData["@graph"].find(item => item["license"])?.license;
+    let name = jsonData["@graph"].find(item => item["name"])?.name;
+    let description = jsonData["@graph"].find(item => item["description"])?.description;
+
+    const report = [
+        {name: "Name", value: name},
+        {name: "Description", value: description},
+        {name: "License", value: license},
+    ];
+</script>
+
+
+<ul>
+    {#each report as {name, value}}
+        <li>
+            <strong>{name}:</strong>
+            {#if value}
+                <span style="color: green;">✓</span>
+                {#if value.startsWith("http")}
+                    <a href={value} target="_blank">{value}</a>
+                {:else}
+                    {value}
+                {/if}
+            {:else}
+                <span style="color: red;">x</span> Not found
+            {/if}
+        </li>
+    {/each}
+</ul>
+
+
+<style>
+    ul {
+        list-style-type: none;
+        padding: 0;
+        text-align: left;
+        margin: 15px;
+    }
+
+    li {
+        margin-bottom: 10px;
+    }
+
+</style>
diff --git a/src/JsonValidator/RoCrate/index.svelte b/src/JsonValidator/RoCrate/index.svelte
index 9a19696..3afeeac 100644
--- a/src/JsonValidator/RoCrate/index.svelte
+++ b/src/JsonValidator/RoCrate/index.svelte
@@ -1,18 +1,40 @@
 <script>
   import DetailsPrePanel from "../../JsonBrowser/DetailsPrePanel.svelte";
   import { getJson } from "../../utils.js";
+  import RoCrateValidator from "./RoCrateValidator.svelte";
 
   export let source;
-
   const promise = getJson(source + "/ro-crate-metadata.json");
 </script>
 
+
+<div class="rocrate">
+<h1>Ro-crate metadata</h1>
+
+
+
 {#await promise}
   <p>Loading ro-crate-metadata.json...</p>
 {:then jsonData}
   {#if jsonData}
-    <DetailsPrePanel {jsonData} summary="Ro-Crate Metadata" />
+    <RoCrateValidator {jsonData} />
+    <DetailsPrePanel {jsonData} summary="ro-crate-metadata.json" />
   {/if}
 {:catch error}
   <p>No ro-crate-metadata.json found</p>
 {/await}
+
+</div>
+
+
+<style>
+.rocrate {
+    /* same as Array panels */
+    border-radius: 10px;
+    padding: 15px 0;
+    margin: 15px 0;
+    box-shadow: 5px 5px 10px #c3c0c0;
+    background: linear-gradient(to right, #ccc, #aaa);
+    text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index 75e9778..f8f50dd 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -75,7 +75,10 @@
     <JsonBrowser name="" version={msVersion || CURRENT_VERSION} contents={rootAttrs} expanded />
   </div>
 
-  <RoCrate version={msVersion} {source}></RoCrate>
+  <!-- for v0.5+ we check for ro-crate-metadata.json -->
+  {#if !["0.1", "0.2", "0.3", "0.4"].includes(msVersion)}
+    <RoCrate {source}></RoCrate>
+  {/if}
 
   {#await labelsPromise}
     <p>checking for labels...</p>

From b81651459107ee69950db72c8d585f87613f8c1c Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 22 Aug 2024 08:42:29 +0100
Subject: [PATCH 22/33] Handle data with no sharding codecs

---
 src/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils.js b/src/utils.js
index dc0a613..5692f66 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -276,7 +276,7 @@ export function getChunkAndShardShapes(zarray) {
   // Based on https://github.com/zarr-developers/zarr-specs/blob/main/docs/v3/codecs/sharding-indexed/v1.0.rst#configuration-parameters
   const chunk_shape = zarray.chunk_grid?.configuration?.chunk_shape;
   let sharding_codecs = zarray.codecs?.filter(codec => codec.name == "sharding_indexed");
-  const sub_chunks = sharding_codecs?.[0].configuration?.chunk_shape;
+  const sub_chunks = sharding_codecs?.[0]?.configuration?.chunk_shape;
   // if we have sharding, a 'chunk' is the sub-chunk of a shard
   if (sub_chunks) {
     return [sub_chunks, chunk_shape]

From 0256c077599c212818451b5898d3ced1bfa4de44 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 22 Aug 2024 12:24:30 +0100
Subject: [PATCH 23/33] Try to parse and lookup Organism and Imaging method
 from Ro-crate

---
 .../RoCrate/RoCrateValidator.svelte           | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/JsonValidator/RoCrate/RoCrateValidator.svelte b/src/JsonValidator/RoCrate/RoCrateValidator.svelte
index 7c2a60e..f35ba4e 100644
--- a/src/JsonValidator/RoCrate/RoCrateValidator.svelte
+++ b/src/JsonValidator/RoCrate/RoCrateValidator.svelte
@@ -1,11 +1,44 @@
 
 <script>
+  import { getJson } from "../../utils";
+
     export let jsonData;
 
+    // Try to find various fields in the Ro-Crate metadata
     let license = jsonData["@graph"].find(item => item["license"])?.license;
     let name = jsonData["@graph"].find(item => item["name"])?.name;
     let description = jsonData["@graph"].find(item => item["description"])?.description;
 
+    let biosample = jsonData["@graph"].find(item => item["@type"] === "biosample");
+    let organismId = biosample?.organism_classification?.["@id"];
+
+    let image_acquisition = jsonData["@graph"].find(item => item["@type"] === "image_acquisition");
+    let fbbiId = image_acquisition?.fbbi_id?.["@id"];
+
+    let organismName = "";
+    let imagingMethod = "";
+
+    async function lookupOrganism(taxonId) {
+        // taxonId e.g. 9606
+        const orgJson = await getJson(`https://rest.ensembl.org/taxonomy/id/${taxonId}?content-type=application/json`);
+        organismName = orgJson.name;
+    }
+
+    async function lookupImagingMethod(fbbiId) {
+        // fbbiId e.g. FBbi_00000246
+        // http://purl.obolibrary.org/obo/FBbi_00000246
+        // https://www.ebi.ac.uk/ols4/api/ontologies/fbbi/terms/http%253A%252F%252Fpurl.obolibrary.org%252Fobo%252FFBbi_00000246
+        const methodJson = await getJson(`https://www.ebi.ac.uk/ols4/api/ontologies/fbbi/terms/http%253A%252F%252Fpurl.obolibrary.org%252Fobo%252FFBbi_00000246`);
+        imagingMethod = methodJson.label;
+    }
+
+    if (organismId) {
+        lookupOrganism(organismId.replace("NCBI:txid", ""));
+    }
+    if (fbbiId) {
+        lookupImagingMethod(fbbiId);
+    }
+
     const report = [
         {name: "Name", value: name},
         {name: "Description", value: description},
@@ -30,6 +63,23 @@
             {/if}
         </li>
     {/each}
+        <li>
+            <strong>Organism:</strong>
+            {#if organismId}
+                <span style="color: green;">✓</span> {organismId}  {organismName}
+            {:else}
+                <span style="color: red;">x</span> Not found
+            {/if}
+        </li>
+
+        <li>
+            <strong>Imaging method:</strong>
+            {#if fbbiId}
+                <span style="color: green;">✓</span> {fbbiId} {imagingMethod}
+            {:else}
+                <span style="color: red;">x</span> Not found
+            {/if}
+        </li>
 </ul>
 
 

From e596e0069c9727e5c0238f2f7e7fa63de0557d5b Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Thu, 22 Aug 2024 15:23:40 +0100
Subject: [PATCH 24/33] Use different warning levels for missing metadata

---
 .../RoCrate/RoCrateValidator.svelte           | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/JsonValidator/RoCrate/RoCrateValidator.svelte b/src/JsonValidator/RoCrate/RoCrateValidator.svelte
index f35ba4e..edb74f2 100644
--- a/src/JsonValidator/RoCrate/RoCrateValidator.svelte
+++ b/src/JsonValidator/RoCrate/RoCrateValidator.svelte
@@ -40,44 +40,52 @@
     }
 
     const report = [
-        {name: "Name", value: name},
-        {name: "Description", value: description},
-        {name: "License", value: license},
+        {name: "License", value: license, level: "SHOULD"},
+        {name: "Name", value: name, level: "SUGGESTED"},
+        {name: "Description", value: description, level: "SUGGESTED"},
     ];
+
+    const warningSymbols = {
+        SHOULD: "<span title='Missing SHOULD metadata'>&#x274C</span>",   // big red X
+        SUGGESTED: "<span title='Missing SUGGESTED metadata' style='font-size: 20px;'>&times;</span>",   // black X
+        RECOMMENDED: "",
+        OK: "<span style='color: green;'>✓</span>",
+    }
+
 </script>
 
 
 <ul>
-    {#each report as {name, value}}
+    {#each report as {name, value, level}}
         <li>
             <strong>{name}:</strong>
             {#if value}
-                <span style="color: green;">✓</span>
+                {@html warningSymbols.OK }
                 {#if value.startsWith("http")}
                     <a href={value} target="_blank">{value}</a>
                 {:else}
                     {value}
                 {/if}
             {:else}
-                <span style="color: red;">x</span> Not found
+                {@html warningSymbols[level] } Not found
             {/if}
         </li>
     {/each}
         <li>
             <strong>Organism:</strong>
             {#if organismId}
-                <span style="color: green;">✓</span> {organismId}  {organismName}
+                {@html warningSymbols.OK } {organismId}  {organismName}
             {:else}
-                <span style="color: red;">x</span> Not found
+            {@html warningSymbols.SUGGESTED } Not found
             {/if}
         </li>
 
         <li>
             <strong>Imaging method:</strong>
             {#if fbbiId}
-                <span style="color: green;">✓</span> {fbbiId} {imagingMethod}
+                {@html warningSymbols.OK } {fbbiId} {imagingMethod}
             {:else}
-                <span style="color: red;">x</span> Not found
+                {@html warningSymbols.SUGGESTED } Not found
             {/if}
         </li>
 </ul>

From e09b012c2ba7ecf82e41a4cecc807dfc5ae4efd2 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Mon, 2 Sep 2024 16:54:43 +0100
Subject: [PATCH 25/33] Improve version checking. Handle missing version 0.4

---
 .../RoCrate/RoCrateValidator.svelte           |  5 +++
 src/JsonValidator/index.svelte                | 32 ++++++++++++++---
 src/utils.js                                  | 36 +++++++++++++++----
 3 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/src/JsonValidator/RoCrate/RoCrateValidator.svelte b/src/JsonValidator/RoCrate/RoCrateValidator.svelte
index edb74f2..a8035fd 100644
--- a/src/JsonValidator/RoCrate/RoCrateValidator.svelte
+++ b/src/JsonValidator/RoCrate/RoCrateValidator.svelte
@@ -103,4 +103,9 @@
         margin-bottom: 10px;
     }
 
+    .suggested {
+        color: orange;
+        font-size: 20px;
+    }
+
 </style>
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index f8f50dd..2a18444 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -21,10 +21,32 @@
   export let source;
   export let rootAttrs;
 
+  let versionMessage= "";
+  let version = null;
+  // Initial validation of version
+  // Top level 'version' is required "MUST" for v0.5+
+  if (rootAttrs?.attributes?.ome) {
+    if (!rootAttrs.attributes.ome.version) {
+      versionMessage = "Missing 'version' field under attributes.ome.";
+    } else {
+      version = rootAttrs.attributes.ome.version;
+      versionMessage = `Using version ${version}.`;
+    }
+  } else {
+    // version for older versions can be nested under "multiscales" or "plate" or "well"
+    version = getVersion(rootAttrs);
+    if (!version) {
+      versionMessage = "No version found. Using version 0.4.";
+      version = "0.4";
+    } else {
+      versionMessage = `Using version ${version}.`;
+    }
+  }
+
+
   // v0.5+ unwrap the attrs under "ome"
   const omeAttrs = rootAttrs?.attributes?.ome || rootAttrs;
 
-  const msVersion = getVersion(rootAttrs);
 
   const dtype = getDataType(omeAttrs);
   const schemaUrls = getSchemaUrlsForJson(omeAttrs);
@@ -35,7 +57,7 @@
   const zarrName = dirs[dirs.length - 1];
 
   // check for labels/.zattrs
-  const zarrAttrsFileName = getZarrGroupAttrsFileName(msVersion);
+  const zarrAttrsFileName = getZarrGroupAttrsFileName(version);
   const labelsPromise = getJson(source + '/labels/' + zarrAttrsFileName);
 </script>
 
@@ -44,7 +66,7 @@
     Validating: <a href={source}>/{zarrName}/{zarrAttrsFileName}</a>
   </p>
 
-  {#if !msVersion}No version found. Using {CURRENT_VERSION}<br />{/if}
+  {versionMessage}
 
   Using schema{schemaUrls.length > 1 ? "s" : ""}: 
   {#each schemaUrls as url, i}
@@ -72,11 +94,11 @@
   <OpenWith {source} {dtype} />
 
   <div class="json">
-    <JsonBrowser name="" version={msVersion || CURRENT_VERSION} contents={rootAttrs} expanded />
+    <JsonBrowser name="" version={version || CURRENT_VERSION} contents={rootAttrs} expanded />
   </div>
 
   <!-- for v0.5+ we check for ro-crate-metadata.json -->
-  {#if !["0.1", "0.2", "0.3", "0.4"].includes(msVersion)}
+  {#if !["0.1", "0.2", "0.3", "0.4"].includes(version)}
     <RoCrate {source}></RoCrate>
   {/if}
 
diff --git a/src/utils.js b/src/utils.js
index 5692f66..5ae2f61 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -140,13 +140,26 @@ export async function getSchema(schemaUrl) {
 }
 
 export function getVersion(ngffData) {
-  console.log("getVersion...", ngffData, ngffData.ome?.version)
+  console.log("getVersion...", ngffData, 'attributes?', ngffData.attributes)
+  // if we have attributes.ome then this is version 0.5+
+  if (ngffData.attributes?.ome) {
+    if (ngffData.attributes.ome.version) {
+      return ngffData.attributes.ome.version;
+    } else {
+      throw Error("No version found in attributes.ome");
+    }
+  }
+
+  // Used if we have our 'attributes' at the root
   if (ngffData.ome?.version) {
+    console.trace("WARNING - using ngffData.ome?.version FIXME?")
     return ngffData.ome.version;
   }
   if (ngffData.version) {
+    console.trace("WARNING - using ngffData.version FIXME?")
     return ngffData.version;
   }
+  // Handle version 0.4 and earlier
   let version = ngffData.multiscales
     ? ngffData.multiscales[0].version
     : ngffData.plate
@@ -155,7 +168,10 @@ export function getVersion(ngffData) {
     ? ngffData.well.version
     : undefined;
   console.log("version", version);
-  return version;
+  // for 0.4 and earlier, version wasn't MUST and we defaulted
+  // to using v0.4 for validation. To preserve that behaviour
+  // return "0.4" if no version found.
+  return version || "0.4";
 }
 
 export function toTitleCase(text) {
@@ -200,11 +216,6 @@ export function getSchemaUrlsForJson(rootAttrs) {
 
   const msVersion = getVersion(omeAttrs);
   const version = msVersion || CURRENT_VERSION;
-  // for v0.5 onwards, rootAttrs is nested under attributes.ome...
-  if (omeAttrs.ome) {
-    console.trace("WARNING - FIXME!")
-    omeAttrs = omeAttrs.ome;
-  }
   const schemaNames = getSchemaNames(omeAttrs);
   return schemaNames.map(name => getSchemaUrl(name, version));
 }
@@ -227,7 +238,18 @@ export async function validate(jsonData) {
   // get version, lookup schema, do validation...
   // v0.5+ unwrap the attrs under "attributes.ome"
   let omeAttrs = jsonData?.attributes?.ome || jsonData;
+
   let version = getVersion(omeAttrs);
+  // v0.5+ (with attributes.ome) MUST have top-level version
+  if (jsonData?.attributes?.ome) {
+    if (!jsonData.attributes.ome.version) {
+      return ["No version found under attributes.ome"];
+    }
+  } else if (!version) {
+    // default to last version pre 0.5 rules.
+    version = "0.4";
+  }
+  
   console.log("validate VERSION", version, jsonData);
 
   const schemaUrls = getSchemaUrlsForJson(jsonData);

From d2dfb1f52f10fe17b1341f68cde51dcdba135f28 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Tue, 3 Sep 2024 11:07:39 +0100
Subject: [PATCH 26/33] Fix bioformats2raw page with v0.5 data

---
 src/App.svelte                        | 9 ++++++---
 src/Bioformats2rawLayout/index.svelte | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index faafd2a..2be7a3d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -15,8 +15,6 @@
     source = source.slice(0, -1);
   }
 
-  let location = window.location.href;
-
   let promise;
 
   if (source) {
@@ -24,6 +22,11 @@
     console.log("Loading JSON... " + source);
     promise = getZarrGroupAttrs(source);
   }
+
+  function isBioFormats2Raw(data) {
+    let omeAttrs = data?.attributes?.ome || data;
+    return omeAttrs["bioformats2raw.layout"] === 3 && !omeAttrs.plate;
+  }
 </script>
 
 <Modal>
@@ -38,7 +41,7 @@
         {:then data}
           <Title {source} zattrs={data} />
           <div>
-            {#if data["bioformats2raw.layout"] === 3 && !data.plate}
+            {#if isBioFormats2Raw(data)}
               <Bioformats2rawLayout rootAttrs={data} {source} />
             {:else}
               <JsonValidator rootAttrs={data} {source} />
diff --git a/src/Bioformats2rawLayout/index.svelte b/src/Bioformats2rawLayout/index.svelte
index c31967c..2be48b5 100644
--- a/src/Bioformats2rawLayout/index.svelte
+++ b/src/Bioformats2rawLayout/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getXmlDom, getJson, validate } from "../utils";
+  import { getXmlDom, getZarrGroupAttrs, validate } from "../utils";
   import JsonBrowser from "../JsonBrowser/index.svelte";
   import ImageContainer from "../JsonValidator/Well/ImageContainer.svelte";
 
@@ -40,7 +40,7 @@
   // wait for schema to be cached, so we don't load them multiple times
   // let schemasPromise = getSchema("0.2", "image");
   async function preloadSchema(imagePath) {
-    let imgAttrs = await getJson(imagePath + "/.zattrs");
+    let imgAttrs = getZarrGroupAttrs(imagePath);
     console.log("preloadSchema", imgAttrs);
     let errs = await validate(imgAttrs);
     return errs;

From 0efe2a22b087c36d5e75188c86acf93b6a547f6a Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Tue, 3 Sep 2024 11:30:45 +0100
Subject: [PATCH 27/33] Fix validation of Wells in Plate view

---
 src/JsonValidator/Plate/WellContainer/PlateWell.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/JsonValidator/Plate/WellContainer/PlateWell.svelte b/src/JsonValidator/Plate/WellContainer/PlateWell.svelte
index e0a7d94..4822f5e 100644
--- a/src/JsonValidator/Plate/WellContainer/PlateWell.svelte
+++ b/src/JsonValidator/Plate/WellContainer/PlateWell.svelte
@@ -5,6 +5,10 @@
   export let source;
   export let path;
 
+  let rootAttrs = wellAttrs;
+  // unwrap attributes.ome if present
+  wellAttrs = wellAttrs.attributes?.ome || wellAttrs;
+
   const wellToValidate = getSearchParam("well");
   let wellIndex = parseInt(wellToValidate);
   let wellIndices = [0];
@@ -22,7 +26,7 @@
     let errs = [];
     console.log("loadAndValidate wellAttrs", wellAttrs);
 
-    const imgs = wellAttrs.attributes?.ome?.well.images || wellAttrs.well.images;
+    const imgs = wellAttrs.well.images;
     for (let i=0; i < wellIndices.length; i++) {
       // this will fail if e.g. any getZarrGroupAttrs() raises exception
       let index = wellIndices[i];
@@ -37,7 +41,7 @@
     return errs;
   }
 
-  let validatePromise = validate(wellAttrs);
+  let validatePromise = validate(rootAttrs);
 
   let imagePromise = loadAndValidate();
 

From 1d55e986d8b91ba522bca5b3d58dc3bfeab0ac11 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Tue, 24 Sep 2024 15:28:55 +0100
Subject: [PATCH 28/33] Add ro-crate-metadata support to bioformats2raw
 component

---
 src/Bioformats2rawLayout/index.svelte | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/Bioformats2rawLayout/index.svelte b/src/Bioformats2rawLayout/index.svelte
index 2be48b5..5575722 100644
--- a/src/Bioformats2rawLayout/index.svelte
+++ b/src/Bioformats2rawLayout/index.svelte
@@ -1,13 +1,19 @@
 <script>
-  import { getXmlDom, getZarrGroupAttrs, validate } from "../utils";
+  import { getXmlDom, getZarrGroupAttrs, validate, getVersion, getZarrGroupAttrsFileName } from "../utils";
   import JsonBrowser from "../JsonBrowser/index.svelte";
   import ImageContainer from "../JsonValidator/Well/ImageContainer.svelte";
+  import RoCrate from "../JsonValidator/RoCrate/index.svelte";
 
   export let source;
   export let rootAttrs;
 
   const metadataName = "OME/METADATA.ome.xml";
 
+  const version = getVersion(rootAttrs);
+  console.log("BF2RAW version", version, rootAttrs);
+  const zarrAttrsFileName = getZarrGroupAttrsFileName(version);
+  console.log("zarrAttrsFileName", zarrAttrsFileName);
+
   // source/OME/METADATA.ome.xml
   const metadataUrl = `${source}/${metadataName}`;
 
@@ -53,7 +59,7 @@
 </script>
 
 <article>
-  Reading: <a href={source}>/{zarrName}/.zattrs</a>
+  Reading: <a href={source}>/{zarrName}/{zarrAttrsFileName}</a>
 
   <div class="json">
     <JsonBrowser name="" version="" contents={rootAttrs} expanded />
@@ -99,6 +105,11 @@
   {:catch error}
     <p style="color: red">{error.message}</p>
   {/await}
+
+    <!-- for v0.5+ we check for ro-crate-metadata.json -->
+    {#if !["0.1", "0.2", "0.3", "0.4"].includes(version)}
+      <RoCrate {source}></RoCrate>
+  {/if}
 </article>
 
 <style>

From c0374f59dba1f9c776b2c6847abd55b2d3358e16 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 27 Sep 2024 11:14:54 +0100
Subject: [PATCH 29/33] Load _version schema. Validate using 'attributes' as
 JSON root

---
 src/utils.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 5ae2f61..99c6904 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -140,7 +140,7 @@ export async function getSchema(schemaUrl) {
 }
 
 export function getVersion(ngffData) {
-  console.log("getVersion...", ngffData, 'attributes?', ngffData.attributes)
+  // console.log("getVersion...", ngffData, 'attributes?', ngffData.attributes)
   // if we have attributes.ome then this is version 0.5+
   if (ngffData.attributes?.ome) {
     if (ngffData.attributes.ome.version) {
@@ -267,16 +267,22 @@ export async function validate(jsonData) {
   // TODO: need to know whether to load other schemas...
   // For now, we can use version check... 
   if (version === "0.5") {
-    // const ctSchema = await getSchema(version, "coordinate_transformation");
-    // const csSchema = await getSchema(version, "coordinate_systems");
-    const versionSchema = await getSchema(getSchemaUrl("version", version));
+    const versionSchema = await getSchema(getSchemaUrl("_version", version));
+    // const schemaSchema = await getSchema(getSchemaUrl("_schema_url", version));
     refSchemas = [versionSchema];
   }
   let errors = [];
-  for (let s=0; s<schemaUrls.length; s++) {
-    let schema = await getSchema(schemaUrls[s]);
-    let errs = validateData(schema, jsonData, refSchemas);
-    errors = errors.concat(errs);
+  if (jsonData.attributes) {
+    for (let s=0; s<schemaUrls.length; s++) {
+      let schema = await getSchema(schemaUrls[s]);
+      let errs = validateData(schema, jsonData.attributes, refSchemas);
+      errors = errors.concat(errs);
+    }
+  } else {
+    errors.push("No 'attributes' key found in JSON data");
+  }
+  if (errors.length > 0) {
+    console.log("Validation errors", errors, jsonData);
   }
   return errors;
 }

From 4341aaae6caa490f4a70497c446e190325664155 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 27 Sep 2024 14:14:40 +0100
Subject: [PATCH 30/33] remove console.trace()

---
 src/utils.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 99c6904..0889e13 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -140,7 +140,6 @@ export async function getSchema(schemaUrl) {
 }
 
 export function getVersion(ngffData) {
-  // console.log("getVersion...", ngffData, 'attributes?', ngffData.attributes)
   // if we have attributes.ome then this is version 0.5+
   if (ngffData.attributes?.ome) {
     if (ngffData.attributes.ome.version) {
@@ -152,11 +151,9 @@ export function getVersion(ngffData) {
 
   // Used if we have our 'attributes' at the root
   if (ngffData.ome?.version) {
-    console.trace("WARNING - using ngffData.ome?.version FIXME?")
     return ngffData.ome.version;
   }
   if (ngffData.version) {
-    console.trace("WARNING - using ngffData.version FIXME?")
     return ngffData.version;
   }
   // Handle version 0.4 and earlier

From eb21241f0d4c7dac79ea4fdc5e07ea43674197b6 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 27 Sep 2024 17:22:48 +0100
Subject: [PATCH 31/33] Only validate jsonData.attributes for v0.5 data

---
 src/utils.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 0889e13..39da1c2 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -267,17 +267,17 @@ export async function validate(jsonData) {
     const versionSchema = await getSchema(getSchemaUrl("_version", version));
     // const schemaSchema = await getSchema(getSchemaUrl("_schema_url", version));
     refSchemas = [versionSchema];
+    // For version 0.5+, we validate the "attributes" content.
+    // If no "attributes" exist, then it will be assumed this is v0.4 data (see above)
+    jsonData = jsonData.attributes;
   }
   let errors = [];
-  if (jsonData.attributes) {
-    for (let s=0; s<schemaUrls.length; s++) {
-      let schema = await getSchema(schemaUrls[s]);
-      let errs = validateData(schema, jsonData.attributes, refSchemas);
-      errors = errors.concat(errs);
-    }
-  } else {
-    errors.push("No 'attributes' key found in JSON data");
+  for (let s=0; s<schemaUrls.length; s++) {
+    let schema = await getSchema(schemaUrls[s]);
+    let errs = validateData(schema, jsonData, refSchemas);
+    errors = errors.concat(errs);
   }
+
   if (errors.length > 0) {
     console.log("Validation errors", errors, jsonData);
   }

From b1216b66c262490e03e1797e463fce045e505ba5 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Tue, 1 Oct 2024 22:39:32 +0100
Subject: [PATCH 32/33] Handle /OME/zarr.json series metadata for bf2raw data

---
 src/Bioformats2rawLayout/index.svelte | 57 ++++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 9 deletions(-)

diff --git a/src/Bioformats2rawLayout/index.svelte b/src/Bioformats2rawLayout/index.svelte
index 5575722..19387e8 100644
--- a/src/Bioformats2rawLayout/index.svelte
+++ b/src/Bioformats2rawLayout/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getXmlDom, getZarrGroupAttrs, validate, getVersion, getZarrGroupAttrsFileName } from "../utils";
+  import { getJson, getXmlDom, getZarrGroupAttrs, validate, getVersion, getZarrGroupAttrsFileName } from "../utils";
   import JsonBrowser from "../JsonBrowser/index.svelte";
   import ImageContainer from "../JsonValidator/Well/ImageContainer.svelte";
   import RoCrate from "../JsonValidator/RoCrate/index.svelte";
@@ -17,17 +17,56 @@
   // source/OME/METADATA.ome.xml
   const metadataUrl = `${source}/${metadataName}`;
 
-  async function loadXml(url) {
-    let dom = await getXmlDom(url);
+  async function loadXmlOrSeries(url) {
+    // We can get the series info from /OME/METADATA.ome.xml or
+    // /OME/zarr.json group attributes
+    // returns {images: [{name, id}]} or {error: message}
+    let dom;
+    try {
+      dom = await getXmlDom(url);
+    } catch (error) {}
+    let xmlRsp;
+    if (dom) {
+      xmlRsp = parseXml(dom);
+    }
+    // Try to get series info
+    let rsp = {};
+    let series;
+    try {
+      let zarrAttrs = await getJson(`${source}/OME/${zarrAttrsFileName}`);
+      series = zarrAttrs?.attributes?.ome?.series || zarrAttrs.series;
+    } catch (error) {}
+    
+    if (series && xmlRsp && xmlRsp?.images) {
+      // MUST match if we have both...
+      if (series.length !== xmlRsp.images.length) {
+        rsp.errors = [
+          `Length mismatch: series: ${series.length} != ome.xml: ${5}`,
+        ];
+      }
+    }
+    if (series) {
+      rsp.images = series.map((seriesName) => ({ name: seriesName, path: seriesName }));
+    } else if (xmlRsp) {
+      rsp = xmlRsp;
+    } else {
+      rsp.errors = ["No OME/METADATA.ome.xml or /OME series found"];
+    }
+    return rsp;
+  }
+
+  function parseXml(dom) {
     const root = dom.documentElement;
 
     let rsp = { images: [] };
+    let index = 0;
     for (const child of root.children) {
       console.log(child.tagName);
       if (child.tagName === "Image") {
         rsp.images.push({
           name: child.getAttribute("Name"),
           id: child.getAttribute("ID"),
+          path: "" + index++,
         });
       }
       // error handling - parsererror gives html doc
@@ -41,7 +80,7 @@
     }
     return rsp;
   }
-  const promise = loadXml(metadataUrl);
+  const promise = loadXmlOrSeries(metadataUrl);
 
   // wait for schema to be cached, so we don't load them multiple times
   // let schemasPromise = getSchema("0.2", "image");
@@ -77,14 +116,14 @@
         <div>loading schema...</div>
       {:then ok}
         <ul>
-          {#each metadataJson.images as image, i}
+          {#each metadataJson.images as image}
             <li class="image">
-              /{i}
-              <a title="Open Image" href="{url}?source={source}/{i}/"
+              /{image.path}
+              <a title="Open Image" href="{url}?source={source}/{image.path}/"
                 >{image.name}</a
               >
 
-              <ImageContainer {source} path={i} />
+              <ImageContainer {source} path={image.path} />
             </li>
           {/each}
         </ul>
@@ -96,7 +135,7 @@
     <!-- Error handling... -->
     {#if metadataJson.errors}
       <div class="error">
-        <h2>Error parsing {metadataName}</h2>
+        <h3>Error loading series metadata:</h3>
         {#each metadataJson.errors as err, i}
           <div>{err}</div>
         {/each}

From 2853654ce9c93803fe9e1ecae3f7620f23dc6f60 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Wed, 2 Oct 2024 07:22:20 +0100
Subject: [PATCH 33/33] Fix bytesPerPixel for Zarr v3 dtypes

---
 .../MultiscaleArrays/ZarrArray/index.svelte          | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
index e32add8..88109b0 100644
--- a/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte
@@ -32,8 +32,16 @@
 
   function getBytes(shape, zarray) {
     // handle v2 and v3 zarr
-    let dtype = getArrayDtype(zarray)
-    let bytesPerPixel = [1, 2, 4, 8].find((n) => dtype.includes(n));
+    let dtype = getArrayDtype(zarray);
+    let bytesPerPixel;
+    // e.g. v3: uint8, uint16, uint32, uint64, int8, int16, int32 (4), int64 (8), float32 (4), float64 (8)
+    if (dtype.includes("int") || dtype.includes("float")) {
+      // use regex to get numbers from dtype
+      bytesPerPixel = parseInt(dtype.match(/\d+/)[0]) / 8;
+    } else {
+      // e.g. v2: >i1, >i2, >i4, >i8, >u1, >u2, >u4, >u8, >f4, >f8
+      bytesPerPixel = [1, 2, 4, 8].find((n) => dtype.includes(n));
+    }
     if (!bytesPerPixel) return "";
     let pixels = shape.reduce((i, p) => i * p, 1);
     return formatBytes(bytesPerPixel * pixels);