aboutsummaryrefslogtreecommitdiff
path: root/templates/cytoscape.html
blob: 98968c88e2f14d0a1190d0ede5a31a0a01b77a2b (plain)
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
{% extends "layout.html" %}
{% block content %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.6.0/cytoscape.min.js" integrity="sha256-uZV2wRlscgr52q3Wb3Oew0rKCPsM3g4aBTv46sF4qzg=" crossorigin="anonymous"></script>


<div class="row">
  <div class="column left" >

<h4> {{ message |safe}} </h4>
  </div>

  <div class="column right">

 {{ message2 |safe}} 
</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');
		});
    </script>


{% endblock %}