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.
This commit is contained in:
GotthardG
parent
fff3e9f884
commit
75998a1d22
@ -1,9 +1,8 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { DataGridPremium, GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import { OpenAPI, SamplesService } from '../../openapi';
|
||||
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
|
||||
import RunDetails from './RunDetails';
|
||||
import './SampleImage.css';
|
||||
import { OpenAPI, SamplesService } from '../../openapi';
|
||||
|
||||
// Extend your image info interface if needed.
|
||||
interface ImageInfo {
|
||||
@ -97,38 +96,44 @@ interface ResultGridProps {
|
||||
activePgroup: string;
|
||||
}
|
||||
|
||||
// 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;
|
||||
} else if (params.gridScan && params.gridScan.numberOfImages != null) {
|
||||
return params.gridScan.numberOfImages;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
// Helper function to determine the experiment type.
|
||||
const getExperimentType = (run: ExperimentParameters): string => {
|
||||
const params = run.beamline_parameters;
|
||||
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 "Rotation";
|
||||
} else if (params.gridScan) {
|
||||
return "Grid Scan";
|
||||
}
|
||||
return "Rotation";
|
||||
};
|
||||
|
||||
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;
|
||||
} else if (params.gridScan && params.gridScan.numberOfImages != null) {
|
||||
return params.gridScan.numberOfImages;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
// Helper function to determine the experiment type.
|
||||
const getExperimentType = (run: ExperimentParameters): string => {
|
||||
const params = run.beamline_parameters;
|
||||
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 'Rotation';
|
||||
} else if (params.gridScan) {
|
||||
return 'Grid Scan';
|
||||
}
|
||||
return 'Rotation';
|
||||
};
|
||||
|
||||
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',
|
||||
@ -230,87 +225,77 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
|
||||
renderCell: (params) => (params.row.type === 'run' ? params.value : null),
|
||||
},
|
||||
{
|
||||
field: 'processingResults',
|
||||
headerName: 'Processing Results',
|
||||
width: 180,
|
||||
field: 'images',
|
||||
headerName: 'Images',
|
||||
width: 300,
|
||||
renderCell: (params) => {
|
||||
if (params.row.type === 'run') {
|
||||
const images = params.row.images;
|
||||
if (images && images.length) {
|
||||
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>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
{images.map((image: ImageInfo) => (
|
||||
<img
|
||||
key={image.id}
|
||||
src={`${basePath}${image.filepath}`}
|
||||
alt={image.comment || `Image ${image.id}`}
|
||||
style={{
|
||||
height: 50,
|
||||
width: 50,
|
||||
objectFit: 'cover',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'images',
|
||||
headerName: 'Images',
|
||||
width: 300,
|
||||
renderCell: (params) => {
|
||||
const imageList: ImageInfo[] = params.row.images;
|
||||
|
||||
if (!imageList || imageList.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
{imageList.map((img) => {
|
||||
const url = `${basePath}${img.filepath}`;
|
||||
return (
|
||||
<div key={img.id} style={{ position: 'relative' }}>
|
||||
<img
|
||||
src={url}
|
||||
alt={img.comment || 'sample'}
|
||||
className="zoom-image"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
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}
|
||||
sx={{
|
||||
'& .MuiDataGrid-cell': {
|
||||
overflow: 'visible',
|
||||
},
|
||||
'& .MuiDataGrid-rendererContainer': {
|
||||
overflow: 'visible',
|
||||
position: 'relative',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<DataGridPremium
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
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',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResultGrid;
|
||||
|
||||
|
||||
@ -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,73 +20,120 @@ interface ExperimentParameters {
|
||||
manufacturer: string;
|
||||
model: string;
|
||||
type: string;
|
||||
serial_number: string;
|
||||
detector_distance_mm: number;
|
||||
beam_center_x_px: number;
|
||||
beam_center_y_px: number;
|
||||
pixel_size_x_um: number;
|
||||
pixel_size_y_um: number;
|
||||
number_of_images: number;
|
||||
exposure_time_s: number;
|
||||
serialNumber: string;
|
||||
detectorDistance_mm: number;
|
||||
beamCenterX_px: number;
|
||||
beamCenterY_px: number;
|
||||
pixelSizeX_um: number;
|
||||
pixelSizeY_um: 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
|
||||
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"
|
||||
label={`Manufacturer: ${detector?.manufacturer || 'N/A'}`}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="detector-model"
|
||||
label={`Model: ${detector?.model || 'N/A'}`}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="detector-type"
|
||||
label={`Type: ${detector?.type || 'N/A'}`}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="detector-serial"
|
||||
label={`Serial Number: ${detector?.serial_number || 'N/A'}`}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="detector-distance"
|
||||
label={`Distance (mm): ${detector?.detector_distance_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: N/A'
|
||||
}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="pixel-size"
|
||||
label={
|
||||
detector
|
||||
? `Pixel Size (µm): x:${detector.pixel_size_x_um}, y:${detector.pixel_size_y_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>
|
||||
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>
|
||||
|
||||
</TreeItem>
|
||||
</SimpleTreeView>
|
||||
<SimpleTreeView
|
||||
defaultCollapseIcon="▾"
|
||||
defaultExpandIcon="▸"
|
||||
sx={{ fontSize: '0.875rem' }}
|
||||
>
|
||||
<TreeItem nodeId="detector-group" label={<strong>Detector Details</strong>}>
|
||||
<TreeItem
|
||||
nodeId="detector-manufacturer"
|
||||
label={`Manufacturer: ${detector?.manufacturer || 'N/A'}`}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="detector-model"
|
||||
label={`Model: ${detector?.model || 'N/A'}`}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="detector-type"
|
||||
label={`Type: ${detector?.type || 'N/A'}`}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="detector-serial"
|
||||
label={`Serial Number: ${detector?.serialNumber || 'N/A'}`}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="detector-distance"
|
||||
label={`Distance (mm): ${detector?.detectorDistance_mm ?? 'N/A'}`}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="beam-center"
|
||||
label={
|
||||
detector
|
||||
? `Beam Center: x: ${detector.beamCenterX_px}, y: ${detector.beamCenterY_px}`
|
||||
: 'Beam Center: N/A'
|
||||
}
|
||||
/>
|
||||
<TreeItem
|
||||
nodeId="pixel-size"
|
||||
label={
|
||||
detector
|
||||
? `Pixel Size (µm): x: ${detector.pixelSizeX_um}, y: ${detector.pixelSizeY_um}`
|
||||
: 'Pixel Size: 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default RunDetails;
|
||||
Loading…
x
Reference in New Issue
Block a user