{% extends "index_page.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 %}