From 8e5f47658f704e6f26c4fe3b9364e5c117c37e64 Mon Sep 17 00:00:00 2001 From: William Moore Date: Wed, 15 Feb 2023 17:08:44 +0000 Subject: [PATCH] Fix source for Plate images --- public/zarr_samples.json | 10 ------- src/App.css | 1 - src/App.jsx | 6 ++-- src/ImageItem.jsx | 22 ++++++++------ src/Thumbnail.jsx | 63 ++++++++++++++++++++-------------------- 5 files changed, 48 insertions(+), 54 deletions(-) delete mode 100644 public/zarr_samples.json diff --git a/public/zarr_samples.json b/public/zarr_samples.json deleted file mode 100644 index 9b8a466..0000000 --- a/public/zarr_samples.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "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", - "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" - ] -} diff --git a/src/App.css b/src/App.css index b73bbed..810e7bb 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,4 @@ #root { - max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; diff --git a/src/App.jsx b/src/App.jsx index 6895ad6..38afdcf 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -14,7 +14,6 @@ export default function App() { header: true, download: true, complete: function (results) { - console.log(results); setTableData(results.data); }, }); @@ -39,8 +38,9 @@ export default function App() { } - const table_rows = tableData.map((rowdata) => { - console.log("Row....", rowdata); + const validRows = tableData.filter(rowdata => rowdata.URL?.length > 0); + + const table_rows = validRows.map((rowdata) => { return ( {renderRow(rowdata)} { const fn = async function () { - let node = await open(config.source); + let node = await open(source); let attrs = await node.attrs.asObject(); - console.log("attrs", attrs); let keywords = []; let wells; @@ -39,17 +41,17 @@ export default function ImageItem({ source, zarr_columns }) { } if (redirectSource) { // reload with new source - config = {source: redirectSource} - node = await open(config.source); + source = redirectSource + node = await open(source); attrs = await node.attrs.asObject(); keywords.push("bioformats2raw.layout"); } const axes = getNgffAxes(attrs.multiscales); + // load first dataset (highest resolution image) to get shape, chunks let path = attrs.multiscales[0].datasets[0].path; const store = await openArray({ store: source + "/" + path, mode: "r" }); - let shape = store.meta.shape; let chunks = store.meta.chunks; @@ -85,7 +87,9 @@ export default function ImageItem({ source, zarr_columns }) { "Wells": wells, "shape": shape.join(", "), "chunks": chunks.join(", "), - "Fields": fields + "Fields": fields, + // use this source for to handle plate -> Image update + source }); }; @@ -121,7 +125,7 @@ export default function ImageItem({ source, zarr_columns }) { return (
{imgInfo.attrs && - + }
) } else if (col_name == "shape, chunks") { diff --git a/src/Thumbnail.jsx b/src/Thumbnail.jsx index 9aca410..41456a3 100644 --- a/src/Thumbnail.jsx +++ b/src/Thumbnail.jsx @@ -1,39 +1,45 @@ import React from "react"; import { openArray, slice } from "zarr"; -import {getNgffAxes, renderTo8bitArray, getMinMaxValues, getDefaultVisibilities, hexToRGB} from "./util"; +import { + getNgffAxes, + renderTo8bitArray, + getMinMaxValues, + getDefaultVisibilities, + hexToRGB, + getDefaultColors, +} from "./util"; export default function Thumbnail({ source, attrs }) { // const [r, setChunk] = React.useState(); - const [canvasSize, setCanvasSize] = React.useState({width: 100, height: 100}); + const [canvasSize, setCanvasSize] = React.useState({ + width: 100, + height: 100, + }); const canvas = React.useRef(); - React.useEffect(() => { const fn = async function () { - let paths = attrs.multiscales[0].datasets.map(d => d.path); - let axes = getNgffAxes(attrs.multiscales).map(a => a.name); - console.log("paths", paths, "axes", axes); + let paths = attrs.multiscales[0].datasets.map((d) => d.path); + let axes = getNgffAxes(attrs.multiscales).map((a) => a.name); let path = paths.at(-1); const store = await openArray({ store: source + "/" + path, mode: "r" }); - let chDim = axes.indexOf('c'); + let chDim = axes.indexOf("c"); let shape = store.meta.shape; let dims = shape.length; let ch = store.meta.chunks; - console.log("shape", shape, ch); let channel_count = shape[chDim]; let visibilities; let colors; if (attrs?.omero?.channels) { - console.log("omero channels", attrs?.omero?.channels) - visibilities = attrs.omero.channels.map(ch => ch.active); - colors = attrs.omero.channels.map(ch => hexToRGB(ch.color)); + visibilities = attrs.omero.channels.map((ch) => ch.active); + colors = attrs.omero.channels.map((ch) => hexToRGB(ch.color)); } else { visibilities = getDefaultVisibilities(channel_count); colors = getDefaultColors(channel_count, visibilities); @@ -41,15 +47,12 @@ export default function Thumbnail({ source, attrs }) { // filter for active channels colors = colors.filter((col, idx) => visibilities[idx]); - let activeChannels = visibilities.reduce((prev, active, index) => { if (active) prev.push(index); return prev; }, []); - console.log({visibilities, activeChannels, colors}); - - let promises = activeChannels.map(chIndex => { + let promises = activeChannels.map((chIndex) => { let indecies = shape.map((dimSize, index) => { // channel if (index == chDim) return chIndex; @@ -58,42 +61,40 @@ export default function Thumbnail({ source, attrs }) { return slice(0, dimSize); } // z - if (axes[index] == 'z') { + if (axes[index] == "z") { return parseInt(dimSize / 2); } return 0; }); - console.log('ch indecies', chIndex, indecies); return store.get(indecies); }); - let ndChunks = await Promise.all(promises); - console.log('ndChunks', ndChunks); - - - - - let minMaxValues = ndChunks.map(ch => getMinMaxValues(ch)); - console.log("minMaxValues", minMaxValues); + let minMaxValues = ndChunks.map((ch) => getMinMaxValues(ch)); let rbgData = renderTo8bitArray(ndChunks, minMaxValues, colors); - console.log("rbgData", rbgData); // setChunk(data); let width = shape.at(-1); let height = shape.at(-2); - setCanvasSize({width, height }); + setCanvasSize({ width, height }); - const ctx = canvas.current.getContext('2d'); + const ctx = canvas.current.getContext("2d"); ctx.putImageData(new ImageData(rbgData, width, height), 0, 0); }; fn(); }, []); - return
- -
; + return ( +
+ +
+ ); }