Add support for plates

ome · Feb 9, 2023 · 621637d · 621637d
1 parent 4811ff1
commit 621637d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon-16x16.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>OME Zarr Catalog</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/zarr_samples.json b/public/zarr_samples.json
@@ -1,5 +1,6 @@
 {
     "urls": [
+        "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0001A/2551.zarr",
         "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846152.zarr",
         "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/9836842.zarr",
         "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.2/6001240.zarr",

diff --git a/src/App.jsx b/src/App.jsx
@@ -23,6 +23,9 @@ export default function App() {
           <th>sizeC</th>
           <th>sizeT</th>
           <th>Axes</th>
+          <th>Wells</th>
+          <th>Fields</th>
+          <th>keywords</th>
         </tr>
         {items}
       </tbody>

diff --git a/src/ImageItem.jsx b/src/ImageItem.jsx
@@ -17,21 +17,33 @@ export default function ImageItem({ source }) {
       let attrs = await node.attrs.asObject();
       console.log("attrs", attrs);
 
+      let keywords = [];
+      let wells;
+      let fields;
+
+      // Check if we have a plate or bioformats2raw.layout...
+      let redirectSource;
       if (attrs.plate) {
-        return;
+        fields = attrs.plate.field_count;
+        wells = attrs.plate.wells.length;
+        let wellPath = source + "/" + attrs.plate.wells[0].path;
+        let wellJson = await fetch(wellPath + "/.zattrs").then(rsp => rsp.json());
+        redirectSource = wellPath + "/" + wellJson.well.images[0].path;
       } else if (attrs['bioformats2raw.layout']) {
         // Use the first image at /0
-        source = source + "/0";
-        config = {source}
+        redirectSource = source + "/0";
+      }
+      if (redirectSource) {
+        // reload with new source
+        config = {source: redirectSource}
         node = await open(config.source);
         attrs = await node.attrs.asObject();
-        console.log("attrs", attrs);
+        keywords.push("bioformats2raw.layout");
       }
 
       const axes = getNgffAxes(attrs.multiscales);
 
       let layerData = await loadOmeroMultiscales(config, node, attrs);
-      console.log("layerData", layerData);
 
       let shape = layerData.loader[0]._data.meta.shape;
 
@@ -57,6 +69,9 @@ export default function ImageItem({ source }) {
         dims: dims,
         axes: axes.map((axis) => axis.name).join(""),
         version: attrs.multiscales?.[0]?.version,
+        keywords,
+        wells,
+        fields
       });
     };
 
@@ -81,6 +96,9 @@ export default function ImageItem({ source }) {
       </td>
       {sizes}
       <td>{imgInfo.axes}</td>
+      <td>{imgInfo.wells}</td>
+      <td>{imgInfo.fields}</td>
+      <td>{imgInfo?.keywords?.join(", ")}</td>
       <td>
         <div style={wrapperStyle}>
           <Viewer layersData={layers} />