From a11fe519cc8c28993859053deef67a2c1656e255 Mon Sep 17 00:00:00 2001
From: tizayi <tizayi0@gmail.com>
Date: Mon, 20 Nov 2023 15:15:24 +0000
Subject: [PATCH] beamstop color option

---
 .github/dependabot.yml                |  2 +-
 src/calculations/numericRange.ts      |  4 +-
 src/calculations/qrange.ts            |  2 +-
 src/calculations/ray.ts               | 27 ++++----
 src/data-entry/beamProperties.tsx     | 92 +++++++++++----------------
 src/data-entry/beamlineconfigStore.ts |  1 +
 src/plot/centrePlot.tsx               | 80 ++++++++++++++---------
 src/plot/legendBar.tsx                | 44 ++++++++-----
 src/plot/plotStore.ts                 |  6 +-
 src/plot/plotUtils.ts                 | 12 ++--
 src/presets/presetConfigs.json        |  6 +-
 src/results/rangeDiagram.tsx          |  8 +--
 src/results/resultsBar.tsx            | 13 ++--
 src/sideMenu.tsx                      |  1 -
 src/typings/index.d.ts                |  7 --
 src/utils/colourPicker.tsx            | 77 ++++++++++++----------
 src/utils/types.ts                    |  1 +
 src/utils/units.ts                    |  4 +-
 18 files changed, 206 insertions(+), 181 deletions(-)
 delete mode 100644 src/typings/index.d.ts

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 66b3a48..edd4766 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -7,4 +7,4 @@ updates:
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
-      interval: "daily"
\ No newline at end of file
+      interval: "daily"
diff --git a/src/calculations/numericRange.ts b/src/calculations/numericRange.ts
index 0578272..099e2a8 100644
--- a/src/calculations/numericRange.ts
+++ b/src/calculations/numericRange.ts
@@ -78,8 +78,8 @@ export default class NumericRange {
 
   /**
    * Applys a function to the range in place
-   * @param func 
-   * @returns 
+   * @param func
+   * @returns
    */
   inPlaceApply(func: (value: number) => number): NumericRange {
     this.min = func(this.min);
diff --git a/src/calculations/qrange.ts b/src/calculations/qrange.ts
index 0cb1332..7d3c01b 100644
--- a/src/calculations/qrange.ts
+++ b/src/calculations/qrange.ts
@@ -10,7 +10,7 @@ import { Ray } from "../calculations/ray";
 import NumericRange from "./numericRange";
 
 /**
- * Compute the viable and full qranges 
+ * Compute the viable and full qranges
  * @param detector Detector object with data on how the detector e
  * @param beamstop
  * @param cameraTube
diff --git a/src/calculations/ray.ts b/src/calculations/ray.ts
index b348de2..749b598 100644
--- a/src/calculations/ray.ts
+++ b/src/calculations/ray.ts
@@ -32,20 +32,23 @@ export class Ray {
   }
 
   /**
-  * Find where the ray insects with a circle.  
-  */
-  public getCircleIntersectionParameterRange(radius: number, centre: Vector2): NumericRange | null {
+   * Find where the ray insects with a circle.
+   */
+  public getCircleIntersectionParameterRange(
+    radius: number,
+    centre: Vector2,
+  ): NumericRange | null {
     const diff = this.initial_point.clone().add(centre.multiplyScalar(-1));
     const a = this.direction.dot(this.direction);
-    const b = 2*diff.dot(this.direction);
-    const c = (diff.dot(diff) - Math.pow(radius,2));
+    const b = 2 * diff.dot(this.direction);
+    const c = diff.dot(diff) - Math.pow(radius, 2);
     const discriminant = Math.pow(b, 2) - 4 * a * c;
-    
+
     if (discriminant < 0) return null;
 
     let t1: number;
     let t2: number;
-  
+
     if (a == 0) {
       if (b == 0)
         return c == 0 ? new NumericRange(0, Number.POSITIVE_INFINITY) : null;
@@ -84,7 +87,7 @@ export class Ray {
         return null;
       return this.getParameterRange(result.min, result.max);
     }
-    
+
     result = result.intersect(
       new NumericRange(
         (ymin - this.initial_point.y) / this.direction.y,
@@ -92,12 +95,10 @@ export class Ray {
       ),
     );
 
-    if(result ==null){
+    if (result == null) {
       return null;
-    }    
-    
+    }
+
     return this.getParameterRange(result.min, result.max);
   }
 }
-
-
diff --git a/src/data-entry/beamProperties.tsx b/src/data-entry/beamProperties.tsx
index 9b46dd1..b36b2db 100644
--- a/src/data-entry/beamProperties.tsx
+++ b/src/data-entry/beamProperties.tsx
@@ -24,6 +24,8 @@ import { useBeamlineConfigStore } from "./beamlineconfigStore";
 import { MathUtils } from "three/src/Three.js";
 
 export default function BeampropertiesDataEntry() {
+  const beamlineConfig = useBeamlineConfigStore();
+
   const minWavelength = useBeamlineConfigStore((state) => {
     if (state.wavelengthUnits === WavelengthUnits.angstroms) {
       return nanometres2Angstroms(state.minWavelength);
@@ -38,60 +40,39 @@ export default function BeampropertiesDataEntry() {
     return state.maxWavelength;
   });
 
-  const cameraLength = useBeamlineConfigStore((state) => state.cameraLength);
-  const minCameraLength = useBeamlineConfigStore(
-    (state) => state.minCameraLength,
-  );
-  const maxCameraLength = useBeamlineConfigStore(
-    (state) => state.maxCameraLength,
-  );
-
-  const energy = useBeamlineConfigStore((state) => state.energy);
-  const energyUnits = useBeamlineConfigStore((state) => state.beamEnergyUnits);
-
-  const updateConfig = useBeamlineConfigStore((state) => state.update);
-
-  const angle = useBeamlineConfigStore((state) => state.angle);
-  const angleUnits = useBeamlineConfigStore((state) => state.angleUnits);
-
   const handleAngleUnits = (event: SelectChangeEvent<AngleUnits>) => {
     const newUnits = event.target.value as AngleUnits;
-    let newAngle = angle;
+    let newAngle = beamlineConfig.angle;
 
     if (
       newAngle !== null &&
       newUnits === AngleUnits.degrees &&
-      angleUnits === AngleUnits.radians
+      beamlineConfig.angleUnits === AngleUnits.radians
     ) {
       newAngle = MathUtils.radToDeg(newAngle);
     } else if (
       newAngle !== null &&
       newUnits === AngleUnits.radians &&
-      angleUnits === AngleUnits.degrees
+      beamlineConfig.angleUnits === AngleUnits.degrees
     ) {
       newAngle = MathUtils.degToRad(newAngle);
     }
-    updateConfig({
+    beamlineConfig.update({
       angle: newAngle,
       angleUnits: newUnits,
     });
   };
 
   const handleAngle = (event: React.ChangeEvent<HTMLInputElement>) => {
-    updateConfig({ angle: parseNumericInput(event.target.value) });
+    beamlineConfig.update({ angle: parseNumericInput(event.target.value) });
   };
 
-  const wavelength = useBeamlineConfigStore((state) => state.wavelength);
-  const wavelengthUnits = useBeamlineConfigStore(
-    (state) => state.wavelengthUnits,
-  );
-
   const handleWavelength = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newWavelength = parseNumericInput(event.target.value);
     let newEnergy: number | null = null;
 
     if (newWavelength === null) {
-      updateConfig({
+      beamlineConfig.update({
         energy: newEnergy,
         wavelength: newWavelength,
       });
@@ -99,7 +80,7 @@ export default function BeampropertiesDataEntry() {
     }
 
     // account for wavelength units
-    if (wavelengthUnits === WavelengthUnits.angstroms) {
+    if (beamlineConfig.wavelengthUnits === WavelengthUnits.angstroms) {
       newEnergy = wavelength2EnergyConverter(
         angstroms2Nanometres(newWavelength),
       );
@@ -108,11 +89,11 @@ export default function BeampropertiesDataEntry() {
     }
 
     // account for energy units
-    if (energyUnits === EnergyUnits.electronVolts) {
+    if (beamlineConfig.beamEnergyUnits === EnergyUnits.electronVolts) {
       newEnergy = electronVots2KiloElectronVolts(newEnergy);
     }
 
-    updateConfig({
+    beamlineConfig.update({
       energy: newEnergy,
       wavelength: newWavelength,
     });
@@ -120,21 +101,21 @@ export default function BeampropertiesDataEntry() {
 
   const handleWavelengthUnits = (event: SelectChangeEvent<WavelengthUnits>) => {
     const newUnits = event.target.value as WavelengthUnits;
-    let newWavelength = wavelength;
+    let newWavelength = beamlineConfig.wavelength;
     if (
       newWavelength !== null &&
       newUnits === WavelengthUnits.angstroms &&
-      wavelengthUnits === WavelengthUnits.nanmometres
+      beamlineConfig.wavelengthUnits === WavelengthUnits.nanmometres
     ) {
       newWavelength = nanometres2Angstroms(newWavelength);
     } else if (
       newWavelength !== null &&
       newUnits === WavelengthUnits.nanmometres &&
-      wavelengthUnits === WavelengthUnits.angstroms
+      beamlineConfig.wavelengthUnits === WavelengthUnits.angstroms
     ) {
       newWavelength = angstroms2Nanometres(newWavelength);
     }
-    updateConfig({
+    beamlineConfig.update({
       wavelength: newWavelength,
       wavelengthUnits: newUnits,
     });
@@ -145,14 +126,14 @@ export default function BeampropertiesDataEntry() {
     let newWavelength: number | null = null;
 
     if (newEnergy === null) {
-      updateConfig({
+      beamlineConfig.update({
         energy: newEnergy,
         wavelength: newWavelength,
       });
       return;
     }
 
-    if (energyUnits === EnergyUnits.electronVolts) {
+    if (beamlineConfig.beamEnergyUnits === EnergyUnits.electronVolts) {
       newWavelength = energy2WavelengthConverter(
         electronVots2KiloElectronVolts(newEnergy),
       );
@@ -160,11 +141,11 @@ export default function BeampropertiesDataEntry() {
       newWavelength = energy2WavelengthConverter(newEnergy);
     }
 
-    if (wavelengthUnits === WavelengthUnits.angstroms) {
+    if (beamlineConfig.wavelengthUnits === WavelengthUnits.angstroms) {
       newWavelength = angstroms2Nanometres(newWavelength);
     }
 
-    updateConfig({
+    beamlineConfig.update({
       energy: newEnergy,
       wavelength: newWavelength,
     });
@@ -172,28 +153,28 @@ export default function BeampropertiesDataEntry() {
 
   const handleEnergyUnits = (event: SelectChangeEvent<EnergyUnits>) => {
     const newUnits = event.target.value as EnergyUnits;
-    let newEnergy = energy;
+    let newEnergy = beamlineConfig.energy;
     if (
       newEnergy !== null &&
       newUnits === EnergyUnits.electronVolts &&
-      energyUnits === EnergyUnits.kiloElectronVolts
+      beamlineConfig.beamEnergyUnits === EnergyUnits.kiloElectronVolts
     ) {
       newEnergy = kiloElectronVolts2ElectronVots(newEnergy);
     } else if (
       newEnergy != null &&
       newUnits === EnergyUnits.kiloElectronVolts &&
-      energyUnits === EnergyUnits.electronVolts
+      beamlineConfig.beamEnergyUnits === EnergyUnits.electronVolts
     ) {
       newEnergy = electronVots2KiloElectronVolts(newEnergy);
     }
-    updateConfig({
+    beamlineConfig.update({
       energy: newEnergy,
       beamEnergyUnits: event.target.value as EnergyUnits,
     });
   };
 
   const handleCameraLength = (event: React.ChangeEvent<HTMLInputElement>) => {
-    updateConfig({
+    beamlineConfig.update({
       cameraLength: parseNumericInput(event.target.value),
     });
   };
@@ -206,7 +187,7 @@ export default function BeampropertiesDataEntry() {
         <TextField
           type="number"
           size="small"
-          value={energy}
+          value={beamlineConfig.energy}
           onChange={handleEnergy}
         />
         <FormControl>
@@ -214,7 +195,7 @@ export default function BeampropertiesDataEntry() {
           <Select
             size="small"
             label="units"
-            value={energyUnits}
+            value={beamlineConfig.beamEnergyUnits}
             onChange={handleEnergyUnits}
           >
             <MenuItem value={EnergyUnits.electronVolts}>
@@ -231,7 +212,7 @@ export default function BeampropertiesDataEntry() {
         <TextField
           type="number"
           size="small"
-          value={wavelength}
+          value={beamlineConfig.wavelength}
           onChange={handleWavelength}
         />
         <FormControl>
@@ -239,7 +220,7 @@ export default function BeampropertiesDataEntry() {
           <Select
             size="small"
             label="units"
-            value={wavelengthUnits}
+            value={beamlineConfig.wavelengthUnits}
             onChange={handleWavelengthUnits}
           >
             <MenuItem value={WavelengthUnits.nanmometres}>
@@ -252,21 +233,24 @@ export default function BeampropertiesDataEntry() {
         </FormControl>
       </Stack>
       <Typography>
-        Minimum allowed wavelength: {minWavelength} {wavelengthUnits}{" "}
+        Minimum allowed wavelength: {minWavelength}{" "}
+        {beamlineConfig.wavelengthUnits}{" "}
       </Typography>
       <Typography>
-        Maximum allowed wavelength: {maxWavelength} {wavelengthUnits}
+        Maximum allowed wavelength: {maxWavelength}{" "}
+        {beamlineConfig.wavelengthUnits}
       </Typography>
       <Stack direction="row" spacing={1}>
         <Typography>Camera Length: </Typography>
         <TextField
           type="number"
           size="small"
-          value={cameraLength}
+          value={beamlineConfig.cameraLength}
           InputProps={{
             inputProps: {
-              max: maxCameraLength,
-              min: minCameraLength,
+              max: beamlineConfig.maxCameraLength,
+              min: beamlineConfig.minCameraLength,
+              step: beamlineConfig.cameraLengthStep,
             },
           }}
           onChange={handleCameraLength}
@@ -279,7 +263,7 @@ export default function BeampropertiesDataEntry() {
           type="number"
           size="small"
           defaultValue={""}
-          value={angle ?? ""}
+          value={beamlineConfig.angle ?? ""}
           onChange={handleAngle}
         />
         <FormControl>
@@ -287,7 +271,7 @@ export default function BeampropertiesDataEntry() {
           <Select
             size="small"
             label="units"
-            value={angleUnits}
+            value={beamlineConfig.angleUnits}
             onChange={handleAngleUnits}
           >
             <MenuItem value={AngleUnits.radians}>{AngleUnits.radians}</MenuItem>
diff --git a/src/data-entry/beamlineconfigStore.ts b/src/data-entry/beamlineconfigStore.ts
index 9210698..973109f 100644
--- a/src/data-entry/beamlineconfigStore.ts
+++ b/src/data-entry/beamlineconfigStore.ts
@@ -20,6 +20,7 @@ export const useBeamlineConfigStore = create<BeamlineConfigStore>((set) => ({
   maxWavelength: defaultConfig.maxWavelength,
   minCameraLength: defaultConfig.minCameraLength,
   maxCameraLength: defaultConfig.maxCameraLength,
+  cameraLengthStep: defaultConfig.cameraLengthStep,
   energy: null,
   wavelength: null,
   beamEnergyUnits: EnergyUnits.kiloElectronVolts,
diff --git a/src/plot/centrePlot.tsx b/src/plot/centrePlot.tsx
index ae86343..70b67fb 100644
--- a/src/plot/centrePlot.tsx
+++ b/src/plot/centrePlot.tsx
@@ -35,10 +35,12 @@ import {
   angstroms2Nanometres,
   nanometres2Angstroms,
 } from "../utils/units";
-import { convertBetweenQAndD, convertBetweenQAndS } from "../results/scatteringQuantities";
+import {
+  convertBetweenQAndD,
+  convertBetweenQAndS,
+} from "../results/scatteringQuantities";
 import { color2String } from "./plotUtils";
 
-
 export default function CentrePlot(): JSX.Element {
   const plotConfig = usePlotStore();
   const beamlineConfig = useBeamlineConfigStore<BeamlineConfig>((state) => {
@@ -60,11 +62,11 @@ export default function CentrePlot(): JSX.Element {
       maxWavelength: state.maxWavelength,
       minCameraLength: state.minCameraLength,
       maxCameraLength: state.maxCameraLength,
+      cameraLengthStep: state.cameraLengthStep,
       wavelength: wavelength,
     };
   });
 
-
   const detector = useDetectorStore((state) => state.current);
   const beamstop = useBeamstopStore((state): Beamstop => {
     return {
@@ -162,7 +164,11 @@ export default function CentrePlot(): JSX.Element {
 
   const ajustedPoints = adjustRange(ptMin, ptMax, detector);
 
-  const domains = getDomains(ajustedDetector, ajustedCameraTube);
+  const domains = getDomains(
+    ajustedDetector,
+    ajustedCameraTube,
+    plotConfig.plotAxes,
+  );
 
   //
   const requestedRange = useResultStore<NumericRange | null>((state) => {
@@ -178,7 +184,7 @@ export default function CentrePlot(): JSX.Element {
             if (state.dUnits === WavelengthUnits.angstroms) {
               value = angstroms2Nanometres(value);
             }
-            value = convertBetweenQAndD(value)
+            value = convertBetweenQAndD(value);
             break;
           case ScatteringOptions.s:
             if (state.sUnits === WavelengthUnits.angstroms) {
@@ -192,25 +198,31 @@ export default function CentrePlot(): JSX.Element {
             }
         }
         return value;
-      })
+      },
+    );
   });
 
   let requestedDiagramMin: Vector2 | null = new Vector2(0, 0);
   let requestedDiagramMax: Vector2 | null = new Vector2(0, 0);
 
-  if (requestedRange && beamlineConfig.angle && beamlineConfig.cameraLength && beamlineConfig.wavelength) {
+  if (
+    requestedRange &&
+    beamlineConfig.angle &&
+    beamlineConfig.cameraLength &&
+    beamlineConfig.wavelength
+  ) {
     requestedDiagramMax = getPointForQ(
       requestedRange.max * 1e9,
       beamlineConfig.angle,
       beamlineConfig.cameraLength,
-      (beamlineConfig.wavelength) * 1e-9,
+      beamlineConfig.wavelength * 1e-9,
       ajustedBeamstop,
     );
     requestedDiagramMin = getPointForQ(
       requestedRange.min * 1e9,
       beamlineConfig.angle,
       beamlineConfig.cameraLength,
-      (beamlineConfig.wavelength) * 1e-9,
+      beamlineConfig.wavelength * 1e-9,
       ajustedBeamstop,
     );
   }
@@ -231,10 +243,12 @@ export default function CentrePlot(): JSX.Element {
                 <VisCanvas
                   showGrid={true}
                   abscissaConfig={{
-                    visDomain: [domains.xAxis.min, domains.xAxis.max], showGrid: true
+                    visDomain: [domains.xAxis.min, domains.xAxis.max],
+                    showGrid: true,
                   }}
                   ordinateConfig={{
-                    visDomain: [domains.yAxis.max, domains.yAxis.min], showGrid: true
+                    visDomain: [domains.yAxis.max, domains.yAxis.min],
+                    showGrid: true,
                   }}
                 >
                   <DefaultInteractions />
@@ -247,14 +261,14 @@ export default function CentrePlot(): JSX.Element {
                       ),
                       new Vector3(
                         (ajustedBeamstop.centre.x ?? 0) +
-                        ajustedBeamstop.diameter / 2,
+                          ajustedBeamstop.diameter / 2,
                         ajustedBeamstop.centre.y ?? 0,
                       ),
                       new Vector3(
                         ajustedBeamstop.centre.x ?? 0,
                         (ajustedBeamstop.centre.y ?? 0) +
-                        ajustedBeamstop.diameter / 2 +
-                        (ajustedBeamstop.clearance ?? 0),
+                          ajustedBeamstop.diameter / 2 +
+                          (ajustedBeamstop.clearance ?? 0),
                       ),
                       new Vector3(
                         ajustedCameraTube.centre.x ?? 0,
@@ -263,7 +277,7 @@ export default function CentrePlot(): JSX.Element {
                       new Vector3(
                         ajustedCameraTube.centre.x ?? 0,
                         (ajustedCameraTube.centre.y ?? 0) +
-                        ajustedCameraTube.diameter / 2,
+                          ajustedCameraTube.diameter / 2,
                       ),
                       new Vector3(0, 0),
                       new Vector3(
@@ -311,24 +325,30 @@ export default function CentrePlot(): JSX.Element {
                             strokeWidth={2}
                           />
                         )}
-                        {plotConfig.qrange && plotConfig.beamstop && requestedMin && requestedMax && (
-                          <SvgLine
-                            coords={[beamstopCentre, minQRange]}
-                            stroke="orange"
-                            strokeWidth={2}
-                          />
-                        )}
-                        {plotConfig.beamstop && plotConfig.qrange && requestedMin && requestedMax && (
-                          <SvgCircle
-                            coords={[beamstopCentre, clearance]}
-                            fill="rgba(0, 0, 255, 0.2)"
-                            id="clearance"
-                          />
-                        )}
+                        {plotConfig.qrange &&
+                          plotConfig.beamstop &&
+                          requestedMin &&
+                          requestedMax && (
+                            <SvgLine
+                              coords={[beamstopCentre, minQRange]}
+                              stroke="orange"
+                              strokeWidth={2}
+                            />
+                          )}
+                        {plotConfig.beamstop &&
+                          plotConfig.qrange &&
+                          requestedMin &&
+                          requestedMax && (
+                            <SvgCircle
+                              coords={[beamstopCentre, clearance]}
+                              fill="rgba(0, 0, 255, 0.2)"
+                              id="clearance"
+                            />
+                          )}
                         {plotConfig.beamstop && (
                           <SvgCircle
                             coords={[beamstopCentre, beamstopPerimeter]}
-                            fill="black"
+                            fill={color2String(plotConfig.beamstopColor)}
                             id="beamstop"
                           />
                         )}
diff --git a/src/plot/legendBar.tsx b/src/plot/legendBar.tsx
index f9bea02..efbcd28 100644
--- a/src/plot/legendBar.tsx
+++ b/src/plot/legendBar.tsx
@@ -13,21 +13,10 @@ import {
 } from "@mui/material";
 import { PlotAxes, usePlotStore } from "./plotStore";
 import ColourPickerPopover from "../utils/colourPicker";
-import { ColorResult } from "react-color";
-
 
 export default function LegendBar(): JSX.Element {
   const plotConfig = usePlotStore();
 
-
-  const handleDetectorColourChange = (color: ColorResult) => {
-    plotConfig.update({ detectorColour: color.rgb })
-  }
-
-  const handleCameraTubeColourChange = (color: ColorResult) => {
-    plotConfig.update({ cameraTubeColor: color.rgb })
-  }
-
   return (
     <Card sx={{ height: 1, width: 1 }}>
       <CardContent>
@@ -45,9 +34,15 @@ export default function LegendBar(): JSX.Element {
               }
               label={
                 <Stack direction={"row"}>
-                  <ColourPickerPopover color={plotConfig.detectorColour} onChangeComplete={handleDetectorColourChange} />
+                  <ColourPickerPopover
+                    color={plotConfig.detectorColour}
+                    onChangeComplete={(color) =>
+                      plotConfig.update({ detectorColour: color.rgb })
+                    }
+                  />
                   <Typography>Detector:</Typography>
-                </Stack>}
+                </Stack>
+              }
             />
             <FormControlLabel
               control={
@@ -60,9 +55,15 @@ export default function LegendBar(): JSX.Element {
               }
               label={
                 <Stack direction={"row"}>
-                  <ColourPickerPopover color={plotConfig.cameraTubeColor} onChangeComplete={handleCameraTubeColourChange} />
+                  <ColourPickerPopover
+                    color={plotConfig.cameraTubeColor}
+                    onChangeComplete={(color) =>
+                      plotConfig.update({ cameraTubeColor: color.rgb })
+                    }
+                  />
                   <Typography>Camera Tube:</Typography>
-                </Stack>}
+                </Stack>
+              }
             />
             <FormControlLabel
               control={
@@ -74,8 +75,17 @@ export default function LegendBar(): JSX.Element {
                   }}
                 />
               }
-              label="Beamstop"
-
+              label={
+                <Stack direction={"row"}>
+                  <ColourPickerPopover
+                    color={plotConfig.beamstopColor}
+                    onChangeComplete={(color) =>
+                      plotConfig.update({ beamstopColor: color.rgb })
+                    }
+                  />
+                  <Typography>Beamstop</Typography>
+                </Stack>
+              }
             />
             <FormControlLabel
               control={
diff --git a/src/plot/plotStore.ts b/src/plot/plotStore.ts
index 3b1fbe2..2fdcc9b 100644
--- a/src/plot/plotStore.ts
+++ b/src/plot/plotStore.ts
@@ -11,6 +11,7 @@ export interface PlotConfig {
   detector: boolean;
   detectorColour: RGBColor;
   beamstop: boolean;
+  beamstopColor: RGBColor;
   cameraTube: boolean;
   cameraTubeColor: RGBColor;
   clearnace: boolean;
@@ -24,10 +25,11 @@ export interface PlotConfig {
 
 export const usePlotStore = create<PlotConfig>((set) => ({
   detector: true,
-  detectorColour: { r: 1, g: 2, b: 1, a: 0.2 },
+  detectorColour: { r: 144, g: 19, b: 254, a: 0.4 },
   beamstop: true,
+  beamstopColor: { r: 0, g: 0, b: 0, a: 1 },
   cameraTube: true,
-  cameraTubeColor: { r: 1, g: 2, b: 1, a: 0.2 },
+  cameraTubeColor: { r: 80, g: 227, b: 194, a: 0.4 },
   clearnace: true,
   qrange: true,
   mask: false,
diff --git a/src/plot/plotUtils.ts b/src/plot/plotUtils.ts
index 9e14892..fd661b3 100644
--- a/src/plot/plotUtils.ts
+++ b/src/plot/plotUtils.ts
@@ -1,14 +1,18 @@
 import { CircularDevice, Detector } from "../utils/types";
 import NumericRange from "../calculations/numericRange";
 import { RGBColor } from "react-color";
-
-const offset = 100;
+import { PlotAxes } from "./plotStore";
 
 // Questionable is this how you would do this think about it a little more
 export const getDomains = (
   detector: Detector,
   cameraTube: CircularDevice,
+  axes: PlotAxes,
 ): { xAxis: NumericRange; yAxis: NumericRange } => {
+  let offset = 500;
+  if (axes === PlotAxes.milimeter) {
+    offset = 100;
+  }
   const maxLength = Math.max(
     detector.resolution.height,
     detector.resolution.width,
@@ -21,5 +25,5 @@ export const getDomains = (
 };
 
 export const color2String = (color: RGBColor) => {
-  return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
-};
\ No newline at end of file
+  return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+};
diff --git a/src/presets/presetConfigs.json b/src/presets/presetConfigs.json
index 6eae376..1eeb0d9 100644
--- a/src/presets/presetConfigs.json
+++ b/src/presets/presetConfigs.json
@@ -22,7 +22,8 @@
     "minWavelength": 0.062,
     "maxWavelength": 0.335,
     "minCameraLength": 1.9,
-    "maxCameraLength": 9.9
+    "maxCameraLength": 9.9,
+    "cameraLengthStep": 1
   },
   "I22 SAXS Anisotropic": {
     "detector": "Pilatus P3-2M",
@@ -47,6 +48,7 @@
     "minWavelength": 6.2e-2,
     "maxWavelength": 0.335,
     "minCameraLength": 1.9,
-    "maxCameraLength": 9.9
+    "maxCameraLength": 9.9,
+    "cameraLengthStep": 2
   }
 }
diff --git a/src/results/rangeDiagram.tsx b/src/results/rangeDiagram.tsx
index 9577671..2843d3e 100644
--- a/src/results/rangeDiagram.tsx
+++ b/src/results/rangeDiagram.tsx
@@ -42,13 +42,7 @@ export function RangeDiagram(props: {
         border: "solid black",
       }}
     >
-      <rect
-        y="0"
-        x="0"
-        width={`100%`}
-        height="50%"
-        fill={rectColour}
-      ></rect>
+      <rect y="0" x="0" width={`100%`} height="50%" fill={rectColour}></rect>
       <line
         x1={`${requestedMin}%`}
         y1={0}
diff --git a/src/results/resultsBar.tsx b/src/results/resultsBar.tsx
index f0817c7..3116975 100644
--- a/src/results/resultsBar.tsx
+++ b/src/results/resultsBar.tsx
@@ -79,9 +79,6 @@ export default function ResultsBar(props: {
         }
     }
   }
-  console.log(diagramFull)
-  console.log(diagramVisible)
-  console.log(diagramRequested)
 
   return (
     <Box sx={{ flexGrow: 1 }}>
@@ -123,7 +120,11 @@ export default function ResultsBar(props: {
                       <RadioGroup
                         row
                         value={resultStore.requested}
-                        onChange={(event) => resultStore.updateRequested(event.target.value as ScatteringOptions)}
+                        onChange={(event) =>
+                          resultStore.updateRequested(
+                            event.target.value as ScatteringOptions,
+                          )
+                        }
                       >
                         <FormControlLabel
                           value={ScatteringOptions.q}
@@ -149,7 +150,9 @@ export default function ResultsBar(props: {
                     diagramVisible &&
                     diagramFull &&
                     diagramRequested &&
-                    {/*diagramFull.containsRange(diagramVisible)*/ }
+                    {
+                      /*diagramFull.containsRange(diagramVisible)*/
+                    }
                   ) {
                     return (
                       <RangeDiagram
diff --git a/src/sideMenu.tsx b/src/sideMenu.tsx
index 56c7276..63decbe 100644
--- a/src/sideMenu.tsx
+++ b/src/sideMenu.tsx
@@ -6,7 +6,6 @@ import { Stack, Typography } from "@mui/material";
 
 // Ad some config options here
 export default function SideMenu() {
-
   return (
     <Box>
       <List>
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
deleted file mode 100644
index 70e26c1..0000000
--- a/src/typings/index.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
-    Typescript has a problem getting the types for @h5web/lib.
-    This is due to an issue in @h5web/lib's package.json 
-    The issue has already been fixed on github so  I am waiting for the next release
-    to remove this type declartion file
-*/
-declare module "@h5web/lib";
diff --git a/src/utils/colourPicker.tsx b/src/utils/colourPicker.tsx
index 41c0db3..16f164f 100644
--- a/src/utils/colourPicker.tsx
+++ b/src/utils/colourPicker.tsx
@@ -1,34 +1,47 @@
-import Popover from '@mui/material/Popover';
-import React from 'react';
-import { ColorResult, RGBColor, SketchPicker } from 'react-color';
-import { IconButton } from '@mui/material';
-import { color2String } from '../plot/plotUtils';
-import SquareIcon from '@mui/icons-material/Square';
+import Popover from "@mui/material/Popover";
+import React from "react";
+import { ColorResult, RGBColor, SketchPicker } from "react-color";
+import { IconButton } from "@mui/material";
+import { color2String } from "../plot/plotUtils";
+import SquareIcon from "@mui/icons-material/Square";
 
-export default function ColourPickerPopover(props: { color: RGBColor, onChangeComplete: (color: ColorResult) => void }) {
-    const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    const open = Boolean(anchorEl);
+export default function ColourPickerPopover(props: {
+  color: RGBColor;
+  onChangeComplete: (color: ColorResult) => void;
+}) {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
 
-    return (
-        <div>
-            <IconButton style={{ color: color2String(props.color) }} onClick={handleClick}><SquareIcon></SquareIcon></IconButton>
-            <Popover
-                open={open}
-                anchorEl={anchorEl}
-                onClose={handleClose}
-                anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                }}
-            >
-                <SketchPicker color={props.color} onChangeComplete={props.onChangeComplete} />
-            </Popover>
-        </div >
-    );
-}
\ No newline at end of file
+  return (
+    <div>
+      <IconButton
+        style={{ color: color2String(props.color) }}
+        onClick={handleClick}
+      >
+        <SquareIcon></SquareIcon>
+      </IconButton>
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <SketchPicker
+          color={props.color}
+          onChangeComplete={props.onChangeComplete}
+        />
+      </Popover>
+    </div>
+  );
+}
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 0a5fadb..4a38c6c 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -25,4 +25,5 @@ export interface BeamlineConfig {
   minCameraLength: number;
   maxCameraLength: number;
   wavelength: number | null;
+  cameraLengthStep: number;
 }
diff --git a/src/utils/units.ts b/src/utils/units.ts
index c8af449..a5d552b 100644
--- a/src/utils/units.ts
+++ b/src/utils/units.ts
@@ -156,9 +156,7 @@ export const electronVots2KiloElectronVolts = (input: number): number => {
  * @param input input string from the texbox
  * @returns a valid float or null
  */
-export const parseNumericInput = (
-  input: string,
-): number | null => {
+export const parseNumericInput = (input: string): number | null => {
   const output = parseFloat(input.trim());
 
   if (!output && output != 0) {