1
|
/**
|
2
|
* Required Libraries:
|
3
|
*
|
4
|
* https://github.com/cytoscape/cytoscape.js-dagre
|
5
|
*
|
6
|
* NOTE:
|
7
|
* regarding the rank constraints in dagre, see https://github.com/dagrejs/dagre/issues/159
|
8
|
* version 0.4.6 is needed since this feature has been removed from later versions.
|
9
|
* For a example with rank contraint: https://github.com/dagrejs/dagre/issues/130
|
10
|
*
|
11
|
*/
|
12
|
$(function(){
|
13
|
|
14
|
// get exported json from cytoscape desktop via ajax
|
15
|
let url = 'http://test.e-taxonomy.eu/cdmserver/phycobank/taxonGraph/edges.json';
|
16
|
// let url = 'edges.json'; // test data
|
17
|
$.getJSON(url, function(result){
|
18
|
initCy(result);
|
19
|
});
|
20
|
|
21
|
/**
|
22
|
*
|
23
|
* "citationTitleCache": "WoRMS World Register of Marine Species . 2018",
|
24
|
"citationUuid": "b33daeb0-8770-4ee2-92d0-80aaa87bfba2",
|
25
|
"class": "TaxonGraphEdgeDTO",
|
26
|
"from": {
|
27
|
"class": "TaxonGraphNodeDTO",
|
28
|
"nameUuid": "",
|
29
|
"taxonUuid": "6f48c61e-adba-4cda-919d-0de778fb8c03",
|
30
|
"titleCache": "Mastogloiaceae sec. PhycoBank"
|
31
|
},
|
32
|
"to": {
|
33
|
"class": "TaxonGraphNodeDTO",
|
34
|
"nameUuid": "",
|
35
|
"taxonUuid": "cc6f88e3-5e36-48b1-ae98-a06341cd7ed0",
|
36
|
"titleCache": "Mastogloiales sec. PhycoBank"
|
37
|
}
|
38
|
|
39
|
* @param taxonGraphEdges
|
40
|
*/
|
41
|
function taxonGraphEdges2Elements(taxonGraphEdges){
|
42
|
var nodes = {};
|
43
|
var edges = [];
|
44
|
for (let e of taxonGraphEdges) {
|
45
|
if(!nodes[e.from.taxonUuid]){
|
46
|
nodes[e.from.taxonUuid] = {
|
47
|
'data':
|
48
|
{
|
49
|
'id': e.from.taxonUuid,
|
50
|
'label': e.from.name,
|
51
|
'rank' : e.from.rank
|
52
|
}
|
53
|
}
|
54
|
}
|
55
|
}
|
56
|
for (let e of taxonGraphEdges) {
|
57
|
if(!nodes[e.to.taxonUuid]){
|
58
|
nodes[e.to.taxonUuid] = {
|
59
|
'data':
|
60
|
{
|
61
|
'id': e.to.taxonUuid,
|
62
|
'label': e.to.name,
|
63
|
'rank' : e.to.rank
|
64
|
}
|
65
|
}
|
66
|
}
|
67
|
}
|
68
|
for (let e of taxonGraphEdges) {
|
69
|
edges.push({
|
70
|
'data': {
|
71
|
'source': e.to.taxonUuid,
|
72
|
'target': e.from.taxonUuid,
|
73
|
'label': e.citationTitleCache
|
74
|
},
|
75
|
'classes': e.citationUuid,
|
76
|
});
|
77
|
}
|
78
|
|
79
|
return {
|
80
|
'nodes': Array.from(Object.values(nodes)),
|
81
|
'edges': edges
|
82
|
}
|
83
|
|
84
|
}
|
85
|
|
86
|
/**
|
87
|
* see https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript#16348977
|
88
|
* @param str
|
89
|
* @returns {string}
|
90
|
*/
|
91
|
function stringToColour(str) {
|
92
|
var hash = 0;
|
93
|
for (var i = 0; i < str.length; i++) {
|
94
|
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
95
|
}
|
96
|
var colour = '#';
|
97
|
for (var i = 0; i < 3; i++) {
|
98
|
var value = (hash >> (i * 8)) & 0xFF;
|
99
|
colour += ('00' + value.toString(16)).substr(-2);
|
100
|
}
|
101
|
return colour;
|
102
|
}
|
103
|
|
104
|
function makeStyle(elements){
|
105
|
|
106
|
var stylejson = [
|
107
|
{
|
108
|
selector: 'node',
|
109
|
style: {
|
110
|
'content': 'data(label)',
|
111
|
'color' : '#fbfbfb',
|
112
|
'text-opacity': 0.5,
|
113
|
// 'text-valign': 'center',
|
114
|
// 'text-halign': 'right',
|
115
|
'background-color': '#11479e'
|
116
|
}
|
117
|
},
|
118
|
|
119
|
{
|
120
|
selector: 'edge',
|
121
|
style: {
|
122
|
'curve-style': 'bezier',
|
123
|
//'width': 4,
|
124
|
'target-arrow-shape': 'triangle',
|
125
|
'line-color': '#9dbaea',
|
126
|
'target-arrow-color': '#9dbaea'
|
127
|
}
|
128
|
},
|
129
|
{
|
130
|
selector: 'edge:selected',
|
131
|
style: {
|
132
|
'line-color': '#fbfbfb',
|
133
|
'color' : '#fbfbfb',
|
134
|
'content': 'data(label)',
|
135
|
}
|
136
|
},
|
137
|
{
|
138
|
selector: 'node:selected',
|
139
|
style: {
|
140
|
'background-color': '#eef16c',
|
141
|
'width': 60,
|
142
|
'height': 60,
|
143
|
'font-size': 24,
|
144
|
'font-weight': 'bold',
|
145
|
|
146
|
}
|
147
|
}
|
148
|
];
|
149
|
let citationUuidsSeen = [];
|
150
|
for(let e of elements.edges){
|
151
|
if(!citationUuidsSeen[e.classes]){
|
152
|
stylejson.push({
|
153
|
selector: 'edge.' + e.classes,
|
154
|
style: {
|
155
|
'curve-style': 'bezier',
|
156
|
//'width': 4,
|
157
|
'target-arrow-shape': 'triangle',
|
158
|
'line-color': stringToColour(e.classes),
|
159
|
'target-arrow-color': stringToColour(e.classes),
|
160
|
}
|
161
|
});
|
162
|
citationUuidsSeen.push(e.classes);
|
163
|
}
|
164
|
}
|
165
|
return stylejson;
|
166
|
|
167
|
}
|
168
|
|
169
|
/**
|
170
|
* documentation on configuration parameters for the dagre layout: https://github.com/dagrejs/dagre/wiki#configuring-the-layout
|
171
|
* @param taxonGraphEdges
|
172
|
*/
|
173
|
function initCy( taxonGraphEdges ){
|
174
|
|
175
|
var loading = document.getElementById('loading');
|
176
|
var elements = taxonGraphEdges2Elements(taxonGraphEdges);
|
177
|
var style = makeStyle(elements);
|
178
|
|
179
|
|
180
|
loading.classList.add('loaded');
|
181
|
|
182
|
var cy = window.cy = cytoscape({
|
183
|
container: document.getElementById('cy'),
|
184
|
layout: {
|
185
|
name: 'dagre',
|
186
|
rankDir: 'LR',
|
187
|
// ranker: 'tight-tree' // network-simplex, tight-tree or longest-path
|
188
|
},
|
189
|
style: style,
|
190
|
elements: elements,
|
191
|
// motionBlur: true,
|
192
|
// selectionType: 'single',
|
193
|
// boxSelectionEnabled: false
|
194
|
});
|
195
|
}
|
196
|
|
197
|
});
|