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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
{% extends "base.html" %}
{% block title %}Correlation Matrix{% endblock %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
<link rel="stylesheet" type="text/css" href="/static/new/css/corr_matrix.css" />
<link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
<link rel="stylesheet" type="text/css" href="/static/new/css/panelutil.css" />
<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='d3-tip/d3-tip.css') }}" />
{% endblock %}
{% block content %}
<div class="container" width="100%">
<h1>Correlation Matrix</h1>
<div style="width: 100%; max-width: 850px;">Select any cell in the matrix to generate a <b>scatter plot.</b><br><b>Lower left</b> cells list Pearson product-moment correlations; <b>upper right</b> cells list Spearman rank order correlations. Each cell also contains the <b><i>n</i> of cases</b> in parenthesis. Values ranging from 0.4 to 1.0 range from orange to white, while values ranging from –0.4 to –1.0 range from dark blue to white.</div>
<hr style="height: 1px; background-color: #A9A9A9;">
{% if lowest_overlap < 8 %}
<div style="margin-bottom: 10px;"><i><font style="color: red;">Caution</font>: This matrix of correlations contains some cells with small sample sizes of fewer than 8.</i></div>
{% endif %}
<table class="matrix" border="1" cellpadding="5" cellspacing="1" width="100%">
<tbody>
<tr>
<td style="background-color: #369;" ></td>
<td align="center" colspan="{{traits|length + 2 }}" style="font-weight: Bold; border: 1px solid #000000; padding: 3px; color: #fff; background-color: #369;">Spearman Rank Correlation (rho)</td>
</tr>
<tr>
<td align="center" rowspan="{{traits|length + 2 }}" width="10" style="font-weight: Bold; border: 1px solid #000000; padding: 3px; color: #fff; background-color: #369;">P e a r s o n r</td>
<td></td>
<td width="300" align="center" style="white-space: nowrap"><div style="display: inline-block; margin: 4px;"><button class="btn btn-default" id="short_labels" style="display: inline-block"><span style="display: none;" class="short_check glyphicon glyphicon-ok"></span> Short Labels</button> <button class="btn btn-default" id="long_labels" style="display: inline-block;"><span style="display: none;" class="long_check glyphicon glyphicon-ok"></span> Long Labels</button></div></td>
{% for trait in traits %}
<td align="center" style="padding: 5px;">
<a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}"><font style="font-size: 14px;"><b>{{ loop.index }}</b></font></a>
</td>
{% endfor %}
</tr>
{% for trait in traits %}
{% set outer_loop = loop.index %}
<tr>
<td align="center"><input type="checkbox" class="checkbox" style="margin-left: 3px; margin-right: 1px;"></td>
<td align="right" style="padding-right: 4px;" >
<a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}"><font style="font-size: 14px; font-style: Bold;"><b>{{ loop.index }}: {{ trait.dataset.name }} {{ trait.name }}</b></font></a>
<div class="shortName">{% if trait.dataset.type == "ProbeSet" %}Gene Symbol: {{ trait.symbol }}{% elif trait.dataset.type == "Publish" %}Trait Symbol: {{ trait.post_publication_abbreviation }}{% elif trait.dataset.type == "Geno" %}Genotype{% endif %} </div>
<div class="verboseName" style="display: none;">
{% if trait.dataset.type == "ProbeSet" %}
<div>{{ trait.symbol }} on Chr {{ trait.chr }} @ {{ trait.mb }} Mb</div><div>{{ trait.description }}</div><div>{{ trait.probe_target_description }}</div>
{% elif trait.dataset.type == "Publish" %}
<div>PMID: <a href="http://www.ncbi.nlm.nih.gov/pubmed/?term={{ trait.pubmed_id }}">{{ trait.pubmed_id }}</a>, Record ID {{ trait.name }}</div><div>Phenotype: {{ trait.description_display }}</div>
{% elif trait.dataset.type == "Geno" %}
<div>Locus {{ trait.name }}</div><div>Chr {{ trait.chr }} @ {{ trait.mb }} Mb</div>
{% endif %}
</div>
</td>
{% for result in corr_results[loop.index-1] %}
{% if result[0].name == trait.name and result[0].dataset == trait.dataset %}
<td nowrap="ON" align="center" bgcolor="#cccccc" style="padding: 3px; line-height: 1.1;"><a href="/show_trait?trait_id={{ trait.name }}&dataset={{ trait.dataset.name }}"><font style="font-size: 12px; color: #3071a9; font-weight: bold;" ><em>n</em><br>{{ result[2] }}</font></a></td>
{% else %}
{% if result[1] == 0 %}
<td nowrap="ON" align="middle" bgcolor="#eeeeee" style="padding: 3px; line-height: 1.1;">N/A</td>
{% else %}
<td nowrap="ON" align="middle" class="corr_cell" style="padding: 3px; line-height: 1.1;"><a href="/corr_scatter_plot?method={% if loop.index > outer_loop %}spearman{% else %}pearson{% endif %}&dataset_1={% if trait.dataset.name == 'Temp' %}Temp_{{ trait.dataset.group.name }}{% else %}{{ trait.dataset.name }}{% endif %}&dataset_2={% if result[0].dataset.name == 'Temp' %}Temp_{{ result[0].dataset.group.name }}{% else %}{{ result[0].dataset.name }}{% endif %}&trait_1={{ trait.name }}&trait_2={{ result[0].name }}"><span class="corr_value" style="font-size: 14px; color: #3071a9; font-weight: bold;">{{ '%0.2f' % result[1] }}</span><br><span class="corr_value" style="font-size: 12px; color: #3071a9; font-weight: bold;">({{ result[2] }})</span></a></td>
{% endif %}
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<br>
<form method="post" target="_blank" action="/export_corr_matrix" id="matrix_export_form">
<input type="hidden" name="export_filepath" value="{{ export_filepath }}">
<input type="hidden" name="export_filename" value="{{ export_filename }}">
<button class="btn btn-default" id="export">Download <span class="glyphicon glyphicon-download"></span></button>
</form>
<br>
{% if pca_works == "True" %}
<div>
{% include 'pca_scree_plot.html' %}
</div>
<h2>PCA Traits</h2>
<div style="margin-bottom: 20px; overflow:hidden; width: 450px;">
<table class="table-hover table-striped cell-border pca_table" id='trait_table' style="float: left;">
<colgroup>
<col span="1" style="width: 30px;">
<col span="1" style="width: 50px;">
<col span="1">
</colgroup>
<thead>
<tr>
<th></th>
<th>Index</th>
<th>PCA Trait</th>
</tr>
</tr>
</thead>
<tbody>
{% for this_trait_id in pca_trait_ids %}
<tr>
<td align="center" style="padding: 0px;"><input type="checkbox" class="trait_checkbox" name="pca_trait" value="{{ data_hmac('{}:{}'.format(pca_trait_ids[loop.index - 1], "Temp")) }}"></td>
<td align="right">{{ loop.index }}</td>
<td><a href="{{ url_for('show_trait_page', trait_id = pca_trait_ids[loop.index - 1], dataset = "Temp") }}">{{ pca_trait_ids[loop.index - 1] }}</a></td>
</tr>
{% endfor %}
</tbody>
</table>
<br>
<button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
<button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
<button class="btn btn-success" id="add" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
</div>
<h2>Factor Loadings Plot</h2>
<div id="loadings_plot" style="margin-top: 20px; margin-bottom: 20px; width: 980px; border-style: solid; border-width: 1px;"></div>
<h2>Factor Loadings Table</h2>
<table class="table-hover table-striped cell-border loadings_table" id='trait_table' style="float: left;">
<thead>
<tr>
<th>Trait</th>
<th style="text-align: right;" >Factor 1</th>
<th style="text-align: right;" >Factor 2</th>
{% if trait_list|length > 2 %}<th style="text-align: right;">Factor 3</th>{% endif %}
</tr>
</thead>
<tbody>
{% for row in loadings_array %}
{% set row_counter = loop.index-1 %}
<tr>
<td>
<a title="{% if traits[loop.index-1].dataset.type == "ProbeSet" %}{{ traits[loop.index-1].symbol }}{% elif traits[loop.index-1].dataset.type == "Publish" %}{{ traits[loop.index-1].post_publication_abbreviation }}{% endif %}" href="{{ url_for('show_trait_page', trait_id = traits[loop.index-1].name, dataset = traits[loop.index-1].dataset.name) }}">
{{ traits[loop.index-1].name }}
</a>
</td>
{% for column in row %}
<td><span style="float: right;">{{ '%0.3f' % loadings_array[row_counter][loop.index-1]|float }}</span></td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<div id="myModal"></div>
{% endblock %}
{% block js %}
<script>
js_data = {{ js_data | safe }}
loadings = {{ loadings_array | safe }}
</script>
<script type="text/javascript" src="{{ url_for('js', filename='d3js/d3.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('js', filename='d3-tip/d3-tip.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
<script type="text/javascript" src="/static/new/javascript/panelutil.js"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='chroma/chroma.min.js') }}"></script>
<script language="javascript" type="text/javascript" src="/static/new/javascript/loadings_plot.js"></script>
<script type="text/javascript" src="/static/new/javascript/create_corr_matrix.js"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
<script>
$('.pca_table').dataTable( {
"columnDefs": [ {
"targets": 0,
"orderable": false
} ],
"order": [[1, "asc" ]],
"sDom": "t",
"iDisplayLength": -1,
"autoWidth": true,
"bDeferRender": true,
"bSortClasses": false,
"paging": false,
"orderClasses": true
} );
$('.loadings_table').dataTable( {
"columnDefs": [ {
"targets": 0,
"orderable": false
} ],
"order": [[1, "asc" ]],
"sDom": "t",
"iDisplayLength": -1,
"autoWidth": true,
"bDeferRender": true,
"bSortClasses": false,
"paging": false,
"orderClasses": true
} );
export_corr_matrix = function() {
$('#matrix_export_form').attr('action', '/export_corr_matrix');
return $('#matrix_export_form').submit();
}
$('#export').click(export_corr_matrix);
</script>
{% endblock %}
|
