diff options
Diffstat (limited to 'gn2/wqflask/templates/correlation_matrix.html')
| -rw-r--r-- | gn2/wqflask/templates/correlation_matrix.html | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/correlation_matrix.html b/gn2/wqflask/templates/correlation_matrix.html new file mode 100644 index 00000000..17fd66fa --- /dev/null +++ b/gn2/wqflask/templates/correlation_matrix.html @@ -0,0 +1,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 %} |