Merge pull request #107 from DiamondLightSource/composition

Using Composition over Inheritance

.eslintrc.cjs

@@ -26,6 +26,7 @@ module.exports = {
     "no-throw-literal": "off",
     "max-len": ["warn", { code: 80 }],
     "@typescript-eslint/no-throw-literal": "error",
+    "@typescript-eslint/no-misused-promises": ["error", { "checksVoidReturn": { "attributes": false } }],
   },
   settings: {
     react: {

package.json

@@ -7,8 +7,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
-    "check-types": "tsc",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview --port 3000",
     "test": "npx vitest",
@@ -23,11 +22,11 @@
     "@mui/system": "^5.15.9",
     "@mui/x-data-grid": "^5.17.4",
     "@react-three/fiber": "8.16.2",
-    "formik": "^2.4.5",
     "mathjs": "^12.1.0",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.4",
     "three": "^0.158.0",
     "zustand": "^4.4.6"
   },
@@ -43,7 +42,7 @@
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.4.5",
     "vite": "^4.5.1",
     "vitest": "^1.5.1"
   }

src/app.tsx

@@ -1,20 +1,18 @@
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import DataSideBar from "./data-entry/dataSideBar";
 import CentrePlot from "./plot/centrePlot";
 import BasicAppBar from "./basicAppBar";
 
 export default function App(): JSX.Element {
   return (
-    <Box>
+    <>
       <BasicAppBar />
       <Stack direction={"row"} spacing={1} margin={1}>
-        <Box>
-          <DataSideBar />
-        </Box>
+        <DataSideBar />
         <Stack direction={"column"} spacing={1} flexGrow={1}>
           <CentrePlot />
         </Stack>
       </Stack>
-    </Box>
+    </>
   );
 }

src/basicAppBar.tsx

@@ -1,18 +1,61 @@
 import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
+import { useDetectorStore } from "./data-entry/detectorStore";
+import { presetConfigRecord } from "./presets/presetManager";
+import { Autocomplete, TextField } from "@mui/material";
+import { useBeamlineConfigStore } from "./data-entry/beamlineconfigStore";
+import { useState } from "react";
+import { useBeamstopStore } from "./data-entry/beamstopStore";
+import { useCameraTubeStore } from "./data-entry/cameraTubeStore";
+import { LengthUnits } from "./utils/units";
 
 export default function BasicAppBar(): JSX.Element {
+  const [preset, setPreset] = useState<string>(
+    Object.keys(presetConfigRecord)[0],
+  );
+  const detectorStore = useDetectorStore();
+  const beamlineConfigStore = useBeamlineConfigStore();
+  const beamstopStore = useBeamstopStore();
+  const cameraTubeStore = useCameraTubeStore();
+
+  const handlePreset = (preset: string) => {
+    const { beamstop, cameraTube, detector, beamline } =
+      presetConfigRecord[preset];
+    detectorStore.updateDetector(detector);
+    beamstopStore.updateBeamstop(beamstop);
+    cameraTubeStore.updateCameraTube(cameraTube);
+    beamlineConfigStore.updateBeamline(beamline);
+    beamstopStore.updateDiameter(
+      beamlineConfigStore.beamlineRecord[beamline].beamstopDiameter,
+      LengthUnits.millimetre,
+    );
+    cameraTubeStore.updateDiameter(
+      beamlineConfigStore.beamlineRecord[beamline].cameratubeDiameter,
+      LengthUnits.millimetre,
+    );
+    setPreset(preset);
+  };
+
   return (
-    <Box >
-      <AppBar position="static">
-        <Toolbar>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            Dedi Web
-          </Typography>
-        </Toolbar>
-      </AppBar>
-    </Box>
+    <AppBar position="static">
+      <Toolbar>
+        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          Dedi Web
+        </Typography>
+        <Autocomplete
+          size="small"
+          options={Object.keys(presetConfigRecord)}
+          value={preset}
+          sx={{ width: 300, color: "white" }}
+          renderInput={(params) => (
+            <TextField {...params} label="preset" sx={{ color: "black" }} />
+          )}
+          onChange={(_, value) => {
+            value ? handlePreset(value) : {};
+          }}
+        />
+      </Toolbar>
+    </AppBar>
   );
 }

src/calculations/numericRange.ts

@@ -20,9 +20,9 @@ export default class NumericRange {
 
   /**
    * Checks if the input is contained in this range.
-   * 
-   * @param value - Input number 
-   * @returns 
+   *
+   * @param value - Input number
+   * @returns
    */
   containsValue(value: number): boolean {
     return value >= this.min && value <= this.max;
@@ -71,28 +71,28 @@ export default class NumericRange {
   applyInPlace(func: (value: number) => number): NumericRange {
     this.min = func(this.min);
     this.max = func(this.max);
-    
+
     if (this.min > this.max) {
       const temp = this.max;
       this.max = this.min;
       this.min = temp;
     }
-    
+
     return this;
   }
 
   /**
    * Returns a string representation of this range.
-   * @returns 
+   * @returns
    */
   toString(): string {
     return `(min:${this.min}, max:${this.max})`;
   }
 
   /**
    * Check if this range is equal to the input range
-   * @param other Another NumericRange 
-   * @returns 
+   * @param other Another NumericRange
+   * @returns
    */
   equals(other: NumericRange): boolean {
     return this.min === other.min && this.max === other.max;