aboutsummaryrefslogtreecommitdiff
path: root/maps-frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'maps-frontend/src')
-rw-r--r--maps-frontend/src/App.js77
-rw-r--r--maps-frontend/src/App.test.js8
-rw-r--r--maps-frontend/src/components/DateSelector.js17
-rw-r--r--maps-frontend/src/components/Hub.js24
-rw-r--r--maps-frontend/src/components/HubList.js59
-rw-r--r--maps-frontend/src/components/InvestorInfo.js65
-rw-r--r--maps-frontend/src/components/Loading.js20
-rw-r--r--maps-frontend/src/components/TimeSelector.js48
-rw-r--r--maps-frontend/src/components/Visualization.js69
-rw-r--r--maps-frontend/src/css/App.css76
-rw-r--r--maps-frontend/src/css/Canvas.css7
-rw-r--r--maps-frontend/src/css/CoordSelector.css52
-rw-r--r--maps-frontend/src/css/Route.css56
-rw-r--r--maps-frontend/src/css/UserCheckin.css94
-rw-r--r--maps-frontend/src/index.css14
-rw-r--r--maps-frontend/src/index.js17
-rw-r--r--maps-frontend/src/logo.svg1
-rw-r--r--maps-frontend/src/reportWebVitals.js13
-rw-r--r--maps-frontend/src/setupTests.js5
19 files changed, 722 insertions, 0 deletions
diff --git a/maps-frontend/src/App.js b/maps-frontend/src/App.js
new file mode 100644
index 0000000..2eb0c81
--- /dev/null
+++ b/maps-frontend/src/App.js
@@ -0,0 +1,77 @@
+// React/component imports
+import React, {useEffect, useState} from 'react';
+import TimeSelector from './components/TimeSelector.js';
+import Visualization from './components/Visualization.js';
+import HubList from './components/HubList.js';
+import Loading from './components/Loading.js';
+
+// CSS import
+import './css/App.css';
+
+/**
+ * Main component of the app. Holds the main layout of the big components.
+ * @returns {import('react').HtmlHTMLAttributes} A div of the body of the page.
+ */
+function App() {
+ // State to open app when loaded
+ const [hasLoaded, setHasLoaded] = useState(false);
+ // State indicate if canvas is redrawing
+ const [isChanging, setIsChanging] = useState(false);
+ // State to hold dates -> two weeks apart on initialization.
+ const [dates, setDates] = useState({
+ start: new Date(Date.now() - 12096e5),
+ end: new Date()
+ });
+ // State for visualization data
+ const [data, setData] = useState([]);
+ // State for selected person
+ const [selected, setSelected] = useState(-1);
+
+ const toEpochMilli = date => Date.parse(date);
+ const getGraphData = () => {
+ fetch("http://localhost:4567/data", {
+ method: "POST",
+ body: JSON.stringify({
+ start: toEpochMilli(dates.start),
+ end: toEpochMilli(dates.end)
+ }),
+ headers: {
+ "Content-Type": "application/json",
+ },
+ credentials: "same-origin"
+ })
+ .then(res => res.json())
+ .then(data => {
+ setData(data.holders);
+ setHasLoaded(true);
+ })
+ .catch(err => console.log(err));
+
+ setIsChanging(false);
+ }
+
+ // Hooks to update data on init and switching of data
+ useEffect(() => getGraphData(), []);
+ useEffect(() => {
+ setIsChanging(true);
+ getGraphData();
+ }, [dates]);
+
+ return (
+ <>
+ {(!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} setSelected={setSelected} selected={selected} dates={dates}></HubList>
+ <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>
+ <Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization>
+ </div>
+ }
+ </>
+ );
+}
+
+export default App;
diff --git a/maps-frontend/src/App.test.js b/maps-frontend/src/App.test.js
new file mode 100644
index 0000000..1f03afe
--- /dev/null
+++ b/maps-frontend/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+ render(<App />);
+ const linkElement = screen.getByText(/learn react/i);
+ expect(linkElement).toBeInTheDocument();
+});
diff --git a/maps-frontend/src/components/DateSelector.js b/maps-frontend/src/components/DateSelector.js
new file mode 100644
index 0000000..bf01d44
--- /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 (
+ <div className="Flex-coord">
+ <input type="date" value={props.value} onChange={(e) => props.changedFunc(new Date(e.target.value))} onClick={() => props.clickedFunc()}/>
+ </div>
+ );
+}
+
+export default DateSelector; \ No newline at end of file
diff --git a/maps-frontend/src/components/Hub.js b/maps-frontend/src/components/Hub.js
new file mode 100644
index 0000000..b5b3f28
--- /dev/null
+++ b/maps-frontend/src/components/Hub.js
@@ -0,0 +1,24 @@
+// React import
+import { useState } from "react";
+
+// CSS import
+import '../css/UserCheckin.css';
+
+/**
+ * Componenet for checkins. Has a toggle to show more info.
+ * @param {Object} props The props of the component.
+ * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
+ */
+function Hub(props) {
+ // State - toggled
+
+ return (
+ <li className='Checkin'>
+ <div className="Img-flex">
+ <span className="Clickable-name" onClick= {() => props.setSelected(props.id)}>{props.name}</span>
+ <span>{props.value.toFixed(3)}</span>
+ </div>
+ </li>);
+}
+
+export default Hub; \ No newline at end of file
diff --git a/maps-frontend/src/components/HubList.js b/maps-frontend/src/components/HubList.js
new file mode 100644
index 0000000..d046e94
--- /dev/null
+++ b/maps-frontend/src/components/HubList.js
@@ -0,0 +1,59 @@
+// React and component imports
+import { useEffect, useState } from "react";
+import Hub from "./Hub.js";
+import InvestorInfo from "./InvestorInfo.js";
+
+// CSS import
+import '../css/UserCheckin.css';
+
+/**
+ * Component that build the checkin list and displays checkin info.
+ * @returns {import('react').HtmlHTMLAttributes} A div with the hubs
+ * in a vertical layout.
+ */
+function HubList(props) {
+ const [hubItems, setHubItems] = useState([]);
+ const [isSelected, setIsSelected] = useState(false);
+
+ /**
+ * Loads new the checkins into the current cache/map of hubs.
+ */
+ const updateHubItems = () => {
+ // sort and create the elemnts
+ let hubs = [];
+ const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore);
+ sorted.forEach(hub => hubs.push(
+ <Hub key={hub.id} id={hub.id} name={hub.name} value={hub.suspicionScore} setSelected={props.setSelected}></Hub>
+ ));
+
+ setHubItems(hubs);
+ }
+
+ const getName = () => {
+ console.log(props.selected);
+ props.data.forEach(hub => {
+ if (hub.id == props.selected) {
+ return hub.name;
+ }
+ })
+ return '';
+ }
+
+ // React hook that updates when the hubs are recalculated
+ useEffect(() => updateHubItems(), [props.data]);
+
+ //React hook to show data for an investor
+ useEffect(() => setIsSelected(true), [props.selected]);
+
+ return (
+ <div className="User-checkin">
+ <div className="Checkins">
+ <h2>Suspicion Ranks</h2>
+ <ul className='Checkin-list'>{hubItems}</ul>
+ </div>
+ <InvestorInfo name={getName()} dates={props.dates}></InvestorInfo>
+ </div>
+ );
+}
+
+export default HubList; \ No newline at end of file
diff --git a/maps-frontend/src/components/InvestorInfo.js b/maps-frontend/src/components/InvestorInfo.js
new file mode 100644
index 0000000..24994d0
--- /dev/null
+++ b/maps-frontend/src/components/InvestorInfo.js
@@ -0,0 +1,65 @@
+// React import
+import { useEffect, useState } from "react";
+
+// CSS import
+import '../css/UserCheckin.css';
+
+/**
+ * Componenet for checkins. Has a toggle to show more info.
+ * @param {Object} props The props of the component.
+ * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
+ */
+function InvestorInfo(props) {
+ const [info, setInfo] = useState({});
+
+ const toEpochMilli = date => Date.parse(date);
+ const getInfo = () => {
+ if (props.name === "") {
+ return;
+ }
+
+ console.log({
+ person: props.name,
+ start: toEpochMilli(props.dates.start),
+ end: toEpochMilli(props.dates.end)
+ });
+ fetch("http://localhost:4567/profit", {
+ method: "POST",
+ body: JSON.stringify({
+ person: props.name,
+ start: toEpochMilli(props.dates.start),
+ end: toEpochMilli(props.dates.end)
+ }),
+ headers: {
+ "Content-Type": "application/json",
+ },
+ credentials: "same-origin"
+ })
+ .then(res => {
+ console.log(res);
+ res.json();
+ })
+ .then(data => {
+ console.log(data);
+ setInfo(data);
+ })
+ .catch(err => console.log(err));
+ }
+ /*
+
+ const coords = userCoords.map((coord, index) =>
+ <li key={index}>
+ <span>{'('+coord[0].toFixed(6)}, {coord[1].toFixed(6)+')'}</span>
+ </li>
+ );*/
+
+ useEffect(() => getInfo(), [props.name])
+
+return (
+ <div className="Chosen-user">
+ hi
+ </div>
+);
+}
+
+export default InvestorInfo; \ No newline at end of file
diff --git a/maps-frontend/src/components/Loading.js b/maps-frontend/src/components/Loading.js
new file mode 100644
index 0000000..6fdf5ba
--- /dev/null
+++ b/maps-frontend/src/components/Loading.js
@@ -0,0 +1,20 @@
+// CSS import
+import '../css/App.css';
+
+/**
+ * Component that shows the program initially loading.
+ * @returns The loading widget - spinning logo :)
+ */
+function Loading() {
+ return (
+ <div className="App Loading">
+ <header className="App-header">
+ <img src={"./logo512.png"} className="App-logo" alt="logo" />
+ <h1 className="App-title">Loading WatchDogs</h1>
+ <p className="App-title">It takes a minute to connect to the servers and database :)</p>
+ </header>
+ </div>
+ );
+}
+
+export default Loading; \ No newline at end of file
diff --git a/maps-frontend/src/components/TimeSelector.js b/maps-frontend/src/components/TimeSelector.js
new file mode 100644
index 0000000..6960807
--- /dev/null
+++ b/maps-frontend/src/components/TimeSelector.js
@@ -0,0 +1,48 @@
+// React/Component imports
+import { useEffect, useState } from "react";
+import DateSelector from './DateSelector.js';
+
+// CSS imports
+import '../css/Route.css';
+
+
+/**
+ * The component that hold the forms for routing.
+ * @param {Object} props
+ */
+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
+ });
+ }
+
+ 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={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={current!=="" || props.isChanging}>Change Timeframe</button>
+ </div>
+ <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>
+ );
+}
+
+export default TimeSelector; \ No newline at end of file
diff --git a/maps-frontend/src/components/Visualization.js b/maps-frontend/src/components/Visualization.js
new file mode 100644
index 0000000..c0e5811
--- /dev/null
+++ b/maps-frontend/src/components/Visualization.js
@@ -0,0 +1,69 @@
+// JS module imports
+import { useEffect, useRef, useState } from "react";
+import uuid from 'react-uuid';
+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 options = {
+ edges: {
+ color: "#ffffff"
+ },
+ autoResize: true
+ };
+ const events = {
+ select: () => event => props.setSelected(event.nodes[0])
+ };
+
+ const [graphState, setGraphState] = useState({
+ nodes: [],
+ edges: []
+ });
+ const getNodes = () => {
+ let nodes = [];
+ props.data.forEach(hub => {
+ nodes.push({
+ id: hub.id,
+ label: hub.name,
+ size: hub.suspicionScore * 10
+ });
+ });
+ 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()}), [props.data]);
+
+ return (
+ <div className="Map-canvas">
+ <Graph
+ key={uuid()}
+ graph={graphState}
+ options={options}
+ events={events}>
+ </Graph>
+ </div>
+ );
+}
+
+export default Visualization;
+
diff --git a/maps-frontend/src/css/App.css b/maps-frontend/src/css/App.css
new file mode 100644
index 0000000..90e9046
--- /dev/null
+++ b/maps-frontend/src/css/App.css
@@ -0,0 +1,76 @@
+.App {
+ display: grid;
+ grid-template-areas: "head canvasFill2 canvasFill3 checkin"
+ "canvasFill1 canvasFill2 canvasFill3 checkin"
+ "route canvasFill2 canvasFill3 checkin";
+ grid-template-rows: max-content auto max-content;
+ grid-template-columns: max-content auto max-content max-content;
+ background-color: #121212;
+}
+
+.App-logo {
+ height: 40vmin;
+ pointer-events: none;
+}
+
+
+.Canvas-filler {
+ width: 100%;
+ height: 100%;
+
+ z-index: 1;
+}
+
+.Canvas-filler-1 {
+ grid-area: canvasFill1;
+}
+.Canvas-filler-2 {
+ grid-area: canvasFill2;
+}
+.Canvas-filler-3 {
+ grid-area: canvasFill3;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .App-logo {
+ animation: App-logo-spin infinite 20s linear;
+ }
+}
+
+.App-header {
+ grid-area: head;
+ min-height: 7vh;
+ width: max-content;
+ display: flex;
+ padding: 0 20px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: calc(10px + 2vmin);
+ color: white;
+ z-index: 10;
+ background-color: #333333;
+ border-radius: 5px;
+ margin: 5px;
+}
+
+.App-link {
+ color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.Loading {
+ z-index: 100;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+} \ No newline at end of file
diff --git a/maps-frontend/src/css/Canvas.css b/maps-frontend/src/css/Canvas.css
new file mode 100644
index 0000000..e67d87d
--- /dev/null
+++ b/maps-frontend/src/css/Canvas.css
@@ -0,0 +1,7 @@
+.Map-canvas {
+ /*touch-action: none; */
+ position: absolute;
+ z-index: 5;
+ width: 100vw;
+ height: 100vh;
+} \ No newline at end of file
diff --git a/maps-frontend/src/css/CoordSelector.css b/maps-frontend/src/css/CoordSelector.css
new file mode 100644
index 0000000..881be08
--- /dev/null
+++ b/maps-frontend/src/css/CoordSelector.css
@@ -0,0 +1,52 @@
+/* CSS adapted from w3school buttons */
+.Btn-select-left > p, .Btn-select-right > p {
+ padding: 0;
+ margin: 0;
+}
+
+.Btn-select-left {
+ background-color: #424242;
+ border: 4px solid pink;
+}
+
+.Btn-select-left:hover {
+ box-shadow: 3px 3px #888888;
+ color: black;
+ background-color: pink;
+}
+
+.Btn-select-right {
+ background-color: #424242;
+ border: 4px solid lightblue;
+}
+
+.Btn-select-right:hover {
+ box-shadow: 3px 3px #888888;
+ color: black;
+ background-color: lightblue;
+}
+
+.Btn:disabled,
+.Btn[disabled]{
+ border: 1px solid #999999;
+ background-color: #cccccc;
+ color: #666666;
+ box-shadow: none;
+ cursor: default;
+}
+
+/*
+.Btn:disabled:hover,
+.Btn[disabled]:hover{
+}
+*/
+
+.Textbox {
+ width: 100px;
+}
+
+.Number-input {
+ width: 90%;
+}
+
+
diff --git a/maps-frontend/src/css/Route.css b/maps-frontend/src/css/Route.css
new file mode 100644
index 0000000..efc4868
--- /dev/null
+++ b/maps-frontend/src/css/Route.css
@@ -0,0 +1,56 @@
+.Route {
+ grid-area: route;
+ z-index: 10;
+ color: white;
+ border-radius: 10px;
+ background-color: #121212;
+ /*cursor: default;*/
+ /* Transparent background */
+ background: rgba(0, 0, 0, 0);
+}
+
+.Coord-selectors-flex {
+ display: flex;
+ gap: 20px;
+ padding: 8px;
+ margin: 0;
+ align-content: flex-end;
+ background-color: #333333;
+ margin: 5px;
+ border-radius: 3px;
+}
+
+/* CSS adapted from w3school buttons */
+.Btn {
+ color: white;
+ padding: 16px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 2px;
+ transition-duration: 0.4s;
+ cursor: pointer;
+ outline: none;
+}
+
+.Route-btn:hover {
+ box-shadow: 3px 3px #ccc;
+ color: black;
+ background-color: lightgreen;
+}
+
+.Route-btn {
+ background-color: #424242;
+ border: 2px solid lightgreen;
+ box-shadow: .5px .5px 0 2px lightgreen;
+}
+
+.Btn:disabled,
+.Btn[disabled]{
+ border: 1px solid #999999;
+ background-color: #cccccc;
+ color: #666666;
+ /*cursor: default;*/
+ box-shadow: none;
+} \ No newline at end of file
diff --git a/maps-frontend/src/css/UserCheckin.css b/maps-frontend/src/css/UserCheckin.css
new file mode 100644
index 0000000..141cc01
--- /dev/null
+++ b/maps-frontend/src/css/UserCheckin.css
@@ -0,0 +1,94 @@
+.User-checkin {
+ grid-area: checkin;
+ height: 100vh;
+ background-color: #121212;
+ z-index: 10;
+ color: white;
+ border-radius: 10px;
+ display: flex;
+ font-size: 18px;
+ cursor: default;
+ /* Transparent background */
+ background: rgba(0, 0, 0, 0);
+}
+
+ul {
+ list-style-type: none;
+}
+
+.User-checkin > div {
+ z-index: 10;
+ background-color: #333333;
+ border-radius: 20px;
+ margin: 5px;
+}
+
+.Coord-ex {
+ height: 1vh;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+}
+
+.Chosen-user > h2, .Checkins > h2 {
+ display: flex;
+ justify-content: space-evenly;
+ height: 5vh;
+ padding: 0 10px;
+}
+
+.Checkin-list {
+ padding: 0 20px;
+ height: 86vh;
+ overflow-y: scroll;
+ cursor: default;
+}
+
+.User-checkin-list {
+ height: 80vh;
+ overflow-y: scroll;
+
+ list-style-position: inside;
+ padding: 0 20px;
+ text-align: center;
+ text-indent: -12px;
+}
+
+.User-checkin-list > li {
+ margin-bottom: 20px;
+}
+
+
+.Checkin {
+ padding-top: 10px;
+ border-bottom: 1px solid #e6ecf0;
+}
+
+.Checkin:last-child {
+ border-bottom: none;
+}
+
+.Img-flex {
+ margin: 5px 10px 10px 0;
+ gap: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.Img-btn {
+ background-color: #424242;
+ border-radius: 50%;
+ margin-right: 10px;
+}
+
+.Img-btn:hover {
+ box-shadow: 3px 3px #333333;
+ cursor: pointer;
+}
+
+.Clickable-name {
+ cursor: pointer;
+ text-decoration: underline;
+ color: lightgreen;
+} \ No newline at end of file
diff --git a/maps-frontend/src/index.css b/maps-frontend/src/index.css
new file mode 100644
index 0000000..72f4b2d
--- /dev/null
+++ b/maps-frontend/src/index.css
@@ -0,0 +1,14 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background-color: #121212;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/maps-frontend/src/index.js b/maps-frontend/src/index.js
new file mode 100644
index 0000000..ef2edf8
--- /dev/null
+++ b/maps-frontend/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>,
+ document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/maps-frontend/src/logo.svg b/maps-frontend/src/logo.svg
new file mode 100644
index 0000000..9dfc1c0
--- /dev/null
+++ b/maps-frontend/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg> \ No newline at end of file
diff --git a/maps-frontend/src/reportWebVitals.js b/maps-frontend/src/reportWebVitals.js
new file mode 100644
index 0000000..5253d3a
--- /dev/null
+++ b/maps-frontend/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+};
+
+export default reportWebVitals;
diff --git a/maps-frontend/src/setupTests.js b/maps-frontend/src/setupTests.js
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/maps-frontend/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:02:13 +0000