Merge pull request #39 from DiamondLightSource/2_add-zoom-control

Add component for zoom control

Author: noemifrisina

src/components/SelectionControl.tsx

@@ -8,13 +8,12 @@ type SelectionProps = PvDescription & {
   id: string;
   plan_name: string;
   choices: string[];
-  transformValue?: Transformer;
 };
 
 /** Custom component for a dropdown selection which runs a plan unpon every change event
  * For now to be used for backlight and zoom control
  */
-export function SelectAndRunPlan(props: SelectionProps) {
+export function SelectionWithPlanRunner(props: SelectionProps) {
   const currentValue = String(
     useParsedPvConnection({
       pv: props.pv,
@@ -23,20 +22,20 @@ export function SelectAndRunPlan(props: SelectionProps) {
     })
   );
   console.log(`${props.id} current value: ${currentValue}`);
-  const [val, updateVal] = React.useState<string>(currentValue.toString());
+  const [_, updateVal] = React.useState<string>(currentValue.toString());
 
   const handleChange = (newValue: typeof currentValue) => {
     updateVal(newValue);
     submitAndRunPlanImmediately(props.plan_name, { position: newValue });
   };
 
   return (
-    <FormControl size="small" style={{ width: 150 }}>
+    <FormControl size="small" style={{ width: 200 }}>
       <InputLabel id={props.label}>{props.id}</InputLabel>
       <Select
         labelId={props.label}
         id={props.id}
-        value={val}
+        value={currentValue}
         label={props.label}
         onChange={(e) => handleChange(String(e.target.value))}
       >

src/pv/enumPvValues.ts

@@ -0,0 +1,20 @@
+export const BacklightPositions = [
+  "Out",
+  "In",
+  "LoadCheck",
+  "OAV2",
+  "Diode",
+  "White In",
+];
+
+export const ZoomLevels = [
+  "1.0",
+  "2.0",
+  "3.0",
+  "4.0",
+  "5.0",
+  "6.0",
+  "8.0",
+  "10.0",
+  "11.0",
+];

src/screens/OavMover.tsx

@@ -12,16 +12,8 @@ import React from "react";
 import { submitAndRunPlanImmediately } from "../blueapi/blueapi";
 import { CoordNumberInput } from "../components/CoordNumberInput";
 import { PvDescription } from "../pv/PvComponent";
-import { SelectAndRunPlan } from "../components/SelectionControl";
-
-const BacklightPositions = [
-  "Out",
-  "In",
-  "LoadCheck",
-  "OAV2",
-  "Diode",
-  "White In",
-];
+import { SelectionWithPlanRunner } from "../components/SelectionControl";
+import { BacklightPositions, ZoomLevels } from "../pv/enumPvValues";
 
 function BacklightControl(props: PvDescription) {
   const theme = useTheme();
@@ -32,7 +24,7 @@ function BacklightControl(props: PvDescription) {
       paddingTop={1}
       paddingBottom={1}
     >
-      <SelectAndRunPlan
+      <SelectionWithPlanRunner
         pv={props.pv}
         label={props.label}
         id="Backlight"
@@ -43,6 +35,26 @@ function BacklightControl(props: PvDescription) {
   );
 }
 
+function ZoomControl(props: PvDescription) {
+  const theme = useTheme();
+  return (
+    <Box
+      bgcolor={theme.palette.background.paper}
+      borderRadius={5}
+      paddingTop={1}
+      paddingBottom={1}
+    >
+      <SelectionWithPlanRunner
+        pv={props.pv}
+        label={props.label}
+        id="ZoomControl"
+        plan_name="gui_set_zoom_level"
+        choices={ZoomLevels}
+      />
+    </Box>
+  );
+}
+
 export function MoveArrows() {
   const theme = useTheme();
   return (
@@ -210,6 +222,10 @@ export function OavMover() {
             label="backlight-pos"
             pv="ca://BL24I-MO-BL-01:MP:SELECT"
           />
+          <ZoomControl
+            label="zoom-level"
+            pv="ca://BL24I-EA-OAV-01:FZOOM:MP:SELECT"
+          />
         </Grid2>
       </Grid2>
     </div>