Fetch markers from JSON endpoint.

1 files changed, 38 insertions, 14 deletions

diff --git a/uploader/templates/genotypes/list-genotypes.html b/uploader/templates/genotypes/list-genotypes.html
index 226cc46..8c6910b 100644
--- a/uploader/templates/genotypes/list-genotypes.html
+++ b/uploader/templates/genotypes/list-genotypes.html
@@ -83,18 +83,18 @@
 </div>
 
 <div class="row">
-  <h3>Genetic Markers</h3>
+  <h3>Genotype Data</h3>
 
-  <div class="col">
+  <div class="col" style="margin-bottom: 3px;">
     <a href="#" class="btn btn-primary">upload genotypes</a>
   </div>
 </div>
 
 <div class="row">
-  <table id="tbl-genetic-markers" class="table compact stripe cell-border"
-         data-genetic-markers='{{genetic_markers | tojson}}'>
+  <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>
@@ -113,6 +113,7 @@
         <td></td>
         <td></td>
         <td></td>
+        <td></td>
       </tr>
       {%endfor%}
     </tbody>
@@ -183,18 +184,41 @@
   $(function() {
       var dtGeneticMarkers = buildDataTable(
           "#tbl-genetic-markers",
-          (
-              $("#tbl-genetic-markers").length === 1 ?
-                  JSON.parse($("#tbl-genetic-markers").attr("data-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'},
-              {data: 'Chr'},
-              {data: 'Mb'},
-              {data: 'Source'},
-              {data: 'Source2'}
-          ]);
+              {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>