Display some genotype information.

2 files changed, 142 insertions, 8 deletions

diff --git a/uploader/templates/genotypes/index.html b/uploader/templates/genotypes/index.html
index 9ffea73..e749f5a 100644
--- a/uploader/templates/genotypes/index.html
+++ b/uploader/templates/genotypes/index.html
@@ -25,12 +25,4 @@
   {{select_species_form(url_for("species.populations.genotypes.index"),
   species)}}
 </div>
-
-<div class="row">
-  <h3>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>
-</div>
 {%endblock%}
diff --git a/uploader/templates/genotypes/list-genotypes.html b/uploader/templates/genotypes/list-genotypes.html
new file mode 100644
index 0000000..9b27540
--- /dev/null
+++ b/uploader/templates/genotypes/list-genotypes.html
@@ -0,0 +1,142 @@
+{%extends "genotypes/base.html"%}
+{%from "flash_messages.html" import flash_all_messages%}
+{%from "populations/macro-display-population-card.html" import display_population_card%}
+
+{%block title%}Genotypes{%endblock%}
+
+{%block pagetitle%}Genotypes{%endblock%}
+
+{%block lvl4_breadcrumbs%}
+<li {%if activelink=="list-genotypes"%}
+    class="breadcrumb-item active"
+    {%else%}
+    class="breadcrumb-item"
+    {%endif%}>
+  <a href="{{url_for('species.populations.genotypes.list_genotypes',
+           species_id=species.SpeciesId,
+           population_id=population.Id)}}">List genotypes</a>
+</li>
+{%endblock%}
+
+{%block contents%}
+{{flash_all_messages()}}
+
+<div class="row">
+  <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">
+    <legend>Genotype Encoding</legend>
+
+    <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>
+</div>
+
+<div class="row text-danger">
+  <h3>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>
+  </ul>
+</div>
+
+<div class="row">
+  <p>
+    There are a total of {{total_markers}} genotype markers for this species.
+  </p>
+  <div class="row">
+    <div class="col-md-2" style="text-align: start;">
+      {%if start_from > 0%}
+      <a href="{{url_for('species.populations.genotypes.list_genotypes',
+               species_id=species.SpeciesId,
+               population_id=population.Id,
+               start_from=start_from-count,
+               count=count)}}">
+        <span class="glyphicon glyphicon-backward"></span>
+        Previous
+      </a>
+      {%endif%}
+    </div>
+    <div class="col-md-8" style="text-align: center;">
+      Displaying markers {{start_from+1}} to {{start_from + count}} of
+      {{total_markers}}
+    </div>
+    <div class="col-md-2" style="text-align: end;">
+      {%if start_from + count < total_markers%}
+      <a href="{{url_for('species.populations.genotypes.list_genotypes',
+               species_id=species.SpeciesId,
+               population_id=population.Id,
+               start_from=start_from+count,
+               count=count)}}">
+        Next
+        <span class="glyphicon glyphicon-forward"></span>
+      </a>
+      {%endif%}
+    </div>
+  </div>
+  <table class="table">
+    <thead>
+      <tr>
+        <th title="">#</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>{{marker.sequence_number}}</td>
+        <td>{{marker.Marker_Name}}</td>
+        <td>{{marker.Chr}}</td>
+        <td>{{marker.Mb}}</td>
+        <td>{{marker.Source}}</td>
+        <td>{{marker.Source2}}</td>
+      </tr>
+      {%else%}
+      <tr>
+        <td colspan="7" class="text-info">
+          <span class="glyphicon glyphicon-exclamation-sign"></span>
+          No markers to display!
+        </td>
+      </tr>
+      {%endfor%}
+    </tbody>
+  </table>
+</div>
+{%endblock%}
+
+{%block sidebarcontents%}
+{{display_population_card(species, population)}}
+{%endblock%}