{%extends "genotypes/base.html"%}
{%from "flash_messages.html" import flash_all_messages%}

{%block title%}Genotypes{%endblock%}

{%block pagetitle%}Genotypes{%endblock%}

{%block contents%}
{{flash_all_messages()}}

<div class="row">
  <h2>Genotype Encoding</h2>
  <p>
    The genotype encoding used for the "{{population.FullName}}" population from
    the "{{species.FullName}}" species is as shown in the table below.
  </p>
  <table class="table">

    <thead>
      <tr>
        <th>Allele Type</th>
        <th>Allele Symbol</th>
        <th>Allele Value</th>
      </tr>
    </thead>

    <tbody>
      {%for row in genocode%}
      <tr>
        <td>{{row.AlleleType}}</td>
        <td>{{row.AlleleSymbol}}</td>
        <td>{{row.DatabaseValue if row.DatabaseValue is not none else "NULL"}}</td>
      </tr>
      {%else%}
      <tr>
        <td colspan="7" class="text-info">
          <span class="glyphicon glyphicon-exclamation-sign"></span>
          There is no explicit genotype encoding defined for this population.
        </td>
      </tr>
      {%endfor%}
    </tbody>
  </table>

  {%if genocode | length < 1%}
  <div class="col">
    <a href="#add-genotype-encoding"
       title="Add a genotype encoding system for this population"
       class="btn btn-primary not-implemented">
      define genotype encoding
    </a>
  </div>
  {%endif%}
</div>

<div class="row">
  <h2>Genotype Dataset</h2>
</div>

{%if dataset is not none%}

<div class="row">
  <h3>Dataset Details</h3>
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Full Name</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>{{dataset.Name}}</td>
        <td><a href="{{url_for('species.populations.genotypes.view_dataset',
                     species_id=species.SpeciesId,
                     population_id=population.Id,
                     dataset_id=dataset.Id)}}"
               title="View details regarding and manage dataset '{{dataset.FullName}}'"
               target="_blank">
            {{dataset.FullName}}</a></td>
      </tr>
    </tbody>
  </table>

  <p>
    To see more information regarding this dataset (e.g. which markers have
    sample allele data, the allele data itself, etc) click on the "Full Name"
    link above.</p>
</div>

<div class="row">
  <h3>Genotype Markers</h3>

  <div class="row">
    <p>
      The table below lists all of the markers that exist for species
      {{species.SpeciesName}} ({{species.FullName}}), regardless of whether
      (or not) we have corresponding sample allele data for a particular marker.
    </p>
  <table id="tbl-genetic-markers" class="table compact stripe cell-border">
    <thead>
      <tr>
        <th title="">#</th>
        <th title="">Index</th>
        <th title="">Marker Name</th>
        <th title="Chromosome">Chr</th>
        <th title="Physical location of the marker in megabasepairs">
          Location (Mb)</th>
        <th title="">Source</th>
        <th title="">Source2</th>
    </thead>

    <tbody>
      {%for marker in markers%}
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      {%endfor%}
    </tbody>
  </table>
</div>

{%else%}

<div class="row">
  <p>
    Your genotype data will need to be under a dataset. Unfortunately there is
    currently no dataset defined for this population.
  </p>

  <p class="text-warning">
    <span class="glyphicon glyphicon-exclamation-sign"></span>
    Click the button below to define the genotype dataset for this population.
  </p>
  <p>
    <a href="{{url_for('species.populations.genotypes.create_dataset',
             species_id=species.SpeciesId,
             population_id=population.Id)}}"
       title="Create a new genotype dataset for the '{{population.FullName}}' population for the '{{species.FullName}}' species."
       class="btn btn-primary">
      create new genotype dataset</a></p>
</div>

{%endif%}

<div class="row">
  <h2>Notes</h2>
  <div class="row text-danger">
    <h3>Genetic Markers: Some Important Concepts to Consider/Remember</h3>
    <ul>
      <li>Reference vs. Non-reference alleles</li>
      <li>In <em>GenoCode</em> table, items are ordered by <strong>InbredSet</strong></li>
    </ul>
    <h3>Possible references</h3>
    <ul>
      <li>https://mr-dictionary.mrcieu.ac.uk/term/genotype/</li>
      <li>https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7363099/</li>
    </ul>
  </div>

  <div class="row text-warning">
    <h3>Genotype Dataset</h3>
    <p>
      <span class="glyphicon glyphicon-exclamation-sign"></span>
      <strong>NOTE</strong>: Currently the GN2 (and related) system(s) expect a
      single genotype dataset per population. If there is more than one, the
      system apparently fails in unpredictable ways.
    </p>
  </div>
</div>

{%endblock%}


{%block javascript%}
<script type="text/javascript">

  $(function() {
      var dtGeneticMarkers = buildDataTable(
          "#tbl-genetic-markers",
          [],
          [
              {
                  data: function(marker) {
                      return `<input type="checkbox" name="selected-markers" ` +
                          `id="chk-selected-markers-${marker.Id}-${marker.GenoFreezeId}" ` +
                          `value="${marker.Id}_${marker.GenoFreezeId}" ` +
                          `class="chk-row-select" />`;
                  }
              },
              {data: 'index'},
              {data: "Name", searchable: true},
              {data: "Chr", searchable: true},
              {data: "Mb", searchable: true},
              {data: "Source", searchable: true},
              {data: "Source2", searchable: true}
          ],
          {
              ajax: {
                  url: "{{url_for('species.populations.genotypes.list_markers', species_id=species.SpeciesId, population_id=population.Id, dataset_id=dataset.Id)}}",
                  dataSrc: "markers"
              },
              paging: true,
              scroller: true,
              scrollY: "50vh",
              scrollCollapse: true,
              layout: {
                  top: "info",
                  topStart: null,
                  topEnd: null,
                  bottom: null,
                  bottomStart: null,
                  bottomEnd: null
              }
          });
  });

</script>
{%endblock%}