cleaned up graph visualization, added colors, score based node scaling

3 files changed, 38 insertions, 4 deletions

diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js
index 0df3020..c9a5156 100644
--- a/react-frontend/src/components/HubList.js
+++ b/react-frontend/src/components/HubList.js
@@ -32,7 +32,7 @@ function HubList(props) {
 
   const getName = () => {
     props.data.forEach(hub => {
-      if (hub.id == props.selected) {
+      if (hub.id === props.selected) {
         setName(hub.name);
       }
     })
diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js
index 1975e86..0a0c82a 100644
--- a/react-frontend/src/components/Visualization.js
+++ b/react-frontend/src/components/Visualization.js
@@ -6,6 +6,7 @@ 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.
@@ -29,10 +30,37 @@ function Visualization(props) {
     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,
-          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,
+          }
         });
       }
     });
@@ -43,8 +71,13 @@ function Visualization(props) {
     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',
+          }
         });
       });
     });
diff --git a/react-frontend/src/components/images/person.svg b/react-frontend/src/components/images/person.svg
new file mode 100644
index 0000000..6a93d8f
--- /dev/null
+++ b/react-frontend/src/components/images/person.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Person</title><path d='M332.64 64.58C313.18 43.57 286 32 256 32c-30.16 0-57.43 11.5-76.8 32.38-19.58 21.11-29.12 49.8-26.88 80.78C156.76 206.28 203.27 256 256 256s99.16-49.71 103.67-110.82c2.27-30.7-7.33-59.33-27.03-80.6zM432 480H80a31 31 0 01-24.2-11.13c-6.5-7.77-9.12-18.38-7.18-29.11C57.06 392.94 83.4 353.61 124.8 326c36.78-24.51 83.37-38 131.2-38s94.42 13.5 131.2 38c41.4 27.6 67.74 66.93 76.18 113.75 1.94 10.73-.68 21.34-7.18 29.11A31 31 0 01432 480z'/></svg>
\ No newline at end of file