feat(frontend): only have open subscriptions for active workflows

Author: VictoriaBeilsten-Edmands

frontend/dashboard/src/RelayEnvironment.ts

@@ -76,7 +76,7 @@ const fetchFn: FetchFunction = async (request, variables) => {
   }
 };
 
-const wsClient = createClient({
+export const wsClient = createClient({
   url: WS_ENDPOINT,
   connectionParams: async () => {
     if (!keycloak.authenticated) {

frontend/dashboard/src/WebSocketDebugger.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { wsClient } from "./RelayEnvironment";
+import { Typography } from "@mui/material";
+
+export function WebSocketDebugger() {
+  const [status, setStatus] = useState<
+    "connected" | "closed" | "error" | "unknown"
+  >("unknown");
+
+  useEffect(() => {
+    const handleConnected = () => {
+      setStatus("connected");
+    };
+    const handleClosed = () => {
+      setStatus("closed");
+    };
+    const handleError = () => {
+      setStatus("error");
+    };
+
+    wsClient.on("connected", handleConnected);
+    wsClient.on("closed", handleClosed);
+    wsClient.on("error", handleError);
+
+    return () => {};
+  }, []);
+
+  return <Typography>WebSocket Status: {status}</Typography>;
+}

frontend/relay-workflows-lib/lib/components/BaseSingleWorkflowView.tsx

@@ -4,24 +4,22 @@ import { TaskInfo } from "workflows-lib/lib/components/workflow/TaskInfo";
 import { buildTaskTree } from "workflows-lib/lib/utils/tasksFlowUtils";
 import { Artifact, Task, TaskNode } from "workflows-lib/lib/types";
 import { useFetchedTasks, useSelectedTasks } from "./workflowRelayUtils";
-import WorkflowRelay from "./WorkflowRelay";
 import WorkflowInfo from "./WorkflowInfo";
 import { workflowRelaySubscription$data } from "../graphql/__generated__/workflowRelaySubscription.graphql";
-import { SingleWorkflowViewProps } from "./SingleWorkflowView";
+import WorkflowRelay from "./WorkflowRelay";
 
-interface Props extends SingleWorkflowViewProps {
+interface BaseSingleWorkflowViewProps {
   data: workflowRelaySubscription$data | null;
+  tasknames?: string[];
 }
 
 export default function BaseSingleWorkflowView({
-  visit,
-  workflowName,
   tasknames,
   data,
-}: Props) {
+}: BaseSingleWorkflowViewProps) {
   const [artifactList, setArtifactList] = useState<Artifact[]>([]);
   const [outputTasks, setOutputTasks] = useState<string[]>([]);
-  const fetchedTasks = useFetchedTasks(data, visit, workflowName);
+  const fetchedTasks = useFetchedTasks(data);
   const [selectedTasks, setSelectedTasks] = useSelectedTasks();
   const [filledTaskName, setFilledTaskName] = useState<string | null>(null);
 
@@ -120,8 +118,7 @@ export default function BaseSingleWorkflowView({
           </Box>
           {data && (
             <WorkflowRelay
-              workflowName={data.workflow.name}
-              visit={data.workflow.visit}
+              data={data}
               workflowLink
               filledTaskName={filledTaskName}
               expanded={true}

frontend/relay-workflows-lib/lib/components/BaseWorkflowRelay.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ResizableBox } from "react-resizable";
 import { Box } from "@mui/material";
-import { Visit, visitToText } from "@diamondlightsource/sci-react-ui";
+import { visitToText } from "@diamondlightsource/sci-react-ui";
 import {
   TasksFlow,
   WorkflowAccordion,
@@ -12,31 +12,27 @@ import { useFetchedTasks, useSelectedTasks } from "./workflowRelayUtils";
 import { workflowRelaySubscription$data } from "../graphql/__generated__/workflowRelaySubscription.graphql";
 import { useParams, useNavigate } from "react-router-dom";
 
-interface Props {
-  visit: Visit;
-  workflowName: string;
+interface BaseWorkflowRelayProps {
   workflowLink?: boolean;
   filledTaskName?: string | null;
   expanded?: boolean;
   onChange?: () => void;
-  data: workflowRelaySubscription$data | null;
+  data: workflowRelaySubscription$data;
 }
 
 export default function BaseWorkflowRelay({
-  visit,
-  workflowName,
   workflowLink,
   filledTaskName,
   expanded,
   onChange,
   data,
-}: Props) {
+}: BaseWorkflowRelayProps) {
   const { workflowName: workflowNameURL } = useParams<{
     workflowName: string;
   }>();
   const navigate = useNavigate();
-  const statusText = data?.workflow.status?.__typename ?? "Unknown";
-  const fetchedTasks = useFetchedTasks(data, visit, workflowName);
+  const statusText = data.workflow.status?.__typename ?? "Unknown";
+  const fetchedTasks = useFetchedTasks(data);
   const [selectedTasks, setSelectedTasks] = useSelectedTasks();
 
   const onNavigate = React.useCallback(
@@ -53,19 +49,14 @@ export default function BaseWorkflowRelay({
       } else {
         updatedTasks = [taskName];
       }
-      if (workflowNameURL !== workflowName) {
-        void navigate(`/workflows/${visitToText(visit)}/${workflowName}`);
+      if (workflowNameURL !== data.workflow.name) {
+        void navigate(
+          `/workflows/${visitToText(data.workflow.visit)}/${data.workflow.name}`,
+        );
       }
       setSelectedTasks(updatedTasks);
     },
-    [
-      navigate,
-      selectedTasks,
-      setSelectedTasks,
-      visit,
-      workflowName,
-      workflowNameURL,
-    ],
+    [navigate, selectedTasks, setSelectedTasks, workflowNameURL, data],
   );
 
   return (
@@ -85,8 +76,8 @@ export default function BaseWorkflowRelay({
     >
       <WorkflowAccordion
         workflow={{
-          name: workflowName,
-          instrumentSession: visit,
+          name: data.workflow.name,
+          instrumentSession: data.workflow.visit,
           status: statusText as WorkflowStatus,
         }}
         workflowLink={workflowLink}
@@ -111,7 +102,7 @@ export default function BaseWorkflowRelay({
           }}
         >
           <TasksFlow
-            workflowName={workflowName}
+            workflowName={data.workflow.name}
             tasks={fetchedTasks}
             onNavigate={onNavigate}
             highlightedTaskNames={selectedTasks}

frontend/relay-workflows-lib/lib/components/LiveSingleWorkflowView.tsx

@@ -37,12 +37,5 @@ export default function LiveWorkflowView({
 
   useSubscription(subscriptionData);
 
-  return (
-    <BaseSingleWorkflowView
-      visit={visit}
-      workflowName={workflowName}
-      tasknames={tasknames}
-      data={workflowData}
-    />
-  );
+  return <BaseSingleWorkflowView tasknames={tasknames} data={workflowData} />;
 }

frontend/relay-workflows-lib/lib/components/LiveWorkflowRelay.tsx

@@ -1,40 +1,67 @@
-import { useMemo, useState } from "react";
-import { useSubscription } from "react-relay";
+import { useEffect, useRef, useState } from "react";
+import { requestSubscription, useRelayEnvironment } from "react-relay";
 import { workflowRelaySubscription } from "../graphql/workflowRelaySubscription";
 import {
   workflowRelaySubscription$data,
   workflowRelaySubscription as WorkflowRelaySubscriptionType,
 } from "../graphql/__generated__/workflowRelaySubscription.graphql";
 import BaseWorkflowRelay from "./BaseWorkflowRelay";
 import { WorkflowRelayProps } from "./WorkflowRelay";
+import { isFinished } from "../utils";
 
-export default function LiveWorkflowRelay(props: WorkflowRelayProps) {
+interface LiveWorkflowRelayProps extends WorkflowRelayProps {
+  onNull: () => void;
+}
+
+export default function LiveWorkflowRelay(props: LiveWorkflowRelayProps) {
   const [workflowData, setWorkflowData] =
     useState<workflowRelaySubscription$data | null>(null);
 
-  const subscriptionConfig = useMemo(
-    () => ({
-      subscription: workflowRelaySubscription,
-      variables: {
-        visit: props.visit,
-        name: props.workflowName,
-      },
-      onNext: (response?: workflowRelaySubscription$data | null) => {
-        if (response) {
-          setWorkflowData(response);
-        }
-      },
-      onError: (error: unknown) => {
-        console.error("Subscription error:", error);
-      },
-      onCompleted: () => {
-        console.log("completed");
+  const subscriptionRef = useRef<{ dispose: () => void } | null>(null);
+  const environment = useRelayEnvironment();
+  useEffect(() => {
+    const subscription = requestSubscription<WorkflowRelaySubscriptionType>(
+      environment,
+      {
+        subscription: workflowRelaySubscription,
+        variables: {
+          visit: props.data.workflow.visit,
+          name: props.data.workflow.name,
+        },
+        onNext: (response?: workflowRelaySubscription$data | null) => {
+          if (response) {
+            setWorkflowData(response);
+
+            if (isFinished(response)) {
+              console.log("Workflow finished, unsubscribing.");
+              subscriptionRef.current?.dispose();
+            }
+          } else {
+            props.onNull();
+          }
+        },
+        onError: (error: unknown) => {
+          console.error("Subscription error:", error);
+        },
+        onCompleted: () => {
+          console.log("completed");
+        },
       },
-    }),
-    [props.visit, props.workflowName],
-  );
+    );
+
+    subscriptionRef.current = subscription;
 
-  useSubscription<WorkflowRelaySubscriptionType>(subscriptionConfig);
+    return () => {
+      subscriptionRef.current?.dispose();
+    };
+  }, [
+    props.data.workflow.visit,
+    props.data.workflow.name,
+    props.onNull,
+    environment,
+  ]);
 
-  return <BaseWorkflowRelay {...props} data={workflowData} />;
+  return workflowData ? (
+    <BaseWorkflowRelay {...props} data={workflowData} />
+  ) : null;
 }

frontend/relay-workflows-lib/lib/components/MockedSingleWorkflowView.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Visit } from "workflows-lib";
+import { workflowRelayQuery } from "../graphql/workflowRelayQuery";
+import { workflowRelayQuery as WorkflowRelayQueryType } from "../graphql/__generated__/workflowRelayQuery.graphql";
+import { useLazyLoadQuery } from "react-relay";
+import WorkflowRelay from "./WorkflowRelay";
+
+export interface WorkflowRelayProps {
+  visit: Visit;
+  workflowName: string;
+  workflowLink?: boolean;
+  filledTaskName?: string | null;
+  expanded?: boolean;
+  onChange?: () => void;
+}
+
+const QueryWorkflowRelay: React.FC<WorkflowRelayProps> = (props) => {
+  const queryData = useLazyLoadQuery<WorkflowRelayQueryType>(
+    workflowRelayQuery,
+    {
+      visit: props.visit,
+      name: props.workflowName,
+    },
+  );
+
+  return <WorkflowRelay {...props} data={queryData} />;
+};
+
+export default QueryWorkflowRelay;

frontend/relay-workflows-lib/lib/components/MockedWorkflowRelay.tsx

@@ -1,17 +1,30 @@
 import { Visit } from "workflows-lib";
 import LiveSingleWorkflowView from "./LiveSingleWorkflowView";
-import MockedWorkflowView from "./MockedSingleWorkflowView";
+import { useLazyLoadQuery } from "react-relay";
+import { workflowRelayQuery } from "../graphql/workflowRelayQuery";
+import { workflowRelayQuery as WorkflowRelayQueryType } from "../graphql/__generated__/workflowRelayQuery.graphql";
+import { isFinished } from "../utils";
+import BaseSingleWorkflowView from "./BaseSingleWorkflowView";
 
-const isMocking = import.meta.env.VITE_ENABLE_MOCKING === "true";
 export interface SingleWorkflowViewProps {
   visit: Visit;
   workflowName: string;
   tasknames?: string[];
 }
 
 export default function SingleWorkflowView(props: SingleWorkflowViewProps) {
-  return isMocking ? (
-    <MockedWorkflowView {...props} />
+  const queryData = useLazyLoadQuery<WorkflowRelayQueryType>(
+    workflowRelayQuery,
+    {
+      visit: props.visit,
+      name: props.workflowName,
+    },
+  );
+
+  const finished = isFinished(queryData);
+
+  return finished ? (
+    <BaseSingleWorkflowView data={queryData} tasknames={props.tasknames} />
   ) : (
     <LiveSingleWorkflowView {...props} />
   );