clicking on nodes in the graph is enabled

client/src/landing/GraphRender.jsx

@@ -10,6 +10,21 @@ import { fetchGraph } from '../apiTools.jsx';
 import ForceSupervisor from 'graphology-layout-force/worker';
 
 
+function GraphEvents() {
+	const navigate = useNavigate();
+	const registerEvents = useRegisterEvents();
+
+	useEffect(() => {
+    // Register the events
+    registerEvents({
+      // node events
+      clickNode: (event) => navigate(`/${event.node}`),
+    });
+  }, [registerEvents]);
+
+  return null;
+}
+
 export default function GraphRender() {
 	const { isPending, error, data } = useQuery({ // fetch the currrent values
 	    queryKey: ['graph'],
@@ -26,27 +41,14 @@ export default function GraphRender() {
 		}
 	}, [data]);
 
-	/*
-	const navigate = useNavigate();
-	const registerEvents = useRegisterEvents();
-
-	useEffect(() => {
-    console.log("register events");
-    // Register the events
-    registerEvents({
-      // node events
-      clickNode: (event) => navigate(`/${event.node}`),
-    });
-  }, [registerEvents]);
-  */
-
 	if (isPending) return "Loading...";
 	else if (error) return `Error encountered: ${error}`;
 	else return (
 		<SigmaContainer 
 			settings={{allowInvalidContainer: true}}
 			graph={data}
-			style={{height: "400px", width: "100%", background: 'rgba(0,0,0,0)'}}
-			 />
+			style={{height: "400px", width: "100%", background: 'rgba(0,0,0,0)'}}>
+			<GraphEvents/>
+		</SigmaContainer>
 		);
 }