diff options
| -rw-r--r-- | react-frontend/src/App.js | 3 | ||||
| -rw-r--r-- | react-frontend/src/components/HubList.js | 1 | ||||
| -rw-r--r-- | react-frontend/src/components/Modal.js | 70 | ||||
| -rw-r--r-- | react-frontend/src/components/landing.html | 10 | ||||
| -rw-r--r-- | react-frontend/src/css/Modal.css | 146 |
5 files changed, 230 insertions, 0 deletions
diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js index 2eb0c81..fd7d648 100644 --- a/react-frontend/src/App.js +++ b/react-frontend/src/App.js @@ -4,6 +4,7 @@ import TimeSelector from './components/TimeSelector.js'; import Visualization from './components/Visualization.js'; import HubList from './components/HubList.js'; import Loading from './components/Loading.js'; +import Modal from './components/Modal.js'; // CSS import import './css/App.css'; @@ -50,6 +51,7 @@ function App() { setIsChanging(false); } + // Hooks to update data on init and switching of data useEffect(() => getGraphData(), []); useEffect(() => { @@ -61,6 +63,7 @@ function App() { <> {(!hasLoaded) ? <Loading></Loading> : <div className="App"> + <Modal>PHP</Modal> <header className="App-header">Welcome to WatchDogs!</header> <div className="Canvas-filler Canvas-filler-1"></div> <div className="Canvas-filler Canvas-filler-2"></div> diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js index f5b1414..5736e89 100644 --- a/react-frontend/src/components/HubList.js +++ b/react-frontend/src/components/HubList.js @@ -39,6 +39,7 @@ function HubList(props) { setName(''); } + // React hook that updates when the hubs are recalculated useEffect(() => updateHubItems(), [props.data]); diff --git a/react-frontend/src/components/Modal.js b/react-frontend/src/components/Modal.js new file mode 100644 index 0000000..3ce5d39 --- /dev/null +++ b/react-frontend/src/components/Modal.js @@ -0,0 +1,70 @@ +import { useEffect, useState } from "react"; + +import '../css/Modal.css'; + + +function Modal() { + + const [count, setCount] = useState(0); + + const nextModal1 = () => { + setCount(1); + } + const nextModal2 = () => { + setCount(2); + } + const nextModal3 = () => { + setCount(3); + } + const nextModal4 = () => { + setCount(4); + } + const startModal = () => { + document.getElementById("main-modal").style.display = 'block'; + setCount(0); + } + const exitModal = () => { + document.getElementById("main-modal").style.display = 'none'; + } + + + return ( + <div> + <div id="main-modal"className="modal" style={{display : 'block'}}> + {(count == 0) && <p className="m modal0"> + <p className="align-center"><span>Welcome to WatchDogs!</span></p> + <p className="align-center">Click start for an introduction to the WatchDogs interface.</p> + <p className="align-center"><button className="next" onClick={nextModal1}>Start</button></p> + <p className="align-center"><button className="skip" onClick={exitModal}>Skip</button></p> + </p>} + {(count == 1) && <p className="m modal1"> + <p className="align-right"><i class="arrow right"></i></p> + <span>This is the suspicion ranking pane,</span> which displays + high-profile traders and the suspicion score our algorithm assigned + to them. The higher an individual is ranked, the more likely they are involved in insider trading. + <p className="align-center"><button className="next" onClick={nextModal2}>Next</button></p> + </p>} + {(count == 2) && <p className="m modal2"> + <p></p> + <span>The Timeframe pane </span> + allows you to chose the timespan you'd like to see trade data from. Individuals' suspicion score will + be calculated based on the trades that occured during the timeframe you select. + <p className="align-center"><button className="next" onClick={nextModal3}>Next</button></p> + <p className="align-right"><i class="arrow down"></i></p> + </p>} + {count == 3 && <p className="m modal3"> + <p className="align-left"><i class="arrow left"></i></p> + <span>The Trader Graph </span> + shows how traders are related. Click on a name in the graph to see more information about that individual. + <p className="align-center"><button className="next" onClick={nextModal4}>Next</button></p> + </p>} + {count == 4 && <p className="m modal4"> + <button className="next" onClick={exitModal}>You're ready to start using WatchDogs!</button> + </p>} + </div> + <span className="restart-modal align-center" onClick={startModal}></span> + </div> + ); +} + +export default Modal;
\ No newline at end of file diff --git a/react-frontend/src/components/landing.html b/react-frontend/src/components/landing.html new file mode 100644 index 0000000..8b33b5c --- /dev/null +++ b/react-frontend/src/components/landing.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html lang="en-US"> + <head> + <meta charset="utf-8"> + <title>WatchDogLanding</title> + </head> + <body> + <p>Hello welcome to watchdog</p> + </body> +</html> diff --git a/react-frontend/src/css/Modal.css b/react-frontend/src/css/Modal.css new file mode 100644 index 0000000..7ee5045 --- /dev/null +++ b/react-frontend/src/css/Modal.css @@ -0,0 +1,146 @@ +.modal { + background-color: aqua; + display: block; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 100; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgba(0, 0, 0, 0.8); + color: white; +} + +.m{ + border: 7px solid rgb(7, 94, 12); + border-radius: 5px; + background-color: white; + color: black; + position: fixed; + height: fit-content; + width: 20vw; + padding: .5%; +} + +.modal0{ + top: 30vh; + left: 40vw; +} +.modal1{ + top: 7vh; + right: 29vw; +} +@media (max-width: 750px) { + .modal1{ + top: 7vh; + right: 0vw; + } +} +.modal2{ + bottom: 20vh; + left: 5vw; +} +.modal3{ + top: 35vh; + left: 45vw; +} +.modal4{ + top: 30vh; + left: 37vw; + padding: 2%; +} + +.restart-modal:after{ + z-index: 101; + border: 7px solid rgb(7, 94, 12); + border-radius: 15px; + background-color: white; + color: black; + position: fixed; + height: 25px; + width: 30px; + bottom: 30px; + right: 3vw; + content:'?'; +} +.restart-modal:hover:after{ + content:'Restart Orientation'; + width: 150px; +} + +span { + font-weight: bold; + color:rgba(10, 9, 71); +} + +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + } + + .right { + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + } + + .left { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); + } + + .up { + transform: rotate(-135deg); + -webkit-transform: rotate(-135deg); + } + + .down { + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + } + + .align-right{ + text-align: right; + margin-right: 15px; + } + + .align-center{ + text-align: center; + } + + .align-left{ + text-align: left; + margin-left: 15px; + } + + .next{ + background-color: rgb(206, 206, 206); + color: black; + border: 2px solid rgba(10, 9, 71); + border-radius: 5px; + padding: 5px 10px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } + + .next:hover { + background-color: rgb(7, 94, 12); + color: white; + } + + .skip{ + background-color: white; + border: none; + color:rgb(119, 119, 119); + } + + .skip:hover{ + color: black; + } + + |