Merge branch 'master' into profit-tests

1 files changed, 103 insertions, 0 deletions

diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js
new file mode 100644
index 0000000..0a0c82a
--- /dev/null
+++ b/react-frontend/src/components/Visualization.js
@@ -0,0 +1,103 @@
+// JS module imports
+import { useEffect, useRef, useState } from "react";
+import uuid from 'react-uuid';
+import Graph from 'vis-react';
+
+// CSS imports
+import '../css/Canvas.css';
+
+
+/**
+ * This function renders and mantains thhe canvas.
+ * @param {Object} props The props for the canvas.
+ * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
+ */
+function Visualization(props) {
+  const options = {
+    edges: {
+      color: "#ffffff"
+    }
+  };
+  const events = {
+    select: () => event => props.setSelected(event.nodes[0])
+  };
+
+  const [graphState, setGraphState] = useState({
+    nodes: [],
+    edges: []
+  });
+  const getNodes = () => {
+    let nodes = [];
+    props.data.forEach(hub => {
+      if (hub.followers) {
+        let colorVal = '#f6f7d4';
+        const score = hub.suspicionScore;
+
+        if(score > 0.8){
+          colorVal = '#d92027'
+        }
+        if(score < 0.8 && score > 0.6){
+          colorVal = '#f37121'
+        }
+        if(score < 0.6 && score > 0.4){
+          colorVal = '#fdca40'
+        }
+        nodes.push({
+          id: hub.id,
+          autoResize: true,
+          label: hub.name,
+          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: 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)]);
+
+  return (
+    <div className="Map-canvas">
+      <Graph
+        key={uuid()} 
+        graph={graphState}
+        options={options}
+        events={events}>
+      </Graph>
+    </div>
+  );
+}
+
+export default Visualization;
+