i15-1: display basic feedback from blueapi

apps/i15-1/src/components/AbortPlanButton.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen, userEvent } from "@atlas/vitest-conf";
+import { AbortPlanButton } from "./AbortPlanButton";
+import { useSetWorkerState } from "@atlas/blueapi-query";
+import type { WorkerState, WorkerStateRequest } from "@atlas/blueapi";
+import type { UseMutationResult } from "@tanstack/react-query";
+
+describe("AbortPlanButton", () => {
+  vi.mock("@atlas/blueapi-query");
+  const mockedHook = vi.mocked(useSetWorkerState);
+
+  const mutate = vi.fn();
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  mockedHook.mockReturnValue({ mutate } as any as UseMutationResult<
+    WorkerState,
+    Error,
+    WorkerStateRequest
+  >);
+
+  it("renders default Abort button", () => {
+    render(<AbortPlanButton />);
+
+    expect(screen.getByText("Abort"));
+  });
+
+  it("when abort clicked the worker state changes and alert comes on screen", async () => {
+    const expectedRequest: WorkerStateRequest = {
+      new_state: "ABORTING",
+      reason: "Abort button pressed",
+    };
+    const user = userEvent.setup();
+    render(<AbortPlanButton />);
+
+    const button = screen.getByText("Abort");
+    await user.click(button);
+    expect(mutate).toHaveBeenCalledWith(expectedRequest);
+    expect(
+      screen.findByTestId("Abort button pressed, will abort current plan ..."),
+    );
+    const alert = await screen.findByRole("alert");
+    expect(alert).toBeVisible();
+  });
+});

apps/i15-1/src/components/AbortPlanButton.tsx

@@ -0,0 +1,65 @@
+import {
+  Alert,
+  Button,
+  Snackbar,
+  Tooltip,
+  type SnackbarCloseReason,
+} from "@mui/material";
+
+import type { WorkerStateRequest } from "@atlas/blueapi";
+import { useSetWorkerState } from "@atlas/blueapi-query";
+import React, { useState } from "react";
+
+export function AbortPlanButton() {
+  const workerState = useSetWorkerState();
+  const [openSnackbar, setOpenSnackbar] = useState<boolean>(false);
+
+  const abortPlan = async () => {
+    const workerRequest: WorkerStateRequest = {
+      new_state: "ABORTING",
+      reason: "Abort button pressed",
+    };
+    workerState.mutate(workerRequest);
+  };
+
+  const handleClick = async () => {
+    setOpenSnackbar(true);
+    await abortPlan();
+  };
+
+  const handleSnackbarClose = (
+    _event: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpenSnackbar(false);
+  };
+
+  return (
+    <React.Fragment>
+      <Tooltip title="Abort current blueapi operation" placement="bottom">
+        <Button
+          variant="contained"
+          color="error"
+          sx={{ width: "150px" }}
+          onClick={handleClick}
+        >
+          Abort
+        </Button>
+      </Tooltip>
+      <Snackbar
+        open={openSnackbar}
+        autoHideDuration={5000}
+        onClose={handleSnackbarClose}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      >
+        <Alert onClose={handleSnackbarClose} severity="warning">
+          Abort button pressed, will abort current plan ...
+        </Alert>
+      </Snackbar>
+    </React.Fragment>
+  );
+}

apps/i15-1/src/components/BlueapiWorkerState.tsx

@@ -0,0 +1,64 @@
+import { useGetWorkerState } from "@atlas/blueapi-query";
+import {
+  Card,
+  CardContent,
+  Stack,
+  Typography,
+  useTheme,
+  type Theme,
+} from "@mui/material";
+
+function getStateColorMap(theme: Theme) {
+  return {
+    IDLE: theme.palette.info.main,
+    RUNNING: theme.palette.success.main,
+    PAUSING: theme.palette.warning.main,
+    PAUSED: theme.palette.warning.main,
+    HALTING: theme.palette.warning.main,
+    STOPPING: theme.palette.error.main,
+    ABORTING: theme.palette.error.main,
+    SUSPENDING: theme.palette.error.main,
+    PANICKED: theme.palette.error.main,
+    UNKNOWN: theme.palette.background.paper,
+  };
+}
+
+export function BlueapiWorkerState() {
+  const theme = useTheme();
+  const workerState = useGetWorkerState();
+  const stateMap = getStateColorMap(theme);
+
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        minWidth: 250,
+        maxHeight: 200,
+        bgcolor: theme.palette.background.paper,
+        borderColor: theme.palette.text.primary,
+      }}
+    >
+      <CardContent>
+        <Stack direction={"column"} spacing={"1"}>
+          <Typography
+            variant="body1"
+            sx={{
+              fontSize: 16,
+              fontStyle: "italic",
+              fontWeight: "bold",
+            }}
+          >
+            Blueapi worker state:{" "}
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{ fontSize: 18, fontWeight: "bold" }}
+            color={stateMap[workerState.data ? workerState.data : "UNKNOWN"]}
+          >
+            {workerState.data}
+          </Typography>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

apps/i15-1/src/mocks/handlers.ts

@@ -79,6 +79,10 @@ const fakeExperiments = {
   },
 };
 
+function setWorkerState(new_state: string) {
+  workerStatus.status = new_state;
+}
+
 const fakePvws = ws.link("wss://pvws.diamond.ac.uk/pvws/pv");
 
 const fakeHistory = [
@@ -522,7 +526,7 @@ export const handlers = [
     : []),
 
   http.put("/api/blueapi/worker/task", () => {
-    workerStatus.status = "RUNNING";
+    setWorkerState("RUNNING");
     return HttpResponse.json({
       task_id: fakeTaskId,
     });
@@ -534,8 +538,24 @@ export const handlers = [
     });
   }),
 
-  http.put("/api/blueapi/worker/state", () => {
-    return HttpResponse.json("IDLE");
+  http.get("/api/blueapi/tasks/:task_id", () => {
+    return HttpResponse.json({
+      task_id: fakeTaskId,
+      task: { name: "fake-task", params: {}, metadata: {} },
+      request_id: "00",
+      is_complete: true,
+      is_pending: false,
+      errors: [],
+      outcome: { outcome: "success", type: "str", result: null },
+    });
+  }),
+
+  http.put("/api/blueapi/worker/state", async ({ request }) => {
+    const { new_state } = (await request.json()) as { new_state: string };
+    if (new_state === "ABORTING") {
+      setWorkerState(new_state);
+    }
+    return HttpResponse.json(workerStatus.status);
   }),
 
   http.get("/oauth2/userinfo", () => {

apps/i15-1/src/routes/Robot.tsx

@@ -5,7 +5,9 @@ import { NumberInput } from "../components/NumberInput";
 import { RunPlanButton } from "@atlas/blueapi-ui";
 import { ReadOnlyPv } from "@atlas/pvws-config";
 import { StatusCard } from "../components/StatusCard";
+import { AbortPlanButton } from "../components/AbortPlanButton";
 import { WebcamStreamFromPv } from "../components/Webcam";
+import { BlueapiWorkerState } from "../components/BlueapiWorkerState";
 
 type RobotSampleFormData = {
   puck: number;
@@ -53,6 +55,7 @@ function StatusSidebar() {
             pv="ca://BL15J-EA-LOC-01:SAMPLE:INDEX"
           />
         </StatusCard>
+        <BlueapiWorkerState />
       </Stack>
     </Box>
   );
@@ -96,17 +99,20 @@ function RobotControl() {
             }}
           />
         </Stack>
-        <RunPlanButton
-          name="robot_load"
-          params={formData}
-          instrumentSession={instrumentSession}
-          buttonText="Load Sample"
-        />
-        <RunPlanButton
-          name="robot_unload"
-          instrumentSession={instrumentSession}
-          buttonText="Unload Sample"
-        />
+        <Stack direction={"row"} spacing={3} alignItems={"center"}>
+          <RunPlanButton
+            name="robot_load"
+            params={formData}
+            instrumentSession={instrumentSession}
+            buttonText="Load Sample"
+          />
+          <RunPlanButton
+            name="robot_unload"
+            instrumentSession={instrumentSession}
+            buttonText="Unload Sample"
+          />
+        </Stack>
+        <AbortPlanButton />
       </Stack>
     </Box>
   );