V05 dev2

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.15"
   }
 }

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",

src/App.svelte

@@ -6,7 +6,7 @@
   import Modal from "svelte-simple-modal";
   import SplashScreen from "./SplashScreen.svelte";
 
-  import { getJson } from "./utils";
+  import { getZarrGroupAttrs } from "./utils";
   import CheckMark from "./CheckMark.svelte";
 
   const searchParams = new URLSearchParams(window.location.search);
@@ -15,14 +15,17 @@
     source = source.slice(0, -1);
   }
 
-  let location = window.location.href;
-
   let promise;
 
   if (source) {
     // load JSON to be validated...
-    console.log("Loading JSON... " + source + "/.zattrs");
-    promise = getJson(source + "/.zattrs");
+    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>
 
@@ -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} />

src/Bioformats2rawLayout/index.svelte

@@ -1,27 +1,72 @@
 <script>
-  import { getXmlDom, getJson, validate } 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";
 
   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}`;
 
-  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
@@ -35,12 +80,12 @@
     }
     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");
   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;
@@ -53,7 +98,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 />
@@ -71,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>
@@ -90,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}
@@ -99,6 +144,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>

src/JsonBrowser/DetailsPrePanel.svelte

@@ -0,0 +1,31 @@
+
+
+<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;
+    margin: 0 15px;
+  }
+  pre {
+    margin-top: 10px;
+    color: #faebd7;
+    background-color: #2c3e50;
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 10px;
+    overflow: auto;
+  }
+
+</style>

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>

src/JsonValidator/MultiscaleArrays/Multiscale.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getJson } from "../../utils";
+  import { getZarrArrayJson } from "../../utils";
   import CheckMark from "../../CheckMark.svelte";
 
   export let source;
@@ -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,14 +34,17 @@
     let dimCounts = [];
     let shapes = [];
     let dimSeparators = [];
+    let zarrayJsonList = [];
 
     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);
+      zarrayJsonList.push(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.
@@ -72,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) => {
@@ -95,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}

src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte

@@ -1,17 +1,23 @@
 <script>
-  import { openArray, slice } from "zarr";
-  import { range } from "../../../utils";
+  // import { openArray, slice } from "zarr";
+  import { range, getChunkAndShardShapes } 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;
 
-  const chunks = zarray.chunks;
+  const [chunks, shards] = getChunkAndShardShapes(zarray);
   const chunkCounts = zarray.shape.map((sh, index) =>
     Math.ceil(sh / chunks[index])
   );
@@ -33,20 +39,28 @@
     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);
+    const arr = await zarr.open(store, { kind: "array" });
 
     // 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) => {
+    let ch = arr.chunks;
+    const indices = get(chunkIndices);
+    let slices = indices.map((index, dim) => {
       if (ch[dim] > 1) {
         return slice(index * ch[dim], (index + 1) * ch[dim]);
       } else {
-        return index * ch[dim];
+        return index;
       }
     });
-    chunk = await store.get(indices);
+    // Updating chunk will trigger ChunkViewer to re-render
+    console.log("loading chunk", slices)
+    chunk = await zarr.get(arr, slices);
   }
 
   chunkIndices.subscribe(function () {