path: root/wqflask/wqflask/templates/correlation_page.html

{% 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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/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" style="min-width: 1250px;">
        <div class="page-header">
            <h1>Correlation Table</h1>
            <h2>Trait: {{ this_trait.name }}

            <hr style="height: 1px; background-color: #A9A9A9;">
        </div>

        <p>Values of record {{ this_trait.name }} in the <a href="http://genenetwork.org/webqtl/main.py?FormID=sharinginfo&{% if dataset.accession_id != 'None' %}GN_AccessionId={{ dataset.accession_id }}{% else %}InfoPageName={{ dataset.name }}{% endif %}">{{ 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 != 'None' %}GN_AccessionId={{ target_dataset.accession_id }}{% else %}InfoPageName={{ target_dataset.name }}{% endif %}">{{ target_dataset.fullname }}</a>
        dataset. The top {{ return_number }} 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>
          <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.name }}:{{ this_trait.dataset }},
            {% endfor %}" >
            {% include 'tool_buttons.html' %}
          </form>
        </div>
        <br />
        <div>
            <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 }}_{{ 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 Top ...">
                <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"></div>
            {% if target_dataset.type != "Publish" %}
            <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>
            {% endif %}
        </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 LOD</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">Authors</button>
          <button class="toggle-vis" data-column="6">Year</button>
          <button class="toggle-vis" data-column="7">Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}</button>
          <button class="toggle-vis" data-column="8">N</button>
          <button class="toggle-vis" data-column="9">Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})</button>
          <button class="toggle-vis" data-column="10">Peak LOD</button>
          <button class="toggle-vis" data-column="11">Peak Location</button>
          <button class="toggle-vis" data-column="12">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: 100%; {% 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 type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>

    <script language="javascript" type="text/javascript" src="/static/new/js_external/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='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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>
    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script>

    <script type="text/javascript" charset="utf-8">
        var table_json = {{ json_results | 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));
        };

        {% if target_dataset.type != "Publish" %}
        $.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
        });
        {% endif %}

        $(document).ready( function () {
            table_conf = {
                buttons: [
                  {
                    extend: 'csvHtml5',
                    text: 'Download <span class="glyphicon glyphicon-download"></span>',
                    className: 'btn btn-default',
                    exportOptions: {
                      columns: 'th:not(:first-child)'
                    }
                  }
                ],
                'drawCallback': function( settings ) {
                      $('#trait_table tr').off().on("click", function(event) {
                        if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
                          var obj =$(this).find('input');
                          obj.prop('checked', !obj.is(':checked'));
                        }
                        if ($(this).hasClass("selected")){
                          $(this).removeClass("selected")
                        } else {
                          $(this).addClass("selected")
                        }
                      });
                      $('.trait_checkbox:checkbox').on("change", change_buttons);
                },
                "data": table_json,
                "columns": [
                    {
                      'data': null,
                      'width': "25px",
                      'orderDataType': "dom-checkbox",
                      'orderSequence': [ "desc", "asc"],
                      'render': function(data, type, row, meta) {
                        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, type, row, meta) {
                        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, type, row, meta) {
                        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 {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
                      'type': "natural-minus-na",
                      'width': "40px",
                      'data': null,
                      'orderSequence': [ "desc", "asc"],
                      'render': function(data, type, row, meta) {
                        if (data.sample_r != "N/A") {
                          return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if dataset.name == 'Temp' %}Temp_{{ dataset.group.name }}{% else %}{{ 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({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
                      'type': "scientific",
                      'width': "65px",
                      'data': "sample_p",
                      'orderSequence': [ "desc", "asc"]
                    },
                    {
                      'title': "Lit {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
                      'type': "natural-minus-na",
                      'width': "40px",
                      'data': "lit_corr",
                      'orderSequence': [ "desc", "asc"]
                    },
                    {
                      'title': "Tissue {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
                      'type': "natural-minus-na",
                      'width': "40px",
                      'data': "tissue_corr",
                      'orderSequence': [ "desc", "asc"]
                    },
                    {
                      'title': "Tissue p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
                      'type': "natural-minus-na",
                      'width': "40px",
                      'data': "tissue_pvalue",
                      'orderSequence': [ "desc", "asc"]
                    },
                    {
                      'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
                      '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",
                      'width': "200px",
                      'data': null,
                      'render': function(data, type, row, meta) {
			                  try {
                          return decodeURIComponent(escape(data.abbreviation_display))
			                  } catch(err){
			                    return data.abbreviation_display
                        }
                      }
                    },
                    {
                      'title': "Description",
                      'type': "natural",
                      'data': null,
                      'render': function(data, type, row, meta) {
			                  try {
                          return decodeURIComponent(escape(data.description))
			                  } catch(err){
			                    return data.description
                        }
                      }
                    },
                    {
                      'title': "Authors",
                      'type': "natural",
                      'width': "400px",
                      'data': null,
                      'render': function(data, type, row, meta) {
			                  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, type, row, meta) {
                        if (data.pubmed_id != "N/A"){
                          return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
                        } else {
                          return data.pubmed_text
                        }
                      },
                      'orderSequence': [ "desc", "asc"]
                    },
                    {
                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
                      'type': "natural-minus-na",
                      'width': "40px",
                      'data': null,
                      'orderSequence': [ "desc", "asc"],
                      'render': function(data, type, row, meta) {
                        if (data.sample_r != "N/A") {
                          return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if dataset.name == 'Temp' %}Temp_{{ dataset.group.name }}{% else %}{{ 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({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
                      'type': "scientific",
                      'width': "65px",
                      'data': "sample_p",
                      'orderSequence': [ "desc", "asc"]
                    },
                    {
                      'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
                      '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 == 'Geno' %},
                    {
                      'title': "Location",
                      'type': "natural-minus-na",
                      'width': "120px",
                      'data': "location"
                    }, 
                    {
                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
                      'type': "natural-minus-na",
                      'width': "40px",
                      'data': null,
                      'orderSequence': [ "desc", "asc"],
                      'render': function(data, type, row, meta) {
                        if (data.sample_r != "N/A") {
                          return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if dataset.name == 'Temp' %}Temp_{{ dataset.group.name }}{% else %}{{ 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({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
                      'type': "scientific",
                      'width': "65px",
                      'data': "sample_p",
                      'orderSequence': [ "desc", "asc"]
                    }{% endif %}
                ],
                "columnDefs": [ {
                    "targets": 0,
                    "orderable": false
                } ],
                {% if target_dataset.type == 'Geno' %}
                "order": [[6, "asc" ]],
                {% else %}
                "order": [[9, "asc" ]],
                {% endif %}
                "sDom": "itir",
                "autoWidth": true,
                "bSortClasses": false,
                "scrollY": "100vh",
                "scroller":  true,
                "scrollCollapse": true
            }

            trait_table = $('#trait_table').DataTable(table_conf);

            trait_table.buttons().container().appendTo('#export_options')

            $('.buttons-csv').removeClass('dt-button')

            trait_table.on( 'order.dt search.dt draw.dt', function () {
                trait_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
                } );
            } ).draw();

            $('.toggle-vis').on('click', function (e) {
              e.preventDefault();

              // Get the column API object
              var column = trait_table.column( $(this).attr('data-column') );

              // Toggle the visibility
              column.visible( ! column.visible() );

              if (column.visible()){
                $(this).removeClass("active");
              } else {
                $(this).addClass("active");
              }
            } );

            $('#redraw').on('click', function (e) {
              e.preventDefault();
              trait_table.columns().visible( true );
              $('.toggle-vis.active').removeClass('active');
            });

            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() {
                console.log("redrawing")
                trait_table.draw();
            });
        });
    </script>
{% endblock %}