add comments

src/basicAppBar.tsx

@@ -1,18 +1,9 @@
-import * as React from "react";
 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 IconButton from "@mui/material/IconButton";
-import MenuIcon from "@mui/icons-material/Menu";
-import { Drawer } from "@mui/material";
 
 export default function BasicAppBar(): JSX.Element {
-  const [state, setState] = React.useState({ menuOpen: false });
-  const toggleDrawer = (open: boolean) => () => {
-    setState({ menuOpen: open });
-  };
-
   return (
     <Box >
       <AppBar position="static">

src/data-entry/beamProperties.tsx

@@ -126,8 +126,8 @@ export default function BeampropertiesDataEntry() {
             value={beamlineConfig.wavelength.formatUnits() as WavelengthUnits}
             onChange={handleWavelengthUnits}
           >
-            <MenuItem value={WavelengthUnits.nanmometres}>
-              {WavelengthUnits.nanmometres}
+            <MenuItem value={WavelengthUnits.nanometres}>
+              {WavelengthUnits.nanometres}
             </MenuItem>
             <MenuItem value={WavelengthUnits.angstroms}>{"\u212B"}</MenuItem>
           </Select>

src/data-entry/dataSideBar.tsx

@@ -26,7 +26,7 @@ import React from "react";
 import PresetDialog from "../dialogs/presetDialog";
 
 /**
- * React component which represents the whole side bar for data entry
+ * React component which represents the whole side bar for data entry.
  * @returns
  */
 export default function DataSideBar(): JSX.Element {

src/dialogs/presetDialog.tsx

@@ -15,7 +15,7 @@ import React from "react";
 import BeamlineTable from "./BeamlineTable";
 import { detectorList } from "../presets/presetManager";
 
-const GRID_ITEM_SIZE = 3;
+const GRID_ITEM_SIZE = 4;
 
 export default function PresetDialog(props: {
   open: boolean;
@@ -50,7 +50,7 @@ export default function PresetDialog(props: {
           <BeamlineTable />
           <Divider />
           <Grid container spacing={2}>
-          <Grid item xs={12}>
+          <Grid item xs={GRID_ITEM_SIZE}>
               <TextField
                 label="name"
                 value={name}

src/plot/centrePlot.tsx

@@ -38,18 +38,18 @@ import LegendBar from "./legendBar";
 import { usePlotStore } from "./plotStore";
 import { UnitVector, color2String, getDomains } from "./plotUtils";
 import SvgAxisAlignedEllipse from "./svgEllipse";
+import { useMemo } from "react";
 
+/**
+ * A react componenet that plots the items that make up the system
+ * @returns 
+ */
 export default function CentrePlot(): JSX.Element {
   const plotConfig = usePlotStore();
   const beamlineConfig = useBeamlineConfig();
 
   // todo some form of destructuring notation {...state} might simplify this
-  const detector = useDetectorStore<Detector>((state) => {
-    return {
-      resolution: state.resolution,
-      pixelSize: state.pixelSize,
-    };
-  });
+  const detector = useDetectorStore<Detector>();
 
   const beamstop = useBeamstopStore<Beamstop>((state) => {
     return {
@@ -65,31 +65,41 @@ export default function CentrePlot(): JSX.Element {
 
   const scaleFactor: mathjs.Unit | null = getScaleFactor(beamlineConfig);
 
+
+
+const { ptMin, ptMax, visibleQRange, fullQRange } = useMemo(()=> {
+
   // todo this might need to be moved elsewhere
-  // evil :( :( :( :()
-  /* eslint-disable */
-  // @ts-ignore
-  if (mathjs.Unit.UNITS.xpixel) {
+    /* eslint-disable */
     // @ts-ignore
-    delete mathjs.Unit.UNITS.xpixel;
-  }
-  // @ts-ignore
-  if (mathjs.Unit.UNITS.ypixel) {
+    if (mathjs.Unit.UNITS.xpixel) {
+      // @ts-ignore
+      delete mathjs.Unit.UNITS.xpixel;
+    }
     // @ts-ignore
-    delete mathjs.Unit.UNITS.ypixel;
-  }
-  /* eslint-enable */
-  // evil :( :( :( :()
+    if (mathjs.Unit.UNITS.ypixel) {
+      // @ts-ignore
+      delete mathjs.Unit.UNITS.ypixel;
+    }
+    /* eslint-enable */
+
+
+    mathjs.createUnit("xpixel", detector.pixelSize.width.toString());
+    mathjs.createUnit("ypixel", detector.pixelSize.height.toString());
+
+    console.log("calculating qrange");
+
+    return computeQrange(
+      detector,
+      beamstop,
+      cameraTube,
+      beamlineConfig,
+    );
+    }, [detector, beamstop, cameraTube, beamlineConfig]);
+
+
 
-  mathjs.createUnit("xpixel", detector.pixelSize.width.toString());
-  mathjs.createUnit("ypixel", detector.pixelSize.height.toString());
 
-  const { ptMin, ptMax, visibleQRange, fullQRange } = computeQrange(
-    detector,
-    beamstop,
-    cameraTube,
-    beamlineConfig,
-  );
 
   // todo move these 2 statements into the ResultsBar component
   //  as that's the only place that uses these
@@ -146,8 +156,6 @@ export default function CentrePlot(): JSX.Element {
     );
   }
 
-  console.log(plotDetector);
-
   const domains = getDomains(plotDetector);
 
   return (

src/results/rangeTable.tsx

@@ -86,7 +86,7 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
                   value={resultsStore.qUnits}
                   onChange={handleQunits}
                 >
-                  <MenuItem value={ReciprocalWavelengthUnits.nanmometres}>
+                  <MenuItem value={ReciprocalWavelengthUnits.nanometres}>
                     {"1 / nm"}
                   </MenuItem>
                   <MenuItem value={ReciprocalWavelengthUnits.angstroms}>
@@ -120,8 +120,8 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
                   value={resultsStore.sUnits}
                   onChange={handleSunits}
                 >
-                  <MenuItem value={WavelengthUnits.nanmometres}>
-                    {WavelengthUnits.nanmometres}
+                  <MenuItem value={WavelengthUnits.nanometres}>
+                    {WavelengthUnits.nanometres}
                   </MenuItem>
                   <MenuItem value={WavelengthUnits.angstroms}>
                     {"\u212B"}
@@ -154,8 +154,8 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
                   value={resultsStore.dUnits}
                   onChange={handleDunits}
                 >
-                  <MenuItem value={WavelengthUnits.nanmometres}>
-                    {WavelengthUnits.nanmometres}
+                  <MenuItem value={WavelengthUnits.nanometres}>
+                    {WavelengthUnits.nanometres}
                   </MenuItem>
                   <MenuItem value={WavelengthUnits.angstroms}>
                     {"\u212B"}

src/results/resultsStore.ts

@@ -28,11 +28,14 @@ export interface ResultStore {
   updateDUnits: (newunits: WavelengthUnits) => void;
 }
 
+/**
+ * Zustand store for the results
+ */
 export const useResultStore = create<ResultStore>((set) => ({
   requested: ScatteringOptions.q,
-  qUnits: ReciprocalWavelengthUnits.nanmometres,
-  sUnits: WavelengthUnits.nanmometres,
-  dUnits: WavelengthUnits.nanmometres,
+  qUnits: ReciprocalWavelengthUnits.nanometres,
+  sUnits: WavelengthUnits.nanometres,
+  dUnits: WavelengthUnits.nanometres,
   requestedMin: null,
   requestedMax: null,
   updateRequested: (quantity: ScatteringOptions) => {

src/utils/units.ts

@@ -15,12 +15,12 @@ export enum EnergyUnits {
 
 export enum WavelengthUnits {
   // todo is this a typo for nanometers?
-  nanmometres = "nm",
+  nanometres = "nm",
   angstroms = "angstrom",
 }
 
 export enum ReciprocalWavelengthUnits {
-  nanmometres = "nm^-1",
+  nanometres = "nm^-1",
   angstroms = `angstrom^-1`,
 }