diff --git a/package-lock.json b/package-lock.json index 567c84b..d5b89da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@h5web/lib": "^10.0.0", "@mui/icons-material": "^5.15.3", "@mui/material": "^5.14.17", + "@mui/x-data-grid": "^5.17.4", "@react-three/fiber": "^8.13.7", "d3-scale": "^4.0.2", "framer-motion": "^10.15.2", @@ -1224,6 +1225,39 @@ } } }, + "node_modules/@mui/x-data-grid": { + "version": "5.17.26", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.17.26.tgz", + "integrity": "sha512-eGJq9J0g9cDGLFfMmugOadZx0mJeOd/yQpHwEa5gUXyONS6qF0OhXSWyDOhDdA3l2TOoQzotMN5dY/T4Wl1KYA==", + "dependencies": { + "@babel/runtime": "^7.18.9", + "@mui/utils": "^5.10.3", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "reselect": "^4.1.6" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@mui/material": "^5.4.1", + "@mui/system": "^5.4.1", + "react": "^17.0.2 || ^18.0.0", + "react-dom": "^17.0.2 || ^18.0.0" + } + }, + "node_modules/@mui/x-data-grid/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -6539,6 +6573,11 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, + "node_modules/reselect": { + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz", + "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" + }, "node_modules/resize-observer-polyfill": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", diff --git a/package.json b/package.json index 8bc96f8..45126f3 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@mui/icons-material": "^5.15.3", "@mui/material": "^5.14.17", "@react-three/fiber": "^8.13.7", + "@mui/x-data-grid": "^5.17.4", "d3-scale": "^4.0.2", "framer-motion": "^10.15.2", "js-quantities": "^1.8.0", diff --git a/src/data-entry/dataSideBar.tsx b/src/data-entry/dataSideBar.tsx index 4f2d041..73a9e85 100644 --- a/src/data-entry/dataSideBar.tsx +++ b/src/data-entry/dataSideBar.tsx @@ -21,9 +21,9 @@ import { presetList } from "../presets/presetManager"; import { useBeamstopStore } from "./beamstopStore"; import { useCameraTubeStore } from "./cameraTubeStore"; import { useDetectorStore } from "./detectorStore"; -import DetectorDialog from "./detectorDialog"; +import DetectorDialog from "../dialogs/detectorDialog"; import React from "react"; -import PresetDialog from "./presetDialog"; +import PresetDialog from "../dialogs/presetDialog"; /** * React component which represents the side bar for data entry diff --git a/src/data-entry/detectorDialog.tsx b/src/dialogs/detectorDialog.tsx similarity index 93% rename from src/data-entry/detectorDialog.tsx rename to src/dialogs/detectorDialog.tsx index 1b11842..dda3c4c 100644 --- a/src/data-entry/detectorDialog.tsx +++ b/src/dialogs/detectorDialog.tsx @@ -12,8 +12,9 @@ import { Typography, } from "@mui/material"; import React from "react"; -import { useDetectorStore } from "./detectorStore"; +import { useDetectorStore } from "../data-entry/detectorStore"; import * as mathjs from "mathjs"; +import DetectorTable from "./detectorTable" export default function DetectorDialog(props: { open: boolean; @@ -49,9 +50,11 @@ export default function DetectorDialog(props: { return ( - {"Add detector"} + {"Detectors"} + + Add new Detector diff --git a/src/dialogs/detectorTable.tsx b/src/dialogs/detectorTable.tsx new file mode 100644 index 0000000..d0ed01e --- /dev/null +++ b/src/dialogs/detectorTable.tsx @@ -0,0 +1,52 @@ +import { Detector } from "../utils/types"; +import { detectorList } from "../presets/presetManager"; +import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid"; + + +interface DetectorTableRow{ + name: string; + resolution_height: number; + resolution_width: number; + pixel_height: number; + pixel_width: number; +} + +function createData( name: string, detector:Detector): DetectorTableRow{ + return { + name: name, + resolution_height: detector.resolution.height, + resolution_width: detector.resolution.width, + pixel_height: detector.pixelSize.height.toNumber("mm"), + pixel_width: detector.pixelSize.width.toNumber("mm"), + } +} + +export default function CustomPaginationActionsTable() { + + const displayArray: DetectorTableRow[] = []; + for (const [key, value] of Object.entries(detectorList)){ + displayArray.push(createData(key,value)); + } + + const columns: GridColDef[] = [ + { field: "name", headerName: "name", flex: 1 }, + { field: "resolution_height", + headerName: "resolution height", flex: 1 }, + { field: "resolution_width", headerName: "resolution width", flex: 1 }, + { field: "pixel_height", headerName: "pixel height", flex: 1 }, + { field: "pixel_width", headerName: "pixel width", flex: 1 }, + ]; + + + return ( + row.name} + columns={columns} + components={{ Toolbar: GridToolbar }} + sx={{ border: 0 }} + disableSelectionOnClick + /> + ); + } \ No newline at end of file diff --git a/src/data-entry/presetDialog.tsx b/src/dialogs/presetDialog.tsx similarity index 100% rename from src/data-entry/presetDialog.tsx rename to src/dialogs/presetDialog.tsx diff --git a/src/results/rangeTable.tsx b/src/results/rangeTable.tsx index 15d018e..f061996 100644 --- a/src/results/rangeTable.tsx +++ b/src/results/rangeTable.tsx @@ -62,110 +62,109 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element { {/* TABLE BODY */} - - {/* Q RANGE ROW */} - - {ScatteringOptions.q} - - - {isNaN(qRange.min.toNumber()) - ? "" - : qRange.min.toNumber().toFixed(4)} - - - {isNaN(qRange.max.toNumber()) - ? "" - : qRange.max.toNumber().toFixed(4)} - - - - q - - - - - - {/* S RANGE ROW*/} - - {ScatteringOptions.s} - - - {isNaN(sRange.min.toNumber()) - ? "" - : sRange.min.toNumber().toFixed(4)} - - - {isNaN(sRange.max.toNumber()) - ? "" - : sRange.max.toNumber().toFixed(4)} - - - - s - - - - - - {/* D RANGE ROW*/} - - {ScatteringOptions.d} - - - {isNaN(dRange.min.toNumber()) - ? "" - : dRange.min.toNumber().toFixed(4)} - - - {isNaN(dRange.max.toNumber()) - ? "" - : dRange.max.toNumber().toFixed(4)} - - - - d - - - - - - + + {/* Q RANGE ROW */} + + {ScatteringOptions.q} + + + {isNaN(qRange.min.toNumber()) + ? "" + : qRange.min.toNumber().toFixed(4)} + + + {isNaN(qRange.max.toNumber()) + ? "" + : qRange.max.toNumber().toFixed(4)} + + + + q + + + + + + {/* S RANGE ROW*/} + + {ScatteringOptions.s} + + + {isNaN(sRange.min.toNumber()) + ? "" + : sRange.min.toNumber().toFixed(4)} + + + {isNaN(sRange.max.toNumber()) + ? "" + : sRange.max.toNumber().toFixed(4)} + + + + s + + + + + + {/* D RANGE ROW*/} + + {ScatteringOptions.d} + + + {isNaN(dRange.min.toNumber()) + ? "" + : dRange.min.toNumber().toFixed(4)} + + + {isNaN(dRange.max.toNumber()) + ? "" + : dRange.max.toNumber().toFixed(4)} + + + + d + + + + +