From 266c8a81ac56135fcdd2d530d9fb937c67a60332 Mon Sep 17 00:00:00 2001 From: GotthardG <51994228+GotthardG@users.noreply.github.com> Date: Tue, 4 Mar 2025 22:01:53 +0100 Subject: [PATCH] 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/package-lock.json | 117 ++++++++++++ frontend/package.json | 1 + frontend/src/components/RunDetails.tsx | 243 ++++++++++++------------- 3 files changed, 230 insertions(+), 131 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0c9eb10..c897724 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,6 +19,7 @@ "@fullcalendar/react": "^6.1.15", "@fullcalendar/timegrid": "^6.1.15", "@mui/icons-material": "^6.1.5", + "@mui/lab": "^6.0.0-beta.29", "@mui/material": "^6.1.6", "@mui/system": "^6.1.6", "@mui/x-data-grid-premium": "^7.27.2", @@ -1255,6 +1256,44 @@ "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==", "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": { "version": "6.1.15", "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz", @@ -1443,6 +1482,39 @@ "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==", "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": { "version": "6.4.6", "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": { "version": "6.4.6", "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.6.tgz", diff --git a/frontend/package.json b/frontend/package.json index ac47655..7a3cf66 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -25,6 +25,7 @@ "@fullcalendar/react": "^6.1.15", "@fullcalendar/timegrid": "^6.1.15", "@mui/icons-material": "^6.1.5", + "@mui/lab": "^6.0.0-beta.29", "@mui/material": "^6.1.6", "@mui/system": "^6.1.6", "@mui/x-data-grid-premium": "^7.27.2", diff --git a/frontend/src/components/RunDetails.tsx b/frontend/src/components/RunDetails.tsx index 9f4215e..d20380a 100644 --- a/frontend/src/components/RunDetails.tsx +++ b/frontend/src/components/RunDetails.tsx @@ -1,139 +1,120 @@ -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'; + import React from 'react'; + import { + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + } from '@mui/material'; + import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -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; -} + const RunDetails: React.FC = ({ run }) => { + const { beamline_parameters } = run; + const { synchrotron, beamline, detector } = beamline_parameters; -interface RunDetailsProps { - run: ExperimentParameters; - onClose: () => void; -} + return ( +
+ + Run {run.run_number} Details + + + Beamline: {beamline} | Synchrotron: {synchrotron} + -const RunDetails: React.FC = ({ run }) => { - const { beamline_parameters } = run; - const { synchrotron, beamline, detector } = beamline_parameters; + + } + aria-controls="detector-content" + id="detector-header" + > + Detector Details + + + Manufacturer: {detector?.manufacturer || 'N/A'} + Model: {detector?.model || 'N/A'} + Type: {detector?.type || 'N/A'} + + Beam Center (px): x: {detector?.beamCenterX_px || 'N/A'}, y: {detector?.beamCenterY_px || 'N/A'} + + + - return ( -
- - Run {run.run_number} Details - - - Beamline: {beamline} | Synchrotron: {synchrotron} - + + } + aria-controls="beamline-content" + id="beamline-header" + > + Beamline Details + + + Synchrotron: {beamline_parameters?.synchrotron || 'N/A'} + Ring mode: {beamline_parameters?.ringMode || 'N/A'} + Ring current: {beamline_parameters?.ringCurrent_A || 'N/A'} + Beamline: {beamline_parameters?.beamline || 'N/A'} + Undulator: {beamline_parameters?.undulator || 'N/A'} + Undulator gap: {beamline_parameters?.undulatorgap_mm || 'N/A'} + Focusing optic: {beamline_parameters?.focusingOptic || 'N/A'} + Monochromator: {beamline_parameters?.monochromator || 'N/A'} + + - - Detector Details}> - - - - - - - - - + + } + aria-controls="beam-content" + id="beam-header" + > + Beam characteristics + + + Wavelength: {beamline_parameters?.wavelength || 'N/A'} + Energy: {beamline_parameters?.energy || 'N/A'} + Transmission: {beamline_parameters?.transmission || 'N/A'} + Beam focus (µm): vertical: {beamline_parameters?.beamSizeHeight || 'N/A'} , horizontal: {beamline_parameters?.beamSizeWidth || 'N/A'} + Flux at sample (ph/s): {beamline_parameters?.beamlineFluxAtSample_ph_s || 'N/A'} + + - - Associated Images - - {run.images && run.images.length > 0 ? ( - - {run.images.map((img) => ( - - {img.comment - - ))} - - ) : ( - No images available. - )} + + } + aria-controls="sample-content" + id="sample-header" + > + Sample environment + + + Cryojet temperature (K): {beamline_parameters?.cryojetTemperature_K || 'N/A'} + Humidifier temperature (K): {beamline_parameters?.humidifierTemperature_K || 'N/A'} + Humidifier humidity (%): {beamline_parameters?.humidifierHumidity || 'N/A'} + + - - Processing Results - - {run.processingResults ? ( - - {JSON.stringify(run.processingResults, null, 2)} - - ) : ( - - Processing details and results go here. - - )} -
- ); -}; + + } + aria-controls="images-content" + id="images-header" + > + Associated Images + + + {run.images?.map((img) => ( + {img.comment + )) || 'No Images Available'} + + +
+ ); + }; -export default RunDetails; \ No newline at end of file + export default RunDetails; \ No newline at end of file