From db08eabfadc70fd730e1aa4de898f7eaf53887a0 Mon Sep 17 00:00:00 2001
From: Abigail Yates <abigail.yates@diamond.ac.uk>
Date: Tue, 18 Aug 2026 10:51:32 +0000
Subject: [PATCH 1/3] make plots fill their parent box and fix tomography
 resizing issues

---
 .../spectroscopy/SpectroscopyPlots.tsx        | 14 +++++--
 .../src/components/tomography/SliceViewer.tsx | 34 +++++++++++++----
 .../components/tomography/TomographyPlots.tsx | 38 ++++++++++++-------
 apps/visr/src/utils/createArrayFromView.ts    |  1 +
 4 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx b/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx
index 2a2429ce..c59920c7 100644
--- a/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx
+++ b/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx
@@ -116,13 +116,16 @@ function SpectroscopyPlots({
         <Box
           key={i}
           sx={{
-            flex: 1,
-            justifyContent: "center",
+            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
             key={i}
-            aspect={plotAspectRatio}
+            aspect={"equal"}
             plotConfig={{ title: key + " channel" }}
             customToolbarChildren={null}
             values={channels[key] ?? EMPTY_NDT}
@@ -134,7 +137,10 @@ function SpectroscopyPlots({
   );
 
   return (
-    <Box ref={containerRef! as React.RefObject<HTMLDivElement>}>
+    <Box
+      ref={containerRef! as React.RefObject<HTMLDivElement>}
+      sx={{ display: "flex" }}
+    >
       {mounted && (
         <ReactGridLayout
           layout={layout}
diff --git a/apps/visr/src/components/tomography/SliceViewer.tsx b/apps/visr/src/components/tomography/SliceViewer.tsx
index c3b8def6..4fc053b3 100644
--- a/apps/visr/src/components/tomography/SliceViewer.tsx
+++ b/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="equal"
+          plotConfig={{}}
+          values={sliceNdarray}
+          domain={[0, 255]}
+          customToolbarChildren={null}
+        />
+      </Box>
+    </Box>
   );
 }
diff --git a/apps/visr/src/components/tomography/TomographyPlots.tsx b/apps/visr/src/components/tomography/TomographyPlots.tsx
index 4ce3026c..7605eb59 100644
--- a/apps/visr/src/components/tomography/TomographyPlots.tsx
+++ b/apps/visr/src/components/tomography/TomographyPlots.tsx
@@ -49,41 +49,51 @@ 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}`}
           layout={layout}
           width={width}
           gridConfig={{
@@ -91,6 +101,8 @@ function TomographyPlots({
             rowHeight: drawerOpen ? 25 : 50,
             margin: [20, 20], //twice the margin of Spectroscopy plots as half the number of rows
           }}
+          autoSize
+          onLayoutChange={() => {}}
         >
           {plots}
         </ReactGridLayout>
diff --git a/apps/visr/src/utils/createArrayFromView.ts b/apps/visr/src/utils/createArrayFromView.ts
index 3266f182..0fc5c9b2 100644
--- a/apps/visr/src/utils/createArrayFromView.ts
+++ b/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> {

From 8a28eedda441a0e72729bfb2d0d2aa482a2a836b Mon Sep 17 00:00:00 2001
From: Abigail Yates <abigail.yates@diamond.ac.uk>
Date: Tue, 18 Aug 2026 14:25:22 +0100
Subject: [PATCH 2/3] fix spectroscopy resizing

---
 .../src/components/spectroscopy/SpectroscopyPlots.tsx    | 9 +++++----
 apps/visr/src/components/tomography/SliceViewer.tsx      | 2 +-
 apps/visr/src/components/tomography/TomographyPlots.tsx  | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx b/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx
index c59920c7..011873da 100644
--- a/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx
+++ b/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx
@@ -116,16 +116,16 @@ function SpectroscopyPlots({
         <Box
           key={i}
           sx={{
-            display: "grid", //this makes the plots fill the parent box
-            // display: "flex", //this fixes the centering issue of the plots when drawer is closed
+            //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",
+            justifyContent: "center",
             minWidth: 260,
           }}
         >
           <ImagePlot
             key={i}
-            aspect={"equal"}
+            aspect={"auto"}
             plotConfig={{ title: key + " channel" }}
             customToolbarChildren={null}
             values={channels[key] ?? EMPTY_NDT}
@@ -143,6 +143,7 @@ function SpectroscopyPlots({
     >
       {mounted && (
         <ReactGridLayout
+          key={width} //re-render the grid on width change so that plots resize correctly 
           layout={layout}
           width={width}
           gridConfig={{
diff --git a/apps/visr/src/components/tomography/SliceViewer.tsx b/apps/visr/src/components/tomography/SliceViewer.tsx
index 4fc053b3..f48344af 100644
--- a/apps/visr/src/components/tomography/SliceViewer.tsx
+++ b/apps/visr/src/components/tomography/SliceViewer.tsx
@@ -58,7 +58,7 @@ export default function SliceViewer({
         }}
       >
         <HeatmapPlot
-          aspect="equal"
+          aspect={"auto"}
           plotConfig={{}}
           values={sliceNdarray}
           domain={[0, 255]}
diff --git a/apps/visr/src/components/tomography/TomographyPlots.tsx b/apps/visr/src/components/tomography/TomographyPlots.tsx
index 7605eb59..0ffb105e 100644
--- a/apps/visr/src/components/tomography/TomographyPlots.tsx
+++ b/apps/visr/src/components/tomography/TomographyPlots.tsx
@@ -93,7 +93,7 @@ function TomographyPlots({
     <Box ref={containerRef! as React.RefObject<HTMLDivElement>}>
       {mounted && (
         <ReactGridLayout
-          key={`${width}`}
+          key={`${width}`} //re-render the grid on width change so that plots resize correctly 
           layout={layout}
           width={width}
           gridConfig={{

From 29831e5deead1803ec179e734c953c9d6ea212e6 Mon Sep 17 00:00:00 2001
From: Abigail Yates <abigail.yates@diamond.ac.uk>
Date: Tue, 18 Aug 2026 13:30:29 +0000
Subject: [PATCH 3/3] allow plotAspectRatio to be any aspect accepted by
 Davidia

---
 apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx | 6 +++---
 apps/visr/src/components/spectroscopy/SpectroscopyView.tsx  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx b/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx
index 011873da..0841b358 100644
--- a/apps/visr/src/components/spectroscopy/SpectroscopyPlots.tsx
+++ b/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({
@@ -125,7 +125,7 @@ function SpectroscopyPlots({
         >
           <ImagePlot
             key={i}
-            aspect={"auto"}
+            aspect={plotAspectRatio}
             plotConfig={{ title: key + " channel" }}
             customToolbarChildren={null}
             values={channels[key] ?? EMPTY_NDT}
@@ -143,7 +143,7 @@ function SpectroscopyPlots({
     >
       {mounted && (
         <ReactGridLayout
-          key={width} //re-render the grid on width change so that plots resize correctly 
+          key={width} //re-render the grid on width change so that plots resize correctly
           layout={layout}
           width={width}
           gridConfig={{
diff --git a/apps/visr/src/components/spectroscopy/SpectroscopyView.tsx b/apps/visr/src/components/spectroscopy/SpectroscopyView.tsx
index eed9ce36..4aab0627 100644
--- a/apps/visr/src/components/spectroscopy/SpectroscopyView.tsx
+++ b/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