ViSR: Make Davidia plots fill parent boxes

apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx

@@ -84,7 +84,7 @@ export type SpectroscopyData = Partial<Record<ChannelKey, PlotValues>>;
 
 interface SpectroscopyPlotsProps {
   expanded: boolean;
-  plotAspectRatio: number;
+  plotAspectRatio: number | "auto" | "equal";
 }
 
 function SpectroscopyPlots({
@@ -116,8 +116,11 @@ function SpectroscopyPlots({
         <Box
           key={i}
           sx={{
-            flex: 1,
+            //display: "grid", //this makes the plots fill the parent box
+            display: "flex", //this fixes the centering issue of the plots when drawer is closed
+            flex: 1, //this option fixes the sizing issue when the window is resized
             justifyContent: "center",
+            minWidth: 260,
           }}
         >
           <ImagePlot
@@ -134,9 +137,13 @@ function SpectroscopyPlots({
   );
 
   return (
-    <Box ref={containerRef! as React.RefObject<HTMLDivElement>}>
+    <Box
+      ref={containerRef! as React.RefObject<HTMLDivElement>}
+      sx={{ display: "flex" }}
+    >
       {mounted && (
         <ReactGridLayout
+          key={width} //re-render the grid on width change so that plots resize correctly
           layout={layout}
           width={width}
           gridConfig={{

apps/visr/src/components/spectroscopy/SpectroscopyView.tsx

@@ -41,7 +41,7 @@ function SpectroscopyView() {
 
   const DRAWER_COLLAPSED_HEIGHT = 100;
   const NAVBAR_HEIGHT = 32;
-  const PLOT_ASPECT_RATIO = 0.75;
+  const PLOT_ASPECT_RATIO = "auto";
 
   return (
     <Box

apps/visr/src/components/tomography/SliceViewer.tsx

@@ -39,12 +39,32 @@ export default function SliceViewer({
   }
 
   return (
-    <HeatmapPlot
-      aspect="auto"
-      plotConfig={{}}
-      values={sliceNdarray}
-      domain={[0, 255]}
-      customToolbarChildren={null}
-    />
+    <Box
+      sx={{
+        width: "100%",
+        height: "100%",
+        minHeight: 0,
+        display: "flex",
+      }}
+    >
+      <Box
+        sx={{
+          flex: 1,
+          width: "100%",
+          height: "100%",
+          minHeight: 0,
+          minWidth: 0,
+          display: "flex",
+        }}
+      >
+        <HeatmapPlot
+          aspect={"auto"}
+          plotConfig={{}}
+          values={sliceNdarray}
+          domain={[0, 255]}
+          customToolbarChildren={null}
+        />
+      </Box>
+    </Box>
   );
 }

apps/visr/src/components/tomography/TomographyPlots.tsx

@@ -49,48 +49,60 @@ function TomographyPlots({
       plane={plane}
     />,
   ];
+
   const titles = ["Camera View", "Reconstruction", "Slice View"];
+
   const plots = views.map((view, i) => (
     <Box
       key={i}
       sx={{
+        width: "100%",
+        height: "100%",
+        minHeight: 100,
         display: "flex",
         flexDirection: "column",
+        overflow: "hidden",
         borderRight: 1,
         borderColor: "divider",
         minWidth: 260,
       }}
     >
+      <Typography
+        variant="overline"
+        color="primary"
+        borderBottom={1}
+        borderColor={"divider"}
+      >
+        {titles[i]}
+      </Typography>
       <Box
         sx={{
-          px: 2,
-          py: 1.25,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          borderBottom: 1,
-          borderColor: "divider",
+          flex: 1,
+          minHeight: 0,
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
         }}
       >
-        <Typography variant="overline" color="primary">
-          {titles[i]}
-        </Typography>
+        {view}
       </Box>
-      {view}
     </Box>
   ));
-  console.log(plots[0]);
+
   return (
-    <Box ref={containerRef! as React.RefObject<HTMLDivElement>} color="blue">
+    <Box ref={containerRef! as React.RefObject<HTMLDivElement>}>
       {mounted && (
         <ReactGridLayout
+          key={`${width}`} //re-render the grid on width change so that plots resize correctly 
           layout={layout}
           width={width}
           gridConfig={{
             cols: drawerOpen ? 3 : 3,
             rowHeight: drawerOpen ? 25 : 50,
             margin: [20, 20], //twice the margin of Spectroscopy plots as half the number of rows
           }}
+          autoSize
+          onLayoutChange={() => {}}
         >
           {plots}
         </ReactGridLayout>

apps/visr/src/utils/createArrayFromView.ts

@@ -1,6 +1,7 @@
 import ndarray, { type NdArray } from "ndarray";
 import { assign } from "ndarray-ops";
 
+//copied (and simplified) from h5web: https://github.com/silx-kit/h5web/blob/a8cceed504b8ab57d426319db56b8b8dab309e3f/packages/shared/src/vis-utils.ts#L103
 export default function createArrayFromView<T extends Uint8Array>(
   view: NdArray<T>,
 ): NdArray<T> {