wqflask/wqflask/templates/network_graph.html


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

{% 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>
                        <button id="reset_graph">Reset Graph</button>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Focus Trait
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <select name="focus_select">
                          {% 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</td>
                    </tr>
                    <tr>
                      <td>
                        <font size="2"><b>0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; +/- 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>
                  </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 %}