From 7bdaf1f619401a0522112c8e3bd6ab2f13f852af Mon Sep 17 00:00:00 2001 From: rui hildt Date: Wed, 7 Oct 2020 23:27:30 +0200 Subject: [PATCH] Replace graph with an svg path --- .gitignore | 24 +---- package.json | 7 +- public/belgium-map.svg | 61 +++++++++++ src/components/HomeView.jsx | 143 +++++++++++--------------- src/components/Map.jsx | 31 ++++++ src/utils/API.js | 2 +- src/{components => utils}/requests.js | 2 +- 7 files changed, 159 insertions(+), 111 deletions(-) create mode 100644 public/belgium-map.svg create mode 100644 src/components/Map.jsx rename src/{components => utils}/requests.js (96%) diff --git a/.gitignore b/.gitignore index 4d29575..3c3629e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,23 +1 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* +node_modules diff --git a/package.json b/package.json index 8ba45f1..5684f18 100644 --- a/package.json +++ b/package.json @@ -3,17 +3,18 @@ "version": "0.1.0", "private": true, "dependencies": { + "@ant-design/icons": "^4.2.2", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", - "antd": "^3.26.9", + "antd": "^4.6.6", "axios": "^0.19.2", - "react": "^16.12.0", + "react": "^16.13.1", "react-dom": "^16.12.0", - "react-graph-vis": "^1.0.5", "react-router-dom": "^5.1.2", "react-scripts": "^3.4.3", "react-sigma": "^1.2.34", + "react-svgmt": "^1.1.11", "styled-components": "^5.0.1" }, "scripts": { diff --git a/public/belgium-map.svg b/public/belgium-map.svg new file mode 100644 index 0000000..8b4bc69 --- /dev/null +++ b/public/belgium-map.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ANTWERP + + + LIEGE + + + MECHELEN + + + BRUGES + + + TOURNAI + + + MONS + + + BRUSSELS + + + GHENT + + + NAMUR + + + ARLON + + diff --git a/src/components/HomeView.jsx b/src/components/HomeView.jsx index 2b8dd33..e256fd0 100644 --- a/src/components/HomeView.jsx +++ b/src/components/HomeView.jsx @@ -1,22 +1,37 @@ import React, { useState, useEffect } from 'react'; -import { fetchRoads, fetchCities, getShortestPath } from './requests'; -import { Layout, Select, Button, Icon } from 'antd'; -import Graph from 'react-graph-vis'; +import { Layout, Select, Button } from 'antd'; import styled from 'styled-components'; + +import { fetchRoads, fetchCities, getShortestPath } from '../utils/requests'; +import Map from './Map'; + import 'antd/dist/antd.css'; import arrow from '../assets/arrow-right.png'; -const { Header, Footer, Content } = Layout; - +const { Header, Content } = Layout; const { Option } = Select; +let highlightInitial = { + bruges: '#00aa90', + ghent: '#00aa90', + antwerp: '#00aa90', + mechelen: '#00aa90', + tournai: '#00aa90', + brussels: '#00aa90', + mons: '#00aa90', + namur: '#00aa90', + liege: '#00aa90', + arlon: '#00aa90', +}; + function HomeView() { const [startingPoint, setStartingPoint] = useState(1); const [destination, setDestination] = useState(9); const [errorSelect, setError] = useState({ message: '', flag: false }); const [shortestPath, setShortestPath] = useState(); - const [cities, setCities] = useState([]); + const [highlighted, setHighlighted] = useState(highlightInitial); + useEffect(() => { fetchCities() .then((data) => setCities(data)) @@ -60,7 +75,8 @@ function HomeView() { }); return; } - // Will reset the error message and shown path + // Reset the error message and shown path + setHighlighted(highlightInitial); setShortestPath(); setError({ flag: false }); } @@ -77,7 +93,8 @@ function HomeView() { }); return; } - // Will reset the error message and shown path + // Reset the error message and shown path + setHighlighted(highlightInitial); setShortestPath(); setError({ flag: false }); } @@ -88,10 +105,19 @@ function HomeView() { message: 'Please select a start and a destination', flag: true, }); - return; } else if (startingPoint && destination) { getShortestPath(startingPoint.id, destination.id) - .then((data) => setShortestPath(data)) + .then((data) => { + setShortestPath(data); + + // Add cities to highlight + let updatedgHighlighted = {}; + data.path.forEach((city) => { + updatedgHighlighted[city.name] = '#E83015'; + }); + + setHighlighted(updatedgHighlighted); + }) .catch((error) => console.log(error)); setError({ flag: false }); } else { @@ -102,49 +128,24 @@ function HomeView() { } } - // Graph visualization settings - const options = { - layout: { - hierarchical: false, - }, - edges: { - color: '#000000', - }, - height: '500px', - }; - const events = { - select: function (event) { - let { nodes, edges } = event; - }, - }; - - // // TODO Find a solution to trigger a re-render of the map - // // Add dashes to shortest path edges - // let path = test.path; - // let pairs = []; - - // for (let i = 0; path.length - 1 > i; i++) { - // let obj = { from: path[i], to: path[i+1]} - // pairs.push(obj); - // } - - // let updatedEdges = graph.edges.map(edge => { - // if (pairs.includes(edge)){ - // edge['dashes'] = true; - // } - // return edge - // }) - // console.log(updatedEdges) - // setGraph({...graph, edges: updatedEdges}); - return ( <>
Dijkstra | - Find the shortest path between different cities in - Belgium with Dijkstra algorithm + Find the shortest path between different cities + + | + + GIT{' '} + + backend + {' '} + &{' '} + + frontend + {' '}
@@ -154,11 +155,11 @@ function HomeView() { style={{ display: 'flex', flexFlow: 'row wrap', - justifyContent: 'space-between', - alignItems: 'center' + justifyContent: 'space-between', + alignItems: 'center', }} > -
+

Starting Point

@@ -202,26 +203,10 @@ function HomeView() {
{errorSelect.flag &&

{errorSelect.message}

}
-
-
- {graph.nodes.length > 0 && ( - { - // if you want access to vis.js network api you can set the state in a parent component using this property - }} - /> - )} -
- -
{shortestPath && (

@@ -233,7 +218,7 @@ function HomeView() { {shortestPath.path.map((city) => ( {city.name} @@ -242,23 +227,16 @@ function HomeView() {

)}
+ + {graph.nodes.length > 0 && ( +
+
+ +
+
+ )} - - ); } @@ -279,7 +257,6 @@ const Main = styled.main` padding-top: 20px; max-width: 1200px; margin: 0 auto; - height: calc(100vh - 147px); `; const Section = styled.section` diff --git a/src/components/Map.jsx b/src/components/Map.jsx new file mode 100644 index 0000000..a16c3c2 --- /dev/null +++ b/src/components/Map.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { SvgLoader, SvgProxy } from 'react-svgmt'; + +export default function Map({ highlighted }) { + return ( +
+ + + + + + + + + + + + + +
+ ); +} diff --git a/src/utils/API.js b/src/utils/API.js index 8805aff..0fd7b85 100644 --- a/src/utils/API.js +++ b/src/utils/API.js @@ -1,6 +1,6 @@ import axios from "axios"; export default axios.create({ - baseURL: "https://dijkstra-backend.herokuapp.com/", + baseURL: "http://localhost:4000", responseType: "json" }); \ No newline at end of file diff --git a/src/components/requests.js b/src/utils/requests.js similarity index 96% rename from src/components/requests.js rename to src/utils/requests.js index d50551a..90ddbfc 100644 --- a/src/components/requests.js +++ b/src/utils/requests.js @@ -1,4 +1,4 @@ -import Axios from '../utils/API'; +import Axios from './API'; export async function fetchRoads() { try {