/
index.js
73 lines (62 loc) · 2.13 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React from 'react';
import cytoscape from 'cytoscape';
import cydagre from 'cytoscape-dagre';
import dagre from 'dagre';
import { computeCytoscapeGraph } from './util';
import './style.scss';
export default class ModelGraph extends React.Component {
static propTypes = {
modelConfig: React.PropTypes.object,
selectNode: React.PropTypes.func
}
componentDidMount() {
cydagre(cytoscape, dagre);
const cyGraph = cytoscape({
container: this.refs.graphvisContainer,
elements: computeCytoscapeGraph(this.props.modelConfig),
layout: {
name: 'dagre',
rankDir: 'LR'
},
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'text-opacity': 0.5,
'text-valign': 'bottom',
'text-halign': 'center',
'text-margin-y': 20,
'cursor': 'pointer',
shape: 'data(shape)',
width: 'mapData(data.config.nb_col, 1, 20, 100, 250)',
height: 'mapData(data.config.nb_row, 1, 20, 100, 250)',
'background-color': '#ddd'
}
},
{
selector: 'edge',
style: {
'width': 4,
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
'line-color': '#ddd'
}
}
]
});
cyGraph.nodes()
.on('select', (clickEvt) => this.props.selectNode(clickEvt.cyTarget._private.data.data.name))
.on(
'unselect', (clickEvt) => clickEvt
// TODO: do stuff here
);
}
render() {
return (
<div className='model-graph-container'>
<div ref='graphvisContainer' className='graph-vis-container' />
</div>
);
}
}