98 responsive oav

src/screens/OavMover/OAVCoordinateSystem.tsx

@@ -1,19 +1,65 @@
 import { Help, Close } from "@mui/icons-material";
 import {
-  Box,
   Grid2,
   Dialog,
   DialogTitle,
   IconButton,
   DialogContent,
   Typography,
+  Divider,
+  Stack,
 } from "@mui/material";
 import React from "react";
 import oxfordChipDiagram from "#/assets/Oxford Chip Diagram.excalidraw.svg";
 import { containedButtonStyles } from "#/blueapi/BlueapiComponentsStyling.ts";
 import { RunPlanButton } from "#/blueapi/BlueapiComponents.tsx";
 
+type PlanButton = {
+  label: string;
+  planName: string;
+  planParams?: Record<string, string>;
+  title: string;
+};
+
 export function CoordinateSystem() {
+  const coordinateSystemSetup: PlanButton[] = [
+    {
+      label: "Go to origin",
+      planName: "moveto",
+      planParams: { place: "zero" },
+      title: "Go to Fiducial 0",
+    },
+    {
+      label: "Go to Fiducial1",
+      planName: "moveto",
+      planParams: { place: "f1" },
+      title: "Go to Fiducial 1",
+    },
+    {
+      label: "Go to Fiducial2",
+      planName: "moveto",
+      planParams: { place: "f2" },
+      title: "Go to Fiducial 2",
+    },
+    {
+      label: "Set Fiducial0",
+      planName: "gui_set_fiducial_0",
+      title: "Set Fiducial 0",
+    },
+    {
+      label: "Set Fiducial1",
+      planName: "fiducial",
+      planParams: { point: "1" },
+      title: "Set Fiducial 1",
+    },
+    {
+      label: "Set Fiducial2",
+      planName: "fiducial",
+      planParams: { point: "2" },
+      title: "Set Fiducial 2",
+    },
+  ];
+
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -25,100 +71,56 @@ export function CoordinateSystem() {
 
   return (
     <>
-      <Box>
-        <Grid2 container alignItems={"center"} rowSpacing={1} spacing={0.5}>
-          <Grid2 size={10}>
-            <b>Co-ordinate System Setup</b>
-          </Grid2>
-          <Grid2>
-            <Help onClick={handleClickOpen} />
-          </Grid2>
-          <Grid2 size={4}>
-            <RunPlanButton
-              btnLabel="Go to origin"
-              planName="moveto"
-              planParams={{ place: "zero" }}
-              title="Go to Fiducial 0"
-              btnVariant="contained"
-              btnSize="large"
-              sx={containedButtonStyles}
-            />
-          </Grid2>
-          <Grid2 size={4}>
-            <RunPlanButton
-              btnLabel="Go to Fiducial1"
-              planName="moveto"
-              planParams={{ place: "f1" }}
-              title="Go to Fiducial 1"
-              btnVariant="contained"
-              btnSize="large"
-              sx={containedButtonStyles}
-            />
-          </Grid2>
-          <Grid2 size={4}>
-            <RunPlanButton
-              btnLabel="Go to Fiducial2"
-              planName="moveto"
-              planParams={{ place: "f2" }}
-              title="Go to Fiducial 2"
-              btnVariant="contained"
-              btnSize="large"
-              sx={containedButtonStyles}
-            />
-          </Grid2>
-          <Grid2 size={4}>
-            <RunPlanButton
-              btnLabel="Set Fiducial0"
-              planName="gui_set_fiducial_0"
-              title="Set Fiducial 0"
-              btnVariant="contained"
-              sx={containedButtonStyles}
-            />
-          </Grid2>
-          <Grid2 size={4}>
-            <RunPlanButton
-              btnLabel="Set Fiducial1"
-              planName="fiducial"
-              planParams={{ point: "1" }}
-              title="Set Fiducial 1"
-              btnVariant="contained"
-              sx={containedButtonStyles}
-            />
-          </Grid2>
+      <Divider sx={{ my: 1 }}>
+        <Stack direction="row" spacing={1}>
+          <Typography variant="subtitle1">Co-ordinate System Setup</Typography>
+          <Help
+            fontSize="small"
+            sx={{ cursor: "pointer" }}
+            onClick={handleClickOpen}
+          />
+        </Stack>
+      </Divider>
+      <Grid2 container rowSpacing={1} spacing={0.5}>
+        {coordinateSystemSetup.map((button) => (
           <Grid2 size={4}>
             <RunPlanButton
-              btnLabel="Set Fiducial2"
-              planName="fiducial"
-              planParams={{ point: "2" }}
-              title="Set Fiducial 2"
-              btnVariant="contained"
-              sx={containedButtonStyles}
-            />
-          </Grid2>
-          <Grid2 size={6}>
-            <RunPlanButton
-              btnLabel="Make Coord System"
-              planName="cs_maker"
-              title="Create the coordinate system on the pmac."
-              btnVariant="contained"
-              sx={containedButtonStyles}
-            />
-          </Grid2>
-          <Grid2 size={6}>
-            <RunPlanButton
-              btnLabel="Run block check"
-              planName="block_check"
-              title="Check the coordinate system was set up correctly."
+              key={button.label}
+              btnLabel={button.label}
+              planName={button.planName}
+              planParams={button.planParams}
+              title={button.title}
               btnVariant="contained"
               sx={containedButtonStyles}
             />
           </Grid2>
+        ))}
+
+        <Grid2 size={6}>
+          <RunPlanButton
+            btnLabel="Make Coord System"
+            planName="cs_maker"
+            title="Create the coordinate system on the pmac."
+            btnVariant="contained"
+            sx={containedButtonStyles}
+          />
+        </Grid2>
+        <Grid2 size={6}>
+          <RunPlanButton
+            btnLabel="Run block check"
+            planName="block_check"
+            title="Check the coordinate system was set up correctly."
+            btnVariant="contained"
+            sx={containedButtonStyles}
+          />
         </Grid2>
-      </Box>
+      </Grid2>
       <Dialog
         onClose={handleClose}
         aria-labelledby="customized-dialog-title"
         open={open}
+        maxWidth="md"
+        scroll="body"
       >
         <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
           How to use Co-ordinate System Setup
@@ -136,7 +138,10 @@ export function CoordinateSystem() {
           <Close />
         </IconButton>
         <DialogContent dividers>
-          <img src={oxfordChipDiagram} alt="" />
+          <img
+            src={oxfordChipDiagram}
+            alt="Oxford Chip Fiducial Alignment Diagram"
+          />
           <Typography gutterBottom>
             Fiducial alignment for an Oxford type chip. Fiducial 0 is the
             origin, the top left corner. Fiducial 1 is the top right corner and

src/screens/OavMover/OAVMoveController.tsx

@@ -9,7 +9,7 @@ import {
   KeyboardArrowDown,
   KeyboardDoubleArrowDown,
 } from "@mui/icons-material";
-import { Box, Tabs, Tab, useTheme } from "@mui/material";
+import { Box, Tabs, Tab, useTheme, useMediaQuery } from "@mui/material";
 import { useState } from "react";
 
 interface TabPanelProps {
@@ -28,11 +28,12 @@ const arrowsBoxStyle = {
 
 const arrowsScreenSizing = {
   minWidth: {
+    md: "16px",
     lg: "32px",
     xl: "64px",
   },
   width: {
-    lg: "32px",
+    md: "32px",
   },
 };
 
@@ -218,35 +219,33 @@ function WindowMove(props: TabPanelProps) {
 
 function FocusMove(props: TabPanelProps) {
   if (props.value !== props.index) return null;
+  const focus_move = [
+    { direction: "in", size_of_move: "big", label: "IN x3" },
+    { direction: "in", size_of_move: "small", label: "IN" },
+    { direction: "out", size_of_move: "small", label: "OUT" },
+    { direction: "out", size_of_move: "big", label: "OUT x3" },
+  ];
 
   return (
     <Box
-      sx={{ ...arrowsBoxStyle, py: 2, gridTemplateColumns: "repeat(4, 1fr)" }}
+      sx={{
+        ...arrowsBoxStyle,
+        py: 2,
+        gridTemplateColumns: { lg: "repeat(2, 1fr)", xl: "repeat(4, 1fr)" },
+      }}
     >
-      <RunPlanButton
-        btnLabel={"IN x3"}
-        planName={"focus_on_oav_view"}
-        planParams={{ direction: "in", size_of_move: "big" }}
-        btnVariant="outlined"
-      />
-      <RunPlanButton
-        btnLabel={"IN"}
-        planName={"focus_on_oav_view"}
-        planParams={{ direction: "in", size_of_move: "small" }}
-        btnVariant="outlined"
-      />
-      <RunPlanButton
-        btnLabel={"OUT"}
-        planName={"focus_on_oav_view"}
-        planParams={{ direction: "out", size_of_move: "small" }}
-        btnVariant="outlined"
-      />
-      <RunPlanButton
-        btnLabel={"OUT x3"}
-        planName={"focus_on_oav_view"}
-        planParams={{ direction: "out", size_of_move: "big" }}
-        btnVariant="outlined"
-      />
+      {focus_move.map((move) => (
+        <RunPlanButton
+          key={`${move.direction}-${move.size_of_move}`}
+          btnLabel={move.label}
+          planName={"focus_on_oav_view"}
+          planParams={{
+            direction: move.direction,
+            size_of_move: move.size_of_move,
+          }}
+          btnVariant="outlined"
+        />
+      ))}
     </Box>
   );
 }
@@ -255,6 +254,7 @@ export function MoveArrows() {
   const theme = useTheme();
 
   const [value, setValue] = useState(0);
+  const isSmall = useMediaQuery(theme.breakpoints.down("xl"));
 
   const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -272,10 +272,18 @@ export function MoveArrows() {
           value={value}
           onChange={handleChange}
           sx={{
+            "& .MuiTabs-flexContainer": {
+              flexWrap: isSmall ? "wrap" : "nowrap",
+            },
+            "& .MuiTab-root": {
+              minWidth: isSmall ? "50%" : "25%",
+              maxWidth: isSmall ? "50%" : "none",
+            },
             "& .MuiTab-root.Mui-selected": {
               color: theme.palette.secondary.main,
             },
             "& .MuiTabs-indicator": {
+              display: isSmall ? "none" : "block",
               backgroundColor: theme.palette.secondary.dark,
             },
           }}

src/screens/OavMover/OAVMover.test.tsx

@@ -53,10 +53,11 @@ describe("OavMover Components", () => {
   });
 
   it("should render side drawer", async () => {
-    expect(screen.getByText("Preset Positions")).toBeInTheDocument();
+    screen.debug();
     const presetButton = screen.getByRole("button", {
-      name: "Preset Positions",
+      name: /Preset Positions/i,
     });
+    expect(presetButton).toBeInTheDocument();
     await userEvent.click(presetButton);
     expect(screen.getByRole("presentation")).toBeInTheDocument();
     expect(