Finished up the front end functionality. Some issues with the backend (small NaN issues), and some elements need a little more love (styling) before demo.

1 files changed, 10 insertions, 6 deletions

diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js
index d374738..96b2027 100644
--- a/react-frontend/src/components/Visualization.js
+++ b/react-frontend/src/components/Visualization.js
@@ -1,6 +1,5 @@
 // JS module imports
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import uuid from 'react-uuid';
+import { useMemo, useState } from "react";
 import Graph from 'vis-react';
 
 // CSS imports
@@ -13,6 +12,8 @@ import '../css/Canvas.css';
  * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
  */
 function Visualization(props) {
+  const [key, setKey] = useState(0);
+
   const [graphState, setGraphState] = useState({
     nodes: [],
     edges: []
@@ -27,8 +28,7 @@ function Visualization(props) {
 
   const events = {
     selectNode: event => {
-      console.log(event);
-      //props.setSelectedId(event.nodes[0]);
+      props.setSelectedId(event.nodes[0])
     }
   }
 
@@ -95,12 +95,16 @@ function Visualization(props) {
   }
 
   // Hooks to update graph state when data changes
-  useMemo(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [props.data]);
+  useMemo(() => {
+    setKey(key => key + 1);
+    setGraphState({nodes: getNodes(), edges: getEdges()})
+  }, [JSON.stringify(props.data)]);
+  
 
   return (
     <div className="Map-canvas">
       <Graph
-        key={uuid()} 
+        key={key}
         graph={graphState}
         options={options}
         events={events}>