Replace graph with an svg path

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 (
 		<>
 			<Header style={{ backgroundColor: '#ededed' }}>
 				<div style={{ margin: '0 auto', maxWidth: '800px' }}>
 					<InlineH1>Dijkstra | </InlineH1>
 					<InlineP>
-						Find the shortest path between different cities in
-						Belgium with Dijkstra algorithm
+						Find the shortest path between different cities
+					</InlineP>
+					<InlineH1> | </InlineH1>
+					<InlineP>
+						GIT{' '}
+						<a href='https://git.ruihildt.xyz/ruihildt/dijkstra-backend'>
+							backend
+						</a>{' '}
+						&{' '}
+						<a href='https://git.ruihildt.xyz/ruihildt/dijkstra-frontend'>
+							frontend
+						</a>{' '}
 					</InlineP>
 				</div>
 			</Header>
@@ -154,11 +155,11 @@ function HomeView() {
 					style={{
 						display: 'flex',
 						flexFlow: 'row wrap',
-                        justifyContent: 'space-between',
-                        alignItems: 'center'
+						justifyContent: 'space-between',
+						alignItems: 'center',
 					}}
 				>
-					<div style={{margin: '0 20px'}}>
+					<div style={{ margin: '0 20px' }}>
 						<Section>
 							<h2>Starting Point</h2>
 							<div>
@@ -202,26 +203,10 @@ function HomeView() {
 						<Section>
 							<Button type='primary' onClick={handleSubmit}>
 								Get shortest path between the cities
-								<Icon type='right' />
 							</Button>
 							{errorSelect.flag && <p>{errorSelect.message}</p>}
 						</Section>
-					</div>
 
-					<div style={{ maxWidth: '660px', minWidth: '400px' }}>
-						{graph.nodes.length > 0 && (
-							<Graph
-								graph={graph}
-								options={options}
-								events={events}
-								getNetwork={(network) => {
-									//  if you want access to vis.js network api you can set the state in a parent component using this property
-								}}
-							/>
-						)}
-					</div>
-
-					<div>
 						{shortestPath && (
 							<Section>
 								<h2>
@@ -233,7 +218,7 @@ function HomeView() {
 									{shortestPath.path.map((city) => (
 										<StyledSpan
 											key={city.id}
-											class='cityPath'
+											className='cityPath'
 										>
 											{city.name}
 										</StyledSpan>
@@ -242,23 +227,16 @@ function HomeView() {
 							</Section>
 						)}
 					</div>
+
+					{graph.nodes.length > 0 && (
+						<div>
+							<div style={{ width: '500px' }}>
+								<Map highlighted={highlighted} />
+							</div>
+						</div>
+					)}
 				</Main>
 			</Content>
-
-			<Footer>
-				<div style={{ margin: '0 auto', maxWidth: '800px' }}>
-					<p>
-						Git |{' '}
-						<a href='https://git.armada.digital/rui/dijkstra-backend'>
-							backend
-						</a>{' '}
-						&{' '}
-						<a href='https://git.armada.digital/rui/dijkstra-frontend'>
-							frontend
-						</a>{' '}
-					</p>
-				</div>
-			</Footer>
 		</>
 	);
 }
@@ -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`

src/components/Map.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SvgLoader, SvgProxy } from 'react-svgmt';
+
+export default function Map({ highlighted }) {
+	return (
+		<div>
+			<SvgLoader
+				path='/belgium-map.svg'
+				style={{
+					width: '500px',
+					height: '500px',
+				}}
+			>
+				<SvgProxy
+					selector='.liege-namur, .namur-liege'
+					fill={highlighted.LN}
+				/>
+				<SvgProxy selector='.ghent' fill={highlighted.ghent} />
+				<SvgProxy selector='.brussels' fill={highlighted.brussels} />
+				<SvgProxy selector='.antwerp' fill={highlighted.antwerp} />
+				<SvgProxy selector='.tournai' fill={highlighted.tournai} />
+				<SvgProxy selector='.mechelen' fill={highlighted.mechelen} />
+				<SvgProxy selector='.bruges' fill={highlighted.bruges} />
+				<SvgProxy selector='.mons' fill={highlighted.mons} />
+				<SvgProxy selector='.liege' fill={highlighted.liege} />
+				<SvgProxy selector='.namur' fill={highlighted.namur} />
+				<SvgProxy selector='.arlon' fill={highlighted.arlon} />
+			</SvgLoader>
+		</div>
+	);
+}

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"
 });

src/utils/requests.js

@@ -1,4 +1,4 @@
-import Axios from '../utils/API';
+import Axios from './API';
 
 export async function fetchRoads() {
     try {