Fixed bugs. Looking pretty good.

9 files changed, 99 insertions, 65 deletions

diff --git a/maps-frontend/src/App.js b/maps-frontend/src/App.js
index 659b8f5..765455e 100644
--- a/maps-frontend/src/App.js
+++ b/maps-frontend/src/App.js
@@ -1,7 +1,7 @@
 // React/component imports
 import React, {useEffect, useState} from 'react';
 import TimeSelector from './components/TimeSelector.js';
-import Canvas from './components/Canvas.js';
+import Visualization from './components/Visualization.js';
 import HubList from './components/HubList.js';
 import Loading from './components/Loading.js';
 
@@ -24,13 +24,8 @@ function App() {
   });
   // State for visualization data
   const [data, setData] = useState([]);
-  // States to control cursor.
-  const [cursor, setCursor] = useState('grab');
-  // State for routing.
-  const [route, setRoute] = useState([]);
 
   const toEpochMilli = date => Date.parse(date);
-  
   const getGraphData = () => {
     fetch("http://localhost:4567/data", {
         method: "POST",
@@ -45,42 +40,37 @@ function App() {
     })
     .then(res  => res.json())
     .then(data => {
-      setData(data);
+      console.log(data);
+      setData(data.holders);
       setHasLoaded(true);
     })
     .catch(err => console.log(err));
-}
 
-  /**
-   * Sets the coordinate for routing.
-   * @param {Object} coord The coordinate to replace.
-   */
-  const setCoord = coord => {
-    setCursor('grab');
+    setIsChanging(false);
   }
 
-
   // Hooks to update data on init and switching of data
   useEffect(() => getGraphData(), []);
   useEffect(() => {
     setIsChanging(true);
     getGraphData();
-    return () => setIsChanging(false);
   }, [dates]);
 
 
   return (
-    <div className="App" style={{ cursor: cursor }}>
-      <header className="App-header">Welcome to WatchDogs!</header>
-      <div className="Canvas-filler Canvas-filler-1"></div>
-      <div className="Canvas-filler Canvas-filler-2"></div>
-      <div className="Canvas-filler Canvas-filler-3"></div>
-      <HubList setHasLoaded={setHasLoaded} data={data}></HubList>
-      <Canvas setCursor={setCursor}
-        hasLoaded={hasLoaded} setHasLoaded={setHasLoaded}></Canvas>
-      {(!hasLoaded) ? <Loading></Loading> :
-      <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>}
-    </div>
+    <>
+      {(!hasLoaded) ? <Loading></Loading> :     
+        <div className="App">
+          <header className="App-header">Welcome to WatchDogs!</header>
+          <div className="Canvas-filler Canvas-filler-1"></div>
+          <div className="Canvas-filler Canvas-filler-2"></div>
+          <div className="Canvas-filler Canvas-filler-3"></div>
+          <HubList setHasLoaded={setHasLoaded} data={data}></HubList>
+          <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>
+          <Visualization hasLoaded={hasLoaded} data={data}></Visualization>
+        </div>
+      }
+    </>
   );
 }
 
diff --git a/maps-frontend/src/components/Canvas.js b/maps-frontend/src/components/Canvas.js
deleted file mode 100644
index 9686f29..0000000
--- a/maps-frontend/src/components/Canvas.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// JS module imports
-import { useEffect, useRef, useState } from "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) {
-  // instance variables
-
-
-  return 
-}
-
-export default Visualization;
-
diff --git a/maps-frontend/src/components/CoordSelector.js b/maps-frontend/src/components/DateSelector.js
index 5d5e5f5..5bb00fb 100644
--- a/maps-frontend/src/components/CoordSelector.js
+++ b/maps-frontend/src/components/DateSelector.js
@@ -9,7 +9,7 @@ import '../css/CoordSelector.css';
 function DateSelector(props) {
   return (
     <div className="Flex-coord">
-        <input type="date" value={props.date} onChange={(e) => props.setStart(e.target.value)}/>
+        <input type="date" value={props.value} onChange={(e) => props.changedFunc(Date.parse(e.target.value))} onClick={() => props.clickedFunc()}/>
     </div>
   );
 }
diff --git a/maps-frontend/src/components/HubList.js b/maps-frontend/src/components/HubList.js
index 3bbcca6..41cf07a 100644
--- a/maps-frontend/src/components/HubList.js
+++ b/maps-frontend/src/components/HubList.js
@@ -19,6 +19,7 @@ function HubList(props) {
   const updateHubItems = () => {
     // sort and create the elemnts
     let hubs = [];
+    console.log(props.data);
     const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore);
     console.log(sorted);
     sorted.forEach(hub => hubs.push(
@@ -34,11 +35,11 @@ function HubList(props) {
   return (
     <div className="User-checkin">
         <div className="Checkins">
-            <h2>Individual Suspicion</h2>
+            <h2>Suspicion Ranks</h2>
             <ul className='Checkin-list'>{hubItems}</ul>
         </div>
     </div>
   );
 }
 
-export default HubList
\ No newline at end of file
+export default HubList;
\ No newline at end of file
diff --git a/maps-frontend/src/components/TimeSelector.js b/maps-frontend/src/components/TimeSelector.js
index 2a26fd9..b396d81 100644
--- a/maps-frontend/src/components/TimeSelector.js
+++ b/maps-frontend/src/components/TimeSelector.js
@@ -1,5 +1,5 @@
 // React/Component imports
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import DateSelector from './DateSelector.js';
 
 // CSS imports
@@ -13,29 +13,33 @@ import '../css/Route.css';
 function TimeSelector(props) {
   const [current, setCurrent] = useState("");
 
+  const toValue = date => new Date(date).toISOString().slice(0, 10);
+
   const [startDate, setStartDate] = useState(props.dates.start);
   const [endDate, setEndDate] = useState(props.dates.end);
 
   const changeTimeframe = () => {
     props.setDates({
-      start: startDate,
-      end: endDate
-    })
+      start: Date.parse(startDate),
+      end: Date.parse(endDate)
+    });
   }
 
+  useEffect(() => setCurrent(""), [startDate, endDate]);
+  
   // The div with the html elements for routing.
   return (
     <div className="Route">
       <div className="Coord-selectors-flex">
-        <DateSelector side={"left"} name={"Start Date"} className="Coord-select-left" clickedFunc={props.setCurrent("start")}
-          changedFunc={setStartDate}  disabled={props.currentSelector==='start' || props.isChanging}></DateSelector>
+        <DateSelector side={"left"} name={"Start Date"} className="Coord-select-left" clickedFunc={setCurrent}
+          changedFunc={setStartDate}  disabled={current==='start' || props.isChanging} value={toValue(startDate)}></DateSelector>
         <div>
           <h2>Adjust Timeframe :)</h2>
-          <button className="Btn Route-btn" onClick={() => changeTimeframe()} 
-          disabled={props.currentSelector !== '' || props.isChanging}>Change Timeframe</button>
+          <button className="Btn Route-btn" onClick={() => changeTimeframe()}
+          disabled={current!=="" || props.isChanging}>Change Timeframe</button>
         </div>
-        <DateSelector side={"right"} name={"End Date"} className="Coord-select-right" clickedFunc={props.setCurrent("end")}
-          changedFunc={setEndDate} disabled={props.currentSelector==='end' || props.isChanging}></DateSelector>
+        <DateSelector side={"right"} name={"End Date"} className="Coord-select-right" clickedFunc={setCurrent}
+          changedFunc={setEndDate} disabled={current==='end' || props.isChanging} value={toValue(endDate)}></DateSelector>
       </div>
     </div>
   );
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;
+
diff --git a/maps-frontend/src/css/Canvas.css b/maps-frontend/src/css/Canvas.css
index 1bc45b5..8dee765 100644
--- a/maps-frontend/src/css/Canvas.css
+++ b/maps-frontend/src/css/Canvas.css
@@ -1,6 +1,5 @@
 .Map-canvas {
-  touch-action: none;
-
+  /*touch-action: none; */
   position: absolute;
   z-index: 5;
 }
\ No newline at end of file
diff --git a/maps-frontend/src/css/CoordSelector.css b/maps-frontend/src/css/CoordSelector.css
index 696c888..881be08 100644
--- a/maps-frontend/src/css/CoordSelector.css
+++ b/maps-frontend/src/css/CoordSelector.css
@@ -35,10 +35,11 @@
   cursor: default;
 }
 
+/*
 .Btn:disabled:hover,
 .Btn[disabled]:hover{
-  cursor: crosshair;
 }
+*/
 
 .Textbox {
   width: 100px;
diff --git a/maps-frontend/src/css/Route.css b/maps-frontend/src/css/Route.css
index eaa69c4..efc4868 100644
--- a/maps-frontend/src/css/Route.css
+++ b/maps-frontend/src/css/Route.css
@@ -4,7 +4,7 @@
   color: white;
   border-radius: 10px;
   background-color: #121212;
-  cursor: default;
+  /*cursor: default;*/
   /* Transparent background */
   background: rgba(0, 0, 0, 0);
 }
@@ -51,6 +51,6 @@
   border: 1px solid #999999;
   background-color: #cccccc;
   color: #666666;
-  cursor: default;
+  /*cursor: default;*/
   box-shadow: none;
 }
\ No newline at end of file