From 2c61890e62a1db764755cd049242adadbb9d7be4 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Thu, 10 Sep 2026 17:39:51 -0500
Subject: Enable use of DataTables for UI.

---
 uploader/genotypes/views.py             | 11 ++++--
 uploader/templates/genotypes/index.html | 70 ++++++++++++++++++++++++++++++++-
 2 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/uploader/genotypes/views.py b/uploader/genotypes/views.py
index 2a0e0f8..8c0795d 100644
--- a/uploader/genotypes/views.py
+++ b/uploader/genotypes/views.py
@@ -3,6 +3,7 @@ import logging
 
 from MySQLdb.cursors import DictCursor
 from pymonad.either import Left, Right, Either
+from gn_libs.requests import request_json
 from gn_libs.mysqldb import database_connection
 from werkzeug.exceptions import UnsupportedMediaType
 from flask import (flash,
@@ -37,15 +38,16 @@ render_template = make_template_renderer("genotypes")
 
 @genotypesbp.route(
     "/<int:species_id>/populations/<int:population_id>/genotypes",
-    methods=["GET"])
+    methods=["GET", "POST"])
 @require_login
 @with_population(species_redirect_uri="species.list_species",
                  redirect_uri="species.populations.list_species_populations")
 def index(species: dict, population: dict, **kwargs):# pylint: disable=[unused-argument]
     """Entry-point to the genotypes management section."""
     with database_connection(app.config["SQL_URI"]) as conn:
-        offset = int(request.args.get("start", "0"))
-        number_of_records = int(request.args.get("count", "10"))
+        form = request_json()
+        offset = int(form.get("start", "0"))
+        number_of_records = int(form.get("length", "10"))
         _markers, _total_markers, = genotype_markers(
             conn, species["SpeciesId"], population["Id"])
         _genotype_records, _count = genotype_records(
@@ -68,7 +70,8 @@ def index(species: dict, population: dict, **kwargs):# pylint: disable=[unused-a
                     "genotype_records": _genotype_records,
                     "total_genotype_records": _count,
                     "fetched_genotype_records": len(_genotype_records),
-                    "sample_order": _samples
+                    "samples_order": _samples,
+                    "draw": int(request.args.get("draw", "0"))
                 }), 200)
 
         if "text/html" in request.headers["Accept"]:
diff --git a/uploader/templates/genotypes/index.html b/uploader/templates/genotypes/index.html
index 1d44e26..6becd23 100644
--- a/uploader/templates/genotypes/index.html
+++ b/uploader/templates/genotypes/index.html
@@ -26,7 +26,7 @@
   </div>
 
   <div class="table-responsive">
-    <table id="tbl-genotype-records" class="table">
+    <table id="tbl-genotype-records" class="table compact stripe cell-border">
       <thead>
         <tr>
           <th title="">#</th>
@@ -127,3 +127,71 @@
 {%endif%}
 
 {%endblock%}
+
+
+{%block javascript%}
+<script type="text/javascript">
+  $(function() {
+      var genoRecordsUrl = "{{url_for('species.populations.genotypes.index', species_id=species.SpeciesId, population_id=population.Id)}}";
+
+      var dtGenotypeRecords = false;
+      fetch(genoRecordsUrl, {
+          method: "POST",
+          headers: {
+              "Accept": "application/json",
+              "Content-Type": "application/json"
+          },
+          body: JSON.stringify({})
+      })
+          .then(response => response.json())
+          .then(recordsData => {
+              var records = recordsData.genotype_records;
+              var samples = recordsData.samples_order;
+              var columns = [
+                  {
+                      data: function(record) {
+                          return `<input type="checkbox"`
+                              + `id="chk-geno-record-` + record.Id + `"`
+                              + `name="geno_record_id"`
+                              + `value="` + record.Id + `"`
+                              + ` />`;
+                      }
+                  },
+                  {data: "index"},
+                  {data: "Name"},
+                  {data: "Chr"},
+                  {data: "cM"},
+                  {data: "Mb"}
+              ].concat(samples.map((sample) => {
+                  return {data: (record) => record.data[sample]};
+              }));
+
+              dtGenotypeRecords = buildDataTable(
+                  "#tbl-genotype-records",
+                  [],
+                  columns,
+                  {
+                      serverSide: true,
+                      ajax: {
+                          url: genoRecordsUrl,
+                          dataSrc: "genotype_records",
+                          recordsTotal: "total_genotype_records",
+                          recordsFiltered: "fetched_genotype_records"
+                      },
+                      paging: true,
+                      scroller: true,
+                      scrollY: "50vh",
+                      scrollCollapse: false,
+                      layout: {
+                          top: "info",
+                          topStart: null,
+                          topEnd: null,
+                          bottom: null,
+                          bottomStart: null,
+                          bottomEnd: null
+                      }
+                  });
+          });
+  });
+</script>
+{%endblock%}
-- 
cgit 1.4.1