Add @atlas/blueapi and @atlas/blueapi-query packages

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+*.tsbuildinfo
 *.local
 .turbo/
 

apps/i15-1/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "noEmit": true,
     "types": ["vite/client", "@atlas/vitest-conf/global-types"]
   },
   "include": ["src"]

apps/visr/package.json

@@ -13,6 +13,8 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@atlas/blueapi": "workspace:*",
+    "@atlas/blueapi-query": "workspace:*",
     "@diamondlightsource/davidia": "^1.0.3",
     "@diamondlightsource/sci-react-ui": "^0.2.0",
     "@emotion/react": "^11.14.0",
@@ -24,6 +26,7 @@
     "@mui/lab": "6.0.0-beta.22",
     "@mui/material": "<7.0.0",
     "@mui/x-date-pickers": "^7.17.0",
+    "@tanstack/react-query": "^5.90.21",
     "ndarray": "^1.0.19",
     "react-error-boundary": "^6.0.0",
     "react-router-dom": "^7.7.1"

apps/visr/src/components/AbortButton.tsx

@@ -1,12 +1,14 @@
 import { Button } from "@mui/material";
 import { useEffect, useState } from "react";
 
-import { setWorkerState, type WorkerRequest } from "../utils/api";
 import { useScanEvents } from "../hooks/scanEvents";
+import type { WorkerStateRequest } from "@atlas/blueapi";
+import { useSetWorkerState } from "@atlas/blueapi-query";
 
 const AbortButton = () => {
   const [disabled, setDisabled] = useState<boolean>(true);
   const scanEvent = useScanEvents();
+  const workerState = useSetWorkerState();
   useEffect(() => {
     if (!scanEvent) return;
     if (scanEvent.status == "running") {
@@ -23,12 +25,11 @@ const AbortButton = () => {
       disabled={disabled}
       sx={{ width: "150px" }}
       onClick={async () => {
-        const workerRequest: WorkerRequest = {
+        const workerRequest: WorkerStateRequest = {
           new_state: "ABORTING",
-          defer: false,
           reason: "UI Intervention",
         };
-        await setWorkerState(workerRequest);
+        workerState.mutate(workerRequest);
       }}
     >
       Abort

apps/visr/src/components/PlanBrowser/PlanBrowser.test.tsx

@@ -1,4 +1,4 @@
-import type { Plan } from "../../utils/api";
+import type { Plan } from "@atlas/blueapi";
 import { render, screen, userEvent } from "@atlas/vitest-conf";
 import PlanBrowser from "./PlanBrowser";
 

apps/visr/src/components/PlanBrowser/PlanBrowser.tsx

@@ -1,5 +1,5 @@
 import { useState, type ReactNode } from "react";
-import type { Plan } from "../../utils/api";
+import type { Plan } from "@atlas/blueapi";
 import {
   Box,
   Container,

apps/visr/src/components/PlanBrowser/PlanParameters.test.tsx

@@ -1,4 +1,4 @@
-import type { Plan } from "../../utils/api";
+import type { Plan } from "@atlas/blueapi";
 import { render, screen } from "@atlas/vitest-conf";
 
 import PlanParameters from "./PlanParameters";
@@ -14,7 +14,10 @@ vi.mock("@jsonforms/react", () => {
   };
 });
 
-vi.mock("../../hooks/scanEvents");
+// mock run plan button which is out of scope of this test
+vi.mock("../RunPlanButton", () => ({
+  default: () => <button>Run</button>,
+}));
 
 const plan: Plan = {
   name: "hi_plan",
@@ -25,6 +28,8 @@ const plan: Plan = {
 };
 
 describe("PlanParameters", () => {
+  afterEach(() => vi.restoreAllMocks());
+
   it("renders a plan's name, description, parameters, session, and run button", () => {
     render(
       <InstrumentSessionProvider>
@@ -40,6 +45,10 @@ describe("PlanParameters", () => {
   });
 
   it("renders fallback UI if JSON Forms component fails", async () => {
+    // suppress error message in test output
+    const errorHandler = (event: ErrorEvent) => event.preventDefault();
+    window.addEventListener("error", errorHandler);
+
     // this time JsonForms will throw
     mockJsonFormsImpl.mockImplementation(() => {
       throw new Error("I can't do it!");
@@ -52,5 +61,7 @@ describe("PlanParameters", () => {
     );
 
     expect(screen.getByText("UI unavailable")).toBeInTheDocument();
+
+    window.removeEventListener("error", errorHandler);
   });
 });

apps/visr/src/components/PlanBrowser/PlanParameters.tsx

@@ -6,7 +6,7 @@ import {
   materialCells,
 } from "@jsonforms/material-renderers";
 import sanitizeSchema from "../../utils/schema";
-import type { Plan } from "../../utils/api";
+import type { Plan } from "@atlas/blueapi";
 import RunPlanButton from "../RunPlanButton";
 import { useInstrumentSession } from "../../context/instrumentSession/useInstrumentSession";
 
@@ -31,7 +31,6 @@ const PlanParameters: React.FC<PlanParametersProps> = (
 ) => {
   const schema = sanitizeSchema(props.plan.schema);
 
-  // const renderers = materialRenderers;
   const [planParameters, setPlanParameters] = useState({});
   const { instrumentSession, setInstrumentSession } = useInstrumentSession();
 

apps/visr/src/components/PlanBrowser/SearchablePlanList.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { render, screen, within, userEvent } from "@atlas/vitest-conf";
 import SearchablePlanList from "./SearchablePlanList";
-import type { Plan } from "../../utils/api";
+import type { Plan } from "@atlas/blueapi";
 
 const plans: Plan[] = [
   { name: "Align Beam", description: "", schema: {} },

apps/visr/src/components/PlanBrowser/SearchablePlanList.tsx

@@ -6,7 +6,7 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import type { Plan } from "../../utils/api";
+import type { Plan } from "@atlas/blueapi";
 import { useMemo, useState } from "react";
 
 type Props = {

apps/visr/src/components/RunPlanButton.tsx

@@ -1,8 +1,10 @@
 import { Button } from "@mui/material";
 import { useEffect, useState } from "react";
 
-import { createAndStartTask, type TaskRequest } from "../utils/api";
+// import { createAndStartTask, type TaskRequest } from "../utils/api";
 import { useScanEvents } from "../hooks/scanEvents";
+import { useSetActiveTask, useSubmitTask } from "@atlas/blueapi-query";
+import type { TaskRequest } from "@atlas/blueapi";
 
 type RunPlanButtonProps = {
   name: string;
@@ -30,6 +32,15 @@ const RunPlanButton = ({
       setDisabled(false);
     }
   }, [scanEvent]);
+
+  const submitTask = useSubmitTask();
+  const startTask = useSetActiveTask();
+  const submitAndRunTask = async (task: TaskRequest) => {
+    await submitTask
+      .mutateAsync(task)
+      .then(response => startTask.mutateAsync(response.task_id));
+  };
+
   return (
     <Button
       variant="contained"
@@ -43,7 +54,7 @@ const RunPlanButton = ({
           instrument_session: instrumentSession,
         };
         setLoading(true);
-        await createAndStartTask(taskRequest);
+        await submitAndRunTask(taskRequest);
         setLoading(false);
       }}
     >

apps/visr/src/main.tsx

@@ -8,6 +8,7 @@ import { Layout } from "./routes/Layout.tsx";
 import Spectroscopy from "./routes/Spectroscopy.tsx";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 declare global {
   interface Window {
@@ -19,6 +20,8 @@ window.global ||= window;
 import Workflows from "./routes/Workflows.tsx";
 import { RelayEnvironmentProvider } from "react-relay";
 import { RelayEnvironment } from "./RelayEnvironment.ts";
+import { createApi } from "@atlas/blueapi";
+import { BlueapiProvider } from "@atlas/blueapi-query";
 
 async function enableMocking() {
   if (import.meta.env.DEV) {
@@ -52,13 +55,20 @@ const router = createBrowserRouter([
   },
 ]);
 
+const api = createApi("/api");
+const queryClient = new QueryClient();
+
 enableMocking().then(() => {
   createRoot(document.getElementById("root")!).render(
     <RelayEnvironmentProvider environment={RelayEnvironment}>
       <InstrumentSessionProvider>
         <StrictMode>
           <ThemeProvider theme={DiamondTheme} defaultMode="light">
-            <RouterProvider router={router} />
+            <QueryClientProvider client={queryClient}>
+              <BlueapiProvider api={api}>
+                <RouterProvider router={router} />
+              </BlueapiProvider>
+            </QueryClientProvider>
           </ThemeProvider>
         </StrictMode>
       </InstrumentSessionProvider>

apps/visr/src/mocks/handlers.ts

@@ -38,6 +38,7 @@ export const handlers = [
   http.post("/api/tasks", () => {
     return HttpResponse.json({
       task_id: fakeTaskId,
+      status: 201,
     });
   }),
 

apps/visr/src/routes/Plans.tsx

@@ -1,26 +1,16 @@
-import { useEffect, useState } from "react";
 import { Box } from "@mui/material";
-import { getPlans, type PlansResponse } from "../utils/api";
 import PlanBrowser from "../components/PlanBrowser/PlanBrowser";
 import PlanParameters from "../components/PlanBrowser/PlanParameters";
+import { usePlans } from "@atlas/blueapi-query";
 
 function JsonFormsPlans() {
-  const [planData, setPlanData] = useState<PlansResponse>({ plans: [] });
-
-  useEffect(() => {
-    async function fetchPlans() {
-      const results = await getPlans();
-      setPlanData(results);
-    }
-
-    fetchPlans();
-  }, []);
+  const { data } = usePlans();
 
   return (
     <>
       <Box display={"flex"} justifyContent={"center"} sx={{ mt: 3, mb: 3 }}>
         <PlanBrowser
-          plans={planData.plans}
+          plans={data ? data.plans : []}
           renderPlan={plan => <PlanParameters plan={plan} />}
         />
       </Box>