blob: 24293de65f572f7a00ccc6e815132f5aa38ebad8 (
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
107
108
109
110
111
112
|
{% extends "base.html" %}
{% block css %}
<link rel="stylesheet" type="text/css" href="/static/new/css/network_graph.css" />
<link rel="stylesheet" type="text/css" href="/static/packages/cytoscape/css/cytoscape.js-panzoom.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
<style>
/* The Cytoscape Web container must have its dimensions set. */
html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
#cytoscapeweb { width: 70%; height: 70%; }
</style>
{% endblock %}
{% block content %}
{{ header("Network Graph") }}
<div class="container-fluid">
<div class="row" >
<div id="content">
<div id="secondaryContent" class="col-xs-3">
<h3 style="margin-top:0px; margin-bottom: 5px;"> Visualization Options</h3>
<table border="0">
<tbody>
<tr>
<td>
<button id="reset_graph">Reset Graph</button>
</td>
</tr>
<tr>
<td>
Focus Trait<sup title="Only show edges connected to the specified node" style="color:#f00"> ?</sup>
</td>
</tr>
<tr>
<td>
<select name="focus_select">
<option disabled selected value>Select Trait</option>
{% for trait in traits %}
<option value="{{ trait.name }}:{{ trait.dataset.name }}">{{ trait.symbol }} ({{ trait.name }})</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td colspan="1">
Correlation Coefficient<sup title="Filter edges to only show correlations less than the negative value specified with the slider and greater than the positive value. For example, moving the slider half way will display correlations less than -0.5 and greater than 0.5" style="color:#f00"> ?</sup>
</td>
</tr>
<tr>
<td colspan="1">
<font size="2"><b>0
+/- 1</b></font><br>
<input type="range" id="slide" min="0" max="1" value="0" step="0.001" list="corr_range">
</td>
</tr>
<tr>
<td>
Layouts
</td>
</tr>
<tr>
<td>
<select name="layout_select">
<option value="circle">Circle</option>
<option value="concentric">Concentric</option>
<option value="cose">Cose</option>
<option value="grid">Grid</option>
<option value="breadthfirst">Breadthfirst</option>
<option value="random">Random</option>
</select>
</td>
</tr>
</tbody>
</table>
<h3 style="margin-bottom: 5px;"> Download</h3>
<table>
<tbody>
<tr>
<td>
<a id="image_link" href="javascript:void(0)">
<button style="width:100px;height:25px;">Save Image</button>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="cytoscapeweb" class="col-xs-9" style="height:700px !important; border-style: solid; border-width: 1px; border-color: grey;"></div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
elements_list = {{ elements | safe }}
</script>
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/min/cytoscape.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/min/AC_OETags.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/min/json2.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/src/cytoscape-panzoom.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/src/cytoscape-qtip.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/javascript/network_graph.js"></script>
{% endblock %}
|
