1 files changed, 59 insertions, 0 deletions
diff --git a/maps-frontend/src/components/Visualization.js b/maps-frontend/src/components/Visualization.js
new file mode 100644
index 0000000..3a9692d
--- /dev/null
+++ b/maps-frontend/src/components/Visualization.js
@@ -0,0 +1,59 @@
+// JS module imports
+import { useEffect, useRef, useState } from "react";
+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 [graphState, setGraphState] = useState({
+    nodes: [],
+    edges: []
+  });
+
+  const getNodes = () => {
+    console.log(props.data)
+    let nodes = []
+    props.data.forEach(hub => {
+      nodes.push({
+        id: hub.id,
+        label: hub.name,
+        size: hub.suspicionScore * 25
+      });
+    });
+    return nodes;
+  }
+
+  const getEdges = () => {
+    let edges = []
+    props.data.forEach(hub => {
+      hub.followers.forEach(follower => {
+        edges.push({
+          from: hub.id,
+          to: follower.id
+        });
+      });
+    });
+    return edges;
+  }
+
+  // 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}>
+      </Graph>
+    </div>
+  );
+}
+
+export default Visualization;
+