Got the canvas to show. Looking pretty good

1 files changed, 20 insertions, 5 deletions

diff --git a/maps-frontend/src/components/Visualization.js b/maps-frontend/src/components/Visualization.js
index 3a9692d..c33339b 100644
--- a/maps-frontend/src/components/Visualization.js
+++ b/maps-frontend/src/components/Visualization.js
@@ -1,5 +1,6 @@
 // JS module imports
 import { useEffect, useRef, useState } from "react";
+import uuid from 'react-uuid';
 import Graph from 'vis-react';
 
 // CSS imports
@@ -11,19 +12,31 @@ import '../css/Canvas.css';
  * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
  */
 function Visualization(props) {
+  const options = {
+    edges: {
+      color: "#ffffff"
+    }
+  };
+
+  const events = {
+    select: event => {
+      console.log(event);
+    }
+  };
+
+
   const [graphState, setGraphState] = useState({
     nodes: [],
     edges: []
   });
 
   const getNodes = () => {
-    console.log(props.data)
-    let nodes = []
+    let nodes = [];
     props.data.forEach(hub => {
       nodes.push({
         id: hub.id,
         label: hub.name,
-        size: hub.suspicionScore * 25
+        size: hub.suspicionScore * 50
       });
     });
     return nodes;
@@ -43,13 +56,15 @@ function Visualization(props) {
   }
 
   // Hooks to update graph state
-  useEffect(() => setGraphState({nodes: getNodes(), edges: getEdges()}), []);
   useEffect(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [props.data]);
 
   return (
     <div className="Map-canvas">
       <Graph
-        graph={graphState}>
+        key={uuid()} 
+        graph={graphState}
+        options={options}
+        events={events}>
       </Graph>
     </div>
   );