Bioformats layout

index.html

@@ -232,6 +232,7 @@
         text-align: center;
         box-shadow: 10px 10px 20px rgba(125, 22, 2, 0.5);
         width: 100%;
+        position: relative;
       }
 
       @media (min-width: 1000px) {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ome-ngff-validator",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import Nav from "./Nav.svelte";
-  import JsonValidator from "./JsonValidator.svelte";
+  import Bioformats2rawLayout from "./Bioformats2rawLayout/index.svelte";
+  import JsonValidator from "./JsonValidator/index.svelte";
   import Title from "./Title.svelte"
   import Modal from "svelte-simple-modal";
 
@@ -35,7 +36,11 @@
         {:then data}
           <Title {source} zattrs={data} />
           <div>
-            <JsonValidator rootAttrs={data} {source} />
+            {#if data["bioformats2raw.layout"] === 3 && !data.plate}
+              <Bioformats2rawLayout rootAttrs={data} {source} />
+            {:else}
+              <JsonValidator rootAttrs={data} {source} />
+            {/if}
           </div>
         {:catch error}
           <p style="color: red">{error.message}</p>

src/Bioformats2rawLayout/index.svelte

@@ -0,0 +1,151 @@
+<script>
+  import { getXmlDom, getSchema, getJson, validate } from "../utils";
+  import JsonBrowser from "../JsonBrowser/index.svelte";
+  import ImageContainer from "../JsonValidator/Well/ImageContainer.svelte";
+  import vizarrLogoUrl from "../assets/vizarr_logo.png"
+
+  export let source;
+  export let rootAttrs;
+
+  const metadataName = "OME/METADATA.ome.xml";
+
+  // source/OME/METADATA.ome.xml
+  const metadataUrl = `${source}${metadataName}`;
+
+  async function loadXml(url) {
+    let dom = await getXmlDom(url);
+    const root = dom.documentElement;
+
+    let rsp = { images: [] };
+    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"),
+        });
+      }
+      // error handling - parsererror gives html doc
+      if (child.tagName === "body") {
+        if (child.firstElementChild.tagName == "parsererror") {
+          rsp.errors = [...child.firstElementChild.children].map(
+            (el) => el.innerHTML
+          );
+        }
+      }
+    }
+    return rsp;
+  }
+  const promise = loadXml(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");
+    console.log("preloadSchema", imgAttrs);
+    let errs = await validate(imgAttrs);
+    return errs;
+  }
+
+  const dirs = source.split("/").filter(Boolean);
+  const zarrName = dirs[dirs.length - 1];
+
+  const url = window.location.origin + window.location.pathname;
+</script>
+
+<article>
+  Reading: <a href={source}>{zarrName}/.zattrs</a>
+
+  <div class="json">
+    <JsonBrowser name="" version="" contents={rootAttrs} expanded />
+  </div>
+
+  Loading metadata:<a href={metadataUrl}>{metadataName}</a><br />
+
+  {#await promise}
+    <div>loading {metadataUrl}...</div>
+  {:then metadataJson}
+    <!-- Show list of Images -->
+    <h1>Images</h1>
+    <ol>
+      {#await preloadSchema(source + "0")}
+        <div>loading schema...</div>
+      {:then ok}
+        <ul>
+          {#each metadataJson.images as image, i}
+            <li class="image">
+              /{i}
+              <a title="Open Image" href="{url}?source={source}{i}/"
+                >{image.name}</a
+              >
+
+              <ImageContainer {source} path={i} />
+
+              <a title="View image in vizarr" class="vizarr_link" target="_blank"
+                href="https://hms-dbmi.github.io/vizarr/?source={source}{i}/"
+                ><img src={vizarrLogoUrl}/></a>
+            </li>
+          {/each}
+        </ul>
+      {:catch error}
+        <p style="color: red">{error.message}</p>
+      {/await}
+    </ol>
+
+    <!-- Error handling... -->
+    {#if metadataJson.errors}
+      <div class="error">
+        <h2>Error parsing {metadataName}</h2>
+        {#each metadataJson.errors as err, i}
+          <div>{err}</div>
+        {/each}
+      </div>
+    {/if}
+  {:catch error}
+    <p style="color: red">{error.message}</p>
+  {/await}
+</article>
+
+<style>
+
+  h1 {
+    margin-top: 20px;
+  }
+  a,
+  a:visited {
+    color: #ff512f;
+  }
+
+  .vizarr_link {
+    float: right;
+  }
+  .vizarr_link img {
+    height: 24px;
+    margin: 0;
+  }
+
+  .json {
+    text-align: left;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    color: #faebd7;
+    background-color: #263749;
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 10px;
+    font-family: monospace;
+  }
+
+  .image {
+    list-style: none;
+    text-align: left;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    color: #faebd7;
+    background-color: #263749;
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 10px;
+    font-family: monospace;
+  }
+</style>

src/CHANGELOG.md

@@ -1,4 +1,8 @@
 
+
+# 0.3.0 (September 2022)
+
+- Support bioformats2raw.layout [#13](https://github.com/ome/ome-ngff-validator/pull/13)
 # 0.2.1 (July 2022)
 
 - Fix links for browsing of Plate -> Well -> Image

src/Cube3D.svelte → src/JsonValidator/MultiscaleArrays/ZarrArray/Cube3D.svelte

@@ -6,7 +6,7 @@
   let scrollX = 50;
   function handleMousemove(event) {
     // scrollX goes from 20 -> 50. parent is 200px wide
-    scrollX = ((event.clientX - parent.offsetLeft) / 6) + 20;
+    scrollX = (event.offsetX / 6) + 20;
   }
 
   const shape = zarray.shape;
@@ -66,6 +66,8 @@
     perspective: 1000px;
     margin: 25px auto 20px;
     transform: scale(0.75);
+    /* ignore mouse-move events */
+    pointer-events: none;
   }
 
   .cube {

src/ZarrArray.svelte → src/JsonValidator/MultiscaleArrays/ZarrArray/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getJson, formatBytes } from "./utils";
+  import { getJson, formatBytes } from "../../../utils";
   import Cube3D from "./Cube3D.svelte";
 
   export let source;

src/MultiscaleArrays.svelte → src/JsonValidator/MultiscaleArrays/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import ZarrArray from "./ZarrArray.svelte";
+  import ZarrArray from "./ZarrArray/index.svelte";
 
   export let source;
   export let rootAttrs;

src/PlateWell.svelte → src/JsonValidator/Plate/WellContainer/PlateWell.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getJson, validate } from "./utils";
+  import { getJson, validate } from "../../../utils";
 
   export let wellAttrs;
   export let source;

src/WellContainer.svelte → src/JsonValidator/Plate/WellContainer/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getJson } from "./utils";
+  import { getJson } from "../../../utils";
   import PlateWell from "./PlateWell.svelte";
   export let source;
   export let path;

src/Plate.svelte → src/JsonValidator/Plate/index.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { CURRENT_VERSION, getVersion, getSchema } from "./utils";
+  import { CURRENT_VERSION, getVersion, getSchema } from "../../utils";
 
-  import WellContainer from "./WellContainer.svelte";
+  import WellContainer from "./WellContainer/index.svelte";
 
   export let source;
   export let rootAttrs;

src/ImageContainer.svelte → src/JsonValidator/Well/ImageContainer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getJson, validate } from "./utils";
+  import { getJson, validate } from "../../utils";
 
   export let source;
   export let path;
@@ -20,27 +20,27 @@
 
 <a title="{path}: Open Image" href="{url}?source={source + path}/">
 {#await promise}
-  <li>{path}.</li>
+  <span>{path}.</span>
 {:then errs}
   {#if errs.length > 0}
-    <li class="error"> ⨯ Error! </li>
+    <span class="error"> ⨯ Error! </span>
   {:else}
-    <li class="valid">{path}: ✓ </li>
+    <span class="valid">{path}: ✓ </span>
   {/if}
 {:catch error}
-  <li class="error">{error.message}</li>
+  <span class="error">{error.message}</span>
 {/await}
 </a>
 
 <style>
-  li {
-    display: block;
-    list-style: none;
-    float: left;
+  a {
+    text-decoration: none;
+  }
+  span {
     border: solid #ddd 1px;
-    margin: 3px;
     padding: 3px;
     border-radius: 3px;
+    display: inline-block;
   }
   .valid {
     color: green;

src/Well.svelte → src/JsonValidator/Well/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { CURRENT_VERSION, getVersion, getSchema } from "./utils";
+  import { CURRENT_VERSION, getVersion, getSchema } from "../../utils";
 
   import ImageContainer from "./ImageContainer.svelte";
 
@@ -23,7 +23,7 @@
   {:then ok}
     <ul>
       {#each imagePaths as path}
-        <ImageContainer {source} {path} />
+        <li><ImageContainer {source} {path} /></li>
       {/each}
     </ul>
   {:catch error}
@@ -33,8 +33,14 @@
 
 <style>
 
+  ul {
+    margin-top: 20px;
+  }
+
   li {
     list-style: none;
+    display: inline-block;
+    margin: 3px;
   }
 
 </style>