From 4f58d37fd2fa010fb932e3b8443fc076051fe149 Mon Sep 17 00:00:00 2001
From: sofvanh <23138848+sofvanh@users.noreply.github.com>
Date: Tue, 14 Jan 2025 16:23:31 +1300
Subject: [PATCH] Log how long a graph took to load  on client

---
 frontend/src/hooks/useGraph.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/hooks/useGraph.ts b/frontend/src/hooks/useGraph.ts
index 66689cd..62c4c93 100644
--- a/frontend/src/hooks/useGraph.ts
+++ b/frontend/src/hooks/useGraph.ts
@@ -16,21 +16,25 @@ export function useGraph(graphId: string) {
   const [layoutData, setLayoutData] = useState<ForceGraphData>({ nodes: [], links: [] });
 
   useEffect(() => {
-    socket?.emit('join graph', { graphId }, (response: any) => {
+    if (!socket) return;
+    const startTime = performance.now();
+    socket.emit('join graph', { graphId }, (response: any) => {
       if (response.success) {
         setGraph(response.data.graph);
       } else {
         console.error('Failed to join graph:', response.error);
       }
+      const duration = ((performance.now() - startTime) / 1000).toFixed(3);
+      console.log(`Graph loaded in ${duration}s`);
     });
-    socket?.on('graph update', setGraph);
-    socket?.on('argument added', ({ argument, newEdges }) => {
+    socket.on('graph update', setGraph);
+    socket.on('argument added', ({ argument, newEdges }) => {
       setGraph(prevGraph => {
         if (!prevGraph) return prevGraph;
         return { ...prevGraph, arguments: [...prevGraph.arguments, argument], edges: newEdges };
       });
     });
-    socket?.on('user reaction update', ({ argumentId, userReaction }: { argumentId: string, userReaction: UserReaction }) => {
+    socket.on('user reaction update', ({ argumentId, userReaction }: { argumentId: string, userReaction: UserReaction }) => {
       setGraph(prevGraph => {
         if (!prevGraph) return prevGraph;
         const updatedArguments = prevGraph.arguments.map(arg =>
@@ -39,7 +43,7 @@ export function useGraph(graphId: string) {
         return { ...prevGraph, arguments: updatedArguments };
       });
     });
-    socket?.on('argument reactions update', ({ argumentId, reactionCounts }: { argumentId: string, reactionCounts: ReactionCounts }) => {
+    socket.on('argument reactions update', ({ argumentId, reactionCounts }: { argumentId: string, reactionCounts: ReactionCounts }) => {
       setGraph(prevGraph => {
         if (!prevGraph) return prevGraph;
         const updatedArguments = prevGraph.arguments.map(arg =>
@@ -48,7 +52,7 @@ export function useGraph(graphId: string) {
         return { ...prevGraph, arguments: updatedArguments };
       });
     });
-    socket?.on('graph scores update', (newScores: { [key: string]: Score }) => {
+    socket.on('graph scores update', (newScores: { [key: string]: Score }) => {
       setGraph(prevGraph => {
         if (!prevGraph) return prevGraph;
         const updatedArguments = prevGraph.arguments.map(arg => ({