Start using plan ubutton for preset positions in oav

Author: noemifrisina

src/blueapi/BlueapiComponents.tsx

@@ -5,6 +5,7 @@ import {
   Button,
   Snackbar,
   SnackbarCloseReason,
+  styled,
   Tooltip,
   Typography,
 } from "@mui/material";
@@ -22,6 +23,15 @@ type RunPlanButtonProps = {
   btnSize?: ButtonSize;
 };
 
+// const CustomRunButton = styled(Button)({
+//   width: "100%",
+//   height: "85%",
+//   color: "var(--color)",
+//   backgroundColor: "var(--backgroundColor)",
+//   padding: "var(--padding)",
+//   margin: "var(--margin)",
+// });
+
 export function RunPlanButton(props: RunPlanButtonProps) {
   const [openSnackbar, setOpenSnackbar] = React.useState<boolean>(false);
   const [msg, setMsg] = React.useState<string>("Running plan...");

src/screens/OavMover.tsx

@@ -21,6 +21,7 @@ import {
   ArrowUpwardRounded,
   Close,
   Help,
+  Padding,
 } from "@mui/icons-material";
 import { useState } from "react";
 
@@ -31,6 +32,7 @@ import { PvDescription } from "../pv/types";
 import { SelectionWithPlanRunner } from "../components/SelectionControl";
 import { BacklightPositions, ZoomLevels } from "../pv/enumPvValues";
 import oxfordChipDiagram from "../assets/Oxford Chip Diagram.excalidraw.svg";
+import { RunPlanButton } from "../blueapi/BlueapiComponents";
 
 const buttonStyle = {
   color: "white",
@@ -205,59 +207,34 @@ export function PresetMovements() {
       <p>
         <b>Preset Positions</b>
       </p>
-      <Grid2>
-        <Tooltip title={"Move into position for collection"}>
-          <Button
-            style={buttonStyle}
-            onClick={() =>
-              submitAndRunPlanImmediately({
-                planName: "moveto_preset",
-                planParams: {
-                  place: "collect_position",
-                },
-              })
-            }
-          >
-            Collect Position
-          </Button>
-        </Tooltip>
-
-        <Tooltip title={"Move hardware for sample loading"}>
-          <Button
-            style={buttonStyle}
-            onClick={() =>
-              submitAndRunPlanImmediately({
-                planName: "moveto_preset",
-                planParams: {
-                  place: "load_position",
-                },
-              })
-            }
-          >
-            Load Position
-          </Button>
-        </Tooltip>
-        <Tooltip title={"Align microdrop"}>
-          <Button
-            style={buttonStyle}
-            onClick={() =>
-              submitAndRunPlanImmediately({
-                planName: "moveto_preset",
-                planParams: {
-                  place: "microdrop_position",
-                },
-              })
-            }
-          >
-            Microdrop Align
-          </Button>
-        </Tooltip>
-      </Grid2>
+      <Stack padding={"20px"} margin={"10px"} spacing={1}>
+        <RunPlanButton
+          btnLabel="Collect Position"
+          planName="moveto_preset"
+          planParams={{ place: "collect_position" }}
+          title="Move into position for collection"
+          btnSize="small"
+        />
+        <RunPlanButton
+          btnLabel="Load Position"
+          planName="moveto_preset"
+          planParams={{ place: "load_position" }}
+          title="Move hardware for sample loading"
+          btnSize="small"
+        />
+        <RunPlanButton
+          btnLabel="Microdrop align"
+          planName="moveto_preset"
+          planParams={{ place: "microdrop_position" }}
+          title="Align microdrop"
+          btnSize="small"
+        />
+      </Stack>
     </Box>
   );
 }
 
-export function SideDrawer() {
+export function PresetPositionsSideDrawer() {
   const [open, setOpen] = useState(false);
   const toggleDrawer = (newOpen: boolean) => () => {
     setOpen(newOpen);
@@ -507,7 +484,7 @@ export function OavMover() {
           <hr />
           <CoordinateSystem />
           <hr />
-          <SideDrawer />
+          <PresetPositionsSideDrawer />
         </Grid2>
       </Grid2>
     </div>