fix typo

src/dialogs/BeamlineTable.tsx

@@ -1,6 +1,7 @@
 import { useBeamlineConfigStore } from "../data-entry/beamlineconfigStore";
 import { AppBeamline } from "../utils/types";
 import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
+import { LengthUnits, WavelengthUnits } from "../utils/units";
 
 interface BeamlineTableRow {
   name: string;
@@ -18,11 +19,11 @@ function createData(name: string, beamline: AppBeamline): BeamlineTableRow {
     name: name,
     cameraTubeDiameter: beamline.cameratubeDiameter,
     beamstopDiameter: beamline.beamstopDiameter,
-    minWavelength: beamline.minWavelength.toNumber("nm"),
-    maxWavelength: beamline.maxWavelength.toNumber("nm"),
-    minCameraLength: beamline.minCameraLength.toNumber("m"),
-    maxCameraLength: beamline.maxCameraLength.toNumber("m"),
-    cameraLengthStep: beamline.cameraLengthStep.toNumber("m"),
+    minWavelength: beamline.minWavelength.toNumber(WavelengthUnits.nanometres),
+    maxWavelength: beamline.maxWavelength.toNumber(WavelengthUnits.nanometres),
+    minCameraLength: beamline.minCameraLength.toNumber(LengthUnits.metre),
+    maxCameraLength: beamline.maxCameraLength.toNumber(LengthUnits.metre),
+    cameraLengthStep: beamline.cameraLengthStep.toNumber(LengthUnits.metre),
   };
 }
 

src/dialogs/detectorDialog.tsx

@@ -56,10 +56,9 @@ export default function DetectorDialog(props: {
         </DialogTitle>
         <DialogContent>
           <Grid container spacing={4}>
-            <Grid item xs={12} sm={12} md={12} lg={7}>
+            <Grid item xs={12} sm={12} md={12} lg={8}>
               <DetectorTable />
             </Grid>
-            <Grid item md={0} lg={1}></Grid>
             <Grid item xs={12} sm={12} md={12} lg={4}>
               <Stack spacing={1} width={"100%"}>
                 <Typography>Add new Detector:</Typography>

src/dialogs/detectorTable.tsx

@@ -1,6 +1,7 @@
 import { AppDetector } from "../utils/types";
 import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
 import { useDetectorStore } from "../data-entry/detectorStore";
+import { LengthUnits } from "../utils/units";
 
 interface DetectorTableRow {
   name: string;
@@ -15,8 +16,8 @@ function createData(name: string, detector: AppDetector): DetectorTableRow {
     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"),
+    pixel_height: detector.pixelSize.height.toNumber(LengthUnits.millimetre),
+    pixel_width: detector.pixelSize.width.toNumber(LengthUnits.millimetre),
   };
 }
 

src/plot/centrePlot.tsx

@@ -40,7 +40,11 @@ import { usePlotStore } from "./plotStore";
 import { UnitVector, color2String, getDomains } from "./plotUtils";
 import SvgAxisAlignedEllipse from "./svgEllipse";
 import { useMemo } from "react";
-import { formatLogMessage, LengthUnits } from "../utils/units";
+import {
+  formatLogMessage,
+  LengthUnits,
+  ReciprocalWavelengthUnits,
+} from "../utils/units";
 import SvgMask from "./svgMask";
 
 /**
@@ -107,10 +111,10 @@ export default function CentrePlot(): JSX.Element {
   const visibleQRangeUnits = UnitRange.fromNumericRange(
     visibleQRange,
     "m^-1",
-  ).to("nm^-1");
+  ).to(ReciprocalWavelengthUnits.nanometres);
 
   const fullQRangeUnits = UnitRange.fromNumericRange(fullQRange, "m^-1").to(
-    "nm^-1",
+    ReciprocalWavelengthUnits.nanometres,
   );
 
   const { beamstopCentre, cameraTubeCentre, minPoint, maxPoint } =

src/plot/plotStore.ts

@@ -8,13 +8,13 @@ export enum PlotAxes {
 }
 
 // default colours used in app
-const lilac = { r: 144, g: 19, b: 254, a: 0.4 };
-const black = { r: 0, g: 0, b: 0, a: 1 };
-const blackOpaque = { r: 0, g: 0, b: 0, a: 0.2 };
-const turquoise = { r: 80, g: 227, b: 194, a: 0.4 };
-const mustard = { r: 245, g: 166, b: 35, a: 1 };
-const green = { r: 65, g: 117, b: 5, a: 1 };
-const red = { r: 208, g: 2, b: 27, a: 1 };
+const lilac: RGBColor = { r: 144, g: 19, b: 254, a: 0.4 };
+const black: RGBColor = { r: 0, g: 0, b: 0, a: 1 };
+const blackOpaque: RGBColor = { r: 0, g: 0, b: 0, a: 0.2 };
+const turquoise: RGBColor = { r: 80, g: 227, b: 194, a: 0.4 };
+const mustard: RGBColor = { r: 245, g: 166, b: 35, a: 1 };
+const green: RGBColor = { r: 65, g: 117, b: 5, a: 1 };
+const red: RGBColor = { r: 208, g: 2, b: 27, a: 1 };
 
 export interface PlotConfig {
   detector: boolean;

src/plot/svgMask.tsx

@@ -21,7 +21,9 @@ export default function SvgMask(props: SvgMaskProps) {
   const fulllength = detectorLower.clone().sub(detectorUpper);
   // Get the length of the horizontal and vertical gaps between modules
   const gaplength = fulllength.clone().multiply(props.gapFraction);
-  // Get the length and width of each module
+  // Get the length and width of each detctor module from the detector length,
+  // number of gaps, gap length, and the number of modules
+  //
   // module length =
   //    (detector length - (number of gaps)*(gap length))/(number of modules)
   const moduleLength = fulllength

src/presets/presetManager.ts

@@ -13,7 +13,7 @@ import {
 } from "../utils/types";
 import { LengthUnits, WavelengthUnits } from "../utils/units";
 
-const DefaultDtectorMask: DetectorMask = {
+const DefaultDetectorMask: DetectorMask = {
   horizontalModules: 1,
   verticalModules: 1,
   horizontalGap: 0,
@@ -28,7 +28,7 @@ const DefaultDtectorMask: DetectorMask = {
  */
 export function createInternalDetector(detectorData: IODetector): AppDetector {
   return {
-    mask: DefaultDtectorMask,
+    mask: DefaultDetectorMask,
     ...detectorData,
     pixelSize: {
       height: unit(detectorData.pixelSize.height, LengthUnits.millimetre),