Refactor RunDetails and integrate with ResultGrid

Reworked `RunDetails` to enhance details presentation and added new UI components like images and processing results. Incorporated the `RunDetails` expansion panel into `ResultGrid` for better user interaction and streamlined grid functionalities.

frontend/src/components/ResultGrid.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { DataGridPremium, GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
+import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
-import IconButton from '@mui/material/IconButton';
+import RunDetails from './RunDetails';
-import InfoIcon from '@mui/icons-material/Info';
-import { OpenAPI, SamplesService } from '../../openapi';
 import './SampleImage.css';
+import { OpenAPI, SamplesService } from '../../openapi';
 
 // Extend your image info interface if needed.
 interface ImageInfo {
@@ -97,8 +96,13 @@ interface ResultGridProps {
     activePgroup: string;
 }
 
-// Helper function to safely get the number of images.
+
-const getNumberOfImages = (run: ExperimentParameters): number => {
+const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
+    const [rows, setRows] = useState<TreeRow[]>([]);
+    const [basePath, setBasePath] = useState('');
+
+    // Helper function to safely get the number of images.
+    const getNumberOfImages = (run: ExperimentParameters): number => {
         const params = run.beamline_parameters;
         if (params.rotation && params.rotation.numberOfImages != null) {
             return params.rotation.numberOfImages;
@@ -106,29 +110,30 @@ const getNumberOfImages = (run: ExperimentParameters): number => {
             return params.gridScan.numberOfImages;
         }
         return 0;
-};
+    };
 
-// Helper function to determine the experiment type.
+    // Helper function to determine the experiment type.
-const getExperimentType = (run: ExperimentParameters): string => {
+    const getExperimentType = (run: ExperimentParameters): string => {
         const params = run.beamline_parameters;
-    if (params.rotation && params.rotation.numberOfImages != null && params.rotation.omegaStep != null) {
+        if (
+            params.rotation &&
+            params.rotation.numberOfImages != null &&
+            params.rotation.omegaStep != null
+        ) {
             const numImages = params.rotation.numberOfImages;
             const omegaStep = params.rotation.omegaStep;
             if ([1, 2, 4].includes(numImages) && omegaStep === 90) {
-            return "Characterization";
+                return 'Characterization';
             }
-        return "Rotation";
+            return 'Rotation';
         } else if (params.gridScan) {
-        return "Grid Scan";
+            return 'Grid Scan';
         }
-    return "Rotation";
+        return 'Rotation';
-};
+    };
-
-const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
-    const [rows, setRows] = useState<TreeRow[]>([]);
-    const [basePath, setBasePath] = useState('');
 
     useEffect(() => {
+        // Set OpenAPI.BASE depending on environment mode
         const mode = import.meta.env.MODE;
         OpenAPI.BASE =
             mode === 'test'
@@ -141,22 +146,16 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
             console.error('OpenAPI.BASE is not set. Falling back to a default value.');
             OpenAPI.BASE = 'https://default-url.com';
         }
-
-        console.log('Environment Mode:', mode);
-        console.log('Resolved OpenAPI.BASE:', OpenAPI.BASE);
-
         setBasePath(`${OpenAPI.BASE}/`);
     }, []);
 
     useEffect(() => {
-        console.log('Fetching sample results for active_pgroup:', activePgroup);
+        // Fetch sample details and construct rows
         SamplesService.getSampleResultsSamplesResultsGet(activePgroup)
             .then((response: SampleResult[]) => {
-                console.log('Response received:', response);
                 const treeRows: TreeRow[] = [];
 
                 response.forEach((sample) => {
-                    // Add the sample row.
                     const sampleRow: TreeRow = {
                         id: `sample-${sample.sample_id}`,
                         hierarchy: [sample.sample_id],
@@ -169,7 +168,6 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
                     };
                     treeRows.push(sampleRow);
 
-                    // Add experiment run rows.
                     if (sample.experiment_runs) {
                         sample.experiment_runs.forEach((run) => {
                             const experimentType = getExperimentType(run);
@@ -197,25 +195,22 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
             });
     }, [activePgroup]);
 
-    // Define the grid columns, including the new processing results column.
+    // Define the grid columns
     const columns: GridColDef[] = [
         {
             field: 'sample_name',
             headerName: 'Sample Name',
             width: 200,
-            renderCell: (params) => (params.row.type === 'sample' ? params.value : null),
         },
         {
             field: 'puck_name',
             headerName: 'Puck Name',
             width: 150,
-            renderCell: (params) => (params.row.type === 'sample' ? params.value : null),
         },
         {
             field: 'dewar_name',
             headerName: 'Dewar Name',
             width: 150,
-            renderCell: (params) => (params.row.type === 'sample' ? params.value : null),
         },
         {
             field: 'experimentType',
@@ -229,88 +224,78 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
             width: 150,
             renderCell: (params) => (params.row.type === 'run' ? params.value : null),
         },
-        {
-            field: 'processingResults',
-            headerName: 'Processing Results',
-            width: 180,
-            renderCell: (params) => {
-                if (params.row.type === 'run') {
-                    return (
-                        <IconButton
-                            aria-label="processing results placeholder"
-                            onClick={() => {
-                                // Placeholder for processing results details.
-                                console.log('Clicked processing details for run', params.row.run_number);
-                            }}
-                        >
-                            <InfoIcon />
-                        </IconButton>
-                    );
-                }
-                return null;
-            },
-        },
         {
             field: 'images',
             headerName: 'Images',
             width: 300,
             renderCell: (params) => {
-                const imageList: ImageInfo[] = params.row.images;
+                const images = params.row.images;
-
+                if (images && images.length) {
-                if (!imageList || imageList.length === 0) {
-                    return null;
-                }
-
                     return (
-                    <div style={{ display: 'flex', gap: '10px' }}>
+                        <div style={{ display: 'flex', gap: '8px' }}>
-                        {imageList.map((img) => {
+                            {images.map((image: ImageInfo) => (
-                            const url = `${basePath}${img.filepath}`;
-                            return (
-                                <div key={img.id} style={{ position: 'relative' }}>
                                 <img
-                                        src={url}
+                                    key={image.id}
-                                        alt={img.comment || 'sample'}
+                                    src={`${basePath}${image.filepath}`}
-                                        className="zoom-image"
+                                    alt={image.comment || `Image ${image.id}`}
                                     style={{
-                                            width: 40,
+                                        height: 50,
-                                            height: 40,
+                                        width: 50,
-                                            borderRadius: 4,
+                                        objectFit: 'cover',
-                                            cursor: 'pointer',
+                                        borderRadius: '4px',
                                     }}
                                 />
+                            ))}
                         </div>
                     );
-                        })}
+                }
-                    </div>
+                return null;
-                );
             },
         },
     ];
 
+    const getDetailPanelContent = (params: any) => {
+        if (params.row.type === 'run') {
+            return <RunDetails run={params.row} />;
+        }
+        return null;
+    };
+
+    const getDetailPanelHeight = (params: any) => {
+        if (params.row.type === 'run') return 300;
+        return 0;
+    };
 
 
     return (
-        <div style={{ height: 600, width: '100%' }}>
         <DataGridPremium
             rows={rows}
             columns={columns}
-                treeData
-                getTreeDataPath={(row: TreeRow) => row.hierarchy}
-                defaultGroupingExpansionDepth={-1}
             getRowId={(row) => row.id}
+            autoHeight
+            treeData
+            getTreeDataPath={(row: TreeRow) => {
+                if (row.type === 'run') {
+                    // Include sample_id to make the path globally unique
+                    return [`Sample-${row.sample_id}`, `Run-${row.run_number}`];
+                }
+                // If it's a sample row, it will be at the root
+                return [`Sample-${row.sample_id}`];
+            }}
+
+            defaultGroupingExpansionDepth={-1}
+            disableColumnMenu
+            getDetailPanelContent={getDetailPanelContent}
+            getDetailPanelHeight={getDetailPanelHeight}
             sx={{
                 '& .MuiDataGrid-cell': {
                     overflow: 'visible',
                 },
-                    '& .MuiDataGrid-rendererContainer': {
-                        overflow: 'visible',
-                        position: 'relative',
-                    },
             }}
         />
 
-        </div>
     );
 };
 
 export default ResultGrid;
+

frontend/src/components/RunDetails.tsx

@@ -1,6 +1,14 @@
-import {SimpleTreeView, TreeItem} from "@mui/x-tree-view";
+import React from 'react';
-import React from "react";
+import {
-
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    IconButton,
+    Typography,
+    Grid,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { SimpleTreeView, TreeItem } from '@mui/x-tree-view';
 
 interface ExperimentParameters {
     id: number;
@@ -12,25 +20,47 @@ interface ExperimentParameters {
             manufacturer: string;
             model: string;
             type: string;
-            serial_number: string;
+            serialNumber: string;
-            detector_distance_mm: number;
+            detectorDistance_mm: number;
-            beam_center_x_px: number;
+            beamCenterX_px: number;
-            beam_center_y_px: number;
+            beamCenterY_px: number;
-            pixel_size_x_um: number;
+            pixelSizeX_um: number;
-            pixel_size_y_um: number;
+            pixelSizeY_um: number;
-            number_of_images: number;
-            exposure_time_s: number;
         };
-        // Add additional fields if needed.
+        // Include additional parameters as needed.
     };
+    // Optionally, add fields for images and processing results.
+    images?: Array<{
+        id: number;
+        filepath: string;
+        comment?: string;
+    }>;
+    processingResults?: any;
 }
 
-<SimpleTreeView
+interface RunDetailsProps {
+    run: ExperimentParameters;
+    onClose: () => void;
+}
+
+const RunDetails: React.FC<RunDetailsProps> = ({ run }) => {
+    const { beamline_parameters } = run;
+    const { synchrotron, beamline, detector } = beamline_parameters;
+
+    return (
+        <div style={{ padding: '16px', border: '1px solid #ccc', borderRadius: '4px' }}>
+            <Typography variant="h6" gutterBottom>
+                Run {run.run_number} Details
+            </Typography>
+            <Typography variant="subtitle1" gutterBottom>
+                Beamline: {beamline} | Synchrotron: {synchrotron}
+            </Typography>
+
+            <SimpleTreeView
                 defaultCollapseIcon="▾"
                 defaultExpandIcon="▸"
                 sx={{ fontSize: '0.875rem' }}
->
+            >
-    <TreeItem nodeId="detector-group" label={<strong>Detector Details</strong>}>
                 <TreeItem nodeId="detector-group" label={<strong>Detector Details</strong>}>
                     <TreeItem
                         nodeId="detector-manufacturer"
@@ -46,17 +76,17 @@ interface ExperimentParameters {
                     />
                     <TreeItem
                         nodeId="detector-serial"
-                label={`Serial Number: ${detector?.serial_number || 'N/A'}`}
+                        label={`Serial Number: ${detector?.serialNumber || 'N/A'}`}
                     />
                     <TreeItem
                         nodeId="detector-distance"
-                label={`Distance (mm): ${detector?.detector_distance_mm ?? 'N/A'}`}
+                        label={`Distance (mm): ${detector?.detectorDistance_mm ?? 'N/A'}`}
                     />
                     <TreeItem
                         nodeId="beam-center"
                         label={
                             detector
-                        ? `Beam Center: x:${detector.beam_center_x_px}, y:${detector.beam_center_y_px}`
+                                ? `Beam Center: x: ${detector.beamCenterX_px}, y: ${detector.beamCenterY_px}`
                                 : 'Beam Center: N/A'
                         }
                     />
@@ -64,21 +94,46 @@ interface ExperimentParameters {
                         nodeId="pixel-size"
                         label={
                             detector
-                        ? `Pixel Size (µm): x:${detector.pixel_size_x_um}, y:${detector.pixel_size_y_um}`
+                                ? `Pixel Size (µm): x: ${detector.pixelSizeX_um}, y: ${detector.pixelSizeY_um}`
                                 : 'Pixel Size: N/A'
                         }
                     />
-            <TreeItem
-                nodeId="img-count"
-                label={`Number of Images: ${detector?.number_of_images ?? 'N/A'}`}
-            />
-            <TreeItem
-                nodeId="exposure-time"
-                label={`Exposure Time (s): ${detector?.exposure_time_s ?? 'N/A'}`}
-            />
                 </TreeItem>
+            </SimpleTreeView>
 
+            <Typography variant="h6" sx={{ mt: 2 }}>
+                Associated Images
+            </Typography>
+            {run.images && run.images.length > 0 ? (
+                <Grid container spacing={2} sx={{ mt: 1 }}>
+                    {run.images.map((img) => (
+                        <Grid item xs={4} key={img.id}>
+                            <img
+                                src={img.filepath}
+                                alt={img.comment || 'Sample Image'}
+                                style={{ width: '100%', border: '1px solid #ccc' }}
+                            />
+                        </Grid>
+                    ))}
+                </Grid>
+            ) : (
+                <Typography>No images available.</Typography>
+            )}
 
+            <Typography variant="h6" sx={{ mt: 2 }}>
+                Processing Results
+            </Typography>
+            {run.processingResults ? (
+                <Typography variant="body2" sx={{ mt: 1 }}>
+                    {JSON.stringify(run.processingResults, null, 2)}
+                </Typography>
+            ) : (
+                <Typography variant="body2" sx={{ mt: 1 }}>
+                    Processing details and results go here.
+                </Typography>
+            )}
+        </div>
+    );
+};
 
-    </TreeItem>
+export default RunDetails;
-</SimpleTreeView>