Enhance dynamic height handling for RunDetails components.

Added support for dynamic height calculation in RunDetails and integrated it with ResultGrid to adjust detail panel heights based on content changes. This ensures proper rendering and improves responsiveness of the UI.

frontend/src/components/ResultGrid.tsx

@@ -102,6 +102,8 @@ interface ResultGridProps {
 const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
     const [rows, setRows] = useState<TreeRow[]>([]);
     const [basePath, setBasePath] = useState('');
+    const [detailPanelHeights, setDetailPanelHeights] = useState<{ [key: string]: number }>({}); // Store dynamic heights
+
     const hasProcessingResults = (row: TreeRow): boolean => {
         // You can later replace this placeholder with actual logic.
         // Mocking the logic by returning `true` for demonstration.
@@ -282,19 +284,38 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
         },
     ];
 
+    const handleDetailPanelHeightChange = (rowId: string, height: number) => {
+        // Update the height of the specific detail panel dynamically
+        setDetailPanelHeights((prev) => {
+            if (prev[rowId] !== height) {
+                return { ...prev, [rowId]: height };
+            }
+            return prev;
+        });
+    };
+
     const getDetailPanelContent = (params: any) => {
         if (params.row.type === 'run') {
-            return <RunDetails run={params.row} />;
+            return (
+                <RunDetails
+                    run={params.row}
+                    onHeightChange={(height: number) => handleDetailPanelHeightChange(params.row.id, height)} // Pass callback for dynamic height
+                />
+            );
         }
         return null;
     };
 
     const getDetailPanelHeight = (params: any) => {
-        if (params.row.type === 'run') return 300;
+        if (params.row.type === 'run') {
+            // Use the dynamically calculated height from state
+            return detailPanelHeights[params.row.id] || 600; // Fallback to default height if not yet calculated
+        }
         return 0;
     };
 
 
+
     return (
         <DataGridPremium
             rows={rows}

frontend/src/components/RunDetails.tsx

@@ -1,18 +1,68 @@
-   import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
     Accordion,
     AccordionSummary,
     AccordionDetails,
     Typography,
+    Grid,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import './SampleImage.css';
 
-   const RunDetails: React.FC<RunDetailsProps> = ({ run }) => {
+interface RunDetailsProps {
-       const { beamline_parameters } = run;
+    run: ExperimentParameters;
+    onHeightChange?: (height: number) => void; // Callback to notify the parent about height changes
+}
+
+const RunDetails: React.FC<RunDetailsProps> = ({ run, onHeightChange }) => {
+    const containerRef = useRef<HTMLDivElement | null>(null); // Ref to track component height
+    const [currentHeight, setCurrentHeight] = useState<number>(0);
+
+    const { beamline_parameters, images } = run;
     const { synchrotron, beamline, detector } = beamline_parameters;
 
+    // Calculate and notify the parent about height changes
+    const updateHeight = () => {
+        if (containerRef.current) {
+            const newHeight = containerRef.current.offsetHeight;
+            if (newHeight !== currentHeight) {
+                setCurrentHeight(newHeight);
+                if (onHeightChange) {
+                    onHeightChange(newHeight);
+                }
+            }
+        }
+    };
+
+    useEffect(() => {
+        updateHeight(); // Update height on initial render
+    }, []);
+
+    useEffect(() => {
+        // Update height whenever the component content changes
+        const observer = new ResizeObserver(updateHeight);
+        if (containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [containerRef]);
+
     return (
-           <div style={{ padding: '16px', border: '1px solid #ccc', borderRadius: '4px' }}>
+        <div
+            ref={containerRef} // Attach the ref to the main container
+            style={{
+                display: 'flex',
+                gap: '16px',
+                padding: '16px',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                alignItems: 'flex-start',
+            }}
+        >
+            {/* Main Details Section */}
+            <div style={{ flexGrow: 1 }}>
                 <Typography variant="h6" gutterBottom>
                     Run {run.run_number} Details
                 </Typography>
@@ -20,13 +70,16 @@
                     Beamline: {beamline} | Synchrotron: {synchrotron}
                 </Typography>
 
+                {/* Detector Details Accordion */}
                 <Accordion>
                     <AccordionSummary
                         expandIcon={<ExpandMoreIcon />}
                         aria-controls="detector-content"
                         id="detector-header"
                     >
-                       <Typography><strong>Detector Details</strong></Typography>
+                        <Typography>
+                            <strong>Detector Details</strong>
+                        </Typography>
                     </AccordionSummary>
                     <AccordionDetails>
                         <Typography>Manufacturer: {detector?.manufacturer || 'N/A'}</Typography>
@@ -38,13 +91,16 @@
                     </AccordionDetails>
                 </Accordion>
 
+                {/* Beamline Details Accordion */}
                 <Accordion>
                     <AccordionSummary
                         expandIcon={<ExpandMoreIcon />}
                         aria-controls="beamline-content"
                         id="beamline-header"
                     >
-                   <Typography><strong>Beamline Details</strong></Typography>
+                        <Typography>
+                            <strong>Beamline Details</strong>
+                        </Typography>
                     </AccordionSummary>
                     <AccordionDetails>
                         <Typography>Synchrotron: {beamline_parameters?.synchrotron || 'N/A'}</Typography>
@@ -58,61 +114,60 @@
                     </AccordionDetails>
                 </Accordion>
 
+                {/* Beam Characteristics Accordion */}
                 <Accordion>
                     <AccordionSummary
                         expandIcon={<ExpandMoreIcon />}
                         aria-controls="beam-content"
                         id="beam-header"
                     >
-                       <Typography><strong>Beam characteristics</strong></Typography>
+                        <Typography>
+                            <strong>Beam Characteristics</strong>
+                        </Typography>
                     </AccordionSummary>
                     <AccordionDetails>
                         <Typography>Wavelength: {beamline_parameters?.wavelength || 'N/A'}</Typography>
                         <Typography>Energy: {beamline_parameters?.energy || 'N/A'}</Typography>
                         <Typography>Transmission: {beamline_parameters?.transmission || 'N/A'}</Typography>
-                       <Typography>Beam focus (µm): vertical: {beamline_parameters?.beamSizeHeight || 'N/A'} , horizontal: {beamline_parameters?.beamSizeWidth || 'N/A'}</Typography>
+                        <Typography>
+                            Beam focus (µm): vertical: {beamline_parameters?.beamSizeHeight || 'N/A'}, horizontal:{' '}
+                            {beamline_parameters?.beamSizeWidth || 'N/A'}
+                        </Typography>
                         <Typography>Flux at sample (ph/s): {beamline_parameters?.beamlineFluxAtSample_ph_s || 'N/A'}</Typography>
                     </AccordionDetails>
                 </Accordion>
+            </div>
 
-               <Accordion>
+            {/* Image Section */}
-                   <AccordionSummary
+            <div style={{ width: '900px' }}>
-                       expandIcon={<ExpandMoreIcon />}
+                <Typography variant="h6" gutterBottom>
-                       aria-controls="sample-content"
+                    Associated Images
-                       id="sample-header"
+                </Typography>
-                   >
+                {images && images.length > 0 ? (
-                       <Typography><strong>Sample environment</strong></Typography>
+                    <Grid container spacing={2}>
-                   </AccordionSummary>
+                        {images.map((img) => (
-                   <AccordionDetails>
+                            <Grid item xs={6} key={img.id}>
-                       <Typography>Cryojet temperature (K): {beamline_parameters?.cryojetTemperature_K || 'N/A'}</Typography>
+                                <div className="image-container">
-                       <Typography>Humidifier temperature (K): {beamline_parameters?.humidifierTemperature_K || 'N/A'}</Typography>
-                       <Typography>Humidifier humidity (%): {beamline_parameters?.humidifierHumidity || 'N/A'}</Typography>
-                   </AccordionDetails>
-               </Accordion>
-
-               <Accordion>
-                   <AccordionSummary
-                       expandIcon={<ExpandMoreIcon />}
-                       aria-controls="images-content"
-                       id="images-header"
-                   >
-                       <Typography><strong>Associated Images</strong></Typography>
-                   </AccordionSummary>
-                   <AccordionDetails>
-                       {run.images?.map((img) => (
                                     <img
-                               key={img.id}
                                         src={img.filepath}
-                               alt={img.comment || 'Sample Image'}
+                                        alt={img.comment || 'Image'}
+                                        className="zoom-image"
                                         style={{
                                             width: '100%',
-                                   border: '1px solid #ccc',
+                                            maxWidth: '100%',
-                                   marginTop: 8,
+                                            borderRadius: '4px',
                                         }}
                                     />
-                       )) || 'No Images Available'}
+                                </div>
-                   </AccordionDetails>
+                            </Grid>
-               </Accordion>
+                        ))}
+                    </Grid>
+                ) : (
+                    <Typography variant="body2" color="textSecondary">
+                        No images available.
+                    </Typography>
+                )}
+            </div>
         </div>
     );
 };