From a22aa14b9df242d2bd7419bc454a61d3b38c36df Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 21 Oct 2022 17:39:56 +0100
Subject: [PATCH 1/5] Check datasets shape and dtype

---
 src/CheckMark.svelte                          | 33 +++++++++
 .../MultiscaleArrays/Multiscale.svelte        | 73 +++++++++++++++++++
 .../MultiscaleArrays/index.svelte             |  4 +-
 src/JsonValidator/index.svelte                | 28 +------
 4 files changed, 111 insertions(+), 27 deletions(-)
 create mode 100644 src/CheckMark.svelte
 create mode 100644 src/JsonValidator/MultiscaleArrays/Multiscale.svelte

diff --git a/src/CheckMark.svelte b/src/CheckMark.svelte
new file mode 100644
index 0000000..39f9ac8
--- /dev/null
+++ b/src/CheckMark.svelte
@@ -0,0 +1,33 @@
+<script>
+  export let valid;
+</script>
+
+{#if valid}
+  <div class="valid">✓</div>
+{:else}
+  <div class="invalid">×</div>
+{/if}
+
+<style>
+  .invalid,
+  .valid {
+    border-radius: 50%;
+    padding: 10px;
+    margin: 10px auto;
+    color: white;
+    width: 100px;
+    height: 100px;
+    font-size: 50px;
+    text-align: center;
+    padding: 15px;
+  }
+  .invalid {
+    background-color: red;
+    border: solid red 1px;
+  }
+
+  .valid {
+    background-color: green;
+    border: solid green 1px;
+  }
+</style>
diff --git a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
new file mode 100644
index 0000000..35c52f8
--- /dev/null
+++ b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
@@ -0,0 +1,73 @@
+<script>
+  import { getJson } from "../../utils";
+  import CheckMark from "../../CheckMark.svelte";
+
+  export let source;
+  export let multiscale;
+
+  // We check that all multiscale Datasets have same dtype and
+  // shape.length (number of dimensions)
+
+  // If multiscale.axes (version > 0.3) check it matches shape
+
+  const datasets = multiscale.datasets;
+  const axes = multiscale.axes;
+
+  function allEqual(items) {
+    return items.every((value) => value == items[0]);
+  }
+
+  async function loadAndValidate() {
+    let dtypes = [];
+    let dimCounts = [];
+    let shapes = [];
+
+    for (let i = 0; i < datasets.length; i++) {
+      let dataset = datasets[i];
+      let zarray = await getJson(source + dataset.path + "/.zarray");
+      dimCounts.push(zarray.shape.length);
+      dtypes.push(zarray.dtype);
+      shapes.push(zarray.shape);
+    }
+
+    let errors = [];
+    if (dtypes.length === 0) {
+      errors.push("No multiscale datasets")
+    }
+
+    if (!allEqual(dtypes)) {
+      errors.push(`dtypes mismatch: ${dtypes.join(", ")}`)
+    }
+    if (!allEqual(dimCounts)) {
+      errors.push(`number of dimensions mismatch: ${dimCounts.join(", ")}`)
+    }
+    if (axes) {
+      shapes.forEach((shape) => {
+        if (shape.length != axes.length) {
+          errors.push(`Shape (${shape.join(", ")}) doesn't match axes length: ${axes.length}`)
+        }
+      });
+    }
+    return errors;
+  }
+
+  const promise = loadAndValidate();
+</script>
+
+{#await promise}
+  <p>loading...</p>
+{:then errors}
+  {#if errors.length > 0}
+    <!-- only show X if not valid - no tick if valid -->
+    <CheckMark valid={false} />
+    {#each errors as error}
+      <p style="color: red">Error: {error}</p>
+    {/each}
+  {:else}
+    <p title="dtypes match and shapes are consistent">
+      {datasets.length} Datasets checked <span style="color:green">✓</span>
+    </p>
+  {/if}
+{:catch error}
+  <p style="color: red">{error.message}</p>
+{/await}
diff --git a/src/JsonValidator/MultiscaleArrays/index.svelte b/src/JsonValidator/MultiscaleArrays/index.svelte
index 94b3cef..1ba56cf 100644
--- a/src/JsonValidator/MultiscaleArrays/index.svelte
+++ b/src/JsonValidator/MultiscaleArrays/index.svelte
@@ -1,5 +1,6 @@
 <script>
   import ZarrArray from "./ZarrArray/index.svelte";
+  import Multiscale from "./Multiscale.svelte";
 
   export let source;
   export let rootAttrs;
@@ -7,7 +8,8 @@
 
 {#each rootAttrs.multiscales as multiscale, idx}
   <article>
-    <h2>Dataset {idx}</h2>
+    <h2>Multiscale {idx}</h2>
+    <Multiscale {source} {multiscale} /> 
     {#each multiscale.datasets as dataset}
       <ZarrArray {source} path={dataset.path} />
     {/each}
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index 5cb22ae..bef32ca 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -3,6 +3,7 @@
   import Plate from "./Plate/index.svelte";
   import Well from "./Well/index.svelte"
   import JsonBrowser from "../JsonBrowser/index.svelte";
+  import CheckMark from "../CheckMark.svelte";
   import {
     CURRENT_VERSION,
     getSchemaUrlForJson,
@@ -43,16 +44,14 @@
   {#await promise}
     <div>loading schema...</div>
   {:then errors}
+    <CheckMark valid={errors.length == 0} />
     {#if errors.length > 0}
-      <div class="invalid">×</div>
       <div class="error">
         Errors:
         {#each errors as error}
           <pre><code>{JSON.stringify(error, null, 2)}</code></pre>
         {/each}
       </div>
-    {:else}
-      <div class="valid">✓</div>
     {/if}
   {:catch error}
     <p style="color: red">{error.message}</p>
@@ -109,29 +108,6 @@
     font-size: 14px;
     border-radius: 10px;
   }
-
-  .invalid,
-  .valid {
-    border-radius: 50%;
-    padding: 10px;
-    margin: 10px auto;
-    color: white;
-    width: 100px;
-    height: 100px;
-    font-size: 50px;
-    text-align: center;
-    padding: 15px;
-  }
-  .invalid {
-    background-color: red;
-    border: solid red 1px;
-  }
-
-  .valid {
-    background-color: green;
-    border: solid green 1px;
-  }
-
   .error {
     text-align: left;
     overflow: auto;

From ce5dc49f85366d8e3317c26cd9eb56f5e6a9840a Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Sat, 22 Oct 2022 22:57:16 +0100
Subject: [PATCH 2/5] Only check dtpes if version requires it

---
 src/JsonValidator/MultiscaleArrays/Multiscale.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
index 35c52f8..c142295 100644
--- a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
+++ b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
@@ -9,9 +9,10 @@
   // shape.length (number of dimensions)
 
   // If multiscale.axes (version > 0.3) check it matches shape
+  const {axes, datasets, version} = multiscale;
 
-  const datasets = multiscale.datasets;
-  const axes = multiscale.axes;
+  // TODO: add "0.4" to this list once tested!
+  const checkDtypes = !["0.1", "0.2", "0.3"].includes(version);
 
   function allEqual(items) {
     return items.every((value) => value == items[0]);
@@ -35,7 +36,7 @@
       errors.push("No multiscale datasets")
     }
 
-    if (!allEqual(dtypes)) {
+    if (checkDtypes && !allEqual(dtypes)) {
       errors.push(`dtypes mismatch: ${dtypes.join(", ")}`)
     }
     if (!allEqual(dimCounts)) {

From 4dff5f479481b164bc742c732607080a3bbc0d12 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Sat, 22 Oct 2022 23:08:46 +0100
Subject: [PATCH 3/5] Check dimension_sparator is / for v0.2-v0.4

---
 src/JsonValidator/MultiscaleArrays/Multiscale.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
index c142295..17fcf67 100644
--- a/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
+++ b/src/JsonValidator/MultiscaleArrays/Multiscale.svelte
@@ -13,6 +13,7 @@
 
   // TODO: add "0.4" to this list once tested!
   const checkDtypes = !["0.1", "0.2", "0.3"].includes(version);
+  const checkDimSeparator = ["0.2", "0.3", "0.4"].includes(version);
 
   function allEqual(items) {
     return items.every((value) => value == items[0]);
@@ -22,6 +23,7 @@
     let dtypes = [];
     let dimCounts = [];
     let shapes = [];
+    let dimSeparators = [];
 
     for (let i = 0; i < datasets.length; i++) {
       let dataset = datasets[i];
@@ -29,6 +31,7 @@
       dimCounts.push(zarray.shape.length);
       dtypes.push(zarray.dtype);
       shapes.push(zarray.shape);
+      dimSeparators.push(zarray.dimension_separator);
     }
 
     let errors = [];
@@ -49,6 +52,13 @@
         }
       });
     }
+    if (checkDimSeparator) {
+      dimSeparators.forEach((sep) => {
+        if (sep != "/") {
+          errors.push(`Dimension separator must be / for version ${version}`)
+        }
+      });
+    }
     return errors;
   }
 

From 1c40a6a71900b3dff5ae728471ec886484e092c0 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Sun, 23 Oct 2022 15:56:56 +0100
Subject: [PATCH 4/5] Handle invalid version - schema 404 shows X fail

---
 src/App.svelte                     | 4 +++-
 src/JsonBrowser/JsonKeyLink.svelte | 4 ++--
 src/JsonValidator/index.svelte     | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 3dff241..ea4c4c0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -6,6 +6,7 @@
   import Modal from "svelte-simple-modal";
 
   import { getJson } from "./utils";
+  import CheckMark from "./CheckMark.svelte";
 
   const searchParams = new URLSearchParams(window.location.search);
   let source = searchParams.get("source");
@@ -43,7 +44,8 @@
             {/if}
           </div>
         {:catch error}
-          <p style="color: red">{error.message}</p>
+          <CheckMark valid={false}/>
+          <p style="color: red; margin: 20px 0">{error.message}</p>
         {/await}
       {:else}
         <article>
diff --git a/src/JsonBrowser/JsonKeyLink.svelte b/src/JsonBrowser/JsonKeyLink.svelte
index 73b5828..f164c55 100644
--- a/src/JsonBrowser/JsonKeyLink.svelte
+++ b/src/JsonBrowser/JsonKeyLink.svelte
@@ -33,9 +33,9 @@
     }
   }
 
-  const version_urls = all_urls[version];
+  const version_urls = all_urls[version] || {};
 
-  let url;
+  let url = "";
 
   if (version_urls[name]) {
     url = `https://ngff.openmicroscopy.org/${version}/index.html#${version_urls[name]}`;
diff --git a/src/JsonValidator/index.svelte b/src/JsonValidator/index.svelte
index bef32ca..55bcfd7 100644
--- a/src/JsonValidator/index.svelte
+++ b/src/JsonValidator/index.svelte
@@ -54,6 +54,7 @@
       </div>
     {/if}
   {:catch error}
+    <CheckMark valid={false}/>
     <p style="color: red">{error.message}</p>
   {/await}
 

From 58094dd2c62388bd5fb8f2e375dbf8ecdcb8f632 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Mon, 24 Oct 2022 18:36:05 +0100
Subject: [PATCH 5/5] Improve error message for invalid version/no schema

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

diff --git a/src/utils.js b/src/utils.js
index e47efe0..2946117 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -47,10 +47,14 @@ export async function getSchema(version, schemaName = "image") {
   if (!schemas[cacheKey]) {
     const schema_url = getSchemaUrl(schemaName, version);
     console.log("Loading schema... " + schema_url);
-    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;
+    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.`);
+    }
   }
   return schemas[cacheKey];
 }