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
117
frontend/package-lock.json
generated
117
frontend/package-lock.json
generated
@@ -19,6 +19,7 @@
|
|||||||
"@fullcalendar/react": "^6.1.15",
|
"@fullcalendar/react": "^6.1.15",
|
||||||
"@fullcalendar/timegrid": "^6.1.15",
|
"@fullcalendar/timegrid": "^6.1.15",
|
||||||
"@mui/icons-material": "^6.1.5",
|
"@mui/icons-material": "^6.1.5",
|
||||||
|
"@mui/lab": "^6.0.0-beta.29",
|
||||||
"@mui/material": "^6.1.6",
|
"@mui/material": "^6.1.6",
|
||||||
"@mui/system": "^6.1.6",
|
"@mui/system": "^6.1.6",
|
||||||
"@mui/x-data-grid-premium": "^7.27.2",
|
"@mui/x-data-grid-premium": "^7.27.2",
|
||||||
@@ -1255,6 +1256,44 @@
|
|||||||
"integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
|
"integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@floating-ui/core": {
|
||||||
|
"version": "1.6.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
|
||||||
|
"integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/utils": "^0.2.9"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/dom": {
|
||||||
|
"version": "1.6.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
|
||||||
|
"integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/core": "^1.6.0",
|
||||||
|
"@floating-ui/utils": "^0.2.9"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/react-dom": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/dom": "^1.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8.0",
|
||||||
|
"react-dom": ">=16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/utils": {
|
||||||
|
"version": "0.2.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
|
||||||
|
"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@fullcalendar/core": {
|
"node_modules/@fullcalendar/core": {
|
||||||
"version": "6.1.15",
|
"version": "6.1.15",
|
||||||
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz",
|
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz",
|
||||||
@@ -1443,6 +1482,39 @@
|
|||||||
"integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
|
"integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@mui/base": {
|
||||||
|
"version": "5.0.0-beta.69",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.69.tgz",
|
||||||
|
"integrity": "sha512-r2YyGUXpZxj8rLAlbjp1x2BnMERTZ/dMqd9cClKj2OJ7ALAuiv/9X5E9eHfRc9o/dGRuLSMq/WTjREktJVjxVA==",
|
||||||
|
"deprecated": "This package has been replaced by @base-ui-components/react",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.26.0",
|
||||||
|
"@floating-ui/react-dom": "^2.1.1",
|
||||||
|
"@mui/types": "^7.2.21",
|
||||||
|
"@mui/utils": "^6.4.1",
|
||||||
|
"@popperjs/core": "^2.11.8",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/mui-org"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@mui/core-downloads-tracker": {
|
"node_modules/@mui/core-downloads-tracker": {
|
||||||
"version": "6.4.6",
|
"version": "6.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.6.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.6.tgz",
|
||||||
@@ -1479,6 +1551,51 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@mui/lab": {
|
||||||
|
"version": "6.0.0-beta.29",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-6.0.0-beta.29.tgz",
|
||||||
|
"integrity": "sha512-C5nTm9xfzVi4Zz4DLrZq1Kn+cQ2fGZmSJxyoUbOu+jDPlLZrUpSsgxEkkbjJB5dasiv6fgGKhO3EaKKyfobLAQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.26.0",
|
||||||
|
"@mui/base": "5.0.0-beta.69",
|
||||||
|
"@mui/system": "^6.4.6",
|
||||||
|
"@mui/types": "^7.2.21",
|
||||||
|
"@mui/utils": "^6.4.6",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/mui-org"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emotion/react": "^11.5.0",
|
||||||
|
"@emotion/styled": "^11.3.0",
|
||||||
|
"@mui/material": "^6.4.6",
|
||||||
|
"@mui/material-pigment-css": "^6.4.6",
|
||||||
|
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@emotion/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@emotion/styled": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@mui/material-pigment-css": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@mui/material": {
|
"node_modules/@mui/material": {
|
||||||
"version": "6.4.6",
|
"version": "6.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.6.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.6.tgz",
|
||||||
|
|||||||
@@ -25,6 +25,7 @@
|
|||||||
"@fullcalendar/react": "^6.1.15",
|
"@fullcalendar/react": "^6.1.15",
|
||||||
"@fullcalendar/timegrid": "^6.1.15",
|
"@fullcalendar/timegrid": "^6.1.15",
|
||||||
"@mui/icons-material": "^6.1.5",
|
"@mui/icons-material": "^6.1.5",
|
||||||
|
"@mui/lab": "^6.0.0-beta.29",
|
||||||
"@mui/material": "^6.1.6",
|
"@mui/material": "^6.1.6",
|
||||||
"@mui/system": "^6.1.6",
|
"@mui/system": "^6.1.6",
|
||||||
"@mui/x-data-grid-premium": "^7.27.2",
|
"@mui/x-data-grid-premium": "^7.27.2",
|
||||||
|
|||||||
@@ -1,47 +1,11 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Accordion,
|
||||||
DialogTitle,
|
AccordionSummary,
|
||||||
DialogContent,
|
AccordionDetails,
|
||||||
IconButton,
|
|
||||||
Typography,
|
Typography,
|
||||||
Grid,
|
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import CloseIcon from '@mui/icons-material/Close';
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||||
import { SimpleTreeView, TreeItem } from '@mui/x-tree-view';
|
|
||||||
|
|
||||||
interface ExperimentParameters {
|
|
||||||
id: number;
|
|
||||||
run_number: number;
|
|
||||||
beamline_parameters: {
|
|
||||||
synchrotron: string;
|
|
||||||
beamline: string;
|
|
||||||
detector: {
|
|
||||||
manufacturer: string;
|
|
||||||
model: string;
|
|
||||||
type: string;
|
|
||||||
serialNumber: string;
|
|
||||||
detectorDistance_mm: number;
|
|
||||||
beamCenterX_px: number;
|
|
||||||
beamCenterY_px: number;
|
|
||||||
pixelSizeX_um: number;
|
|
||||||
pixelSizeY_um: number;
|
|
||||||
};
|
|
||||||
// Include additional parameters as needed.
|
|
||||||
};
|
|
||||||
// Optionally, add fields for images and processing results.
|
|
||||||
images?: Array<{
|
|
||||||
id: number;
|
|
||||||
filepath: string;
|
|
||||||
comment?: string;
|
|
||||||
}>;
|
|
||||||
processingResults?: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RunDetailsProps {
|
|
||||||
run: ExperimentParameters;
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const RunDetails: React.FC<RunDetailsProps> = ({ run }) => {
|
const RunDetails: React.FC<RunDetailsProps> = ({ run }) => {
|
||||||
const { beamline_parameters } = run;
|
const { beamline_parameters } = run;
|
||||||
@@ -56,82 +20,99 @@ const RunDetails: React.FC<RunDetailsProps> = ({ run }) => {
|
|||||||
Beamline: {beamline} | Synchrotron: {synchrotron}
|
Beamline: {beamline} | Synchrotron: {synchrotron}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<SimpleTreeView
|
<Accordion>
|
||||||
defaultCollapseIcon="▾"
|
<AccordionSummary
|
||||||
defaultExpandIcon="▸"
|
expandIcon={<ExpandMoreIcon />}
|
||||||
sx={{ fontSize: '0.875rem' }}
|
aria-controls="detector-content"
|
||||||
|
id="detector-header"
|
||||||
>
|
>
|
||||||
<TreeItem nodeId="detector-group" label={<strong>Detector Details</strong>}>
|
<Typography><strong>Detector Details</strong></Typography>
|
||||||
<TreeItem
|
</AccordionSummary>
|
||||||
nodeId="detector-manufacturer"
|
<AccordionDetails>
|
||||||
label={`Manufacturer: ${detector?.manufacturer || 'N/A'}`}
|
<Typography>Manufacturer: {detector?.manufacturer || 'N/A'}</Typography>
|
||||||
/>
|
<Typography>Model: {detector?.model || 'N/A'}</Typography>
|
||||||
<TreeItem
|
<Typography>Type: {detector?.type || 'N/A'}</Typography>
|
||||||
nodeId="detector-model"
|
<Typography>
|
||||||
label={`Model: ${detector?.model || 'N/A'}`}
|
Beam Center (px): x: {detector?.beamCenterX_px || 'N/A'}, y: {detector?.beamCenterY_px || '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>
|
</Typography>
|
||||||
{run.images && run.images.length > 0 ? (
|
</AccordionDetails>
|
||||||
<Grid container spacing={2} sx={{ mt: 1 }}>
|
</Accordion>
|
||||||
{run.images.map((img) => (
|
|
||||||
<Grid item xs={4} key={img.id}>
|
<Accordion>
|
||||||
|
<AccordionSummary
|
||||||
|
expandIcon={<ExpandMoreIcon />}
|
||||||
|
aria-controls="beamline-content"
|
||||||
|
id="beamline-header"
|
||||||
|
>
|
||||||
|
<Typography><strong>Beamline Details</strong></Typography>
|
||||||
|
</AccordionSummary>
|
||||||
|
<AccordionDetails>
|
||||||
|
<Typography>Synchrotron: {beamline_parameters?.synchrotron || 'N/A'}</Typography>
|
||||||
|
<Typography>Ring mode: {beamline_parameters?.ringMode || 'N/A'}</Typography>
|
||||||
|
<Typography>Ring current: {beamline_parameters?.ringCurrent_A || 'N/A'}</Typography>
|
||||||
|
<Typography>Beamline: {beamline_parameters?.beamline || 'N/A'}</Typography>
|
||||||
|
<Typography>Undulator: {beamline_parameters?.undulator || 'N/A'}</Typography>
|
||||||
|
<Typography>Undulator gap: {beamline_parameters?.undulatorgap_mm || 'N/A'}</Typography>
|
||||||
|
<Typography>Focusing optic: {beamline_parameters?.focusingOptic || 'N/A'}</Typography>
|
||||||
|
<Typography>Monochromator: {beamline_parameters?.monochromator || 'N/A'}</Typography>
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
|
||||||
|
<Accordion>
|
||||||
|
<AccordionSummary
|
||||||
|
expandIcon={<ExpandMoreIcon />}
|
||||||
|
aria-controls="beam-content"
|
||||||
|
id="beam-header"
|
||||||
|
>
|
||||||
|
<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>Flux at sample (ph/s): {beamline_parameters?.beamlineFluxAtSample_ph_s || 'N/A'}</Typography>
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
|
||||||
|
<Accordion>
|
||||||
|
<AccordionSummary
|
||||||
|
expandIcon={<ExpandMoreIcon />}
|
||||||
|
aria-controls="sample-content"
|
||||||
|
id="sample-header"
|
||||||
|
>
|
||||||
|
<Typography><strong>Sample environment</strong></Typography>
|
||||||
|
</AccordionSummary>
|
||||||
|
<AccordionDetails>
|
||||||
|
<Typography>Cryojet temperature (K): {beamline_parameters?.cryojetTemperature_K || 'N/A'}</Typography>
|
||||||
|
<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
|
<img
|
||||||
|
key={img.id}
|
||||||
src={img.filepath}
|
src={img.filepath}
|
||||||
alt={img.comment || 'Sample Image'}
|
alt={img.comment || 'Sample Image'}
|
||||||
style={{ width: '100%', border: '1px solid #ccc' }}
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
marginTop: 8,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
)) || 'No Images Available'}
|
||||||
))}
|
</AccordionDetails>
|
||||||
</Grid>
|
</Accordion>
|
||||||
) : (
|
|
||||||
<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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user