PoC: UI for genotype records.

Implement a proof-of-concept (PoC) UI for genotype records.

4 files changed, 159 insertions, 228 deletions

diff --git a/uploader/templates/genotypes/base.html b/uploader/templates/genotypes/base.html
index 8d1b951..c2abc63 100644
--- a/uploader/templates/genotypes/base.html
+++ b/uploader/templates/genotypes/base.html
@@ -1,10 +1,11 @@
 {%extends "populations/base.html"%}
 {%from "populations/macro-display-population-card.html" import display_sui_population_card%}
+{%from "genotypes/macro-display-dataset-card.html" import display_dataset_card%}
 
 {%block breadcrumbs%}
 {{super()}}
 <li class="breadcrumb-item">
-  <a href="{{url_for('species.populations.genotypes.list_genotypes',
+  <a href="{{url_for('species.populations.genotypes.index',
            species_id=species['SpeciesId'],
            population_id=population['Id'])}}">
     genotype
@@ -14,5 +15,9 @@
 
 
 {%block sidebarcontents%}
+{%if dataset is defined and dataset is not none%}
+{{display_dataset_card(species, population, dataset)}}
+{%else%}
 {{display_sui_population_card(species, population)}}
+{%endif%}
 {%endblock%}
diff --git a/uploader/templates/genotypes/index.html b/uploader/templates/genotypes/index.html
new file mode 100644
index 0000000..1d44e26
--- /dev/null
+++ b/uploader/templates/genotypes/index.html
@@ -0,0 +1,129 @@
+{%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()}}
+
+
+{%if dataset is defined and dataset is not none%}
+
+<div class="row">
+  <h2>Genotype Data</h2>
+
+  <div class="row">
+    <div class="col">
+      <p>
+        <a href="#"
+           class="not-implemented btn btn-primary">
+          Add genotype records
+        </a>
+      </p>
+    </div>
+  </div>
+
+  <div class="table-responsive">
+    <table id="tbl-genotype-records" class="table">
+      <thead>
+        <tr>
+          <th title="">#</th>
+          <th title="">Index</th>
+          <th title="Locus of marker on the chromosome">Locus</th>
+          <th title="Chromosome">Chr</th>
+          <th title="Physical location of marker in centimorgans">cM</th>
+          <th title="Physical location of marker in megabasepairs">Mb</th>
+          {%for sample in samples%}
+          <th title="Data for sample {{sample}}">{{sample}}</th>
+          {%endfor%}
+        </tr>
+      </thead>
+
+      <tbody>
+        {%for record in genotype_records%}
+        <tr>
+          <td>
+            <input type="checkbox"
+                   id="chk-geno-record-{{record.Id}}"
+                   name="geno_record_id"
+                   value="{{record.Id}}" />
+          </td>
+          <td>{{record.index}}</td>
+          <td>{{record.Name}}</td>
+          <td>{{record.Chr}}</td>
+          <td>{{record.cM}}</td>
+          <td>{{record.Mb}}</td>
+          {%for sample in samples%}
+          <td>{{record.data[sample]}}</td>
+          {%endfor%}
+        </tr>
+        {%else%}
+        <tr>
+          <td colspan="6" class="text-info">
+            There are no records
+          </td>
+        </tr>
+        {%endfor%}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="row">
+  <h2>Genotype Encoding</h2>
+  <p>The numerical values in the table above are mapped from the following allele symbols:</p>
+
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Allele Type</th>
+        <th>Allele Symbol</th>
+        <th>Mapped To</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      {%for row in genocode%}
+      <tr>
+        <td {%if row.AlleleType == 'mat'%}
+            title="Maternal allele"
+            {%elif row.AlleleType == "pat"%}
+            title="Paternal allele"
+            {%elif row.AlleleType == "het"%}
+            title="Heterozygous allele"
+            {%else%}
+            title="Unknown allele"
+            {%endif%}>
+          {{row.AlleleType}}</td>
+        <td>{{row.AlleleSymbol}}</td>
+        <td>{{row.DatabaseValue if row.DatabaseValue is not none}}</td>
+      </tr>
+      {%else%}
+      <tr>
+        <td colspan="3" class="text-info">
+          There is no genotype encoding defined for this data.
+        </td>
+      </tr>
+      {%endfor%}
+    </tbody>
+  </table>
+</div>
+
+{%else%}
+
+<div class="row">
+  <p>We need to create a dataset to hold the genotype information for this
+    species/population, before we can proceed to upload the genotype data.</p>
+  <p>Please click the button below to create the dataset.</p>
+
+  <div class="col">
+  <a href="{{url_for('species.populations.genotypes.create_dataset', species_id=species.SpeciesId, population_id=population.Id)}}"
+     class="btn btn-primary">create genotype dataset</a>
+  </div>
+</div>
+
+{%endif%}
+
+{%endblock%}
diff --git a/uploader/templates/genotypes/list-genotypes.html b/uploader/templates/genotypes/list-genotypes.html
deleted file mode 100644
index a7e8ba4..0000000
--- a/uploader/templates/genotypes/list-genotypes.html
+++ /dev/null
@@ -1,227 +0,0 @@
-{%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>
-
-<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%}
diff --git a/uploader/templates/genotypes/macro-display-dataset-card.html b/uploader/templates/genotypes/macro-display-dataset-card.html
new file mode 100644
index 0000000..2b197d4
--- /dev/null
+++ b/uploader/templates/genotypes/macro-display-dataset-card.html
@@ -0,0 +1,24 @@
+{%from "populations/macro-display-population-card.html" import display_sui_population_card%}
+
+{%macro display_dataset_card(species, population, dataset)%}
+{{display_sui_population_card(species, population)}}
+<div class="row">
+  <table class="table">
+    <caption>Current genotype dataset</caption>
+    <tbody>
+      <tr>
+        <th>Name</th>
+        <td>{{dataset.Name}}</td>
+      </tr>
+      <tr>
+        <th>Full Name</th>
+        <td>{{dataset.FullName}}</td>
+      </tr>
+      <tr>
+        <th>Short Name</th>
+        <td>{{dataset.ShortName}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+{%endmacro%}