blob: ec3a79717c02b724a8a9ccef30216d0583ff14ca (
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
113
114
115
116
117
118
119
120
121
|
{% 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> Visualization Options</h3>
<table border="0">
<tbody>
<tr>
<td>
Focus Trait
</td>
</tr>
<tr>
<td>
<select name="focus_select">
{% for trait in traits %}
<option value="{{ trait.name }}:{{ trait.dataset.name }}">{{ trait.name }}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td colspan="1">Correlation Coefficient</td>
</tr>
<tr>
<td>
<font size="2"><b>0
+/- 1</b></font>
</td>
</tr>
<tr>
<td>
<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> 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>
<tr>
<td>
<a id="image_link" href="javascript:void(0)">
<button style="width:100px;height:25px;">Table View</button>
</a>
</td>
</tr>
<tr>
<td>
<a id="image_link" href="javascript:void(0)">
<button style="width:100px;height:25px;">Save Table</button>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="cytoscapeweb" class="col-xs-9" style="min-height:700px !important;"></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 %}
|
