Implement graph visualization

src/App.js

@@ -2,15 +2,21 @@ import React from 'react';
 import { Layout } from 'antd';
 import HomeView from './components/HomeView';
 import 'antd/dist/antd.css';
+import styled from 'styled-components';
 
 function App() {
   return (
-    <Layout>
+    <MainSection>
       <h1>Dijkstra</h1>
       <p>Find the shortest path between different cities in Belgium with Dijkstra algorithm.</p>
       <HomeView/>
-    </Layout>
+    </MainSection>
   );
 }
 
 export default App;
+
+const MainSection = styled.main`
+  max-width: 800px;
+  margin: 0 auto;
+`

src/components/HomeView.jsx

@@ -1,7 +1,7 @@
 import React, { useState ,useEffect } from "react";
 import { fetchRoads, fetchCities, getShortestPath } from './requests';
-import {Sigma, RandomizeNodePositions, RelativeSize, SigmaEnableSVG} from 'react-sigma';
 import { Select, Button, Icon } from 'antd';
+import Graph from "react-graph-vis";
 
 const { Option } = Select;
 
@@ -25,20 +25,19 @@ function HomeView() {
             .catch(error => console.log(error));
     }, []);
 
-
     const [graph, setGraph] = useState({nodes: [], edges: []});
+
     useEffect(() => {
         let nodes = cities.map(node => (
-            { id: `n${node.id}`, label: node.name}
+            { id: node.id, label: node.name, title: node.name}
         ));
 
         let edges = roads.map(edge => (
-            { id: `e${edge.id}`, source: `n${edge.start_city_id}`, target: `n${edge.end_city_id}`, label: 'SEES' }
+            { from: edge.start_city_id, to: edge.end_city_id, length: edge.distance }
         ))
 
         setGraph({nodes, edges})
-    }, [cities, roads])
-
+    }, [cities, roads, shortestPath])
 
     function handleStart(city_id) {
         // eslint-disable-next-line
@@ -68,7 +67,6 @@ function HomeView() {
         setError({ flag: false });
     }
 
-
     function handleSubmit() {
         if (startingPoint === destination) {
             return
@@ -83,6 +81,41 @@ 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(
         <main>
             <section>
@@ -142,14 +175,14 @@ function HomeView() {
             }
             { graph.nodes.length > 0 &&
 
-                <div>
-                <p>Graph</p>
-                <Sigma graph={graph} settings={{drawEdges: true, clone: false}} renderer="svg">
-                    <RelativeSize initialSize={50}/>
-                    <RandomizeNodePositions/>
-                </Sigma>
-                </div>
-
+            <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
+                }}
+                />
             }
         </main>
     );