From e4efc444d651c09de102c12d77d114431d459d33 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Wed, 16 Sep 2026 13:47:24 -0500
Subject: Add handlers for changes to the CSV fields.

---
 .../genotypes/add-genotypes-records-csv.html       | 47 +++++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/uploader/templates/genotypes/add-genotypes-records-csv.html b/uploader/templates/genotypes/add-genotypes-records-csv.html
index 10a5427..ff78f52 100644
--- a/uploader/templates/genotypes/add-genotypes-records-csv.html
+++ b/uploader/templates/genotypes/add-genotypes-records-csv.html
@@ -1,6 +1,8 @@
 {%extends "genotypes/add-genotypes-records-base.html"%}
 {%from "phenotypes/macro-display-preview-table.html" import display_preview_table%}
-{%from "macro-csv-fields.html" import display_csv_fields, display_csv_fields_documentation%}
+{%from "macro-csv-fields.html" import display_csv_fields%}
+{%from "macro-csv-fields.html" import add_csv_fields_event_handlers%}
+{%from "macro-csv-fields.html" import display_csv_fields_documentation%}
 {%from "phenotypes/macro-display-resumable-elements.html" import display_resumable_elements%}
 
 {%block frm_add_genotypes_records_elements%}
@@ -57,18 +59,59 @@
 
 {%block javascript%}
 {{super()}}
+
 <script src="{{url_for('base.node_modules',
              filename='resumablejs/resumable.js')}}"></script>
 <script src="/static/js/files.js"></script>
 
+{{add_csv_fields_event_handlers()}}
+
 <script type="text/javascript">
   $(function(evt) {
-      makeResumableObject(
+      var NUM_READ_LINES = 100;
+      var NUM_PREVIEW_ROWS = 10;
+
+      $("#finput-genotypes-records-file").on("change", function(event) {
+              readFirstNLines(
+                  event.target.files[0],
+                  NUM_READ_LINES,
+                  [makePreviewUpdater($("#tbl-preview-geno-records"))]);
+      });
+
+      var r = makeResumableObject(
           form_id="frm-add-genotypes-records",
           file_input_id="finput-genotypes-records-file",
           resumable_element_id="resumable-genotypes-records-file",
           preview_table_id="tbl-preview-geno-records",
           filetypes=["csv", "tsv", "txt", "geno"]);
+
+      var handler_update_previews = function(event) {
+          var preview_table = $("#tbl-preview-geno-records");
+          var file_input = $("#finput-genotypes-records-file");
+          if(file_input[0].files.length > 0) {
+              readFirstNLines(
+                  file_input[0].files[0],
+                  NUM_READ_LINES,
+                  [makePreviewUpdater(preview_table, NUM_PREVIEW_ROWS)]);
+          }
+
+          if(typeof(r) !== "undefined") {
+              if(r.files.length > 0) {
+                  readFirstNLines(
+                      r.files[0].file,
+                      NUM_READ_LINES,
+                      [makePreviewUpdater(preview_table, NUM_PREVIEW_ROWS)]);
+              }
+          }
+      };
+
+      [
+          "#txt-file-separator",
+          "#txt-file-comment-character",
+          "#txt-file-na"
+      ].forEach((elementid) => {
+          $(elementid).on("change", handler_update_previews);
+      });
   });
 </script>
 {%endblock%}
-- 
cgit 1.4.1