From 22bba1d7d67efaf11f74556ce09e5a3497865099 Mon Sep 17 00:00:00 2001
From: Abigail Yates <abigail.yates@diamond.ac.uk>
Date: Wed, 19 Aug 2026 15:42:10 +0000
Subject: [PATCH 1/3] wip - sorting dynamic grid height

---
 .../components/tomography/TomographyPlots.tsx | 50 ++++++++++++++++---
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/apps/visr/src/components/tomography/TomographyPlots.tsx b/apps/visr/src/components/tomography/TomographyPlots.tsx
index d0d33376..01b6303c 100644
--- a/apps/visr/src/components/tomography/TomographyPlots.tsx
+++ b/apps/visr/src/components/tomography/TomographyPlots.tsx
@@ -4,6 +4,7 @@ import VolumeViewer from "./VolumeViewer";
 import SliceViewer from "./SliceViewer";
 import { Plane } from "./PlaneEnum";
 import { ReactGridLayout, useContainerWidth } from "react-grid-layout";
+import { useLayoutEffect, useState } from "react";
 
 interface Props {
   volumeData: Uint8Array;
@@ -25,6 +26,33 @@ function TomographyPlots({
   const { width, containerRef, mounted } = useContainerWidth();
   const h = 10;
   const w = 1;
+  const verticalMargin = 20;
+  const minimumRowHeight = 10;
+  const minimumGridHeight = minimumRowHeight * h + verticalMargin * (h - 1);
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      setContainerHeight(entry.contentRect.height);
+    });
+    resizeObserver.observe(container);
+
+    return () => resizeObserver.disconnect();
+  }, [containerRef]);
+
+  const rowHeight =
+    containerHeight > 0
+      ? Math.max(
+          (containerHeight - verticalMargin * (h - 1)) / h,
+          minimumRowHeight,
+        )
+      : drawerOpen
+        ? minimumRowHeight
+        : 50;
+  const gridHeight = rowHeight * h + verticalMargin * (h - 1);
 
   const layout = [
     { i: "0", x: 0, y: 0, w: w, h: h, static: true },
@@ -52,24 +80,34 @@ function TomographyPlots({
     <Box
       key={i}
       sx={{
-        flex: 1,
-        minWidth: 260,
+        // flex: 1,
+        // minWidth: 260,
+        maxHeight: gridHeight,
       }}
     >
       {view}
     </Box>
   ));
-  console.log(plots[0]);
+
   return (
-    <Box ref={containerRef! as React.RefObject<HTMLDivElement>} color="blue">
+    <Box
+      ref={containerRef! as React.RefObject<HTMLDivElement>}
+      sx={{
+        flex: "1 1 0",
+        height: gridHeight,
+        minHeight: minimumGridHeight,
+        overflow: "visible",
+      }}
+    >
       {mounted && (
         <ReactGridLayout
           layout={layout}
           width={width}
+          style={{ height: gridHeight }}
           gridConfig={{
             cols: drawerOpen ? 3 : 3,
-            rowHeight: drawerOpen ? 25 : 50,
-            margin: [20, 20], //twice the margin of Spectroscopy plots as half the number of rows
+            rowHeight: rowHeight,
+            margin: [verticalMargin, verticalMargin],
           }}
         >
           {plots}

From 15d6e897fea6d970dfc2b27262ab03700ab79fbb Mon Sep 17 00:00:00 2001
From: Abigail Yates <abigail.yates@diamond.ac.uk>
Date: Thu, 20 Aug 2026 13:55:01 +0000
Subject: [PATCH 2/3] fix overlap issue by removing margin

---
 .../src/components/tomography/TomographyPlots.tsx  | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/apps/visr/src/components/tomography/TomographyPlots.tsx b/apps/visr/src/components/tomography/TomographyPlots.tsx
index 01b6303c..ddf0398b 100644
--- a/apps/visr/src/components/tomography/TomographyPlots.tsx
+++ b/apps/visr/src/components/tomography/TomographyPlots.tsx
@@ -26,9 +26,8 @@ function TomographyPlots({
   const { width, containerRef, mounted } = useContainerWidth();
   const h = 10;
   const w = 1;
-  const verticalMargin = 20;
-  const minimumRowHeight = 10;
-  const minimumGridHeight = minimumRowHeight * h + verticalMargin * (h - 1);
+  const minimumRowHeight = 20;
+  const minimumGridHeight = minimumRowHeight * h;
   const [containerHeight, setContainerHeight] = useState(0);
 
   useLayoutEffect(() => {
@@ -45,14 +44,11 @@ function TomographyPlots({
 
   const rowHeight =
     containerHeight > 0
-      ? Math.max(
-          (containerHeight - verticalMargin * (h - 1)) / h,
-          minimumRowHeight,
-        )
+      ? Math.max(containerHeight / h, minimumRowHeight)
       : drawerOpen
         ? minimumRowHeight
         : 50;
-  const gridHeight = rowHeight * h + verticalMargin * (h - 1);
+  const gridHeight = rowHeight * h;
 
   const layout = [
     { i: "0", x: 0, y: 0, w: w, h: h, static: true },
@@ -107,7 +103,7 @@ function TomographyPlots({
           gridConfig={{
             cols: drawerOpen ? 3 : 3,
             rowHeight: rowHeight,
-            margin: [verticalMargin, verticalMargin],
+            margin: [0, 0],
           }}
         >
           {plots}

From 596a01c5a959ccdac0881ba0e54987dd2fadaa31 Mon Sep 17 00:00:00 2001
From: Abigail Yates <abigail.yates@diamond.ac.uk>
Date: Thu, 20 Aug 2026 15:48:06 +0000
Subject: [PATCH 3/3] get slice viewer to fill height of box

---
 apps/visr/src/components/tomography/SliceViewer.tsx   | 11 +++++++----
 .../src/components/tomography/TomographyPlots.tsx     |  7 +++++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/visr/src/components/tomography/SliceViewer.tsx b/apps/visr/src/components/tomography/SliceViewer.tsx
index 132ad5fa..f4823fb2 100644
--- a/apps/visr/src/components/tomography/SliceViewer.tsx
+++ b/apps/visr/src/components/tomography/SliceViewer.tsx
@@ -63,20 +63,23 @@ export default function SliceViewer({
           Slice View
         </Typography>
       </Box>
-      <div
-        style={{
+      <Box
+        sx={{
           flex: 1,
+          display: "flex",
+          minHeight: 0,
           justifyContent: "center",
+          overflow: "hidden",
         }}
       >
         <HeatmapPlot
-          aspect="auto"
+          aspect="equal"
           plotConfig={{}}
           values={sliceNdarray}
           domain={[0, 255]}
           customToolbarChildren={null}
         />
-      </div>
+      </Box>
     </Box>
   );
 }
diff --git a/apps/visr/src/components/tomography/TomographyPlots.tsx b/apps/visr/src/components/tomography/TomographyPlots.tsx
index ddf0398b..b0d59f8f 100644
--- a/apps/visr/src/components/tomography/TomographyPlots.tsx
+++ b/apps/visr/src/components/tomography/TomographyPlots.tsx
@@ -76,8 +76,9 @@ function TomographyPlots({
     <Box
       key={i}
       sx={{
-        // flex: 1,
-        // minWidth: 260,
+        width: "100%",
+        height: "100%",
+        minWidth: 260,
         maxHeight: gridHeight,
       }}
     >
@@ -90,6 +91,8 @@ function TomographyPlots({
       ref={containerRef! as React.RefObject<HTMLDivElement>}
       sx={{
         flex: "1 1 0",
+        width: "100%",
+        minWidth: 0,
         height: gridHeight,
         minHeight: minimumGridHeight,
         overflow: "visible",