aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--maps-frontend/package-lock.json5
-rw-r--r--maps-frontend/package.json1
-rw-r--r--maps-frontend/src/App.js5
-rw-r--r--maps-frontend/src/components/DateSelector.js2
-rw-r--r--maps-frontend/src/components/Hub.js2
-rw-r--r--maps-frontend/src/components/HubList.js4
-rw-r--r--maps-frontend/src/components/TimeSelector.js4
-rw-r--r--maps-frontend/src/components/Visualization.js25
-rw-r--r--maps-frontend/src/css/Canvas.css2
-rw-r--r--package-lock.json62
-rw-r--r--package.json1
11 files changed, 96 insertions, 17 deletions
diff --git a/maps-frontend/package-lock.json b/maps-frontend/package-lock.json
index 7805071..b3d7279 100644
--- a/maps-frontend/package-lock.json
+++ b/maps-frontend/package-lock.json
@@ -12493,6 +12493,11 @@
"workbox-webpack-plugin": "5.1.4"
}
},
+ "react-uuid": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/react-uuid/-/react-uuid-1.0.2.tgz",
+ "integrity": "sha512-5e0GM16uuQj9MdRJlZ0GdLC8LKMwpU9PIqYmF27s3fIV2z+rLyASTaiW4aKzSY4DyGanz+ImzsECkftwGWfAwA=="
+ },
"read-pkg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
diff --git a/maps-frontend/package.json b/maps-frontend/package.json
index 0807122..275780d 100644
--- a/maps-frontend/package.json
+++ b/maps-frontend/package.json
@@ -10,6 +10,7 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
+ "react-uuid": "^1.0.2",
"web-vitals": "^1.1.1"
},
"scripts": {
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
diff --git a/package-lock.json b/package-lock.json
index 7f58d3a..ef860f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3304,6 +3304,15 @@
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"optional": true
},
+ "bindings": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+ "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+ "optional": true,
+ "requires": {
+ "file-uri-to-path": "1.0.0"
+ }
+ },
"bluebird": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6159,6 +6168,12 @@
}
}
},
+ "file-uri-to-path": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+ "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+ "optional": true
+ },
"filesize": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -9330,6 +9345,12 @@
"resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
},
+ "nan": {
+ "version": "2.14.2",
+ "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+ "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+ "optional": true
+ },
"nanoid": {
"version": "3.1.22",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
@@ -11647,6 +11668,25 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
},
+ "react-graph-vis": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/react-graph-vis/-/react-graph-vis-1.0.7.tgz",
+ "integrity": "sha512-FI35zlBMKU22JEvG1ukd1DDwW185y4YrDvHm6Bom9EGdA+UNMrZrIV/lyPIRWPcRkzbKaA1w1NvOYcRApD4KdQ==",
+ "requires": {
+ "lodash": "^4.17.15",
+ "prop-types": "^15.5.10",
+ "uuid": "^2.0.1",
+ "vis-data": "^7.1.2",
+ "vis-network": "^9.0.0"
+ },
+ "dependencies": {
+ "uuid": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
+ "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho="
+ }
+ }
+ },
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -14313,6 +14353,16 @@
"extsprintf": "^1.2.0"
}
},
+ "vis-data": {
+ "version": "7.1.2",
+ "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.2.tgz",
+ "integrity": "sha512-RPSegFxEcnp3HUEJSzhS2vBdbJ2PSsrYYuhRlpHp2frO/MfRtTYbIkkLZmPkA/Sg3pPfBlR235gcoKbtdm4mbw=="
+ },
+ "vis-network": {
+ "version": "9.0.4",
+ "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-9.0.4.tgz",
+ "integrity": "sha512-F/pq8yBJUuB9lNKXHhtn4GP2h91FV0c2O2nvfU34RX4VCYOlqs+mINdz+J+QkWiYhiPdlVy15gzVEzkhJ9hpaw=="
+ },
"vis-react": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/vis-react/-/vis-react-0.5.1.tgz",
@@ -14487,7 +14537,11 @@
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
- "optional": true
+ "optional": true,
+ "requires": {
+ "bindings": "^1.5.0",
+ "nan": "^2.12.1"
+ }
},
"glob-parent": {
"version": "3.1.0",
@@ -15107,7 +15161,11 @@
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
- "optional": true
+ "optional": true,
+ "requires": {
+ "bindings": "^1.5.0",
+ "nan": "^2.12.1"
+ }
},
"glob-parent": {
"version": "3.1.0",
diff --git a/package.json b/package.json
index 47492f2..227e59b 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"react": "^17.0.1",
"react-awesome-button": "^6.5.1",
"react-dom": "^17.0.1",
+ "react-graph-vis": "^1.0.7",
"react-scripts": "4.0.3",
"vis-react": "^0.5.1",
"web-vitals": "^1.0.1"
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-18 04:31:48 +0000