fixes websockets loading before env eval

SamuelSchepp · SamuelSchepp · commit 08cdbaffaa44 · 2025-01-31T19:56:09.000+01:00
diff --git a/nakar-client-web/src/components/room/Canvas.tsx b/nakar-client-web/src/components/room/Canvas.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Edge, GraphLabel, Node } from "../../../src-gen";
 import { Labels } from "./Labels.tsx";
 import { GraphRendererD3 } from "./GraphRendererD3.tsx";
@@ -7,18 +7,22 @@ import { Stack } from "react-bootstrap";
 import { GraphRendererEngine } from "../../lib/graph-renderer/GraphRendererEngine.ts";
 import { NodeDetails } from "./NodeDetails.tsx";
 import { EdgeDetails } from "./EdgeDetails.tsx";
-import { WebSocketsManagerContext } from "../../lib/ws/WebSocketsManagerContext.ts";
+import { WebSocketsManager } from "../../lib/ws/WebSocketsManager.ts";
 
-export function Canvas(props: { renderer: GraphRendererEngine }) {
-  const webSocketsManager = useContext(WebSocketsManagerContext);
+export function Canvas(props: {
+  renderer: GraphRendererEngine;
+  webSocketsManager: WebSocketsManager;
+}) {
   const [detailsNode, setDetailsNode] = useState<Node | null>(null);
   const [detailsEdge, setDetailsEdge] = useState<Edge | null>(null);
   const [graphLabels, setGraphLabels] = useState<GraphLabel[]>([]);
 
   useEffect(() => {
-    const s1 = webSocketsManager.onScenarioDataChanged$.subscribe((sd) => {
-      setGraphLabels(sd.graph.metaData.labels);
-    });
+    const s1 = props.webSocketsManager.onScenarioDataChanged$.subscribe(
+      (sd) => {
+        setGraphLabels(sd.graph.metaData.labels);
+      },
+    );
 
     return () => {
       s1.unsubscribe();
@@ -32,6 +36,7 @@ export function Canvas(props: { renderer: GraphRendererEngine }) {
     >
       {props.renderer === "d3" && (
         <GraphRendererD3
+          webSockets={props.webSocketsManager}
           onNodeClicked={(n) => {
             setDetailsNode(n);
             setDetailsEdge(null);
diff --git a/nakar-client-web/src/components/room/GraphRendererD3.tsx b/nakar-client-web/src/components/room/GraphRendererD3.tsx
@@ -1,47 +1,47 @@
-import { createRef, useContext, useEffect, useState } from "react";
+import { createRef, useEffect, useState } from "react";
 import { useTheme } from "../../lib/theme/useTheme.ts";
 import { D3Renderer } from "../../lib/d3/D3Renderer.ts";
-import { WebSocketsManagerContext } from "../../lib/ws/WebSocketsManagerContext.ts";
 import { Node, Edge } from "../../../src-gen";
+import { WebSocketsManager } from "../../lib/ws/WebSocketsManager.ts";
 
 export function GraphRendererD3(props: {
   onNodeClicked: (node: Node) => void;
   onEdgeClicked: (edge: Edge) => void;
+  webSockets: WebSocketsManager;
 }) {
   const svgRef = createRef<SVGSVGElement>();
   const theme = useTheme();
   const [graphRenderer] = useState(new D3Renderer(theme));
-  const webSockets = useContext(WebSocketsManagerContext);
 
   useEffect(() => {
-    const s1 = webSockets.onScenarioDataChanged$.subscribe((scenraioData) => {
-      graphRenderer.loadGraphContent(scenraioData.graph);
-    });
-    const s2 = graphRenderer.onNodesMoved(() => {
-      webSockets.sendMessage({
-        type: "WSActionMoveNodes",
-        nodes: graphRenderer.graphState.nodes.map((n) => ({
-          id: n.id,
-          position: { x: n.x, y: n.y },
-        })),
-      });
-    });
-    const s3 = webSockets.onNodesMoved$.subscribe((onMove) => {
-      graphRenderer.updateNodePositions(onMove);
-    });
-    const s4 = graphRenderer.onDisplayNodeData((n) => {
-      props.onNodeClicked(n);
-    });
-    const s5 = graphRenderer.onDisplayLinkData((l) => {
-      props.onEdgeClicked(l);
-    });
+    const supscriptions = [
+      props.webSockets.onScenarioDataChanged$.subscribe((scenraioData) => {
+        graphRenderer.loadGraphContent(scenraioData.graph);
+      }),
+      graphRenderer.onNodesMoved(() => {
+        props.webSockets.sendMessage({
+          type: "WSActionMoveNodes",
+          nodes: graphRenderer.graphState.nodes.map((n) => ({
+            id: n.id,
+            position: { x: n.x, y: n.y },
+          })),
+        });
+      }),
+      props.webSockets.onNodesMoved$.subscribe((onMove) => {
+        graphRenderer.updateNodePositions(onMove);
+      }),
+      graphRenderer.onDisplayNodeData((n) => {
+        props.onNodeClicked(n);
+      }),
+      graphRenderer.onDisplayLinkData((l) => {
+        props.onEdgeClicked(l);
+      }),
+    ];
 
     return () => {
-      s1.unsubscribe();
-      s2.unsubscribe();
-      s3.unsubscribe();
-      s4.unsubscribe();
-      s5.unsubscribe();
+      supscriptions.forEach((s) => {
+        s.unsubscribe();
+      });
     };
   }, []);
 
diff --git a/nakar-client-web/src/components/room/ToastStack.tsx b/nakar-client-web/src/components/room/ToastStack.tsx
@@ -1,11 +1,10 @@
 import { Toast, ToastContainer } from "react-bootstrap";
-import { useContext, useEffect, useState } from "react";
-import { WebSocketsManagerContext } from "../../lib/ws/WebSocketsManagerContext.ts";
+import { useEffect, useState } from "react";
 import { v4 } from "uuid";
+import { WebSocketsManager } from "../../lib/ws/WebSocketsManager.ts";
 
-export function ToastStack() {
+export function ToastStack(props: { websocketsManager: WebSocketsManager }) {
   const [message, setMessages] = useState<ToastMessage[]>([]);
-  const websocketsManager = useContext(WebSocketsManagerContext);
 
   const pushMessage = (message: ToastMessage) => {
     setMessages((messages: ToastMessage[]): ToastMessage[] => [
@@ -23,31 +22,31 @@ export function ToastStack() {
 
   useEffect(() => {
     const subscriptions = [
-      websocketsManager.onScenarioDataChanged$.subscribe((event) => {
+      props.websocketsManager.onScenarioDataChanged$.subscribe((event) => {
         pushMessage({
           id: v4(),
           message: `Scenario loaded: ${event.scenarioTitle}`,
           date: new Date(event.date),
           title: "Graph",
         });
       }),
-      websocketsManager.onError$.subscribe((event) => {
+      props.websocketsManager.onError$.subscribe((event) => {
         pushMessage({
           id: v4(),
           message: event.message,
           date: new Date(event.date),
           title: "Error",
         });
       }),
-      websocketsManager.onUserJoined$.subscribe((event) => {
+      props.websocketsManager.onUserJoined$.subscribe((event) => {
         pushMessage({
           id: v4(),
           message: `User ${event.userName} joined the room.`,
           date: new Date(event.date),
           title: "User joined",
         });
       }),
-      websocketsManager.onUserLeft$.subscribe((event) => {
+      props.websocketsManager.onUserLeft$.subscribe((event) => {
         pushMessage({
           id: v4(),
           message: `User ${event.userName} left the room. (${event.message})`,
diff --git a/nakar-client-web/src/lib/ws/WebSocketsManagerContext.ts b/nakar-client-web/src/lib/ws/WebSocketsManagerContext.ts
diff --git a/nakar-client-web/src/lib/ws/useWebSocketsState.ts b/nakar-client-web/src/lib/ws/useWebSocketsState.ts
@@ -1,9 +1,8 @@
 import { SocketState } from "./SocketState.ts";
-import { useContext, useEffect, useState } from "react";
-import { WebSocketsManagerContext } from "./WebSocketsManagerContext.ts";
+import { useEffect, useState } from "react";
+import { WebSocketsManager } from "./WebSocketsManager.ts";
 
-export function useWebSocketsState(): SocketState {
-  const manager = useContext(WebSocketsManagerContext);
+export function useWebSocketsState(manager: WebSocketsManager): SocketState {
   const [current, setCurrent] = useState<SocketState>(manager.socketState);
 
   useEffect(() => {
diff --git a/nakar-client-web/src/pages/Room.tsx b/nakar-client-web/src/pages/Room.tsx
@@ -4,15 +4,14 @@ import { SideToolbar } from "../components/room/SideToolbar.tsx";
 import { DatabaseList } from "../components/room/DatabaseList.tsx";
 import { Canvas } from "../components/room/Canvas.tsx";
 import { DataTable } from "../components/room/DataTable.tsx";
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Room as RoomSchema, getRoom } from "../../src-gen";
 import { LoaderFunctionArgs, useLoaderData } from "react-router";
 import { resultOrThrow } from "../lib/data/resultOrThrow.ts";
 import { GraphRendererEngine } from "../lib/graph-renderer/GraphRendererEngine.ts";
-
 import { useWebSocketsState } from "../lib/ws/useWebSocketsState.ts";
-import { WebSocketsManagerContext } from "../lib/ws/WebSocketsManagerContext.ts";
 import { ToastStack } from "../components/room/ToastStack.tsx";
+import { WebSocketsManager } from "../lib/ws/WebSocketsManager.ts";
 
 export async function RoomLoader(
   args: LoaderFunctionArgs,
@@ -36,8 +35,8 @@ export function Room() {
   const [tableDataOpened, setTableDataOpened] = useState(false);
   const [scenarioLoading, setScenarioLoading] = useState<string | null>(null);
   const [renderer, setRenderer] = useState<GraphRendererEngine>("d3");
-  const socketState = useWebSocketsState();
-  const webSockets = useContext(WebSocketsManagerContext);
+  const [webSockets] = useState(new WebSocketsManager());
+  const socketState = useWebSocketsState(webSockets);
 
   useEffect(() => {
     if (socketState.type === "connected") {
@@ -97,7 +96,7 @@ export function Room() {
             onChange: setRenderer,
           }}
         ></AppNavbar>
-        <ToastStack></ToastStack>
+        <ToastStack websocketsManager={webSockets}></ToastStack>
         <Stack
           direction={"horizontal"}
           className={"align-items-stretch flex-grow-1"}
@@ -117,7 +116,7 @@ export function Room() {
               ></DatabaseList>
             )}
           </SideToolbar>
-          <Canvas renderer={renderer}></Canvas>
+          <Canvas renderer={renderer} webSocketsManager={webSockets}></Canvas>
           <SideToolbar hidden={!tableDataOpened} width={700}>
             {() => <DataTable tableData={tableData}></DataTable>}
           </SideToolbar>
