From c3c3dfdb1b17f82fc76c9ea33150ae77edc3257d Mon Sep 17 00:00:00 2001
From: Emily Arnold <emily.arnold@diamond.ac.uk>
Date: Mon, 9 Feb 2026 13:54:31 +0000
Subject: [PATCH 1/6] Add scan success state and mocks to visr app

---
 apps/visr/src/components/RunPlanButton.tsx | 27 +++++++++++++++++++++-
 apps/visr/src/mocks/browser.ts             |  9 +++++++-
 apps/visr/src/mocks/scenarios.ts           | 25 ++++++++++++++++++++
 apps/visr/src/utils/api.ts                 |  6 ++---
 4 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 apps/visr/src/mocks/scenarios.ts

diff --git a/apps/visr/src/components/RunPlanButton.tsx b/apps/visr/src/components/RunPlanButton.tsx
index f4f477d..fc16236 100644
--- a/apps/visr/src/components/RunPlanButton.tsx
+++ b/apps/visr/src/components/RunPlanButton.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@mui/material";
+import { useEffect, useState } from "react";
 
 import { createAndStartTask, type TaskRequest } from "../utils/api";
 
@@ -13,9 +14,25 @@ const RunPlanButton = ({
   params,
   instrumentSession,
 }: RunPlanButtonProps) => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [colour, setColour] = useState<any>("primary");
+  // useEffect(() => {
+  //   const timeout = setTimeout(() => {
+  //     setLoading(false);
+  //   }, 2000);
+  //   return () => clearTimeout(timeout);
+  // });
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setColour("primary");
+    }, 4000);
+    return () => clearTimeout(timeout);
+  });
   return (
     <Button
       variant="contained"
+      loading={loading}
+      color={colour}
       sx={{ width: "150px" }}
       onClick={async () => {
         const taskRequest: TaskRequest = {
@@ -23,7 +40,15 @@ const RunPlanButton = ({
           params: params,
           instrument_session: instrumentSession,
         };
-        await createAndStartTask(taskRequest);
+        setLoading(true);
+        const resp = await createAndStartTask(taskRequest);
+        if (resp === 200) {
+          setLoading(false);
+          setColour("success");
+        } else {
+          setLoading(false);
+          setColour("error");
+        }
       }}
     >
       Run
diff --git a/apps/visr/src/mocks/browser.ts b/apps/visr/src/mocks/browser.ts
index bcd82e4..17743ba 100644
--- a/apps/visr/src/mocks/browser.ts
+++ b/apps/visr/src/mocks/browser.ts
@@ -1,4 +1,11 @@
 import { setupWorker } from "msw/browser";
 import { handlers } from "./handlers";
+import { scenarios } from "./scenarios";
 
-export const worker = setupWorker(...handlers);
+const scenarioName = new URLSearchParams(window.location.search).get(
+  "scenario",
+);
+const runtimeScenarios =
+  scenarios[scenarioName as keyof typeof scenarios] || [];
+
+export const worker = setupWorker(...runtimeScenarios, ...handlers);
diff --git a/apps/visr/src/mocks/scenarios.ts b/apps/visr/src/mocks/scenarios.ts
new file mode 100644
index 0000000..376d4e4
--- /dev/null
+++ b/apps/visr/src/mocks/scenarios.ts
@@ -0,0 +1,25 @@
+import { delay, http, HttpResponse, type HttpHandler } from "msw";
+
+const fakeTaskId = "7304e8e0-81c6-4978-9a9d-9046ab79ce3c";
+
+export const scenarios = {
+  success: [
+    http.put("/api/worker/task", async () => {
+      await delay();
+      return HttpResponse.json({
+        task_id: fakeTaskId,
+      });
+    }),
+  ],
+  error: [
+    http.put("/api/worker/task", async () => {
+      await delay();
+      return new HttpResponse("Validation Error", {
+        status: 422,
+        headers: {
+          "Content-Type": "text/plain",
+        },
+      });
+    }),
+  ],
+};
diff --git a/apps/visr/src/utils/api.ts b/apps/visr/src/utils/api.ts
index 9e48575..a3e4848 100644
--- a/apps/visr/src/utils/api.ts
+++ b/apps/visr/src/utils/api.ts
@@ -35,7 +35,7 @@ export async function getPlans(): Promise<PlansResponse> {
 
 export async function createAndStartTask(
   request: TaskRequest,
-): Promise<TaskResponse> {
+): Promise<number> {
   const task = await createTask(request);
   return await startTask(task.task_id);
 }
@@ -62,7 +62,7 @@ export async function createTask(request: TaskRequest): Promise<TaskResponse> {
   return await response.json();
 }
 
-export async function startTask(task_id: string): Promise<TaskResponse> {
+export async function startTask(task_id: string): Promise<number> {
   const url = "/api/worker/task";
 
   const headers = new Headers();
@@ -75,7 +75,7 @@ export async function startTask(task_id: string): Promise<TaskResponse> {
     body: JSON.stringify({ task_id: task_id }),
   });
 
-  return await response.json();
+  return await response.status;
 }
 
 export interface WorkerRequest {

From abc4bd60edc709ed54ca03e572a1e673a0af799a Mon Sep 17 00:00:00 2001
From: Emily Arnold <emily.arnold@diamond.ac.uk>
Date: Mon, 9 Feb 2026 14:25:03 +0000
Subject: [PATCH 2/6] check for response.ok, rather than 200

---
 apps/visr/src/components/RunPlanButton.tsx | 8 +-------
 apps/visr/src/utils/api.ts                 | 6 +++---
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/apps/visr/src/components/RunPlanButton.tsx b/apps/visr/src/components/RunPlanButton.tsx
index fc16236..d252b35 100644
--- a/apps/visr/src/components/RunPlanButton.tsx
+++ b/apps/visr/src/components/RunPlanButton.tsx
@@ -16,12 +16,6 @@ const RunPlanButton = ({
 }: RunPlanButtonProps) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [colour, setColour] = useState<any>("primary");
-  // useEffect(() => {
-  //   const timeout = setTimeout(() => {
-  //     setLoading(false);
-  //   }, 2000);
-  //   return () => clearTimeout(timeout);
-  // });
   useEffect(() => {
     const timeout = setTimeout(() => {
       setColour("primary");
@@ -42,7 +36,7 @@ const RunPlanButton = ({
         };
         setLoading(true);
         const resp = await createAndStartTask(taskRequest);
-        if (resp === 200) {
+        if (resp === true) {
           setLoading(false);
           setColour("success");
         } else {
diff --git a/apps/visr/src/utils/api.ts b/apps/visr/src/utils/api.ts
index a3e4848..d39c375 100644
--- a/apps/visr/src/utils/api.ts
+++ b/apps/visr/src/utils/api.ts
@@ -35,7 +35,7 @@ export async function getPlans(): Promise<PlansResponse> {
 
 export async function createAndStartTask(
   request: TaskRequest,
-): Promise<number> {
+): Promise<boolean> {
   const task = await createTask(request);
   return await startTask(task.task_id);
 }
@@ -62,7 +62,7 @@ export async function createTask(request: TaskRequest): Promise<TaskResponse> {
   return await response.json();
 }
 
-export async function startTask(task_id: string): Promise<number> {
+export async function startTask(task_id: string): Promise<boolean> {
   const url = "/api/worker/task";
 
   const headers = new Headers();
@@ -75,7 +75,7 @@ export async function startTask(task_id: string): Promise<number> {
     body: JSON.stringify({ task_id: task_id }),
   });
 
-  return await response.status;
+  return await response.ok;
 }
 
 export interface WorkerRequest {

From 37c50cee04186622b87479550fbe1f463fa4af94 Mon Sep 17 00:00:00 2001
From: Emily Arnold <emily.arnold@diamond.ac.uk>
Date: Mon, 9 Feb 2026 16:36:10 +0000
Subject: [PATCH 3/6] fix linting

---
 apps/visr/src/components/RunPlanButton.tsx | 11 ++++++++++-
 apps/visr/src/mocks/scenarios.ts           |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/visr/src/components/RunPlanButton.tsx b/apps/visr/src/components/RunPlanButton.tsx
index d252b35..95cfb3d 100644
--- a/apps/visr/src/components/RunPlanButton.tsx
+++ b/apps/visr/src/components/RunPlanButton.tsx
@@ -9,13 +9,22 @@ type RunPlanButtonProps = {
   instrumentSession: string;
 };
 
+type ButtonState =
+  | "inherit"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "error"
+  | "info"
+  | "warning";
+
 const RunPlanButton = ({
   name,
   params,
   instrumentSession,
 }: RunPlanButtonProps) => {
   const [loading, setLoading] = useState<boolean>(false);
-  const [colour, setColour] = useState<any>("primary");
+  const [colour, setColour] = useState<ButtonState>("primary");
   useEffect(() => {
     const timeout = setTimeout(() => {
       setColour("primary");
diff --git a/apps/visr/src/mocks/scenarios.ts b/apps/visr/src/mocks/scenarios.ts
index 376d4e4..a30ba15 100644
--- a/apps/visr/src/mocks/scenarios.ts
+++ b/apps/visr/src/mocks/scenarios.ts
@@ -1,4 +1,4 @@
-import { delay, http, HttpResponse, type HttpHandler } from "msw";
+import { delay, http, HttpResponse } from "msw";
 
 const fakeTaskId = "7304e8e0-81c6-4978-9a9d-9046ab79ce3c";
 

From e79776014a138a956c74811f4c9ca40698f89b1d Mon Sep 17 00:00:00 2001
From: Emily Arnold <emily.arnold@diamond.ac.uk>
Date: Tue, 10 Feb 2026 18:19:41 +0000
Subject: [PATCH 4/6] watch scan events for state

---
 apps/visr/src/components/AbortButton.tsx   | 14 +++++++++
 apps/visr/src/components/RunPlanButton.tsx | 34 ++++++++--------------
 apps/visr/src/mocks/browser.ts             |  9 +-----
 apps/visr/src/mocks/scenarios.ts           | 25 ----------------
 apps/visr/src/utils/api.ts                 |  6 ++--
 5 files changed, 30 insertions(+), 58 deletions(-)
 delete mode 100644 apps/visr/src/mocks/scenarios.ts

diff --git a/apps/visr/src/components/AbortButton.tsx b/apps/visr/src/components/AbortButton.tsx
index bfa3fcb..8b2a506 100644
--- a/apps/visr/src/components/AbortButton.tsx
+++ b/apps/visr/src/components/AbortButton.tsx
@@ -1,12 +1,26 @@
 import { Button } from "@mui/material";
+import { useEffect, useState } from "react";
 
 import { setWorkerState, type WorkerRequest } from "../utils/api";
+import { useScanEvents } from "../hooks/scanEvents";
 
 const AbortButton = () => {
+  const [disabled, setDisabled] = useState<boolean>(true);
+  const scanEvent = useScanEvents();
+  useEffect(() => {
+    if (!scanEvent) return;
+    if (scanEvent.status == "running") {
+      setDisabled(false);
+    }
+    if (scanEvent.status == "finished" || scanEvent.status == "failed") {
+      setDisabled(true);
+    }
+  });
   return (
     <Button
       variant="contained"
       color="error"
+      disabled={disabled}
       sx={{ width: "150px" }}
       onClick={async () => {
         const workerRequest: WorkerRequest = {
diff --git a/apps/visr/src/components/RunPlanButton.tsx b/apps/visr/src/components/RunPlanButton.tsx
index 95cfb3d..6949f26 100644
--- a/apps/visr/src/components/RunPlanButton.tsx
+++ b/apps/visr/src/components/RunPlanButton.tsx
@@ -2,6 +2,7 @@ import { Button } from "@mui/material";
 import { useEffect, useState } from "react";
 
 import { createAndStartTask, type TaskRequest } from "../utils/api";
+import { useScanEvents } from "../hooks/scanEvents";
 
 type RunPlanButtonProps = {
   name: string;
@@ -9,33 +10,28 @@ type RunPlanButtonProps = {
   instrumentSession: string;
 };
 
-type ButtonState =
-  | "inherit"
-  | "primary"
-  | "secondary"
-  | "success"
-  | "error"
-  | "info"
-  | "warning";
-
 const RunPlanButton = ({
   name,
   params,
   instrumentSession,
 }: RunPlanButtonProps) => {
   const [loading, setLoading] = useState<boolean>(false);
-  const [colour, setColour] = useState<ButtonState>("primary");
+  const [disabled, setDisabled] = useState<boolean>(false);
+  const scanEvent = useScanEvents();
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      setColour("primary");
-    }, 4000);
-    return () => clearTimeout(timeout);
+    if (!scanEvent) return;
+    if (scanEvent.status == "running") {
+      setDisabled(true);
+    }
+    if (scanEvent.status == "finished" || scanEvent.status == "failed") {
+      setDisabled(false);
+    }
   });
   return (
     <Button
       variant="contained"
       loading={loading}
-      color={colour}
+      disabled={disabled}
       sx={{ width: "150px" }}
       onClick={async () => {
         const taskRequest: TaskRequest = {
@@ -45,13 +41,7 @@ const RunPlanButton = ({
         };
         setLoading(true);
         const resp = await createAndStartTask(taskRequest);
-        if (resp === true) {
-          setLoading(false);
-          setColour("success");
-        } else {
-          setLoading(false);
-          setColour("error");
-        }
+        setLoading(false);
       }}
     >
       Run
diff --git a/apps/visr/src/mocks/browser.ts b/apps/visr/src/mocks/browser.ts
index 17743ba..bcd82e4 100644
--- a/apps/visr/src/mocks/browser.ts
+++ b/apps/visr/src/mocks/browser.ts
@@ -1,11 +1,4 @@
 import { setupWorker } from "msw/browser";
 import { handlers } from "./handlers";
-import { scenarios } from "./scenarios";
 
-const scenarioName = new URLSearchParams(window.location.search).get(
-  "scenario",
-);
-const runtimeScenarios =
-  scenarios[scenarioName as keyof typeof scenarios] || [];
-
-export const worker = setupWorker(...runtimeScenarios, ...handlers);
+export const worker = setupWorker(...handlers);
diff --git a/apps/visr/src/mocks/scenarios.ts b/apps/visr/src/mocks/scenarios.ts
deleted file mode 100644
index a30ba15..0000000
--- a/apps/visr/src/mocks/scenarios.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { delay, http, HttpResponse } from "msw";
-
-const fakeTaskId = "7304e8e0-81c6-4978-9a9d-9046ab79ce3c";
-
-export const scenarios = {
-  success: [
-    http.put("/api/worker/task", async () => {
-      await delay();
-      return HttpResponse.json({
-        task_id: fakeTaskId,
-      });
-    }),
-  ],
-  error: [
-    http.put("/api/worker/task", async () => {
-      await delay();
-      return new HttpResponse("Validation Error", {
-        status: 422,
-        headers: {
-          "Content-Type": "text/plain",
-        },
-      });
-    }),
-  ],
-};
diff --git a/apps/visr/src/utils/api.ts b/apps/visr/src/utils/api.ts
index d39c375..9e48575 100644
--- a/apps/visr/src/utils/api.ts
+++ b/apps/visr/src/utils/api.ts
@@ -35,7 +35,7 @@ export async function getPlans(): Promise<PlansResponse> {
 
 export async function createAndStartTask(
   request: TaskRequest,
-): Promise<boolean> {
+): Promise<TaskResponse> {
   const task = await createTask(request);
   return await startTask(task.task_id);
 }
@@ -62,7 +62,7 @@ export async function createTask(request: TaskRequest): Promise<TaskResponse> {
   return await response.json();
 }
 
-export async function startTask(task_id: string): Promise<boolean> {
+export async function startTask(task_id: string): Promise<TaskResponse> {
   const url = "/api/worker/task";
 
   const headers = new Headers();
@@ -75,7 +75,7 @@ export async function startTask(task_id: string): Promise<boolean> {
     body: JSON.stringify({ task_id: task_id }),
   });
 
-  return await response.ok;
+  return await response.json();
 }
 
 export interface WorkerRequest {

From e0597e3aab90cd8e41f80230d7dc3bc63e750938 Mon Sep 17 00:00:00 2001
From: Emily Arnold <emily.arnold@diamond.ac.uk>
Date: Tue, 10 Feb 2026 18:28:31 +0000
Subject: [PATCH 5/6] fix errors

---
 apps/visr/src/components/AbortButton.tsx   | 2 +-
 apps/visr/src/components/RunPlanButton.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/visr/src/components/AbortButton.tsx b/apps/visr/src/components/AbortButton.tsx
index 8b2a506..648134b 100644
--- a/apps/visr/src/components/AbortButton.tsx
+++ b/apps/visr/src/components/AbortButton.tsx
@@ -15,7 +15,7 @@ const AbortButton = () => {
     if (scanEvent.status == "finished" || scanEvent.status == "failed") {
       setDisabled(true);
     }
-  });
+  }, [scanEvent]);
   return (
     <Button
       variant="contained"
diff --git a/apps/visr/src/components/RunPlanButton.tsx b/apps/visr/src/components/RunPlanButton.tsx
index 6949f26..6a32f8b 100644
--- a/apps/visr/src/components/RunPlanButton.tsx
+++ b/apps/visr/src/components/RunPlanButton.tsx
@@ -26,7 +26,7 @@ const RunPlanButton = ({
     if (scanEvent.status == "finished" || scanEvent.status == "failed") {
       setDisabled(false);
     }
-  });
+  }, [scanEvent]);
   return (
     <Button
       variant="contained"
@@ -40,7 +40,7 @@ const RunPlanButton = ({
           instrument_session: instrumentSession,
         };
         setLoading(true);
-        const resp = await createAndStartTask(taskRequest);
+        await createAndStartTask(taskRequest);
         setLoading(false);
       }}
     >

From cb7eb64f48157f4766f94e2588e875e7ed0d2212 Mon Sep 17 00:00:00 2001
From: Emily Arnold <emily.arnold@diamond.ac.uk>
Date: Wed, 11 Feb 2026 10:48:21 +0000
Subject: [PATCH 6/6] mock scanEvent hook for test

---
 apps/visr/src/components/PlanBrowser/PlanParameters.test.tsx | 2 ++
 apps/visr/src/components/RunPlanButton.tsx                   | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/visr/src/components/PlanBrowser/PlanParameters.test.tsx b/apps/visr/src/components/PlanBrowser/PlanParameters.test.tsx
index cb7f3e7..51b5fbc 100644
--- a/apps/visr/src/components/PlanBrowser/PlanParameters.test.tsx
+++ b/apps/visr/src/components/PlanBrowser/PlanParameters.test.tsx
@@ -14,6 +14,8 @@ vi.mock("@jsonforms/react", () => {
   };
 });
 
+vi.mock("../../hooks/scanEvents");
+
 const plan: Plan = {
   name: "hi_plan",
   description: "Says hi to you",
diff --git a/apps/visr/src/components/RunPlanButton.tsx b/apps/visr/src/components/RunPlanButton.tsx
index 6a32f8b..2c46cbd 100644
--- a/apps/visr/src/components/RunPlanButton.tsx
+++ b/apps/visr/src/components/RunPlanButton.tsx
@@ -19,7 +19,10 @@ const RunPlanButton = ({
   const [disabled, setDisabled] = useState<boolean>(false);
   const scanEvent = useScanEvents();
   useEffect(() => {
-    if (!scanEvent) return;
+    if (!scanEvent) {
+      setDisabled(false);
+      return;
+    }
     if (scanEvent.status == "running") {
       setDisabled(true);
     }