Check datasets shape and dtype

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>

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}

src/JsonValidator/MultiscaleArrays/index.svelte

@@ -1,13 +1,15 @@
 <script>
   import ZarrArray from "./ZarrArray/index.svelte";
+  import Multiscale from "./Multiscale.svelte";
 
   export let source;
   export let rootAttrs;
 </script>
 
 {#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}

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;