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

@@ -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 = [
@@ -276,7 +280,7 @@ export const handlers = [
     : []),
 
   http.put("/api/blueapi/worker/task", () => {
-    workerStatus.status = "RUNNING";
+    setWorkerState("RUNNING");
     return HttpResponse.json({
       task_id: fakeTaskId,
     });
@@ -288,8 +292,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 { 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";
 import { WebcamStreamFromPv } from "../components/Webcam";
 
 type RobotSampleFormData = {
@@ -16,6 +18,19 @@
   const theme = useTheme();
   return (
     <Box sx={{ ml: 5 }}>
+      <Stack direction={"column"} spacing={2}>
+        <BlueapiWorkerState />
+        <StatusCard
+          title="Currently loaded"
+          bgColor={theme.palette.info.light}
+          cardColor={theme.palette.primary.main}
+        >
+          <ReadOnlyPv label="Puck" pv="ca://BL15J-EA-LOC-01:PUCK:INDEX" />
+          <ReadOnlyPv
+            label="Sample Pin"
+            pv="ca://BL15J-EA-LOC-01:SAMPLE:INDEX"
+          />
+        </StatusCard>
       <Stack direction={"row"} spacing={2}>
         <StatusCard
           title="Ring status"

packages/blueapi-ui/src/RunPlanButton.tsx

@@ -1,12 +1,18 @@
-import { Button } from "@mui/material";
-import { useState } from "react";
+import {
+  Alert,
+  Button,
+  Snackbar,
+  type SnackbarCloseReason,
+} from "@mui/material";
+import React, { useState } from "react";
 
 import {
+  useBlueapi,
   useGetWorkerState,
   useSetActiveTask,
   useSubmitTask,
 } from "@atlas/blueapi-query";
-import type { TaskRequest } from "@atlas/blueapi";
+import type { TaskRequest, TaskResponse } from "@atlas/blueapi";
 
 export type RunPlanButtonProps = {
   name: string;
@@ -15,47 +21,125 @@ export type RunPlanButtonProps = {
   buttonText?: string;
 };
 
+type SeverityLevel = "success" | "info" | "warning" | "error";
+
+const idleState = "IDLE";
+const abortState = "ABORTING";
+
 export function RunPlanButton({
   name,
   params,
   instrumentSession,
   buttonText = "Run",
 }: RunPlanButtonProps) {
+  const [openSnackbar, setOpenSnackbar] = useState<boolean>(false);
+  const [msg, setMsg] = useState<string>(`Running ${name} plan`);
+  const [severity, setSeverity] = useState<SeverityLevel>("info");
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const workerState = useGetWorkerState();
+  const blueapi = useBlueapi();
+
   const submitTask = useSubmitTask();
   const startTask = useSetActiveTask();
-  const submitAndRunTask = async (task: TaskRequest) => {
-    await submitTask
-      .mutateAsync(task)
-      .then((response) => startTask.mutateAsync(response.task_id));
+
+  const waitForIdle = async (timeoutInMs: number): Promise<void> => {
+    return new Promise((res) => setTimeout(res, timeoutInMs));
+  };
+
+  const runTask = async (task_id: string) => {
+    await startTask.mutateAsync(task_id).then(async (response) => {
+      if (response) {
+        let status = workerState.data;
+        while (status !== idleState && status !== abortState) {
+          await waitForIdle(10);
+          status = workerState.data;
+        }
+        const data = await blueapi.tasks.get(task_id);
+        if (data.is_complete) {
+          if (data.outcome?.outcome === "success") {
+            setSeverity("success");
+            setMsg("Plan succeeded");
+          } else if (data.outcome?.outcome === "error") {
+            throw new Error(`${data.errors[0]}`);
+          }
+        }
+      }
+    });
+  };
+
+  const submitAndRunTask = async (
+    task: TaskRequest,
+  ): Promise<TaskResponse | void> => {
+    await submitTask.mutateAsync(task).then(async (response) => {
+      if (response) {
+        await runTask(response.task_id).catch((error) => {
+          throw new Error(error);
+        });
+      } else {
+        throw new Error("Task couldn't be submitted");
+      }
+    });
   };
 
-  const [loading, setLoading] = useState<boolean>(false);
   const handleClick = async () => {
+    setOpenSnackbar(true);
+    setLoading(true);
     const taskRequest: TaskRequest = {
       name: name,
       params: params,
       instrument_session: instrumentSession,
     };
-    setLoading(true);
-    await submitAndRunTask(taskRequest);
+    await submitAndRunTask(taskRequest).catch((error) => {
+      setSeverity("error");
+      setMsg(
+        `Failed to run plan ${name}, see console and blueapi logs for full error.`,
+      );
+      console.log(`${msg}.\n Reason: ${error}`);
+    });
     setLoading(false);
   };
 
+  const handleSnackbarClose = (
+    _event: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpenSnackbar(false);
+  };
+
   const isButtonDisabled = () => {
     const workerState = useGetWorkerState();
-    const disable = workerState.data !== "IDLE";
+    const disable = workerState.data !== idleState;
+
     return disable;
   };
 
   return (
-    <Button
-      variant="contained"
-      loading={loading}
-      sx={{ width: "150px" }}
-      onClick={handleClick}
-      disabled={isButtonDisabled()}
-    >
-      {buttonText}
-    </Button>
+    <React.Fragment>
+      <Button
+        variant="contained"
+        loading={loading}
+        sx={{ width: "150px" }}
+        onClick={handleClick}
+        disabled={isButtonDisabled()}
+      >
+        {buttonText}
+      </Button>
+      <Snackbar
+        open={openSnackbar}
+        autoHideDuration={10000}
+        onClose={handleSnackbarClose}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      >
+        <Alert onClose={handleSnackbarClose} severity={severity}>
+          {msg}
+        </Alert>
+      </Snackbar>
+    </React.Fragment>
   );
 }