Merge branch 'master' of github.com:cs0320-2021/term-project-cohwille-jmccaul3-mfoiani-rhunt2

# Conflicts:
#	react-frontend/src/components/Visualization.js

1 files changed, 23 insertions, 11 deletions

diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js
index 33f96c9..01093dc 100644
--- a/react-frontend/src/components/Visualization.js
+++ b/react-frontend/src/components/Visualization.js
@@ -1,6 +1,5 @@
 // JS module imports
-import { useEffect, useRef, useState } from "react";
-import uuid from 'react-uuid';
+import { useMemo, useState } from "react";
 import Graph from 'vis-react';
 
 // CSS imports
@@ -26,19 +25,26 @@ function Visualization(props) {
     hideEdgeInfo = val;
   }*/
 
+  const [key, setKey] = useState(0);
+
+  const [graphState, setGraphState] = useState({
+    nodes: [],
+    edges: []
+  });
+
   const options = {
+    autoResize: true,
     edges: {
       color: "#ffffff"
     }
   };
+
   const events = {
-    select: () => event => props.setSelected(event.nodes[0])
-  };
+    selectNode: event => {
+      props.setSelectedId(event.nodes[0])
+    }
+  }
 
-  const [graphState, setGraphState] = useState({
-    nodes: [],
-    edges: []
-  });
 
   /*const getEdgeInfo = (fromID, toID) => {
       fetch("http://localhost:4567/edge-data", {
@@ -64,6 +70,7 @@ function Visualization(props) {
     let nodes = [];
     const maxScore = props.data[0].suspicionScore;
     const interval = maxScore / 4;
+
     props.data.forEach(hub => {
       if (hub.followers) {
         let colorVal = '#f6f7d4';
@@ -102,6 +109,7 @@ function Visualization(props) {
     });
     return nodes;
   }
+
   const getEdges = () => {
     let edges = []
     props.data.forEach(hub => {
@@ -129,13 +137,17 @@ function Visualization(props) {
           hidden={hideEdgeInfo}>
       </EdgeInfo>*/
 
-  // Hooks to update graph state
-  useEffect(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [JSON.stringify(props.data)]);
+  // Hooks to update graph state when data changes
+  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}>