Support bioformats2raw.layout images

public/zarr_samples.json

@@ -1,8 +1,9 @@
 {
     "urls": [
-        "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846152.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",
-        "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/4495402.zarr"
-      ]
+        "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/4495402.zarr",
+        "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846151.zarr"
+    ]
 }

src/ImageItem.jsx

@@ -13,10 +13,21 @@ export default function ImageItem({ source }) {
 
   React.useEffect(() => {
     const fn = async function () {
-      const node = await open(config.source);
-
-      const attrs = await node.attrs.asObject();
+      let node = await open(config.source);
+      let attrs = await node.attrs.asObject();
       console.log("attrs", attrs);
+
+      if (attrs.plate) {
+        return;
+      } else if (attrs['bioformats2raw.layout']) {
+        // Use the first image at /0
+        source = source + "/0";
+        config = {source}
+        node = await open(config.source);
+        attrs = await node.attrs.asObject();
+        console.log("attrs", attrs);
+      }
+
       const axes = getNgffAxes(attrs.multiscales);
 
       let layerData = await loadOmeroMultiscales(config, node, attrs);
@@ -59,9 +70,7 @@ export default function ImageItem({ source }) {
   };
 
   let sizes = ["x", "y", "z", "c", "t"].map((dim) => (
-    <td key={dim}>
-      {imgInfo?.dims?.[dim]}
-    </td>
+    <td key={dim}>{imgInfo?.dims?.[dim]}</td>
   ));
 
   return (