Update the previews on changing values and/or files.

1 files changed, 69 insertions, 2 deletions

diff --git a/uploader/templates/phenotypes/add-phenotypes-raw-files.html b/uploader/templates/phenotypes/add-phenotypes-raw-files.html
index ebacce2..833cd87 100644
--- a/uploader/templates/phenotypes/add-phenotypes-raw-files.html
+++ b/uploader/templates/phenotypes/add-phenotypes-raw-files.html
@@ -114,6 +114,7 @@
            name="phenotype-descriptions"
            class="form-control"
            type="file"
+           data-preview-table="tbl-preview-pheno-desc"
            required="required"  />
     <span class="form-text text-muted">
       Provide a file that contains only the phenotype descriptions,
@@ -128,6 +129,7 @@
            name="phenotype-data"
            class="form-control"
            type="file"
+           data-preview-table="tbl-preview-pheno-data"
            required="required"  />
     <span class="form-text text-muted">
       Provide a file that contains only the phenotype data. See
@@ -143,6 +145,7 @@
            name="phenotype-se"
            class="form-control"
            type="file"
+           data-preview-table="tbl-preview-pheno-se"
            required="required"  />
     <span class="form-text text-muted">
       Provide a file that contains only the standard errors for the phenotypes,
@@ -155,6 +158,7 @@
            name="phenotype-n"
            class="form-control"
            type="file"
+           data-preview-table="tbl-preview-pheno-n"
            required="required"  />
     <span class="form-text text-muted">
       Provide a file that contains only the number of samples/individuals used in
@@ -326,7 +330,7 @@
       $("#txt-file-na").trigger("change");
   });
 
-  var update_preview = (table, filedata, formdata) => {
+  var update_preview = (table, filedata, formdata, numrows) => {
       table.find("thead tr").remove()
       table.find(".data-row").remove();
       var linenum = 0;
@@ -334,7 +338,7 @@
       var tablebody = table.find("tbody");
       var numheadings = 0;
       filedata.forEach((line) => {
-          if(line.startsWith(formdata.comment_char)) {
+          if(line.startsWith(formdata.comment_char) || linenum >= numrows) {
               return false;
           }
           var row = $("<tr></tr>");
@@ -371,5 +375,68 @@
           remove_class(table.find(".data-row-template"), "hidden");
       }
   };
+
+  var preview_tables_to_elements_map = {
+      "#tbl-preview-pheno-desc": "#finput-phenotype-descriptions",
+      "#tbl-preview-pheno-data": "#finput-phenotype-data",
+      "#tbl-preview-pheno-se": "#finput-phenotype-se",
+      "#tbl-preview-pheno-n": "#finput-phenotype-n"
+  };
+
+  var files_metadata = () => {
+      return {
+          "separator": $("#txt-file-separator").val(),
+          "comment_char": $(
+              "#txt-file-comment-character").val(),
+          "na_strings": $("#txt-file-na").val()
+      }
+  };
+
+  var PREVIEW_ROWS = 5;
+
+  var handler_update_previews = (event) => {
+      Object.entries(preview_tables_to_elements_map).forEach((mapentry) => {
+          var element = $(mapentry[1]);
+          if(element.length === 1) {
+              read_first_n_lines(
+                  element[0],
+                  10,
+                  [(data) => {
+                      update_preview(
+                          $(mapentry[0]),
+                          data,
+                          files_metadata(),
+                          PREVIEW_ROWS);}]);
+          }
+      });
+  };
+
+  [
+      "#txt-file-separator",
+      "#txt-file-comment-character",
+      "#txt-file-na"
+  ].forEach((elementid) => {
+      $(elementid).on("change", handler_update_previews);
+  });
+
+  [
+      "#finput-phenotype-descriptions",
+      "#finput-phenotype-data",
+      "#finput-phenotype-se",
+      "#finput-phenotype-n"
+  ].forEach((elementid) => {
+      $(elementid).on("change", (event) => {
+          read_first_n_lines(
+              event.target,
+              10,
+              [(data) => {
+                  update_preview(
+                      $("#" + event.target.getAttribute("data-preview-table")),
+                      data,
+                      files_metadata(),
+                      PREVIEW_ROWS);
+              }]);
+      });
+  });
 </script>
 {%endblock%}