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

1 files changed, 66 insertions, 15 deletions

diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js
index 1975e86..d65d106 100644
--- a/react-frontend/src/components/Visualization.js
+++ b/react-frontend/src/components/Visualization.js
@@ -1,63 +1,114 @@
 // 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
 import '../css/Canvas.css';
+import EdgeInfo from "./EdgeInfo";
+
 
 /**
- * This function renders and mantains thhe canvas.
+ * This function renders and mantains the canvas.
  * @param {Object} props The props for the canvas.
  * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
  */
 function Visualization(props) {
+
+
+
+  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 getNodes = () => {
     let nodes = [];
+    const maxScore = props.data[0].suspicionScore;
+    const interval = maxScore / 4;
+
     props.data.forEach(hub => {
       if (hub.followers) {
+        let colorVal = '#f6f7d4';
+        const score = hub.suspicionScore;
+
+        if(score > (maxScore - interval)){
+          colorVal = '#d92027'
+        }
+        if(score <= (maxScore - interval) && score > (maxScore - interval*2)){
+          colorVal = '#f37121'
+        }
+        if(score <= (maxScore - interval*2) && score > (maxScore - interval*3)){
+          colorVal = '#fdca40'
+        }
         nodes.push({
           id: hub.id,
+          autoResize: true,
           label: hub.name,
-          size: hub.suspicionScore
+          labelHighlightBold: true,
+          shape: "dot",
+          value: hub.suspicionScore*1000,
+          color: {
+            background: colorVal,
+            border: '#2b2e4a',
+            highlight:{
+              background: '#29bb89',
+              border: '#fdca40'
+            }
+          },
+          font: {
+            color: '#9fd8df',
+            size: 20,
+          }
         });
       }
     });
     return nodes;
   }
+
   const getEdges = () => {
     let edges = []
     props.data.forEach(hub => {
       hub.followers.forEach(follower => {
         edges.push({
-          from: hub.id,
-          to: follower.id
+          from: follower.id,
+          to: hub.id,
+          dashes: false,
+          color:{
+            opacity: 0.7,
+            highlight:'#fdca40',
+          },
         });
       });
     });
     return edges;
   }
 
-  // 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}>