From 629c77c110042d5160f5218bee54f76b81c4dad2 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Tue, 20 Apr 2021 03:37:05 -0400 Subject: Multiple state changes and efficiency fixes. --- react-frontend/src/components/Hub.js | 18 +++++++++++++++--- react-frontend/src/components/HubList.js | 2 +- react-frontend/src/components/HubSearch.js | 19 ++++++++++++------- react-frontend/src/components/HubWidget.js | 2 +- react-frontend/src/components/InvestorInfo.js | 2 +- react-frontend/src/components/Visualization.js | 26 +++++++++++++++++--------- react-frontend/src/components/WatchDogs.js | 12 ++++++------ 7 files changed, 53 insertions(+), 28 deletions(-) (limited to 'react-frontend/src') 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 ( -
  • +
  • setIsHover(true)} + onMouseLeave = {() => setIsHover(false)}>
    - console.log(props.id)}>{props.name} + console.log(props.id)}>{isHover ? props.name : formatName(props.name)} {props.value.toFixed(3)}
    • ); 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( 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 => )) + setDisplayedItems(criteria.map(hub =>

    {hub.name}

    )) } /** @@ -49,7 +54,7 @@ function HubSearch(props) {

    Search

    - setQueryString(e.value)}> + setQueryString(e.target.value)}>
      {displayedItems}
    ;
    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) { 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 (
    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() {
    - + - +
    } -- cgit v1.2.3-70-g09d2