feat(frontend): add subscriptions to react flow views

Author: VictoriaBeilsten-Edmands

charts/dashboard/Chart.yaml

@@ -2,7 +2,7 @@ apiVersion: v2
 name: dashboard
 description: A dashboard for Diamond workflows
 type: application
-version: 0.2.2
+version: 0.2.3
 appVersion: 0.1.8
 dependencies:
   - name: common

charts/dashboard/templates/deployment.yaml

@@ -60,6 +60,8 @@ spec:
               value: {{ .Values.configuration.keycloakClient }}
             - name: GRAPH_URL
               value: {{ .Values.configuration.graphUrl }}
+            - name: GRAPH_WS_URL
+              value: {{ .Values.configuration.graphWsUrl }}
             - name: SOURCE_DIR
               value: {{ .Values.configuration.sourceDir }}
           livenessProbe:

charts/dashboard/values.yaml

@@ -3,6 +3,7 @@ configuration:
   keycloakRealm: master
   keycloakClient: workflows-dashboard
   graphUrl: https://workflows.diamond.ac.uk/graphql
+  graphWsUrl: wss://workflows.diamond.ac.uk/graphql/ws
   sourceDir: "/usr/share/nginx/html"
 
 image:

frontend/README.md

@@ -10,6 +10,7 @@
    - VITE_KEYCLOAK_REALM
    - VITE_KEYCLOAK_CLIENT
    - VITE_GRAPH_URL
+   - VITE_GRAPH_WS_URL
 5. yarn dev in frontend/dashboard
 
 ## Linting, Formatting, Compiling and Testing

frontend/configure.sh

@@ -24,5 +24,6 @@ replace_placeholder KEYCLOAK_URL
 replace_placeholder KEYCLOAK_REALM
 replace_placeholder KEYCLOAK_CLIENT
 replace_placeholder GRAPH_URL
+replace_placeholder GRAPH_WS_URL
 
 nginx -g 'daemon off;'

frontend/dashboard/.env.production

@@ -2,3 +2,4 @@ VITE_KEYCLOAK_URL = "{{ KEYCLOAK_URL }}"
 VITE_KEYCLOAK_REALM = "{{ KEYCLOAK_REALM }}"
 VITE_KEYCLOAK_CLIENT = "{{ KEYCLOAK_CLIENT }}"
 VITE_GRAPH_URL = "{{ GRAPH_URL }}"
+VITE_GRAPH_WS_URL = "{{ GRAPH_WS_URL }}"

frontend/dashboard/src/RelayEnvironment.ts

@@ -4,10 +4,27 @@ import {
   RecordSource,
   Store,
   FetchFunction,
+  SubscribeFunction,
+  GraphQLResponse,
+  Observable,
 } from "relay-runtime";
 import keycloak from "./keycloak";
+import { createClient } from "graphql-ws";
 
 const HTTP_ENDPOINT = import.meta.env.VITE_GRAPH_URL;
+const WS_ENDPOINT = import.meta.env.VITE_GRAPH_WS_URL;
+
+let kcinitPromise: Promise<boolean> | null = null;
+
+// needed to prevent repeated refresh of page when using subscriptions
+function ensureKeycloakInit(): Promise<boolean> {
+  if (!kcinitPromise) {
+    kcinitPromise = keycloak.init({
+      onLoad: "login-required",
+    });
+  }
+  return kcinitPromise;
+}
 
 keycloak.onTokenExpired = () => {
   console.log("JWT expired");
@@ -25,23 +42,9 @@ keycloak.onTokenExpired = () => {
     });
 };
 
-const kcinit = keycloak
-  .init({
-    onLoad: "login-required",
-  })
-  .then(
-    (auth) => {
-      console.info("Authenticated");
-      console.log("auth", auth);
-    },
-    () => {
-      console.error("Authentication failed");
-    },
-  );
-
 const fetchFn: FetchFunction = async (request, variables) => {
   if (!keycloak.authenticated) {
-    await kcinit;
+    await ensureKeycloakInit();
   }
 
   if (keycloak.token) {
@@ -66,11 +69,55 @@ const fetchFn: FetchFunction = async (request, variables) => {
   }
 };
 
-function createRelayEnvironment() {
-  return new Environment({
-    network: Network.create(fetchFn),
-    store: new Store(new RecordSource()),
+const wsClient = createClient({
+  url: WS_ENDPOINT,
+  connectionParams: async () => {
+    if (!keycloak.authenticated) {
+      await ensureKeycloakInit();
+    }
+    return {
+      Authorization: `Bearer ${keycloak.token ?? ""}`,
+    };
+  },
+});
+
+const subscribeFn: SubscribeFunction = (operation, variables) => {
+  return Observable.create((sink) => {
+    const cleanup = wsClient.subscribe(
+      {
+        operationName: operation.name,
+        query: operation.text ?? "",
+        variables,
+      },
+      {
+        next: (response) => {
+          const data = response.data;
+          if (data) {
+            sink.next({ data } as GraphQLResponse);
+          } else if (data == null) {
+            console.warn("Data is null:", response);
+          } else {
+            console.error("Subscription error response:", response);
+            sink.error(new Error("Subscription response missing data"));
+          }
+        },
+        error: sink.error.bind(sink),
+        complete: sink.complete.bind(sink),
+      },
+    );
+    return cleanup;
   });
-}
+};
 
-export const RelayEnvironment = createRelayEnvironment();
+let RelayEnvironment: Environment | null = null;
+
+export async function getRelayEnvironment(): Promise<Environment> {
+  if (!RelayEnvironment) {
+    await ensureKeycloakInit();
+    RelayEnvironment = new Environment({
+      network: Network.create(fetchFn, subscribeFn),
+      store: new Store(new RecordSource()),
+    });
+  }
+  return RelayEnvironment;
+}

frontend/dashboard/src/main.tsx

@@ -1,5 +1,5 @@
 import { RelayEnvironmentProvider } from "react-relay";
-import { RelayEnvironment } from "./RelayEnvironment";
+import { getRelayEnvironment } from "./RelayEnvironment";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
@@ -47,12 +47,16 @@ const router = createBrowserRouter([
   },
 ]);
 
-createRoot(document.getElementById("root") as Element).render(
-  <RelayEnvironmentProvider environment={RelayEnvironment}>
-    <StrictMode>
-      <ThemeProvider theme={DiamondTheme} defaultMode="light">
-        <RouterProvider router={router} />
-      </ThemeProvider>
-    </StrictMode>
-  </RelayEnvironmentProvider>,
-);
+const root = createRoot(document.getElementById("root") as Element);
+
+void getRelayEnvironment().then((environment) => {
+  root.render(
+    <RelayEnvironmentProvider environment={environment}>
+      <StrictMode>
+        <ThemeProvider theme={DiamondTheme} defaultMode="light">
+          <RouterProvider router={router} />
+        </ThemeProvider>
+      </StrictMode>
+    </RelayEnvironmentProvider>,
+  );
+});

frontend/dashboard/src/vite-env.d.ts

@@ -5,6 +5,7 @@ interface ImportMetaEnv {
   readonly VITE_KEYCLOAK_REALM: string;
   readonly VITE_KEYCLOAK_CLIENT: string;
   readonly VITE_GRAPH_URL: string;
+  readonly VITE_GRAPH_WS_URL: string;
 }
 
 interface importMeta {

frontend/package.json

@@ -27,7 +27,8 @@
     "@xyflow/react": "^12.8.2",
     "ajv": "^8.17.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "graphql-ws": "^6.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",