From 3182aec0fa9f1707435f92b0c0644c602125b0be Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Fri, 16 Apr 2021 16:32:02 -0400 Subject: Fixed bugs. Looking pretty good. --- maps-frontend/src/App.js | 44 ++++++++------------ maps-frontend/src/components/Canvas.js | 20 --------- maps-frontend/src/components/CoordSelector.js | 17 -------- maps-frontend/src/components/DateSelector.js | 17 ++++++++ maps-frontend/src/components/HubList.js | 5 ++- maps-frontend/src/components/TimeSelector.js | 24 ++++++----- maps-frontend/src/components/Visualization.js | 59 +++++++++++++++++++++++++++ maps-frontend/src/css/Canvas.css | 3 +- maps-frontend/src/css/CoordSelector.css | 3 +- maps-frontend/src/css/Route.css | 4 +- 10 files changed, 115 insertions(+), 81 deletions(-) delete mode 100644 maps-frontend/src/components/Canvas.js delete mode 100644 maps-frontend/src/components/CoordSelector.js create mode 100644 maps-frontend/src/components/DateSelector.js create mode 100644 maps-frontend/src/components/Visualization.js (limited to 'maps-frontend/src') 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 ( -
-
Welcome to WatchDogs!
-
-
-
- - - {(!hasLoaded) ? : - } -
+ <> + {(!hasLoaded) ? : +
+
Welcome to WatchDogs!
+
+
+
+ + + +
+ } + ); } 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/CoordSelector.js deleted file mode 100644 index 5d5e5f5..0000000 --- a/maps-frontend/src/components/CoordSelector.js +++ /dev/null @@ -1,17 +0,0 @@ -// CSS import -import '../css/Route.css'; -import '../css/CoordSelector.css'; - -/** - * The component that selects and displays a coordinate. - * @param {Object} props The props for the element. - */ -function DateSelector(props) { - return ( -
- props.setStart(e.target.value)}/> -
- ); -} - -export default DateSelector; \ No newline at end of file diff --git a/maps-frontend/src/components/DateSelector.js b/maps-frontend/src/components/DateSelector.js new file mode 100644 index 0000000..5bb00fb --- /dev/null +++ b/maps-frontend/src/components/DateSelector.js @@ -0,0 +1,17 @@ +// CSS import +import '../css/Route.css'; +import '../css/CoordSelector.css'; + +/** + * The component that selects and displays a coordinate. + * @param {Object} props The props for the element. + */ +function DateSelector(props) { + return ( +
+ props.changedFunc(Date.parse(e.target.value))} onClick={() => props.clickedFunc()}/> +
+ ); +} + +export default DateSelector; \ No newline at end of file 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 (
-

Individual Suspicion

+

Suspicion Ranks

    {hubItems}
); } -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 (
- +

Adjust Timeframe :)

- +
- +
); 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 ( +
+ + +
+ ); +} + +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 -- cgit v1.2.3-70-g09d2