From 629c77c110042d5160f5218bee54f76b81c4dad2 Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp-3.lan>
Date: Tue, 20 Apr 2021 03:37:05 -0400
Subject: Multiple state changes and efficiency fixes.

---
 react-frontend/src/components/Visualization.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

(limited to 'react-frontend/src/components/Visualization.js')

diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js
index 9a837a1..d374738 100644
--- a/react-frontend/src/components/Visualization.js
+++ b/react-frontend/src/components/Visualization.js
@@ -1,5 +1,5 @@
 // JS module imports
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import uuid from 'react-uuid';
 import Graph from 'vis-react';
 
@@ -13,23 +13,30 @@ import '../css/Canvas.css';
  * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
  */
 function Visualization(props) {
+  const [graphState, setGraphState] = useState({
+    nodes: [],
+    edges: []
+  });
+
   const options = {
+    autoResize: true,
     edges: {
       color: "#ffffff"
     }
   };
+
   const events = {
-    select: () => event => props.setSelected(event.nodes[0])
-  };
+    selectNode: event => {
+      console.log(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';
@@ -68,6 +75,7 @@ function Visualization(props) {
     });
     return nodes;
   }
+
   const getEdges = () => {
     let edges = []
     props.data.forEach(hub => {
@@ -86,8 +94,8 @@ function Visualization(props) {
     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(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [props.data]);
 
   return (
     <div className="Map-canvas">
-- 
cgit v1.2.3-70-g09d2