{% 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/font-awesome.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='https://info.genenetwork.org/{% if this_dataset.type != "ProbeSet" %}species/source.php?SpeciesName={{ this_dataset.group.species }}&InbredSetName={{ this_dataset.group.name }}{% else %}infofile/source.php?GN_AccesionId={{ this_dataset.accession_id }}{% endif %}' target="_blank">{{ this_dataset.fullname }}</a>
            dataset were compared to all records in the <a href='https://info.genenetwork.org/{% if target_dataset.type != "ProbeSet" %}species/source.php?SpeciesName={{ target_dataset.group.species }}&InbredSetName={{ target_dataset.group.name }}{% else %}infofile/source.php?GN_AccesionId={{ target_dataset.accession_id }}{% endif %}' target="_blank">{{ 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">AND</option>
                    <option value="or" selected>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 %}