Fix source for Plate images

src/App.css

@@ -1,5 +1,4 @@
 #root {
-  max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;

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() {
       </React.Fragment>
   }
 
-  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 (<tr key={rowdata["URL"]}>
         {renderRow(rowdata)}
         <ImageItem

src/ImageItem.jsx

@@ -1,25 +1,27 @@
 import React from "react";
 
 import Thumbnail from "./Thumbnail";
-import Viewer from "./Viewer";
+// import Viewer from "./Viewer";
 import OpenWith from "./OpenWith";
 import CopyButton from "./CopyButton";
 import { loadOmeroMultiscales, open, getNgffAxes } from "./util";
 import { openArray } from "zarr";
 
 // DeckGL react component
 export default function ImageItem({ source, zarr_columns }) {
-  let config = { source };
+
+  if (source.endsWith("/")) {
+    source = source.slice(0, -1);
+  }
 
   // const [layers, setLayers] = React.useState([]);
 
   const [imgInfo, setImageInfo] = React.useState({});
 
   React.useEffect(() => {
     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 <Thumbnail> to handle plate -> Image update
+        source
       });
     };
 
@@ -121,7 +125,7 @@ export default function ImageItem({ source, zarr_columns }) {
       return (
       <div style={wrapperStyle}>
       {imgInfo.attrs &&
-        <Thumbnail source={source} axes={imgInfo.axes} attrs={imgInfo.attrs} />
+        <Thumbnail source={imgInfo.source} axes={imgInfo.axes} attrs={imgInfo.attrs} />
       }
       </div>)
     } else if (col_name == "shape, chunks") {

src/Thumbnail.jsx

@@ -1,55 +1,58 @@
 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);
       }
       // 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 <div>
-    <canvas style={{maxWidth: 100, maxHeight: 100}} ref={canvas} height={canvasSize.height} width={canvasSize.width} />
-  </div>;
+  return (
+    <div>
+      <canvas
+        style={{ maxWidth: 100, maxHeight: 100 }}
+        ref={canvas}
+        height={canvasSize.height}
+        width={canvasSize.width}
+      />
+    </div>
+  );
 }