{% extends "index_page.html" %}
{% block title %}Mapping 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('css', filename='purescript-genome-browser/css/purescript-genetics-browser.css') }}" />
    <link rel="stylesheet" type="text/css" href="/static/new/css/marker_regression.css" />
    <link rel="stylesheet" type="text/css" href="static/new/css/show_trait.css" />

{% endblock %}
{% from "base_macro.html" import header %}
{% block content %}
    <div class="container">
        <form method="post" target="_blank" action="/run_mapping" name="marker_regression" id="marker_regression_form">
        <input type="hidden" name="temp_uuid" value="{{ temp_uuid }}">
        {% if temp_trait is defined %}
        <input type="hidden" name="temp_trait" value="{{ temp_trait }}">
        {% endif %}
        <input type="hidden" name="inputs_hash" value="{{ hash_of_inputs }}">
        <input type="hidden" name="group" value="{{ dataset.group.name }}">
        <input type="hidden" name="species" value="{{ dataset.group.species }}">
        <input type="hidden" name="trait_id" value="{{ this_trait.name }}">
        <input type="hidden" name="dataset" value="{{ dataset.name }}">
        <input type="hidden" name="genofile" value="{{ genofile_string }}">
        <input type="hidden" name="geno_db_exists" value="{{ geno_db_exists }}">
        <input type="hidden" name="first_run" value="{{ first_run }}">
        {% if output_files is defined %}
        <input type="hidden" name="output_files" value="{{ output_files }}">
        {% endif %}
        {% if reaper_version is defined %}
        <input type="hidden" name="reaper_version" value="{{ reaper_version }}">
        {% endif %}
        <input type="hidden" name="results_path" value="{{ mapping_results_path }}">
        <input type="hidden" name="method" value="{{ mapping_method }}">
        <input type="hidden" name="sample_vals" value="{{ sample_vals }}">
        <input type="hidden" name="vals_hash" value="{{ vals_hash }}">
        <input type="hidden" name="n_samples" value="{{ n_samples }}">
        <input type="hidden" name="maf" value="{{ maf }}">
        <input type="hidden" name="use_loco" value="{{ use_loco }}">
        <input type="hidden" name="selected_chr" value="{{ selectedChr }}">
        <input type="hidden" name="mapping_scale" value="{{ plotScale }}">
        <input type="hidden" name="manhattan_plot" value="{{ manhattan_plot }}">
        {% if manhattan_plot == True %}
        <input type="hidden" name="color_scheme" value="alternating">
        {% endif %}
        <input type="hidden" name="num_perm" value="{{ nperm }}">
        <input type="hidden" name="perm_info" value="">
        {% if categorical_vars is defined %}
        <input type="hidden" name="categorical_vars" value="{{ categorical_vars|join(',') }}">
        {% endif %}
        {% if perm_strata is defined %}
        <input type="hidden" name="perm_strata" value="True">
        {% endif %}
        <input type="hidden" name="num_bootstrap" value="{{ nboot }}">
        <input type="hidden" name="do_control" value="{{ doControl }}">
        <input type="hidden" name="control_marker" value="{{ controlLocus }}">
        <input type="hidden" name="covariates" value="{{ covariates }}">
        <input type="hidden" name="mapmethod_rqtl" value="{{ mapmethod_rqtl }}">
        <input type="hidden" name="mapmodel_rqtl" value="{{ mapmodel_rqtl }}">
        <input type="hidden" name="pair_scan" value="{{ pair_scan }}">
        <input type="hidden" name="transform" value="{{ transform }}">
        <input type="hidden" name="tool_used" value="Mapping">
        <input type="hidden" name="wanted_inputs" value="">
        <input type="hidden" name="form_url" value="/run_mapping">
        
        <div class="container" style="width: 1200px; float: left;">
          <div class="col-xs-4" style="word-wrap: normal;">
              <h2>Map Viewer: Whole Genome</h2><br>
              <b>Population:</b> {{ dataset.group.species|capitalize }} {{ dataset.group.name }}<br>
              <b>Database:</b> {{ dataset.fullname }}<br>
              {% if dataset.type == "ProbeSet" %}<b>Trait ID:</b>{% else %}<b>Record ID:</b>{% endif %} <a href="/show_trait?trait_id={{ this_trait.name }}&dataset={{ dataset.name }}">{{ this_trait.display_name }}</a><br>
              <b>Trait Hash: </b> {{ vals_hash }}<br>
              {% if dataset.type == "ProbeSet" %}
              <b>Gene Symbol:</b> <i>{{ this_trait.symbol }}</i><br>
              <b>Location:</b> Chr {{ this_trait.chr }} @ {{ this_trait.mb }} Mb<br>
              {% endif %}
              {% if genofile_string != "" %}
              <b>Genotypes:</b> {{ genofile_string.split(":")[1] }}<br>
              {% endif %}
              <b>Current Date/Time:</b> {{ current_datetime }}<br>
              <br>
              <button class="btn btn-default export_mapping_results"><span class="glyphicon glyphicon-download-alt"></span>Map Data</button>
              <br><br>
              <div class="input-group">
                <input type="text" class="form-control" name="mappingLink" size="75"></input>
                <div class="input-group-btn">
                  <button class="btn btn-default share-results" type="button">Copy and Share</button>
                </div>
              </div>
          </div>
          <div id="gn1_map_options" class="col-xs-6" style="outline: 3px double #AAAAAA; padding: 10px; margin: 10px;">
            <div class="col-xs-8" style="padding: 0px;">
              <table>
                <tr>
                  <td><b>Chr:&nbsp;</b></td>
                  <td style="padding: 5px;">
                    <select name="chromosomes" size="1">
                        {% for chr in ChrList %}
                        <option value="{{ chr[1] }}" {% if (chr[1] + 1) == selectedChr %}selected{% endif %}>{{ chr[0] }}</option>
                        {% endfor %}
                    </select>&nbsp;
                    <button type="button" class="btn btn-primary" style="padding-bottom: 2px; padding-top: 2px;" onclick="javascript:remap();">Remap</button>
                  </td>
                </tr>
                <tr>
                  <td ><b>View:&nbsp;</b></td>
                  <td style="padding: 5px;">
                    <input type="text" name="startMb" size="7" value="{% if startMb != -1 %}{{ startMb }}{% endif %}"> to <input type="text" name="endMb" size="7" value="{% if endMb != -1 %}{{ endMb }}{% endif %}">
                  </td>
                </tr>
                <tr>
                  <td><b>Units:&nbsp;</b></td>
                  <td style="padding: 5px;">
                    <label class="radio-inline">
                      <input type="radio" name="LRSCheck" value="LRS" {% if LRS_LOD == "LRS" %}checked{% endif %}>LRS
                    </label>
                    <label class="radio-inline">
                      <input type="radio" name="LRSCheck" value="{% if LRS_LOD == "-logP" %}-logP{% else %}LOD{% endif %}" {% if LRS_LOD == "LOD" or LRS_LOD == "-logP" %}checked{% endif %}>{% if LRS_LOD == "-logP" %}-logP{% else %}LOD{% endif %}
                    </label>
                    <a href="{{ url_for('gn_docs_blueprint.glossary') }}#LOD" target="_blank">
                      <sup style="color:#f00"> ?</sup>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td style="padding: 5px;">
                    <input type="text" name="lrsMax" value="{{ '%0.1f' | format(lrsMax|float) }}" size="3"> <span style="font-size: 12px;">units on the y-axis (0 for default)</span>   
                  </td>
                </tr>
                <tr>
                  <td><b>Width:&nbsp;</b></td>
                  <td style="padding: 5px;">
                    <input type="text" name="graphWidth" value="{% if graphWidth is defined %}{{ graphWidth }}{% else %}1600{% endif %}" size="5"><span style="font-size: 12px;"> pixels (minimum=900)</span>
                  </td>
                </tr>
              </table>
              {% if manhattan_plot == True and selectedChr == -1 %}
              <table style="margin-top: 10px;">
                <tr>
                  <td>
                    <b>Manhattan Plot Color Scheme:&nbsp;</b>
                  </td>
                  <td>
                    <select id="color_scheme">
                      <option value="alternating" {% if color_scheme == "alternating" %}selected{% endif %}>Alternating</option>
                      <option value="varied" {% if color_scheme == "varied" %}selected{% endif %}>Varied by Chr</option>
                      <option value="single" {% if color_scheme == "single" %}selected{% endif %}>Single Color</option>
                    </select>
                  </td>
                  <td>
                    <input name="manhattan_single_color" type="hidden" id="point_color" value={% if manhattan_single_color %}{{ manhattan_single_color }}{% else %}"#D9D9D9"{% endif %}>
                    <button style="display: none; margin-left: 5px;" id="point_color_picker" class="jscolor {valueElement: 'point_color'}">Choose Color</button>
                  </td>
                </tr>
              </table>
              {% endif %}
            </div>
            <div class="col-xs-4" style="padding: 0px;">
                  {% if (mapping_method == "reaper" or mapping_method == "rqtl_geno") and nperm > 0 %}
                  <input type="checkbox" name="permCheck" class="checkbox" style="display: inline; margin-top: 0px;" {% if permChecked|upper == "ON" %}value="ON" checked{% endif %}> <span style="font-size: 12px;">Permutation Test 
                    <a href="{{ url_for('gn_docs_blueprint.glossary') }}#Permutation" target="_blank">
                      <sup style="color:#f00"> ?</sup>
                    </a>
                  <br>
                  {% endif %}
                  {% if mapping_method == "reaper" and nboot > 0 %}
                  <input type="checkbox" name="bootCheck" class="checkbox" style="display: inline; margin-top: 0px;" {% if bootChecked|upper == "ON" %}value="ON" checked{% endif %}> <span style="font-size: 12px;">Bootstrap Test 
                    <a href="{{ url_for('gn_docs_blueprint.glossary') }}#bootstrap" target="_blank">
                      <sup style="color:#f00"> ?</sup>
                    </a>
                  <br>
                  {% endif %}
                  {% if mapping_method == "reaper" %}
                  <input type="checkbox" name="additiveCheck" class="checkbox" style="display: inline; margin-top: 0px;" {% if additiveChecked|upper == "ON" %}value="ON" checked{% endif %}> <span style="font-size: 12px;">Allele Effects
                    <a href="{{ url_for('gn_docs_blueprint.glossary') }}#additive" target="_blank">
                      <sup style="color:#f00"> ?</sup>
                    </a>
                  <br>
                  {% endif %}
                  <input type="checkbox" name="showSNP" class="checkbox" style="display: inline; margin-top: 0px;" {% if SNPChecked|upper == "ON" %}value="ON" checked{% endif %}> <span style="font-size: 12px;">SNP Track </span>
                    <a href="{{ url_for('gn_docs_blueprint.glossary') }}#snpSeismograph" target="_blank">
                      <sup style="color:#f00"> ?</sup>
                    </a>
                    <span style="color:red;">*</span>
                  <br>
                  <input type="checkbox" name="showGenes" class="checkbox" style="display: inline; margin-top: 0px;" {% if geneChecked|upper == "ON" %}value="ON" checked{% endif %}> <span style="font-size: 12px;">Gene Track </span> <span style="color:red;">*</span><br>
                  {% if plotScale != "morgan" %}
                  <input type="checkbox" name="haplotypeAnalystCheck" class="checkbox" style="display: inline; margin-top: 0px;" {% if haplotypeAnalystChecked|upper == "ON" %}value="ON" checked{% endif %}> <span style="font-size: 12px;">Haplotype Tracks </span> <span style="color:red;">*</span><br>
                  {% endif %}
                  <input type="checkbox" name="viewLegend" class="checkbox" style="display: inline; margin-top: 0px;" {% if legendChecked|upper == "ON" %}value="ON" checked{% endif %}> <span style="font-size: 12px;">Legend </span><br>
                  <input type="checkbox" name="showHomology" class="checkbox" style="display: inline; margin-top: 0px;" {% if homologyChecked|upper == "ON" %}value="ON" checked{% endif %}> <span style="font-size: 12px;">Human Chromosomes <a href="http://hgdownload.cse.ucsc.edu/goldenpath/hg38/liftOver/"><sup style="color:#f00" title="Human Syntenic Chromosomes taken from HG38 (Human Genome 38)"> ?</sup></a></span>
                  <br>
                  <span style="color:red;">*</span> <span style="font-size: 12px;">only apply to single chromosome physical mapping</span>
            </div>
          </div>
        </div>
 
        <div class="tabbable" style="width: 100%; overflow-x: auto; margin: 10px; float: left;">
          <ul class="nav nav-tabs">
            <li id="gn1_map_tab">
              <a href="#gn1_map" data-toggle="tab" aria-expanded="true">GN1 Map</a>
            </li>
            {% if mapping_method == "gemma" or mapping_method == "reaper" %}
            <li id="browser_tab">
                <a href="#browser_holder" data-toggle="tab" aria-expanded="true">Genome Browser</a>
            </li>
            {% endif %}
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="gn1_map">
              <div class="qtlcharts">
                  {{ gifmap|safe }}
                  <img src="/generated/{{ filename }}.png" usemap="#WebQTLImageMap">
                  {% if additiveChecked|upper == "ON" %}
                  <br>
                  <span style="white-space: nowrap;">A positive additive coefficient (green line) indicates that {{ dataset.group.parlist[1] }} alleles increase trait values. In contrast, a negative additive coefficient (orange line) indicates that {{ dataset.group.parlist[0] }} alleles increase trait values.</span>
                  {% endif %}
              </div>
            </div>
            {% if mapping_method == "gemma" or mapping_method == "reaper" %}
            <div class="tab-pane" id="browser_holder" style="height: 600px;">
                <div id="browser" style="margin-right: 20px; width: 90%;">
                    <div id="controls">
                        <button id="scrollLeft"  type="button" >
                          <i class="fa fa-arrow-left"></i>
                        </button>
                        <button id="scrollRight" type="button" >
                          <i class="fa fa-arrow-right"></i>
                        </button>
                        <button id="zoomOut" type="button" >
                          <i class="fa fa-search-minus"></i>
                        </button>
                        <button id="zoomIn"  type="button" >
                          <i class="fa fa-search-plus"></i>
                        </button>
                        <button id="reset"  type="button" >Reset</button>
                    </div>
                    <div id="infoBox"></div>
                </div>
            </div>
            {% endif %}
          </div>
        </div>
        <div style="float: left;">
            {% if nperm > 0 and permChecked == "ON" %}
            <br><br>
            <div id="perm_histogram" class="barchart"></div>
            <br><br>
            Total of {{ nperm }} permutations&nbsp;&nbsp;<a href="javascript:;" id="download_perm" target="_blank" >Download Permutation Results</a>
            <br>
            {% endif %}
        </div>

        </form>
        {% if selectedChr == -1 %}
        <div class="container" style="padding-left: 30px; margin-top: 50px; position: relative; float: left;">
          <h2>Mapping Statistics</h2>
        <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-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
        {% if geno_db_exists == "True" %}<button class="btn btn-success" id="add" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button>{% endif %}
        <button class="btn btn-default export_mapping_results" ><span class="glyphicon glyphicon-download"></span> Download</span></button>
        <br />
        <br />
          <div id="trait_table_container" style="width:{% if 'additive' in trimmed_markers[0] %}600{% else %}550{% endif %}px;">
            <table class="table-hover table-striped cell-border no-footer" id='trait_table' style="float: left;">
              <tbody>
               <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
              </tbody>
            </table>
          </div>
        </div>
        {% elif selectedChr != -1 and plotScale =="physic" and (dataset.group.species == 'mouse' or dataset.group.species == 'rat') %}
        <div style="width: 100%;">
          <h2>Interval Analyst</h2>
          <div id="table_container">
          <table id="trait_table" class="table-hover table-striped cell-border dataTable" style="float: left; width:100%;">
            <thead>
              <tr>
                {% for header in gene_table_header %}
                <th>{{ header|safe }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in gene_table_body %}
              <tr>
                {% for n in range(row|length) %}
                {% if n == 0 %}
                <td align="center" style="padding: 1px 0px 1px 0px;">{{ row[n]|safe }}</td>
                {% else %}
                <td>{{ row[n]|safe }}</td>
                {% endif %}
                {% endfor %}
              </tr>
              {% endfor %}
            </tbody>
          </table>
          </div>
        </div>
        {% endif %}
    </div>

    <!-- End of body -->

{% endblock %}

{% block js %}  

    <script type="text/javascript" src="{{ url_for('js', filename='d3js/d3.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('js', filename='underscore-string/underscore.string.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('js', filename='d3-tip/d3-tip.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script>
    {% if manhattan_plot == True and selectedChr == -1 %}
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jscolor/jscolor.js') }}"></script>

    {% endif %}

    <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/scroller/js/dataTables.scroller.min.js') }}"></script>

    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/scientific.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='purescript-genome-browser/js/purescript-genetics-browser.js') }}"></script>

    <script>
        var js_data = {{ js_data | safe }};
        var markersJson = {{ trimmed_markers|safe }};
    </script>

    <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
    <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
    {% if mapping_method == "gemma" or mapping_method == "reaper" %}
    <script language="javascript" type="text/javascript" src="/static/new/javascript/init_genome_browser.js"></script>
    {% endif %}

    <script type="text/javascript" charset="utf-8">
        $(document).ready( function () {
            {% if selectedChr == -1 %}
            tableId = "trait_table"

            columnDefs = [
              {
                'data': null,
                'width': "5px",
                'orderDataType': "dom-checkbox",
                'targets': 0,
                'render': function(data, type, row, meta) {
                  return '<input type="checkbox" name="selectCheck" class="checkbox trait_checkbox" value="'+ data.hmac + '">'
                }
              },
              {
                'title': "Row",
                'type': "natural",
                'width': "35px",
                'searchable': false,
                'orderable': false,
                'targets': 1,
                'render': function(data, type, row, meta) {
                    return meta.row
                }
              },
              {
                'title': "Marker",
                'type': "natural",
                'width': "20%",
                'targets': 2,
                {% if geno_db_exists == "True" %}
                'data': null,
                'render': function(data, type, row, meta) {
                  return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset={{ dataset.group.name }}Geno">' + data.name + '</a>'
                }
                {% else %}
                'data': "name"
                {% endif %}
              },
              {
                'title': "<div style='text-align: right;'>{{ LRS_LOD }}</div>",
                'type': "natural",
                'width': "60px",
                'targets': 3,
                'orderSequence': [ "desc", "asc"],
                'data': null,
                'render': function(data, type, row, meta) {
                  {% if (LRS_LOD == "LOD") or (LRS_LOD == "-logP") %}
                  if ('lod_score' in data){
                    return String(parseFloat(data.lod_score).toFixed(2))
                  } else {
                    return String((parseFloat(data.lrs_value) / 4.61).toFixed(2))
                  }
                  {% else %}
                  if ('lod_score' in data){
                    return String((parseFloat(data.lod_score) * 4.61).toFixed(2))
                  } else {
                    return String(parseFloat(data.lrs_value).toFixed(2))
                  }
                  {% endif %}
                }
              },
              {
                'title': "<div style='text-align: right;'>Position ({% if plotScale == 'physic' %}Mb{% else %}cM{% endif %})</div>",
                'type': 'natural',
                'targets': 4,
                'data': "display_pos"
              },
              {% if 'additive' in trimmed_markers[0] %}
              {
                'title': "<div style='text-align: right;'>Add Eff</div>",
                'type': "natural",
                'targets': 5,
                'data': null,
                'render': function(data, type, row, meta) {
                  {% if geno_db_exists == "True" %}
                  return '<a target"_blank" href="corr_scatter_plot?method=pearson&dataset_1={{ dataset.group.name }}Geno&dataset_2={{ dataset.name }}&trait_1=' + data.name + '&trait_2={{ this_trait.name }}&cached_trait=trait_2&dataid={{ dataid }}&effect=True">' + String(parseFloat(data.additive).toFixed(3)) + '</a>'
                  {% else %}
                  return String(parseFloat(data.additive).toFixed(3))
                  {% endif %}
                }
              },
              {% endif %}
              {% if ('dominance' in trimmed_markers[0]) and (dataset.group.genetic_type != "riset") %}
              {
                'title': "<div style='text-align: right;'>Add Eff</div>",
                'type': "natural",
                'targets': {% if ('additive' in trimmed_markers[0]) %}6{% else %}5{% endif %},
                'data': null,
                'render': function(data, type, row, meta) {
                  return String(parseFloat(data.dominance).toFixed(2))
                }
              }
              {% endif %}
            ]

            tableSettings = {
              "createdRow": function ( row, data, index ) {
                $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
                $('td', row).eq(1).attr("align", "right");
                $('td', row).eq(1).attr('data-export', index+1);
                $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
                $('td', row).eq(3).attr("align", "right");
                $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
                $('td', row).eq(4).attr("align", "right");
                $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
                {% if 'additive' in trimmed_markers[0] %}
                $('td', row).eq(5).attr("align", "right");
                $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
                {% endif %}
                {% if 'dominance' in trimmed_markers[0] %}
                $('td', row).eq(6).attr("align", "right");
                $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
                {% endif %}
              },
              "language": {
                "info": "Showing from _START_ to _END_ of " + js_data.total_markers + " records",
              },
              "order": [[1, "asc" ]],
              "scrollY": "1000px",
              "scroller": true
            }

            create_table(tableId, markersJson, columnDefs, tableSettings)

            {% elif selectedChr != -1 and plotScale =="physic" and (dataset.group.species == 'mouse' or dataset.group.species == 'rat') %}
            $('#trait_table').dataTable( {
              "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") && event.target.tagName.toLowerCase() !== 'a'){
                      $(this).removeClass("selected")
                    } else if (event.target.tagName.toLowerCase() !== 'a') {
                      $(this).addClass("selected")
                    }
                  });
                },
                "createdRow": function ( row, data, index ) {
                  $('td', row).eq(1).attr("align", "right");
                  $('td', row).eq(3).attr("align", "right");
                  $('td', row).eq(4).attr("align", "right");
                  $('td', row).eq(5).attr("align", "right");
                  $('td', row).eq(6).attr("align", "right");
                  $('td', row).eq(7).attr("align", "right");
                  $('td', row).eq(8).attr("align", "center");
                  $('td', row).eq(9).attr("align", "right");
                },
                "columns": [
                    { "orderDataType": "dom-checkbox" },
                    { "type": "natural"},
                    { "type": "natural" , "orderDataType": "dom-inner-text" },
                    { "type": "natural" , "orderDataType": "dom-inner-text" },
                    { "type": "natural" , "orderDataType": "dom-inner-text" },
                    { "type": "natural" , "orderDataType": "dom-inner-text" },
                    { "type": "natural" },
                    { "type": "natural-minus-na" },
                    { "type": "natural-minus-na" },
                    { "type": "natural-minus-na" , "orderDataType": "dom-inner-text" },
                    { "type": "natural" }
                ],
                "columnDefs": [ {
                    "targets": 0,
                    "sortable": false
                }],
                "order": [[3, "asc" ]],
                "sDom": "RZtir",
                "iDisplayLength": -1,
                "autoWidth": false,
                "deferRender": true,
                "bSortClasses": false,
                "scrollCollapse": false,
                "paging": false
            } );
            {% endif %}

            $('#vector_map_tab').click(function(){
                $('div#gn1_map_options').hide();
            });

            $('#gn1_map_tab').click(function(){
                $('div#gn1_map_options').show();
            });

        });

        var mapping_input_list = ['temp_uuid', 'trait_id', 'dataset', 'tool_used', 'form_url', 'method', 'transform', 'trimmed_markers', 'selected_chr', 'chromosomes', 'mapping_scale', 'sample_vals',
                            'score_type', 'suggestive', 'significant', 'num_perm', 'permCheck', 'perm_output', 'perm_strata', 'categorical_vars', 'num_bootstrap', 'bootCheck', 'bootstrap_results',
                            'LRSCheck', 'covariates', 'maf', 'use_loco', 'manhattan_plot', 'color_scheme', 'manhattan_single_color', 'control_marker', 'do_control', 'genofile',
                            'pair_scan', 'startMb', 'endMb', 'graphWidth', 'lrsMax', 'additiveCheck', 'showSNP', 'showHomology', 'showGenes', 'viewLegend', 'haplotypeAnalystCheck',
                            'mapmethod_rqtl', 'mapmodel_rqtl', 'temp_trait', 'group', 'species', 'reaper_version', 'primary_samples', 'n_samples']

        $('input[name=wanted_inputs]').val(mapping_input_list.join(","));

        chrView = function(this_chr, chr_mb_list) {
            $('input[name=selected_chr]').val(this_chr)
            $('input[name=chr_mb_list]').val(chr_mb_list)

            $('#marker_regression_form').attr('action', '/loading');
            $('#marker_regression_form').submit();
        };

        rangeView = function(this_chr, start_mb, end_mb) {
            $('input[name=selected_chr]').val(this_chr)
            $('input[name=startMb]').val(start_mb)
            $('input[name=endMb]').val(end_mb)
            //$('input[name=mb_range]').val(start_mb + "," + end_mb)

            $('#marker_regression_form').attr('action', '/loading');
            $('#marker_regression_form').submit();
        };

        remap = function() { 
            $('input[name=selected_chr]').val($('select[name=chromosomes]').val());
            $('input[name=color_scheme]').val($('select#color_scheme').val());
            $('#marker_regression_form').attr('action', '/loading');
            return $('#marker_regression_form').submit(); 
        };

        {% if manhattan_plot == True and selectedChr == -1 %}
        $('#color_scheme').change(function(){
          if ($(this).val() == "single"){
            $('#point_color_picker').show();
          } else {
            $('#point_color_picker').hide();
          }
        });
        {% endif %}

        {% if mapping_method != "gemma" and mapping_method != "plink" and nperm > 0 and permChecked == "ON" %}
        $('#download_perm').click(function(){
          perm_info_dict = {
            perm_data: js_data.perm_results,
            num_perm: "{{ nperm }}",
            trait_name: "{{ this_trait.display_name }}",
            trait_description: `{{ this_trait.description_display }}`,
            cofactors: "{{ covariates }}",
            n_samples: {{ n_samples }},
            n_genotypes: {{ qtl_results|length }},
            {% if genofile_string is defined %}
            genofile: "{{ genofile_string }}",
            {% else %}
            genofile: "",
            {% endif %}
            units_linkage: "{{ LRS_LOD }}",
            strat_cofactors: js_data.categorical_vars
          }
          json_perm_data = JSON.stringify(perm_info_dict);

          $('input[name=perm_info]').val(json_perm_data);
          $('#marker_regression_form').attr('action', '/export_perm_data');
          return $('#marker_regression_form').submit();
        });

        modebar_options = {
          modeBarButtonsToAdd:[{
            name: 'Export as SVG',
            icon: Plotly.Icons.disk,
            click: function(gd) {
              Plotly.downloadImage(gd, {format: 'svg'})
            }
          }],
          modeBarButtonsToRemove:['toImage', 'sendDataToCloud', 'hoverClosest', 'hoverCompare', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'toggleSpikelines'],
          displaylogo: false
          //modeBarButtons:['toImage2', 'zoom2d', 'pan2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
        }

        perm_data = js_data.perm_results
        var hist_trace = {
            x: perm_data,
            type: 'histogram'
        };
        histogram_data = [hist_trace];
        histogram_layout = {
          bargap: 0.05,
          title: "<b>Histogram of Permutation Test</b>",
          xaxis: {
                  autorange: true,
                  title: "<b>{{ LRS_LOD }}</b>",
                  titlefont: {
                    family: "arial",
                    size: 20
                  },
                  ticklen: 4,
                  tickfont: {
                    size: 16
                  }
                },
          yaxis: {
                  autorange: true,
                  title: "<b>Count</b>",
                  titlefont: {
                    family: "arial",
                    size: 20
                  },
                  showline: true,
                  ticklen: 4,
                  tickfont: {
                    size: 16
                  },
                  automargin: true
                },
          width: 500,
          height: 300,
          margin: {
              l: 70,
              r: 30,
              t: 100,
              b: 50
          }
        };

        Plotly.newPlot('perm_histogram', histogram_data, histogram_layout, modebar_options);
        {% endif %}

        export_mapping_results = function() {
            $('#marker_regression_form').attr('action', '/export_mapping_results');
            return $('#marker_regression_form').submit();
        }

        $('.export_mapping_results').click(export_mapping_results);

        $('#browser_tab').click(function() {
          $('#gn1_map_options').css("display", "none")
        })
        $('#gn1_map_tab').click(function() {
          $('#gn1_map_options').css("display", "block")
        })

        hash = $('input[name=inputs_hash]').val();
        mappingLink = window.location.origin + "/run_mapping/"+ hash;
        $('input[name=mappingLink]').width(mappingLink.length*0.95 + "ch")
        $('input[name=mappingLink]').val(mappingLink);
        $('.share-results').click(function() {
            $.ajax({
                method: "POST",
                url: "/cache_mapping_inputs",
                data: {
                    inputs_hash: hash
                },
                success: function() {
                  document.querySelector("input[name='mappingLink']").select();
                  document.execCommand('copy');
                }
            });
        })

    </script>

{% endblock %}