i15-1: display basic feedback from blueapi

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,54 @@
+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: 100,
+        bgcolor: theme.palette.background.paper,
+        borderColor: theme.palette.text.primary,
+      }}
+    >
+      <CardContent>
+        <Stack direction={"column"} spacing={"1"}>
+          <Typography>Blueapi worker state: </Typography>
+          <Typography
+            variant="body1"
+            color={stateMap[workerState.data ? workerState.data : "UNKNOWN"]}
+          >
+            {workerState.data}
+          </Typography>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -39,11 +39,15 @@ const fakeExperiments = {
   },
 };
 
+function setWorkerState(new_state: string) {
+  workerStatus.status = new_state;
+}
+
 const fakePvws = ws.link("wss://pvws.diamond.ac.uk/pvws/pv");
 
 export const handlers = [
   http.put("/api/blueapi/worker/task", () => {
-    workerStatus.status = "RUNNING";
+    setWorkerState("RUNNING");
     return HttpResponse.json({
       task_id: fakeTaskId,
     });
@@ -55,8 +59,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,6 +5,8 @@ import { NumberInput } from "../components/NumberInput";
 import { RunPlanButton } from "@atlas/blueapi-ui";
 import { ReadOnlyPv } from "@atlas/pvws-config";
 import { StatusCard } from "../components/StatusCard";
+import { BlueapiWorkerState } from "../components/BlueapiWorkerState";
+import { AbortPlanButton } from "../components/AbortPlanButton";
 
 type RobotSampleFormData = {
   puck: number;
@@ -16,6 +18,7 @@ function StatusSidebar() {
   return (
     <Box sx={{ ml: 5 }}>
       <Stack direction={"column"} spacing={2}>
+        <BlueapiWorkerState />
         <StatusCard
           title="Currently loaded"
           bgColor={theme.palette.info.light}
@@ -59,7 +62,6 @@ function Robot() {
   const theme = useTheme();
   return (
     <Box
-      // component={"section"}
       sx={{
         display: "flex",
         justifyContent: "center",
@@ -76,7 +78,7 @@ function Robot() {
           borderColor: theme.palette.primary.main,
         }}
       >
-        <Stack direction={"column"} spacing={3} alignItems={"center"}>
+        <Stack direction={"column"} spacing={4} alignItems={"center"}>
           <Typography component="h1" variant="h5">
             Sample Position
           </Typography>
@@ -98,17 +100,20 @@ function Robot() {
               }}
             />
           </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>
       <StatusSidebar />

packages/blueapi-query/src/index.ts

@@ -3,4 +3,4 @@ export * from "./tasks";
 export * from "./worker";
 export * from "./devices";
 
-export { BlueapiProvider } from "./provider";
+export { BlueapiProvider, useBlueapi } from "./provider";

packages/blueapi-query/src/tasks.test.ts

@@ -55,6 +55,7 @@ describe("Task hooks", () => {
       is_pending: true,
       is_complete: false,
       errors: [],
+      outcome: { outcome: "success" },
     };
 
     (api.tasks.get as any).mockResolvedValue(task);