Implement graph visualization

This commit is contained in:
rui hildt 2020-02-10 02:05:34 +01:00
parent 86e2a700f8
commit 6ce1f04147
2 changed files with 56 additions and 17 deletions

View File

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

View File

@ -1,7 +1,7 @@
import React, { useState ,useEffect } from "react"; import React, { useState ,useEffect } from "react";
import { fetchRoads, fetchCities, getShortestPath } from './requests'; import { fetchRoads, fetchCities, getShortestPath } from './requests';
import {Sigma, RandomizeNodePositions, RelativeSize, SigmaEnableSVG} from 'react-sigma';
import { Select, Button, Icon } from 'antd'; import { Select, Button, Icon } from 'antd';
import Graph from "react-graph-vis";
const { Option } = Select; const { Option } = Select;
@ -25,20 +25,19 @@ function HomeView() {
.catch(error => console.log(error)); .catch(error => console.log(error));
}, []); }, []);
const [graph, setGraph] = useState({nodes: [], edges: []}); const [graph, setGraph] = useState({nodes: [], edges: []});
useEffect(() => { useEffect(() => {
let nodes = cities.map(node => ( 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 => ( 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}) setGraph({nodes, edges})
}, [cities, roads]) }, [cities, roads, shortestPath])
function handleStart(city_id) { function handleStart(city_id) {
// eslint-disable-next-line // eslint-disable-next-line
@ -68,7 +67,6 @@ function HomeView() {
setError({ flag: false }); setError({ flag: false });
} }
function handleSubmit() { function handleSubmit() {
if (startingPoint === destination) { if (startingPoint === destination) {
return 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( return(
<main> <main>
<section> <section>
@ -142,14 +175,14 @@ function HomeView() {
} }
{ graph.nodes.length > 0 && { graph.nodes.length > 0 &&
<div> <Graph
<p>Graph</p> graph={graph}
<Sigma graph={graph} settings={{drawEdges: true, clone: false}} renderer="svg"> options={options}
<RelativeSize initialSize={50}/> events={events}
<RandomizeNodePositions/> getNetwork={network => {
</Sigma> // if you want access to vis.js network api you can set the state in a parent component using this property
</div> }}
/>
} }
</main> </main>
); );