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