aboutsummaryrefslogtreecommitdiff
path: root/gn2/wqflask/templates/correlation_page.html
diff options
context:
space:
mode:
Diffstat (limited to 'gn2/wqflask/templates/correlation_page.html')
-rw-r--r--gn2/wqflask/templates/correlation_page.html550
1 files changed, 550 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/correlation_page.html b/gn2/wqflask/templates/correlation_page.html
new file mode 100644
index 00000000..d3ee32f3
--- /dev/null
+++ b/gn2/wqflask/templates/correlation_page.html
@@ -0,0 +1,550 @@
+{% extends "base.html" %}
+{% block title %}Correlation Results{% 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="{{ url_for('js', filename='DataTablesExtensions/buttonsBootstrap/css/buttons.bootstrap.css') }}" />
+ <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonStyles/css/buttons.dataTables.min.css') }}">
+ <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='fontawesome/css/all.min.css') }}"/>
+ <link rel="stylesheet" type="text/css" href="/static/new/css/trait_list.css" />
+ <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
+{% endblock %}
+{% block content %}
+ <div class="container">
+ <div class="page-header">
+ <h1>Correlation Table</h1>
+ <h2>Trait: {{ this_trait.name }}
+
+ <hr style="height: 1px; background-color: #A9A9A9;">
+ </div>
+ <div style="max-width: 100%;">
+ <p>Values of record {{ this_trait.name }} in the <a href="http://genenetwork.org/webqtl/main.py?FormID=sharinginfo&{% if this_dataset.accession_id %}GN_AccessionId={{ this_dataset.accession_id }}{% else %}InfoPageName={{ this_dataset.name }}{% endif %}">{{ this_dataset.fullname }}</a>
+ dataset were compared to all records in the <a href="http://genenetwork.org/webqtl/main.py?FormID=sharinginfo&{% if target_dataset.accession_id %}GN_AccessionId={{ target_dataset.accession_id }}{% else %}InfoPageName={{ target_dataset.name }}{% endif %}">{{ target_dataset.fullname }}</a>
+ dataset. The top {{ return_results }} correlations ranked by the {{ formatted_corr_type }} are displayed.
+ You can resort this list by clicking the headers. Select the Record ID to open the trait data
+ and analysis page.
+ </p>
+ </div>
+ <div class="tool-button-container">
+ <form id="correlation_form" target="_blank" action="/corr_matrix" method="post">
+ <input type="hidden" name="tool_used" value="" />
+ <input type="hidden" name="form_url" value="" />
+ <input type="hidden" name="trait_list" id="trait_list" value= "
+ {% for this_trait in trait_list %}
+ {{ this_trait }}:{{ this_dataset.name }},
+ {% endfor %}" >
+ {% include 'tool_buttons.html' %}
+ </form>
+ </div>
+ <br />
+ <div style="min-width: 900px;">
+ <form id="export_form" method="POST" action="/export_traits_csv">
+ <button class="btn btn-default" id="select_all" type="button"><span class="glyphicon glyphicon-ok"></span> Select All</button>
+ <button class="btn btn-default" id="invert" type="button"><span class="glyphicon glyphicon-adjust"></span> Invert</button>
+ <button class="btn btn-success" id="add" type="button" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
+ <input type="hidden" name="database_name" id="database_name" value="None">
+ <input type="hidden" name="export_data" id="export_data" value="">
+ <input type="hidden" name="file_name" id="file_name" value="{{ this_trait.name }}_{{ this_dataset.name }}_correlation">
+ <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search Table For ...">
+ <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Rows (1-5, 11)">
+ <button class="btn btn-default" id="deselect_all" type="button"><span class="glyphicon glyphicon-remove"></span> Deselect</button>
+ <button id="redraw" class="btn btn-default" type="button">Reset Columns</button>
+ </form>
+ <br />
+ <div id="export_options" style="float: left;"></div>
+ <br />
+ <div style="float: left; clear: left; margin-top: 10px; margin-bottom: 20px;">
+ <button id="more_options" class="btn btn-primary">More Options...</button>
+ </div>
+ <br />
+ <br />
+ <div id="filter_options" style="display: none; float: left; clear: left;">
+ <span style="border: 1px dashed #999999; padding: 8px; background-color: #ddf; font-size: 12px;">
+ <button id="select_traits" class="btn btn-primary" style="font-size: 12px; padding: 2px 3px;">Select Traits</button> with r >
+ <input type="text" name="r_greater_select" value="-1.0" size="6" maxlength="10">
+ <select id="r_and_or" size="1">
+ <option value="and" selected>AND</option>
+ <option value="or">OR</option>
+ </select>
+ r <
+ <input type="text" name="r_less_select" value="1.0" size="6" maxlength="10">, with mean >
+ <input type="text" name="mean_greater_select" value="0" size="6" maxlength="10">
+ <select id="mean_and_or" size="1">
+ <option value="and" selected>AND</option>
+ <option value="or">OR</option>
+ </select>
+ mean <
+ <input type="text" name="mean_less_select" value="100" size="6" maxlength="10">
+ </span>
+ <br />
+ <br />
+ </div>
+ </div>
+ <div class="show-hide-container" style="float: left; clear: left;">
+ <b>Show/Hide Columns:</b>
+ <br>
+ {% if target_dataset.type == 'ProbeSet' %}
+ <button class="toggle-vis" data-column="3">Symbol</button>
+ <button class="toggle-vis" data-column="4">Description</button>
+ <button class="toggle-vis" data-column="5">Location</button>
+ <button class="toggle-vis" data-column="6">Mean</button>
+ <button class="toggle-vis" data-column="7">Peak -logP</button>
+ <button class="toggle-vis" data-column="8">Peak Location</button>
+ <button class="toggle-vis" data-column="9">Effect Size</button>
+ {% elif target_dataset.type == 'Publish' %}
+ <button class="toggle-vis" data-column="3">Abbreviation</button>
+ <button class="toggle-vis" data-column="4">Description</button>
+ <button class="toggle-vis" data-column="5">Mean</button>
+ <button class="toggle-vis" data-column="6">Authors</button>
+ <button class="toggle-vis" data-column="7">Year</button>
+ <button class="toggle-vis" data-column="8">Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}</button>
+ <button class="toggle-vis" data-column="9">N</button>
+ <button class="toggle-vis" data-column="10">Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})</button>
+ <button class="toggle-vis" data-column="11">Peak -logP</button>
+ <button class="toggle-vis" data-column="12">Peak Location</button>
+ <button class="toggle-vis" data-column="13">Effect Size</button>
+ {% else %}
+ <button class="toggle-vis" data-column="3">Location</button>
+ <button class="toggle-vis" data-column="4">Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}</button>
+ <button class="toggle-vis" data-column="5">N</button>
+ <button class="toggle-vis" data-column="6">Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})</button>
+ {% endif %}
+ </div>
+ <div style="width: 90%; {% if target_dataset.type == "ProbeSet" %}min-width: 1700px;{% elif target_dataset.type == "Publish" %}min-width: 1600px;{% else %}width: 650px;{% endif %}">
+ <table id="trait_table" class="table-hover table-striped cell-border" style="float: left;">
+ <thead>
+ <tr>
+ <th></th>
+ {% for header in header_fields %}
+ <th {% if header != "" %}data-export="{{ header }}"{% endif %}>{{header}}</th>
+ {% endfor %}
+ </tr>
+ </thead>
+
+ <tbody>
+ <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
+ </tbody>
+ </table>
+ </div>
+ </div>
+{% endblock %}
+
+{% block js %}
+ <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.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='jszip/jszip.min.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='DataTables/js/jquery.dataTables.min.js') }}"></script>
+ <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
+ <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.html5.min.js') }}"></script>
+ <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
+ <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='fontawesome/js/all.min.js') }}"></script>
+ <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script>
+ <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+ <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+ <script type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
+
+
+ <script type="text/javascript" charset="utf-8">
+ var tableJson = {{ table_json | safe }}
+ </script>
+
+ <script type="text/javascript" charset="utf-8">
+ $.fn.dataTable.ext.order['dom-innertext'] = function (settings, col) {
+ return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
+ return Math.abs(parseFloat($('a', td).text()));
+ });
+ }
+
+ $.fn.dataTableExt.oSort['numeric-html-asc'] = function(a,b) {
+ a = Math.abs(parseFloat(a));
+ b = Math.abs(parseFloat(b));
+ return ((a < b) ? -1 : ((a > b) ? 1 : 0));
+ };
+
+ $.fn.dataTableExt.oSort['numeric-html-desc'] = function(a,b) {
+ a = Math.abs(parseFloat(a));
+ b = Math.abs(parseFloat(b));
+ return ((a < b) ? 1 : ((a > b) ? -1 : 0));
+ };
+
+ $.fn.dataTableExt.oSort['scientific-asc'] = function ( a, b ) {
+ var x = parseFloat(a);
+ var y = parseFloat(b);
+ return ((x < y) ? -1 : ((x > y) ? 1 : 0));
+ };
+
+ $.fn.dataTableExt.oSort['scientific-desc'] = function ( a, b ) {
+ var x = parseFloat(a);
+ var y = parseFloat(b);
+ return ((x < y) ? 1 : ((x > y) ? -1 : 0));
+ };
+
+ $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) {
+ var r_column = {{ filter_cols[0] }};
+ var r_greater = parseFloat($('input[name=r_greater_select]').val())
+ var r_less = parseFloat($('input[name=r_less_select]').val());
+ var r_and_or = $('#r_and_or').val();
+
+ var mean_column = {{ filter_cols[1] }};
+ var mean_greater = parseFloat($('input[name=mean_greater_select]').val());
+ var mean_less = parseFloat($('input[name=mean_less_select]').val());
+ var mean_and_or = $('#mean_and_or').val();
+
+ if (r_and_or == "and" && mean_and_or == "and"){
+ if ( (data[r_column] >= r_greater && data[r_column] <= r_less) && {% if filter_cols[1] != 0 %}(data[mean_column] > mean_greater && data[mean_column] < mean_less){% else %} true{% endif %} ){
+ return true
+ }
+ else {
+ return false
+ }
+ } else if (r_and_or == "and" && mean_and_or == "or"){
+ if ( (data[r_column] >= r_greater && data[r_column] <= r_less) && {% if filter_cols[1] != 0 %}(data[mean_column] >= mean_greater || data[mean_column] <= mean_less){% else %} true{% endif %} ){
+ return true
+ } else {
+ return false
+ }
+ } else if (r_and_or == "or" && mean_and_or == "and") {
+ if ( (data[r_column] >= r_greater || data[r_column] <= r_less) && {% if filter_cols[1] != 0 %}(data[mean_column] >= mean_greater && data[mean_column] <= mean_less){% else %} true{% endif %} ){
+ return true
+ } else {
+ return false
+ }
+ } else {
+ if ( (data[r_column] >= r_greater || data[r_column] <= r_less) && {% if filter_cols[1] != 0 %}(data[mean_column] >= mean_greater || data[mean_column] <= mean_less){% else %} true{% endif %} ){
+ return true
+ } else {
+ return false
+ }
+ }
+ return true
+ });
+
+ $(document).ready( function () {
+
+ tableId = "trait_table";
+
+ {% if corr_method == 'pearson' %}
+ rOrRho = "r"
+ corr_method = "pearson"
+ {% else %}
+ rOrRho = "rho"
+ corr_method = "spearman"
+ {% endif %}
+
+ columnDefs = [
+ {
+ 'data': null,
+ 'width': "25px",
+ 'orderDataType': "dom-checkbox",
+ 'orderSequence': [ "desc", "asc"],
+ 'render': function(data) {
+ return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
+ }
+ },
+ {
+ 'title': "Index",
+ 'type': "natural",
+ 'width': "30px",
+ 'data': "index"
+ },
+ {
+ 'title': "Record",
+ 'type': "natural-minus-na",
+ 'data': null,
+ 'width': "60px",
+ 'render': function(data) {
+ return '<a target="_blank" href="/show_trait?trait_id=' + data.trait_id + '&dataset=' + data.dataset + '">' + data.trait_id + '</a>'
+ }
+ }{% if target_dataset.type == 'ProbeSet' %},
+ {
+ 'title': "Symbol",
+ 'type': "natural",
+ 'width': "120px",
+ 'data': "symbol"
+ },
+ {
+ 'title': "Description",
+ 'type': "natural",
+ 'data': null,
+ 'render': function(data) {
+ try {
+ return decodeURIComponent(escape(data.description))
+ } catch(err){
+ return escape(data.description)
+ }
+ }
+ },
+ {
+ 'title': "Location",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'data': "location"
+ },
+ {
+ 'title': "Mean",
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': "mean",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Sample " + rOrRho,
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': null,
+ 'orderSequence': [ "desc", "asc"],
+ 'render': function(data) {
+ if (data.sample_r != "N/A") {
+ return "<a target\"_blank\" href=\"corr_scatter_plot?method=" + corr_method + "&dataid={{ dataid }}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+ } else {
+ return data.sample_r
+ }
+ }
+ },
+ {
+ 'title': "N",
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': "num_overlap",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Sample p(" + rOrRho + ")",
+ 'type': "scientific",
+ 'width': "65px",
+ 'data': "sample_p",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Lit " + rOrRho,
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': "lit_corr",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Tissue " + rOrRho,
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': "tissue_corr",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Tissue p(" + rOrRho + ")",
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': "tissue_pvalue",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>-logP <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Peak Location",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+ 'type': "natural-minus-na",
+ 'data': "additive",
+ 'width': "85px",
+ 'orderSequence': [ "desc", "asc"]
+ }{% elif target_dataset.type == 'Publish' %},
+ {
+ 'title': "Abbreviation",
+ 'type': "natural",
+ 'data': null,
+ 'render': function(data) {
+ try {
+ return decodeURIComponent(escape(data.abbreviation_display))
+ } catch(err){
+ return data.abbreviation_display
+ }
+ }
+ },
+ {
+ 'title': "Description",
+ 'type': "natural",
+ 'data': null,
+ 'render': function(data) {
+ try {
+ return decodeURIComponent(escape(data.description))
+ } catch(err){
+ return data.description
+ }
+ }
+ },
+ {
+ 'title': "Mean",
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': "mean",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Authors",
+ 'type': "natural",
+ 'width': "400px",
+ 'data': null,
+ 'render': function(data) {
+ try {
+ return decodeURIComponent(escape(data.authors_display))
+ } catch(err){
+ return data.authors_display
+ }
+ }
+ },
+ {
+ 'title': "Year",
+ 'type': "natural-minus-na",
+ 'data': null,
+ 'width': "80px",
+ 'render': function(data) {
+ if (data.pubmed_link != "N/A"){
+ return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
+ } else {
+ return data.pubmed_text
+ }
+ },
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Sample " + rOrRho,
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': null,
+ 'orderSequence': [ "desc", "asc"],
+ 'render': function(data) {
+ if (data.sample_r != "N/A") {
+ return "<a target\"_blank\" href=\"corr_scatter_plot?method=" + corr_method + "&dataset_1={% if this_dataset.name== 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+ } else {
+ return data.sample_r
+ }
+ }
+ },
+ {
+ 'title': "N",
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': "num_overlap",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Sample p(" + rOrRho + ")",
+ 'type': "scientific",
+ 'width': "65px",
+ 'data': "sample_p",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>-logP <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Peak Location",
+ 'type': "natural-minus-na",
+ 'width': "160px",
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+ 'type': "natural-minus-na",
+ 'data': "additive",
+ 'width': "85px",
+ 'orderSequence': [ "desc", "asc"]
+ }{% elif target_dataset.type == 'Geno' %},
+ {
+ 'title': "Location",
+ 'type': "natural-minus-na",
+ 'width': "120px",
+ 'data': "location"
+ },
+ {
+ 'title': "Sample " + rOrRho,
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': null,
+ 'orderSequence': [ "desc", "asc"],
+ 'render': function(data) {
+ if (data.sample_r != "N/A") {
+ return "<a target\"_blank\" href=\"corr_scatter_plot?method=" + corr_method + "&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+ } else {
+ return data.sample_r
+ }
+ }
+ },
+ {
+ 'title': "N",
+ 'type': "natural-minus-na",
+ 'width': "40px",
+ 'data': "num_overlap",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Sample p(" + rOrRho + ")",
+ 'type': "scientific",
+ 'width': "65px",
+ 'data': "sample_p",
+ 'orderSequence': [ "desc", "asc"]
+ }{% endif %}
+ ]
+
+ tableSettings = {
+ "buttons": [
+ {
+ extend: 'csvHtml5',
+ text: 'Download <span class="glyphicon glyphicon-download"></span>',
+ className: 'btn btn-default',
+ exportOptions: {
+ columns: 'th:not(:first-child)'
+ }
+ }
+ ],
+ {% if table_json|length > 2000 %}
+ "scroller": false,
+ {% endif %}
+ {% if target_dataset.type == 'Geno' %}
+ "order": [[6, "asc" ]],
+ {% elif target_dataset.type == 'Publish' %}
+ "order": [[10, "asc" ]],
+ {% else %}
+ "order": [[9, "asc" ]],
+ {% endif %}
+ }
+
+ create_table(tableId, tableJson, columnDefs, tableSettings)
+
+ trait_table = $('#trait_table').DataTable();
+ trait_table.buttons().container().appendTo('#export_options')
+
+ $('.buttons-csv').removeClass('dt-button')
+
+ submit_special = function(url) {
+ $("#correlation_form").attr("action", url);
+ return $("#correlation_form").submit();
+ };
+
+ $("#delete").on("click", function() {
+ url = $(this).data("url")
+ return submit_special(url)
+ });
+
+ $("#more_options").click(function() {
+ $("div#filter_options").toggle();
+ });
+
+ $("#select_traits").click(function() {
+ trait_table.draw();
+ });
+ });
+ </script>
+{% endblock %}