simplify zustand state

DiamondLightSource · Sep 7, 2023 · e81b1a4 · e81b1a4
1 parent bbb6936
commit e81b1a4
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 74 deletions.
diff --git a/src/basicAppBar.tsx b/src/basicAppBar.tsx
@@ -25,9 +25,8 @@ export default function BasicAppBar(): JSX.Element {
     (state) => state.updateCameraTube,
   );
   const updateBeamlineConfig = useBeamlineConfigStore(
-    (state) => state.updateBeamlineConfig,
+    (state) => state.update,
   );
-  const updatePreset = useBeamlineConfigStore((state) => state.updatePreset);
   const updateDetector = useDetectorStore((state) => state.updateDetector);
   const handlePreset = (preset: string) => {
     const { beamstop, cameraTube, detector, ...beamlineConfig } =
@@ -36,7 +35,7 @@ export default function BasicAppBar(): JSX.Element {
     updateBeamstop(beamstop);
     updateCameraTube(cameraTube);
     updateBeamlineConfig(beamlineConfig);
-    updatePreset(preset);
+    updateBeamlineConfig({ preset: preset });
   };
 
   return (

diff --git a/src/data-entry/beamProperties.tsx b/src/data-entry/beamProperties.tsx
@@ -40,15 +40,15 @@ export default function BeampropertiesDataEntry() {
     return state.energy;
   });
   const energyUnits = useBeamlineConfigStore((state) => state.beamEnergyUnits);
-  const updateEnergyUnits = useBeamlineConfigStore(
-    (state) => state.updateEnergyUnits,
+
+  const updateConfig = useBeamlineConfigStore(
+    (state) => state.update,
   );
-  const updateEnergy = useBeamlineConfigStore((state) => state.updateEnergy);
   const handleEnergy = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (energyUnits === EnergyUnits.electronVolts && event.target.value) {
-      updateEnergy(parseFloat(event.target.value) / 1000);
+      updateConfig({ energy: parseFloat(event.target.value) / 1000 });
     } else {
-      updateEnergy(parseFloat(event.target.value));
+      updateConfig({ energy: parseFloat(event.target.value) });
     }
   };
 
@@ -59,15 +59,11 @@ export default function BeampropertiesDataEntry() {
     return state.angle;
   });
   const angleUnits = useBeamlineConfigStore((state) => state.angleUnits);
-  const updateAngleUnits = useBeamlineConfigStore(
-    (state) => state.updateAngleUnits,
-  );
-  const updateAngle = useBeamlineConfigStore((state) => state.updateAngle);
   const handleAngle = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (angleUnits === AngleUnits.degrees && event.target.value) {
-      updateAngle(parseFloat(event.target.value) / (180 / Math.PI));
+      updateConfig({ angle: parseFloat(event.target.value) / (180 / Math.PI) });
     } else {
-      updateAngle(parseFloat(event.target.value));
+      updateConfig({ angle: parseFloat(event.target.value) });
     }
   };
 
@@ -84,27 +80,19 @@ export default function BeampropertiesDataEntry() {
   const wavelengthUnits = useBeamlineConfigStore(
     (state) => state.wavelengthUnits,
   );
-  const updateWavelengthUnits = useBeamlineConfigStore(
-    (state) => state.updateWavelengthUnits,
-  );
-  const updateWavelength = useBeamlineConfigStore(
-    (state) => state.updateWavelength,
-  );
   const handleWavelength = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (wavelengthUnits === WavelengthUnits.angstroms && event.target.value) {
-      updateWavelength(parseFloat(event.target.value) / 10);
+      updateConfig({ wavelength: parseFloat(event.target.value) / 10 });
     } else {
-      updateWavelength(parseFloat(event.target.value));
+      updateConfig({ wavelength: parseFloat(event.target.value) });
     }
   };
 
-  const updateCameraLength = useBeamlineConfigStore(
-    (state) => state.updateCameraLength,
-  );
   const handleCameraLength = (event: React.ChangeEvent<HTMLInputElement>) => {
-    updateCameraLength(
-      parseFloat(event.target.value) ? parseFloat(event.target.value) : null,
-    );
+    updateConfig({
+      cameraLength:
+        parseFloat(event.target.value) ? parseFloat(event.target.value) : null,
+    });
   };
 
   return (
@@ -125,7 +113,7 @@ export default function BeampropertiesDataEntry() {
             label="units"
             value={energyUnits}
             onChange={(event) =>
-              updateEnergyUnits(event.target.value as EnergyUnits)
+              updateConfig({ beamEnergyUnits: event.target.value as EnergyUnits })
             }
           >
             <MenuItem value={EnergyUnits.electronVolts}>
@@ -152,7 +140,7 @@ export default function BeampropertiesDataEntry() {
             label="units"
             value={wavelengthUnits}
             onChange={(event) =>
-              updateWavelengthUnits(event.target.value as WavelengthUnits)
+              updateConfig({ wavelengthUnits: event.target.value as WavelengthUnits })
             }
           >
             <MenuItem value={WavelengthUnits.nanmometres}>
@@ -202,7 +190,7 @@ export default function BeampropertiesDataEntry() {
             label="units"
             value={angleUnits}
             onChange={(event) =>
-              updateAngleUnits(event.target.value as AngleUnits)
+              updateConfig({ angleUnits: event.target.value as AngleUnits })
             }
           >
             <MenuItem value={AngleUnits.radians}>{AngleUnits.radians}</MenuItem>

diff --git a/src/data-entry/beamlineconfigStore.ts b/src/data-entry/beamlineconfigStore.ts
@@ -9,15 +9,7 @@ export interface BeamlineConfigStore extends BeamlineConfig {
   wavelengthUnits: WavelengthUnits;
   energy: number | null;
   wavelength: number | null;
-  updateEnergyUnits: (newUnits: EnergyUnits) => void;
-  updateAngleUnits: (newUnits: AngleUnits) => void;
-  updateWavelengthUnits: (newUnits: WavelengthUnits) => void;
-  updateEnergy: (newEnergy: number | null) => void;
-  updateAngle: (newAngle: number | null) => void;
-  updateWavelength: (newWavelength: number | null) => void;
-  updatePreset: (newPreset: string) => void;
-  updateBeamlineConfig: (newConfig: BeamlineConfig) => void;
-  updateCameraLength: (cameraLength: number | null) => void;
+  update: (storeConfig: Partial<BeamlineConfigStore>) => void;
 }
 
 export const useBeamlineConfigStore = create<BeamlineConfigStore>((set) => ({
@@ -33,20 +25,5 @@ export const useBeamlineConfigStore = create<BeamlineConfigStore>((set) => ({
   beamEnergyUnits: EnergyUnits.kiloElectronVolts,
   angleUnits: AngleUnits.radians,
   wavelengthUnits: WavelengthUnits.nanmometres,
-  updateEnergyUnits: (newUnits: EnergyUnits) =>
-    set({ beamEnergyUnits: newUnits }),
-  updateAngleUnits: (newUnits: AngleUnits) => set({ angleUnits: newUnits }),
-  updateWavelengthUnits: (newUnits: WavelengthUnits) =>
-    set({ wavelengthUnits: newUnits }),
-  updateEnergy: (newEnergy: number | null) => set({ energy: newEnergy }),
-  updateAngle: (newAngle: number | null) => set({ angle: newAngle }),
-  updateWavelength: (newWavelength: number | null) =>
-    set({ wavelength: newWavelength }),
-  updateBeamlineConfig: (presetBeamlineConfig: BeamlineConfig) => {
-    set(presetBeamlineConfig);
-  },
-  updatePreset: (preset: string) => {
-    set({ preset: preset });
-  },
-  updateCameraLength: (length: number | null) => set({ cameraLength: length }),
+  update: (storeConfig: Partial<BeamlineConfigStore>) => set({ ...storeConfig }),
 }));
diff --git a/src/plot/centrePlot.tsx b/src/plot/centrePlot.tsx
@@ -7,6 +7,7 @@ import {
   VisCanvas,
   SvgCircle,
   SvgRect,
+  SvgLine,
 } from "@h5web/lib";
 import { Vector3 } from "three";
 import { useBeamstopStore } from "../data-entry/beamstopStore";
@@ -115,6 +116,7 @@ export default function CentrePlot(): JSX.Element {
                     detector.resolution.width,
                     detector.resolution.height,
                   ),
+                  new Vector3(detector.resolution.width / 2, 0),
                 ]}
               >
                 {(
@@ -125,35 +127,47 @@ export default function CentrePlot(): JSX.Element {
                   cameraTubePerimeter: Vector3,
                   detectorLower: Vector3,
                   detectorUpper: Vector3,
+                  qrangeEnd: Vector3,
                 ) => (
                   <SvgElement>
-                    {plotConfig.cameraTube &&
+                    {plotConfig.cameraTube && (
                       <SvgCircle
                         coords={[cameraTubeCentre, cameraTubePerimeter]}
                         fill="rgba(0, 255, 0, 0.2)"
                         id="camera tube"
-                      />}
-                    {plotConfig.beamstop &&
+                      />
+                    )}
+                    {plotConfig.qrange && (
+                      <SvgLine
+                        coords={[beamstopCentre, qrangeEnd]}
+                        stroke="blue"
+                        strokeWidth={2}
+                      />
+                    )}
+                    {plotConfig.beamstop && (
                       <SvgCircle
                         coords={[beamstopCentre, clearance]}
                         fill="rgba(0, 0, 255, 0.2)"
                         id="clearance"
-                      />}
-                    {plotConfig.beamstop &&
+                      />
+                    )}
+                    {plotConfig.beamstop && (
                       <SvgCircle
                         coords={[beamstopCentre, beamstopPerimeter]}
                         fill="black"
                         id="beamstop"
-                      />}
-                    {plotConfig.detector &&
+                      />
+                    )}
+                    {plotConfig.detector && (
                       <SvgRect
                         coords={[detectorLower, detectorUpper]}
                         fill="rgba(255, 0, 0, 0.2)"
                         id="detector"
                         stroke="black"
                         strokePosition="outside"
                         strokeWidth={0}
-                      />}
+                      />
+                    )}
                   </SvgElement>
                 )}
               </DataToHtml>

diff --git a/src/plot/legendBar.tsx b/src/plot/legendBar.tsx
@@ -25,27 +25,67 @@ export default function LegendBar(): JSX.Element {
           <Typography>Add something to do with colors here</Typography>
           <FormGroup>
             <FormControlLabel
-              control={<Checkbox checked={plotConfig.detector} onChange={(_, checked) => plotConfig.edit({ detector: checked })} />}
+              control={
+                <Checkbox
+                  checked={plotConfig.detector}
+                  onChange={(_, checked) =>
+                    plotConfig.update({ detector: checked })
+                  }
+                />
+              }
               label="Detector"
             />
             <FormControlLabel
-              control={<Checkbox checked={plotConfig.beamstop} onChange={(_, checked) => plotConfig.edit({ beamstop: checked })} />}
+              control={
+                <Checkbox
+                  checked={plotConfig.beamstop}
+                  onChange={(_, checked) =>
+                    plotConfig.update({ beamstop: checked })
+                  }
+                />
+              }
               label="Beamstop"
             />
             <FormControlLabel
-              control={<Checkbox checked={plotConfig.cameraTube} onChange={(_, checked) => plotConfig.edit({ cameraTube: checked })} />}
+              control={
+                <Checkbox
+                  checked={plotConfig.cameraTube}
+                  onChange={(_, checked) =>
+                    plotConfig.update({ cameraTube: checked })
+                  }
+                />
+              }
               label="Camera tube"
             />
             <FormControlLabel
-              control={<Checkbox checked={plotConfig.qrange} onChange={(_, checked) => plotConfig.edit({ qrange: checked })} />}
+              control={
+                <Checkbox
+                  checked={plotConfig.qrange}
+                  onChange={(_, checked) =>
+                    plotConfig.update({ qrange: checked })
+                  }
+                />
+              }
               label="Q range"
             />
             <FormControlLabel
-              control={<Checkbox checked={plotConfig.mask} onChange={(_, checked) => plotConfig.edit({ mask: checked })} />}
+              control={
+                <Checkbox
+                  checked={plotConfig.mask}
+                  onChange={(_, checked) => plotConfig.update({ mask: checked })}
+                />
+              }
               label="Mask"
             />
             <FormControlLabel
-              control={<Checkbox checked={plotConfig.calibrantInPlot} onChange={(_, checked) => plotConfig.edit({ calibrantInPlot: checked })} />}
+              control={
+                <Checkbox
+                  checked={plotConfig.calibrantInPlot}
+                  onChange={(_, checked) =>
+                    plotConfig.update({ calibrantInPlot: checked })
+                  }
+                />
+              }
               label="Calibrant"
             />
           </FormGroup>
@@ -59,7 +99,7 @@ export default function LegendBar(): JSX.Element {
               value={plotConfig.plotAxes}
               name="radio-buttons-group"
               onChange={(event) =>
-                plotConfig.edit({ plotAxes: event.target.value as PlotAxes })
+                plotConfig.update({ plotAxes: event.target.value as PlotAxes })
               }
             >
               <FormControlLabel

diff --git a/src/plot/plotStore.ts b/src/plot/plotStore.ts
@@ -16,7 +16,7 @@ export interface PlotConfig {
   calibrantInPlot: boolean;
   calibrant: string;
   plotAxes: PlotAxes;
-  edit: (newConfig: Partial<PlotConfig>) => void;
+  update: (newConfig: Partial<PlotConfig>) => void;
 }
 
 export const usePlotStore = create<PlotConfig>((set) => ({
@@ -29,7 +29,7 @@ export const usePlotStore = create<PlotConfig>((set) => ({
   calibrantInPlot: false,
   calibrant: "something",
   plotAxes: PlotAxes.milimeter,
-  edit: (newConfig) => {
+  update: (newConfig) => {
     set({ ...newConfig });
   },
 }));
diff --git a/src/presets/detectors.json b/src/presets/detectors.json
@@ -20,4 +20,4 @@
     },
     "pixelSize": 0.2
   }
-}
+}