aboutsummaryrefslogtreecommitdiff
path: root/gn2/wqflask/templates/correlation_matrix.html
diff options
context:
space:
mode:
authorArun Isaac2023-12-29 18:55:37 +0000
committerArun Isaac2023-12-29 19:01:46 +0000
commit204a308be0f741726b9a620d88fbc22b22124c81 (patch)
treeb3cf66906674020b530c844c2bb4982c8a0e2d39 /gn2/wqflask/templates/correlation_matrix.html
parent83062c75442160427b50420161bfcae2c5c34c84 (diff)
downloadgenenetwork2-204a308be0f741726b9a620d88fbc22b22124c81.tar.gz
Namespace all modules under gn2.
We move all modules under a gn2 directory. This is important for "correct" packaging and deployment as a Guix service.
Diffstat (limited to 'gn2/wqflask/templates/correlation_matrix.html')
-rw-r--r--gn2/wqflask/templates/correlation_matrix.html203
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 &nbsp;&nbsp;&nbsp; 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>&nbsp;Short Labels</button>&nbsp;&nbsp;<button class="btn btn-default" id="long_labels" style="display: inline-block;"><span style="display: none;" class="long_check glyphicon glyphicon-ok"></span>&nbsp;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 }}&nbsp;&nbsp;{{ 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 %}