7 files changed, 53 insertions, 28 deletions
diff --git a/react-frontend/src/components/Hub.js b/react-frontend/src/components/Hub.js
index 8a3ac1c..94830fa 100644
--- a/react-frontend/src/components/Hub.js
+++ b/react-frontend/src/components/Hub.js
@@ -10,12 +10,24 @@ import '../css/UserCheckin.css';
  * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
  */
 function Hub(props) {
-    // State - toggled
+    const [isHover, setIsHover] = useState(false);
+
+    const formatName = name => {
+        if (name.length > 12) {
+            return props.name.substring(0, 15) + '...';
+        }
+        return props.name;
+    }
 
     return (
-        <li className='Checkin'>
+        <li 
+        className='Checkin'
+        onMouseOver = {() => setIsHover(true)}
+        onMouseLeave = {() => setIsHover(false)}>
             <div className="Img-flex">
-                <span className="Clickable-name" onClick= {() => console.log(props.id)}>{props.name}</span>
+                <span 
+                className="Clickable-name" 
+                onClick = {() => console.log(props.id)}>{isHover ? props.name : formatName(props.name)}</span>
                 <span>{props.value.toFixed(3)}</span>
             </div>
         </li>);
diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js
index aab7c23..8e00d0f 100644
--- a/react-frontend/src/components/HubList.js
+++ b/react-frontend/src/components/HubList.js
@@ -20,7 +20,7 @@ function HubList(props) {
     // sort and create the elemnts
     let hubs = [];
     //const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore);
-    props.data.forEach((hub) =>
+    props.data.forEach(hub =>
       hubs.push(
         <Hub
           key={hub.id}
diff --git a/react-frontend/src/components/HubSearch.js b/react-frontend/src/components/HubSearch.js
index 2ae1a32..827ea6d 100644
--- a/react-frontend/src/components/HubSearch.js
+++ b/react-frontend/src/components/HubSearch.js
@@ -13,27 +13,32 @@ import Search from "./HubSearch.js";
  * in a vertical layout.
  */
 function HubSearch(props) {
-  const [queryString, setQueryString] = useState("");
+  const [queryString, setQueryString] = useState("", (s) => s.toLowerCase());
   const [displayedItems, setDisplayedItems] = useState([]);
 
   /**
    * Method that determines whehter the Hub should be showed.
    * @returns {Boolean} True if to be shown, false if not.
    */
-  const toInclude = (holder) => {
+  const toInclude = holder => {
     // TODO: add number search or differentiate between it
     // TODO: add sus score range....
-    const matchingId = queryString.toLowerCase().includes(holder?.id ?? "");
-    const matchingName = queryString.toLowerCase().includes(holder?.name ?? "");
-    return matchingId || matchingName;
+    if (!holder) {
+      return false;
+    };
+
+    // const matchingId = holder.id.toString().includes(queryString.toLowerCase());
+    const matchingName = holder.name.toLowerCase().includes(queryString);
+    return matchingName;
   }
 
   /**
    * Filters the items to be shown, then created the iteams and sets the state with the items.
    */
   const filterItems = () => {
+    console.log(queryString);
     const criteria = props.data.filter(holder => toInclude(holder));
-    setDisplayedItems(criteria.map(hub => <Hub key={hub.id} id={hub.id} name={hub.name} value={hub.suspicionScore} setSelected={props.setSelected}></Hub>))
+    setDisplayedItems(criteria.map(hub => <p>{hub.name}</p>))
   }
 
   /**
@@ -49,7 +54,7 @@ function HubSearch(props) {
     <div className="User-checkin">
       <div className="Checkins">
         <h2>Search</h2>
-        <input type="text" onChange={(e) => setQueryString(e.value)}></input>
+        <input type="text" onChange={(e) => setQueryString(e.target.value)}></input>
         <ul className='Checkin-list'>{displayedItems}</ul>;
       </div>
     </div>
diff --git a/react-frontend/src/components/HubWidget.js b/react-frontend/src/components/HubWidget.js
index 7707ee9..de0ae32 100644
--- a/react-frontend/src/components/HubWidget.js
+++ b/react-frontend/src/components/HubWidget.js
@@ -25,7 +25,7 @@ function HubWidget(props) {
       </div>
       <InvestorInfo
         personId={props.selected}
-        selectedId={props.selected}
+        selectedId={props.selectedId}
         dates={props.dates}
       ></InvestorInfo>
     </>
diff --git a/react-frontend/src/components/InvestorInfo.js b/react-frontend/src/components/InvestorInfo.js
index 703c4c6..ca6e501 100644
--- a/react-frontend/src/components/InvestorInfo.js
+++ b/react-frontend/src/components/InvestorInfo.js
@@ -42,7 +42,7 @@ function InvestorInfo(props) {
       })
       .then((data) => {
         console.log(data);
-        setInfo(data);
+        //setInfo(data);
       })
       .catch((err) => console.log(err));
   };
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">
diff --git a/react-frontend/src/components/WatchDogs.js b/react-frontend/src/components/WatchDogs.js
index 6192dee..e045d82 100644
--- a/react-frontend/src/components/WatchDogs.js
+++ b/react-frontend/src/components/WatchDogs.js
@@ -27,7 +27,7 @@ function WatchDogs() {
   // State for visualization data
   const [data, setData] = useState([]);
   // State for selected person
-  const [selected, setSelected] = useState(-1);
+  const [selectedId, setSelectedId] = useState(-1);
 
   const toEpochMilli = date => Date.parse(date);
   const getGraphData = () => {
@@ -49,9 +49,9 @@ function WatchDogs() {
     .then(res  => res.json())
     .then(data => {
       //TODO: optimize this
-      const sliced = data.holders.slice(0, 500);
-      console.log(sliced);
-      setData(sliced);
+      //const sliced = data.holders.slice(0, 500);
+      //console.log(sliced);
+      setData(data.holders);
       setHasLoaded(true);
     })
     .catch(err => console.log(err));
@@ -77,9 +77,9 @@ function WatchDogs() {
           <div className="Canvas-filler Canvas-filler-1"></div>
           <div className="Canvas-filler Canvas-filler-2"></div>
           <div className="Canvas-filler Canvas-filler-3"></div>
-          <HubWidget setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubWidget>
+          <HubWidget setHasLoaded={setHasLoaded} data={data} setSelected={setSelectedId} selected={selectedId} dates={dates}></HubWidget>
           <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>
-          <Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization>
+          <Visualization hasLoaded={hasLoaded} data={data.slice(0, 600)} setSelectedId={setSelectedId}></Visualization>
         </div>
       }
     </>