Add a snackbar with an alert for running plans

Author: noemifrisina

src/blueapi/BlueapiComponents.tsx

@@ -9,37 +9,81 @@ import {
   Typography,
 } from "@mui/material";
 
+type SeverityLevel = "success" | "info" | "warning" | "error";
 type VariantChoice = "outlined" | "contained";
+type ButtonSize = "small" | "medium" | "large";
 
-type PlanButtonProps = {
+type RunPlanButtonProps = {
   btnLabel: string;
   planName: string;
   planParams?: object;
   title?: string;
-  //   btnColour?: string;
   btnVariant?: VariantChoice;
+  btnSize?: ButtonSize;
 };
 
-export function RunPlanButton(props: PlanButtonProps) {
+export function RunPlanButton(props: RunPlanButtonProps) {
+  const [openSnackbar, setOpenSnackbar] = React.useState<boolean>(false);
+  const [msg, setMsg] = React.useState<string>("Running plan...");
+  const [severity, setSeverity] = React.useState<SeverityLevel>("info");
+
   const params = props.planParams ? props.planParams : {};
   const variant = props.btnVariant ? props.btnVariant : "outlined";
+  const size = props.btnSize ? props.btnSize : "medium";
+
+  const handleClick = () => {
+    setOpenSnackbar(true);
+    submitAndRunPlanImmediately({
+      planName: props.planName,
+      planParams: params,
+    }).catch((error) => {
+      setSeverity("error");
+      setMsg(
+        `Failed to run plan ${props.planName}, see console and logs for full error`
+      );
+      console.log(`${msg}. Reason: ${error}`);
+    });
+  };
+
+  const handleSnackbarClose = (
+    _event: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpenSnackbar(false);
+  };
 
   return (
     <div>
       <Tooltip title={props.title ? props.title : ""} placement="bottom">
         <Button
           variant={variant}
           color="custom"
-          onClick={() =>
-            submitAndRunPlanImmediately({
-              planName: props.planName,
-              planParams: params,
-            })
-          }
+          size={size}
+          onClick={handleClick}
         >
-          {props.btnLabel}
+          <Typography
+            variant="button"
+            fontWeight="fontWeightBold"
+            sx={{ display: "block" }}
+          >
+            {props.btnLabel}
+          </Typography>
         </Button>
       </Tooltip>
+      <Snackbar
+        open={openSnackbar}
+        autoHideDuration={5000}
+        onClose={handleSnackbarClose}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      >
+        <Alert onClose={handleSnackbarClose} severity={severity}>
+          {msg}
+        </Alert>
+      </Snackbar>
     </div>
   );
 }

src/blueapi/blueapi.ts

@@ -102,13 +102,11 @@ function runTask(taskId: string): Promise<string | void> {
 export function submitAndRunPlanImmediately(
   request: BlueApiRequestBody
 ): Promise<string | void> {
-  return submitTask(request)
-    .then((res) => {
-      if (res) {
-        runTask(res);
-      }
-    })
-    .catch((error) => console.log(`NOPE ${error}`));
+  return submitTask(request).then((res) => {
+    if (res) {
+      runTask(res);
+    }
+  });
 }
 
 export function abortCurrentPlan(): Promise<BlueApiWorkerState> {

src/screens/CollectionPanel.tsx

@@ -17,7 +17,7 @@ import { MapView, PumpProbeOptions } from "../components/CollectionComponents";
 import { submitAndRunPlanImmediately } from "../blueapi/blueapi";
 import { chipTypes, MapTypes, pumpProbeMode } from "../components/params";
 import { forceString } from "../pv/util";
-import { AbortButton } from "../blueapi/BlueapiComponents";
+import { AbortButton, RunPlanButton } from "../blueapi/BlueapiComponents";
 
 /**
  * A couple of read-only boxes showing what the visit and detector in use are.
@@ -64,44 +64,28 @@ function RunButtons(props: ParametersProps) {
   return (
     <Grid2 size={12}>
       <Stack direction={"row"} spacing={8} justifyContent={"center"}>
-        {/* See
-          https://github.com/DiamondLightSource/mx-daq-ui/issues/3?issue=DiamondLightSource%7Cmx-daq-ui%7C18 */}
-        <Tooltip title="Start fixed target collection" placement="bottom">
-          <Button
-            variant="outlined"
-            color="custom"
-            size="large"
-            onClick={() =>
-              submitAndRunPlanImmediately({
-                planName: "gui_run_chip_collection",
-                planParams: {
-                  sub_dir: props.subDir,
-                  chip_name: props.chipName,
-                  exp_time: props.expTime,
-                  det_dist: props.detDist,
-                  transmission: props.transFract,
-                  n_shots: props.nShots,
-                  chip_type: props.chipType,
-                  map_type: props.mapType,
-                  chip_format: props.chipFormat,
-                  checker_pattern: props.checkerPattern,
-                  pump_probe: props.pumpProbe,
-                  laser_dwell: props.pumpInputs[0],
-                  laser_delay: props.pumpInputs[1],
-                  pre_pump: props.pumpInputs[2],
-                },
-              })
-            }
-          >
-            <Typography
-              variant="button"
-              fontWeight="fontWeightBold"
-              sx={{ display: "block" }}
-            >
-              Start!
-            </Typography>
-          </Button>
-        </Tooltip>
+        <RunPlanButton
+          btnLabel="Start!"
+          planName="gui_run_chip_collection"
+          planParams={{
+            sub_dir: props.subDir,
+            chip_name: props.chipName,
+            exp_time: props.expTime,
+            det_dist: props.detDist,
+            transmission: props.transFract,
+            n_shots: props.nShots,
+            chip_type: props.chipType,
+            map_type: props.mapType,
+            chip_format: props.chipFormat,
+            checker_pattern: props.checkerPattern,
+            pump_probe: props.pumpProbe,
+            laser_dwell: props.pumpInputs[0],
+            laser_delay: props.pumpInputs[1],
+            pre_pump: props.pumpInputs[2],
+          }}
+          title="Start fixed target collection"
+          btnSize="large"
+        />
         <AbortButton />
       </Stack>
     </Grid2>