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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
{% extends "layout.html" %}
{% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.17.1/cytoscape.min.js" integrity="sha256-uZV2wRlscgr52q3Wb3Oew0rKCPsM3g4aBTv46sF4qzg=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/file-saver@1.3.8/FileSaver.js"></script>
<script src="https://unpkg.com/cytoscape-svg/cytoscape-svg.js"></script>
<div class="row">
<div class="column left" >
<h4> {{ message |safe}} </h4>
</div>
<div class="column right">
{{ message2 |safe}}
<br>
<br>
<button style="color: #008CBA; width: 120px; height: 30px;" onclick="saveAsSvg()">Save as SVG</button>
<button style="color: #008CBA; width: 120px; height: 30px;" onclick="window.location=getSvgUrl()">View SVG</button>
</div>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
style: [
{ selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'background-color': 'data(nodecolor)',
'font-weight': 'data(fontweight)',
'color':'data(fontcolor)',
'font-size': '9%'
}
},
{ selector: 'edge',
css: {
'content': 'data(sentCnt)',
'line-color':'black',
'opacity': 'mapData(sentCnt, 1, 50, 0.3, 1)',
'width': 'mapData(sentCnt, 1, 50, 0.3, 4)',
'font-size': '9%',
'font-weight': 'bold',
'color': '#117A65'
}
},
{ selector: 'node.highlight',
style: {
'border-color': '#FFF',
'border-width': '2px'
}
},
{
selector: 'node.semitransp',
style:{ 'opacity': '0.5' }
},
{
selector: 'edge.highlight',
style: { 'line-color': 'red' },
},
{
selector: 'edge.semitransp',
style:{ 'opacity': '0.01' }
}
],
elements:[ {{ elements | safe }} ],
layout: {
name: 'concentric',
concentric: function( node ){
return node.degree();
},
levelWidth: function( nodes ){
return 6;
}
}
});
cy.on('tap', 'edge', function(){
try { // your browser may block popups
window.open( this.data('url') );
} catch(e){ // fall back on url change
window.location.href = this.data('url');
}
});
cy.on('tap', 'node', function(){
try { // your browser may block popups
window.open( this.data('url') );
} catch(e){ // fall back on url change
window.location.href = this.data('url');
}
});
cy.on('mouseover', 'node', function(e){
var sel = e.target;
cy.elements().difference(sel.outgoers()).not(sel).addClass('semitransp');
sel.addClass('highlight').outgoers().addClass('highlight');
});
cy.on('mouseout', 'node', function(e){
var sel = e.target;
cy.elements().removeClass('semitransp');
sel.removeClass('highlight').outgoers().removeClass('highlight');
});
var saveAsSvg = function(filename) {
var svgContent = cy.svg();
var blob = new Blob([svgContent], {type:"image/svg+xml;charset=utf-8"});
saveAs(blob, "genecup_graph.svg");
};
var getSvgUrl = function() {
var svgContent = cy.svg({scale: 1, full: true});
var blob = new Blob([svgContent], {type:"image/svg+xml;charset=utf-8"});
var url = URL.createObjectURL(blob);
return url;
}
</script>
{% endblock %}
|
