V05 dev2

index.html

@@ -210,6 +210,9 @@
         cursor: default;
       }
       body {
+        --omeRed: #df283f;
+        --omeGreen: #128669;
+        --omeLinkBlue: #1d8dcd;
         padding: 0;
         font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -230,7 +233,7 @@
         background: white;
         margin: 10px 0;
         text-align: center;
-        box-shadow: 10px 10px 20px rgba(125, 22, 2, 0.5);
+        box-shadow: 10px 10px 20px rgba(212, 239, 253, 0.5);
         width: 100%;
         position: relative;
       }

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} />
@@ -74,24 +77,7 @@
     width: 100%;
     flex: 1;
     padding: 15px 0;
-    background: #ff512f; /* fallback for old browsers */
-    background: -webkit-linear-gradient(
-      to right,
-      #f09819,
-      #ff512f
-    ); /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(
-      to right,
-      #f09819,
-      #ff512f
-    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-    /* https://uigradients.com/ */
-    /* OME green->blue rgb(61,132,107), rgb(68,139,200) */
-  }
-
-  article {
-    width: 90%;
-    margin: auto;
+    background: white;
   }
 
   section > div {
@@ -108,14 +94,6 @@
     section > div {
       flex-direction: row;
     }
-
-    article {
-      width: 60%;
-      margin: auto;
-    }
-    a {
-      white-space: nowrap;
-    }
   }
 
   .error {

src/Bioformats2rawLayout/index.svelte

@@ -1,27 +1,83 @@
 <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";
+  import OpenWith from "../JsonValidator/OpenWithViewers/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 +91,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,32 +109,36 @@
 </script>
 
 <article>
-  Reading: <a href={source}>/{zarrName}/.zattrs</a>
-
-  <div class="json">
-    <JsonBrowser name="" version="" contents={rootAttrs} expanded />
-  </div>
+  Reading: <a href={source}>/{zarrName}/{zarrAttrsFileName}</a>
 
   Loading metadata:<a href={metadataUrl}>{metadataName}</a><br />
 
   {#await promise}
     <div>loading {metadataUrl}...</div>
   {:then metadataJson}
     <!-- Show list of Images -->
-    <h1>Images</h1>
+    <h1>{metadataJson.images.length} Images</h1>
     <ol>
       {#await preloadSchema(source + "/0")}
         <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} />
+
+              <a title="Open Image" href="{url}?source={source}/{image.path}/"
+                >Open in validator</a
+              >
+
+              <div style="margin-top: 10px">
+                <OpenWith source={`${source}/${image.path}`} dtype={"image"} {version} />
+              </div>
             </li>
           {/each}
         </ul>
@@ -87,10 +147,15 @@
       {/await}
     </ol>
 
+    <h3>{zarrName}/{zarrAttrsFileName}</h3>
+    <div class="json">
+      <JsonBrowser name="" version="" contents={rootAttrs} expanded />
+    </div>
+
     <!-- 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,16 +164,20 @@
   {: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>
-
   h1 {
     margin-top: 20px;
   }
   a,
   a:visited {
-    color: #ff512f;
+    color: var(--omeLinkBlue);
   }
 
   .json {

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>