Merge pull request #46 from will-moore/thumbnails

Thumbnails

Author: will-moore

package-lock.json

@@ -16,8 +16,9 @@
   "dependencies": {
     "ajv": "^8.11.0",
     "ndarray": "^1.0.19",
+    "ome-zarr.js": "^0.0.11",
     "svelte-icons-pack": "^1.4.6",
     "svelte-simple-modal": "^1.4.1",
-    "zarrita": "^0.4.0-next.15"
+    "zarrita": "^0.5.0"
   }
 }

package.json

@@ -11,6 +11,7 @@
   import ImageContainer from "../JsonValidator/Well/ImageContainer.svelte";
   import RoCrate from "../JsonValidator/RoCrate/index.svelte";
   import OpenWith from "../JsonValidator/OpenWithViewers/index.svelte";
+  import Thumbnail from "../JsonValidator/Thumbnail/index.svelte";
 
   export let source;
   export let rootAttrs;
@@ -125,20 +126,23 @@
         <ul>
           {#each metadataJson.images as image}
             <li class="image">
+              <div>
               /{image.path}
               <a title="Open Image" href="{url}?source={source}/{image.path}/"
                 >{image.name}</a
               >
 
               <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>
+              </div>
+              <div class="thumbnail_wrapper">
+                <a title="Open Image in Validator" href="{url}?source={source}/{image.path}/">
+                <Thumbnail source={`${source}/${image.path}`} targetSize=100 />
+                </a>
+              </div>
             </li>
           {/each}
         </ul>
@@ -193,6 +197,8 @@
   }
 
   .image {
+    display: flex;
+    flex-direction: row;
     list-style: none;
     text-align: left;
     margin-top: 10px;
@@ -204,4 +210,17 @@
     border-radius: 10px;
     font-family: monospace;
   }
+  .image div {
+    flex: 1 1 auto;
+  }
+
+  .image .thumbnail_wrapper {
+    flex: 0 0 auto;
+  }
+
+  .thumbnail_wrapper :global(.thumbnail) {
+    max-width: 100px;
+    max-height: 100px;
+    border-radius: 5px;
+  }
 </style>

src/Bioformats2rawLayout/index.svelte

@@ -12,14 +12,13 @@
   .invalid,
   .valid {
     border-radius: 50%;
-    padding: 10px;
+    padding: 13px;
     margin: 10px auto;
     color: white;
-    width: 100px;
-    height: 100px;
+    width: 90px;
+    height: 90px;
     font-size: 50px;
     text-align: center;
-    padding: 15px;
   }
   .invalid {
     background-color: red;

src/CheckMark.svelte

@@ -4,14 +4,15 @@
 
   export let source;
   export let multiscale;
+  export let version;
 
   const WARNING = "warning";
 
   // 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 { axes, datasets, version } = multiscale;
+  const { axes, datasets } = multiscale;
 
   const permitDtypeMismatch = ["0.1", "0.2", "0.3", "0.4"].includes(version);
   const checkDimSeparator = ["0.2", "0.3", "0.4"].includes(version);

src/JsonValidator/MultiscaleArrays/Multiscale.svelte

@@ -3,7 +3,7 @@
   import { get, writable } from "svelte/store";
   import ChunkViewer from "./ChunkViewer.svelte";
   import * as zarr from "zarrita";
-  import { slice } from "@zarrita/indexing";
+  import { slice } from "zarrita";
 
 
   export let source;

src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkLoader.svelte

@@ -1,6 +1,5 @@
 <script>
   import { onMount, afterUpdate } from "svelte";
-  import { slice, get } from "@zarrita/indexing";
   import ndarray from "ndarray";
 
   export let chunk;

src/JsonValidator/MultiscaleArrays/ZarrArray/ChunkViewer.svelte

@@ -13,7 +13,7 @@
 {#each rootAttrs.multiscales as multiscale, idx}
   <article>
     <h2>Multiscale {idx}</h2>
-    <Multiscale {source} {multiscale} /> 
+    <Multiscale {source} {multiscale} version={msVersion}/>
     {#each multiscale.datasets as dataset}
       <ZarrArray {source} path={dataset.path + "/" + zarrAttrsFileName} />
     {/each}