Got the canvas to show. Looking pretty good

7 files changed, 29 insertions, 15 deletions

diff --git a/maps-frontend/src/App.js b/maps-frontend/src/App.js
index 765455e..a080adc 100644
--- a/maps-frontend/src/App.js
+++ b/maps-frontend/src/App.js
@@ -19,8 +19,8 @@ function App() {
   const [isChanging, setIsChanging] = useState(false);
   // State to hold dates -> two weeks apart on initialization.
   const [dates, setDates] = useState({
-    start: new Date(),
-    end: new Date(Date.now() - 12096e5)
+    start: new Date(Date.now() - 12096e5),
+    end: new Date()
   });
   // State for visualization data
   const [data, setData] = useState([]);
@@ -40,7 +40,6 @@ function App() {
     })
     .then(res  => res.json())
     .then(data => {
-      console.log(data);
       setData(data.holders);
       setHasLoaded(true);
     })
diff --git a/maps-frontend/src/components/DateSelector.js b/maps-frontend/src/components/DateSelector.js
index 5bb00fb..bf01d44 100644
--- a/maps-frontend/src/components/DateSelector.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.value} onChange={(e) => props.changedFunc(Date.parse(e.target.value))} onClick={() => props.clickedFunc()}/>
+        <input type="date" value={props.value} onChange={(e) => props.changedFunc(new Date(e.target.value))} onClick={() => props.clickedFunc()}/>
     </div>
   );
 }
diff --git a/maps-frontend/src/components/Hub.js b/maps-frontend/src/components/Hub.js
index cd160ea..0504e3b 100644
--- a/maps-frontend/src/components/Hub.js
+++ b/maps-frontend/src/components/Hub.js
@@ -16,7 +16,7 @@ function Hub(props) {
     return (
         <li className='Checkin'>
             <div className="Img-flex">
-                <span><span className="Clickable-name" onClick= {(e) => props.getUserCheckins(props.value.id, props.value.name)}>{props.value.name}</span> just checked in!</span>
+                <span><span className="Clickable-name" onClick= {(e) => console.log(props.name)}>{props.name}</span> just checked in!</span>
                 <img className="Img-btn" hidden={isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_more_white_18dp.png" alt="image"/>
                 <img className="Img-btn" hidden={!isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_less_white_18dp.png" alt="image"/>
             </div>
diff --git a/maps-frontend/src/components/HubList.js b/maps-frontend/src/components/HubList.js
index 41cf07a..af6c9b0 100644
--- a/maps-frontend/src/components/HubList.js
+++ b/maps-frontend/src/components/HubList.js
@@ -19,11 +19,9 @@ 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(
-      <Hub name={hub.name} value={hub.suspicionScore}></Hub>
+      <Hub key={hub.id} name={hub.name} value={hub.suspicionScore}></Hub>
     ));
 
     setHubItems(hubs);
diff --git a/maps-frontend/src/components/TimeSelector.js b/maps-frontend/src/components/TimeSelector.js
index b396d81..6960807 100644
--- a/maps-frontend/src/components/TimeSelector.js
+++ b/maps-frontend/src/components/TimeSelector.js
@@ -20,8 +20,8 @@ function TimeSelector(props) {
 
   const changeTimeframe = () => {
     props.setDates({
-      start: Date.parse(startDate),
-      end: Date.parse(endDate)
+      start: startDate,
+      end: endDate
     });
   }
 
diff --git a/maps-frontend/src/components/Visualization.js b/maps-frontend/src/components/Visualization.js
index 3a9692d..c33339b 100644
--- a/maps-frontend/src/components/Visualization.js
+++ b/maps-frontend/src/components/Visualization.js
@@ -1,5 +1,6 @@
 // JS module imports
 import { useEffect, useRef, useState } from "react";
+import uuid from 'react-uuid';
 import Graph from 'vis-react';
 
 // CSS imports
@@ -11,19 +12,31 @@ import '../css/Canvas.css';
  * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
  */
 function Visualization(props) {
+  const options = {
+    edges: {
+      color: "#ffffff"
+    }
+  };
+
+  const events = {
+    select: event => {
+      console.log(event);
+    }
+  };
+
+
   const [graphState, setGraphState] = useState({
     nodes: [],
     edges: []
   });
 
   const getNodes = () => {
-    console.log(props.data)
-    let nodes = []
+    let nodes = [];
     props.data.forEach(hub => {
       nodes.push({
         id: hub.id,
         label: hub.name,
-        size: hub.suspicionScore * 25
+        size: hub.suspicionScore * 50
       });
     });
     return nodes;
@@ -43,13 +56,15 @@ function Visualization(props) {
   }
 
   // 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}>
+        key={uuid()} 
+        graph={graphState}
+        options={options}
+        events={events}>
       </Graph>
     </div>
   );
diff --git a/maps-frontend/src/css/Canvas.css b/maps-frontend/src/css/Canvas.css
index 8dee765..e67d87d 100644
--- a/maps-frontend/src/css/Canvas.css
+++ b/maps-frontend/src/css/Canvas.css
@@ -2,4 +2,6 @@
   /*touch-action: none; */
   position: absolute;
   z-index: 5;
+  width: 100vw;
+  height: 100vh;
 }
\ No newline at end of file