{% extends "index_page.html" %}

{% 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/panelutil.css" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='d3-tip/d3-tip.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='nvd3/nv.d3.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" />
    <link rel="stylesheet" type="text/css" href="/static/new/css/corr_scatter_plot.css" />
{% endblock %}

{% block content %}

<div class="container-fluid">

  <input type="hidden" name="cofactor1_vals"></input>
  <input type="hidden" name="ranked_cofactor1_vals"></input>
  <input type="hidden" name="cofactor2_vals"></input>
  <input type="hidden" name="ranked_cofactor2_vals"></input>
  <input type="hidden" name="cofactor3_vals"></input>
  <input type="hidden" name="ranked_cofactor3_vals"></input>
  <input type="hidden" name="selecting_which_cofactor"></input>

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

  <table>
    <tr>
      <td style="vertical-align: middle;">Width <input class="chartupdatewh" id="width" type="text" value="800" style="width: 44px; height: 22px;"> px </td>
      <td style="vertical-align: middle; padding-left: 5px;">Height <input class="chartupdatewh" id="height" type="text" value="700" style="width: 44px; height: 22px;"> px</td>
      <td style="vertical-align: middle; padding-left: 5px;"><button type="button" class="btn btn-default" id="invert_axes">
        Invert Axes
      </button></td>
    </tr>
  </table>
  <hr style="height: 1px; background-color: #A9A9A9;">
  {% if collections_exist == "True" %}
  <div>
    <div style="margin-bottom: 10px;">
    You can select up to three traits from a saved trait collection to use as cofactors in the scatterplots, with each trait corresponding to point color, size, or symbol.
    For symbol, traits must have no more than 4 distinct values.
    </div>
    <div style="display: inline-block;">
      <div id="cofactor1_button" style="display: inline-block;">
        <button type="button" class="btn btn-default" id="select_cofactor1">
          Select Cofactor 1
        </button>
        <select id="cofactor1_type">
          <option value="color" selected>Color</option>
          <option value="size">Size</option>
          <option value="symbol">Symbol</option>
        </select>
      </div>
      <div id="cofactor2_button" style="margin-left: 10px; display: none;">
        <button type="button" class="btn btn-default" id="select_cofactor2">
          Add a Second Cofactor?
        </button>
        <select id="cofactor2_type">
          <option value="color">Color</option>
          <option value="size" selected>Size</option>
          <option value="symbol">Symbol</option>
        </select>
      </div>
      <div id="cofactor3_button" style="margin-left: 10px; display: none;">
        <button type="button" class="btn btn-default" id="select_cofactor3">
          Add a Third Cofactor?
        </button>
        <select id="cofactor3_type">
          <option value="color">Color</option>
          <option value="size">Size</option>
          <option value="symbol" selected>Symbol</option>
        </select>
      </div>
      <div id="remove_cofactors_button" style="margin-left: 20px; display: inline-block;">
        <button type="button" class="btn btn-danger" id="remove_cofactors">
          Remove Cofactors
        </button>
      </div>
    </div>
  </div>
  <div id="collections_holder_wrapper" style="display:none;">
      <div id="collections_holder"></div>
  </div>

  <div id="cofactor_color_selector" style="margin-bottom: 10px; display:none;">
    <hr>
    <b>Cofactor Color Range:</b>
    <input class="chartupdatedata" name="color2" type="hidden" id="cocolorfrom" value="#0000FF">
    <button class="chartupdatedata jscolor {valueElement: 'cocolorfrom'}">Low</button>
    <input class="chartupdatedata" name="color1" type="hidden" id="cocolorto" value="#FF0000">
    <button class="chartupdatedata jscolor {valueElement: 'cocolorto'}">High</button>
    <hr>
  </div>

  <div id="cofactor1_info_container" style="margin-left: 0px; display: none;">
    <div>
      <b>Cofactor 1</b>: <a id="cofactor1_trait_link" href="#"></a>
    </div>
    <div id="cofactor1_description"></div>
    <hr>
  </div>

  <div id="cofactor2_info_container" style="margin-left: 0px; display: none;">
    <div>
      <b>Cofactor 2</b>: <a id="cofactor2_trait_link" href="#"></a>
    </div>
    <div id="cofactor2_description"></div>
    <hr>
  </div>

  <div id="cofactor3_info_container" style="margin-left: 0px; display: none;">
    <div>
      <b>Cofactor 3</b>: <a id="cofactor3_trait_link" href="#"></a>
    </div>
    <div id="cofactor3_description"></div>
    <hr>
  </div>

  {% else %}
  <div style="margin-bottom: 10px;">No collections currently exist. Please create a collection first if you wish to include cofactors in the scatterplots.</div>
  <hr>
  {% endif %}

  <ul class="nav nav-tabs">
    <li {% if method == 'pearson' %}class="active"{% endif %}>
      <a href="#tp1" data-toggle="tab">Pearson</a>
    </li>
    {% if effect_plot == false %}
    <li {% if method == 'spearman' %}class="active"{% endif %}>
      <a href="#tp2" data-toggle="tab">Spearman Rank</a>
    </li>
    {% endif %}
  </ul>

  <div class="tab-content" style="width: {% if effect_plot %}500{% else %}800{% endif %}px;">

    <div class="tab-pane {% if method == 'pearson' %}active{% endif %}" id="tp1">
      <br>
      <div id="scatterplot2"></div>
      <br>
      <div style="width: {% if effect_plot %}500{% else %}800{% endif %}px; overflow: hidden;">
      <div style="margin-left: 50px; min-width: 300px;">
        {% if trait_1.dataset.type == "ProbeSet" %}
        <div>
          X axis:
          <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">
            {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.tissue + " "  + trait_1.dataset.name + ": " + trait_1.name|string}}
          </a>
        </div>
        <div>
          [{{trait_1.symbol}} on {{trait_1.location_repr}} Mb]
          {{trait_1.description_display}}
        </div>
        {% elif trait_1.dataset.type == "Publish" %}
        <div>
          X axis:
          <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">
            {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}}
          </a>
        </div>
        <div>
          <a href="{{trait_1.pubmed_link}}">PubMed: {{trait_1.pubmed_text}}</a>
            {{trait_1.description_display}}
        </div>
        {% elif trait_1.dataset.type == "Geno" %}
        <div>
          X axis:
          <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">
            {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}}
          </a>
        </div>
        <div>
          Location: {{trait_1.location_repr}} Mb
        </div>
        {% endif %}

        <br/>

        {% if trait_2.dataset.type == "ProbeSet" %}
        <div>
          Y axis:
          <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">
            {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.tissue + " "  + trait_2.dataset.name + ": " + trait_2.name|string}}
          </a>
        </div>
        <div>
          [{{trait_2.symbol}} on {{trait_2.location_repr}} Mb]
          {{trait_2.description_display}}
        </div>
        {% elif trait_2.dataset.type == "Publish" %}
        <div>
          Y axis:
          <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">
            {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}}
          </a>
        </div>
        <div>
          <a href="{{trait_2.pubmed_link}}">PubMed: {{trait_2.pubmed_text}}</a>
            {{trait_2.description_display}}
        </div>
        {% elif trait_2.dataset.type == "Geno" %}
        <div>
          Y axis:
          <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">
            {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}}
          </a>
        </div>
        <div>
          Location: {{trait_2.location_repr}} Mb
        </div>
        {% endif %}
      </div>
      <div style="float: left; margin-top:30px;">
        <table class="table table-hover table-striped table-bordered" style="width: 80%; margin-left: 60px; text-align: right;">
          <thead>
            <tr><th style="text-align: right;">Statistic</th><th style="text-align: right;">Value</th></tr>
          </thead>
          <tbody>
            <tr>
              <td>Number</td>
              <td>{{jsdata.num_overlap}}</td>
            </tr>
            <tr>
              <td>Slope</td>
              <td>{{ jsdata.slope_string }}</td>
            </tr>
            <tr>
              <td>Intercept</td>
              <td>{{'%0.3f' % jsdata.intercept}}</td>
            </tr>
            <tr>
              <td>r value</td>
              <td>{{'%0.3f' % jsdata.r_value}}</td>
            </tr>
            <tr>
              <td>P value</td>
              <td>{% if jsdata.p_value < 0.001 %}{{'%0.3e' % jsdata.p_value}}{% else %}{{'%0.3f' % jsdata.p_value}}{% endif %}</td>
            </tr>
            <tr>
              <td style="text-align: left;" colspan="2">
                Regression Line
                <br>
                y = {{ jsdata.slope_string }} * x {% if jsdata.intercept < 0 %}- {{'%0.3f' % (jsdata.intercept * -1)}}{% else %}+ {{'%0.3f' % jsdata.intercept}}{% endif %}
              </td>
            </tr>
          </tbody>
        </table>
        </div>
      </div>
    </div>

    {% if effect_plot == false %}
    <div class="tab-pane {% if method == 'spearman' %}active{% endif %}" id="tp2">
      <br>
      <div id="srscatterplot2"></div>
      <br>
      <div class="row" style="width: 800px; overflow: hidden;">
        <div style="margin-left: 50px; min-width: 300px;">
          {% if trait_1.dataset.type == "ProbeSet" %}
          <div>
            X axis:
            <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">
              {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.tissue + " "  + trait_1.dataset.name + ": " + trait_1.name|string}}
            </a>
          </div>
          <div>
            [{{trait_1.symbol}} on {{trait_1.location_repr}} Mb]
            {{trait_1.description_display}}
          </div>
          {% elif trait_1.dataset.type == "Publish" %}
          <div>
            X axis:
            <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">
              {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}}
            </a>
          </div>
          <div>
            <a href="{{trait_1.pubmed_link}}">PubMed: {{trait_1.pubmed_text}}</a>
              {{trait_1.description_display}}
          </div>
          {% endif %}

          <br/>

          {% if trait_2.dataset.type == "ProbeSet" %}
          <div>
            Y axis:
            <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">
              {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.tissue + " "  + trait_2.dataset.name + ": " + trait_2.name|string}}
            </a>
          </div>
          <div>
            [{{trait_2.symbol}} on {{trait_2.location_repr}} Mb]
            {{trait_2.description_display}}
          </div>
          {% elif trait_2.dataset.type == "Publish" %}
          <div>
            Y axis:
            <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">
              {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}}
            </a>
          </div>
          <div>
            <a href="{{trait_2.pubmed_link}}">PubMed: {{trait_2.pubmed_text}}</a>
              {{trait_2.description_display}}
          </div>
          {% endif %}
        </div>
        <div style="float: left; margin-top: 30px;">
          <table class="table table-hover table-striped table-bordered" style="width: 80%; margin-left: 60px; text-align: right;">
            <thead>
              <tr><th style="text-align: right;">Statistic</th><th style="text-align: right;">Value</th></tr>
            </thead>
            <tbody>
              <tr>
                <td>Number</td>
                <td>{{jsdata.num_overlap}}</td>
              </tr>
              <tr>
                <td>Slope</td>
                <td>{{ jsdata.srslope_string }}</td>
              </tr>
              <tr>
                <td>Intercept</td>
                <td>{{'%0.3f' % jsdata.srintercept}}</td>
              </tr>
              <tr>
                <td>r value</td>
                <td>{{'%0.3f' % jsdata.srr_value}}</td>
              </tr>
        <tr>
                <td>P value</td>
                <td>{% if jsdata.srp_value < 0.001 %}{{'%0.3e' % jsdata.srp_value}}{% else %}{{'%0.3f' % jsdata.srp_value}}{% endif %}</td>
              </tr>
              <tr>
                <td style="text-align: left;" colspan="2">
                  Regression Line
                  <br>
                  y = {{ jsdata.srslope_string }} * x {% if jsdata.srintercept < 0 %}- {{'%0.3f' % (jsdata.srintercept * -1)}}{% else %}+ {{'%0.3f' % jsdata.srintercept}}{% endif %}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    {% endif %}
</div>

{% endblock %}

{% block js %}
    <script>
       js_data = {{ js_data | safe }};
    </script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='d3js/d3.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='d3-tip/d3-tip.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jscolor/jscolor.js') }}"></script>
    <script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.js"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.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="/static/new/javascript/get_traits_from_collection.js"></script>-->
    <script type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="/static/new/javascript/draw_corr_scatterplot.js"></script>
{% endblock %}