diff --git a/index.html b/index.html index 881eb1a..8ff82c4 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + OME Zarr Catalog
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..d894595 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/zarr_samples.json b/public/zarr_samples.json index ae265ce..9b8a466 100644 --- 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 index bf70695..7309724 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -23,6 +23,9 @@ export default function App() { sizeC sizeT Axes + Wells + Fields + keywords {items} diff --git a/src/ImageItem.jsx b/src/ImageItem.jsx index 0812269..da40f03 100644 --- 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 }) { {sizes} {imgInfo.axes} + {imgInfo.wells} + {imgInfo.fields} + {imgInfo?.keywords?.join(", ")}