Changed initialize_show_trait_tables.js to include resizeable columns and deal with both primary/other tables in a single function

1 files changed, 136 insertions, 78 deletions

diff --git a/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js b/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
index 6ca92fb6..d8a1b006 100644
--- a/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
+++ b/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
@@ -15,6 +15,7 @@ build_columns = function() {
       'data': null,
       'orderDataType': "dom-checkbox",
       'searchable' : false,
+      'targets': 0,
       'render': function(data, type, row, meta) {
       return '<input type="checkbox" name="searchResult" class="checkbox edit_sample_checkbox" value="">'
       }
@@ -23,12 +24,14 @@ build_columns = function() {
       'title': "ID",
       'type': "natural",
       'searchable' : false,
+      'targets': 1,
       'data': "this_id"
     },
     {
       'title': "Sample",
       'type': "natural",
       'data': null,
+      'targets': 2,
       'render': function(data, type, row, meta) {
       return '<span class="edit_sample_sample_name">' + data.name + '</span>'
       }
@@ -38,6 +41,7 @@ build_columns = function() {
       'orderDataType': "dom-input",
       'type': "cust-txt",
       'data': null,
+      'targets': 3,
       'render': function(data, type, row, meta) {
         if (data.value == null) {
             return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" style="text-align: right;" class="trait_value_input edit_sample_value" value="x" size=' + js_data.max_digits[0] + '>'
@@ -48,12 +52,15 @@ build_columns = function() {
     }
   ];
 
+  attr_start = 4
   if (js_data.se_exists) {
+    attr_start += 2
     column_list.push(
       {
         'bSortable': false,
         'type': "natural",
         'data': null,
+        'targets': 4,
         'searchable' : false,
         'render': function(data, type, row, meta) {
         return '±'
@@ -64,6 +71,7 @@ build_columns = function() {
         'orderDataType': "dom-input",
         'type': "cust-txt",
         'data': null,
+        'targets': 5,
         'render': function(data, type, row, meta) {
           if (data.variance == null) {
               return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_se" value="x" size=6>'
@@ -73,24 +81,47 @@ build_columns = function() {
         }
       }
     );
-  }
 
-  if (js_data.has_num_cases === true) {
-    column_list.push(
-      {
-        'title': "<div style='text-align: right;'>N</div>",
-        'orderDataType': "dom-input",
-        'type': "cust-txt",
-        'data': null,
-        'render': function(data, type, row, meta) {
-          if (data.num_cases == null || data.num_cases == undefined) {
-              return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="x" size=4 maxlength=4>'
-          } else {
-              return '<input type="text" data-value="' + data.num_cases + '" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="' + data.num_cases + '" size=4 maxlength=4>'
+    if (js_data.has_num_cases === true) {
+      attr_start += 1
+      column_list.push(
+        {
+          'title': "<div style='text-align: right;'>N</div>",
+          'orderDataType': "dom-input",
+          'type': "cust-txt",
+          'data': null,
+          'targets': 6,
+          'render': function(data, type, row, meta) {
+            if (data.num_cases == null || data.num_cases == undefined) {
+                return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="x" size=4 maxlength=4>'
+            } else {
+                return '<input type="text" data-value="' + data.num_cases + '" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="' + data.num_cases + '" size=4 maxlength=4>'
+            }
           }
         }
-      }
-    );
+      );
+    }
+  }
+  else {
+    if (js_data.has_num_cases === true) {
+      attr_start += 1
+      column_list.push(
+        {
+          'title': "<div style='text-align: right;'>N</div>",
+          'orderDataType': "dom-input",
+          'type': "cust-txt",
+          'data': null,
+          'targets': 4,
+          'render': function(data, type, row, meta) {
+            if (data.num_cases == null || data.num_cases == undefined) {
+                return '<input type="text" data-value="x" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="x" size=4 maxlength=4>'
+            } else {
+                return '<input type="text" data-value="' + data.num_cases + '" data-qnorm="x" data-zscore="x" name="value:' + data.name + '" class="trait_value_input edit_sample_num_cases" value="' + data.num_cases + '" size=4 maxlength=4>'
+            }
+          }
+        }
+      );
+    }
   }
 
   attr_keys = Object.keys(js_data.attributes).sort((a, b) => (js_data.attributes[a].name.toLowerCase() > js_data.attributes[b].name.toLowerCase()) ? 1 : -1)
@@ -100,6 +131,7 @@ build_columns = function() {
         'title': "<div style='text-align: " + js_data.attributes[attr_keys[i]].alignment + "'>" + js_data.attributes[attr_keys[i]].name + "</div>",
         'type': "natural",
         'data': null,
+        'targets': attr_start + i,
         'render': function(data, type, row, meta) {
           attr_name = Object.keys(data.extra_attributes).sort()[meta.col - data.first_attr_col]
 
@@ -119,14 +151,35 @@ build_columns = function() {
   return column_list
 }
 
-var primary_table = $('#samples_primary').DataTable( {
+columnDefs = build_columns()
+
+loadDataTable(first_run=true, table_id="samples_primary", table_data=js_data['sample_lists'][0])
+if (js_data.sample_lists.length > 1){
+  loadDataTable(first_run=true, table_id="samples_other", table_data=js_data['sample_lists'][1])
+}
+
+function loadDataTable(first_run=false, table_id, table_data){
+
+  console.log("COL DEFS:", columnDefs)
+
+  if (!first_run){
+    setUserColumnsDefWidths(table_id);
+  }
+
+  if (table_id == "samples_primary"){
+    table_type = "Primary"
+  } else {
+    table_type = "Other"
+  }
+
+  table_settings = {
     'initComplete': function(settings, json) {
     $('.edit_sample_value').change(function() {
         edit_data_change();
     });
     },
     'createdRow': function ( row, data, index ) {
-      $(row).attr('id', "Primary_" + data.this_id)
+      $(row).attr('id', table_type + "_" + data.this_id)
       $(row).addClass("value_se");
       if (data.outlier) {
         $(row).addClass("outlier");
@@ -154,75 +207,80 @@ var primary_table = $('#samples_primary').DataTable( {
         $('td', row).eq(attribute_start_pos + i + 1).attr("style", "text-align: " + js_data.attributes[attr_keys[i]].alignment + "; padding-top: 2px; padding-bottom: 0px;")
       }
     },
-    'data': js_data['sample_lists'][0],
-    'columns': build_columns(),
-    'order': [[1, "asc"]],
-    'sDom': "Ztr",
-    'autoWidth': true,
-    'orderClasses': true,
+    'data': table_data,
+    'columns': columnDefs,
+    "order": [[1, "asc" ]],
+    "sDom": "iti",
+    "destroy": true,
+    "autoWidth": first_run,
+    "deferRender": true,
+    "bSortClasses": false,
     "scrollY": "100vh",
-    'scroller':  true,
-    'scrollCollapse': true
-} );
+    "scrollCollapse": true,
+    "scroller":  true,
+    "iDisplayLength": -1,
+    "initComplete": function (settings) {
+      //Add JQueryUI resizable functionality to each th in the ScrollHead table
+      $('#' + table_id + '_wrapper .dataTables_scrollHead thead th').resizable({
+        handles: "e",
+        alsoResize: '#' + table_id + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
+        resize: function( event, ui ) {
+          width_change = ui.size.width - ui.originalSize.width;
+        },
+        stop: function () {
+          saveColumnSettings(table_id, the_table);
+          loadDataTable(first_run=false, table_id, table_data);
+        }
+      });
+    }
+  }
 
-primary_table.draw(); //ZS: This makes the table adjust its height properly on initial load
+  var the_table = $('#' + table_id).DataTable(table_settings);
 
-primary_table.on( 'order.dt search.dt draw.dt', function () {
-    primary_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
-    cell.innerHTML = i+1;
-    } );
-} ).draw();
+  the_table.draw(); //ZS: This makes the table adjust its height properly on initial load
 
-$('#primary_searchbox').on( 'keyup', function () {
-    primary_table.search($(this).val()).draw();
-} );
+  the_table.on( 'order.dt search.dt draw.dt', function () {
+      the_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
+      cell.innerHTML = i+1;
+      } );
+  } ).draw();
 
-if (js_data.sample_lists.length > 1){
-  var other_table = $('#samples_other').DataTable( {
-      'initComplete': function(settings, json) {
-      $('.edit_sample_value').change(function() {
-          edit_data_change();
-      });
-      },
-      'createdRow': function ( row, data, index ) {
-        $(row).attr('id', "Primary_" + data.this_id)
-        $(row).addClass("value_se");
-        if (data.outlier) {
-          $(row).addClass("outlier");
-        }
-        $('td', row).eq(1).addClass("column_name-Index")
-        $('td', row).eq(2).addClass("column_name-Sample")
-        $('td', row).eq(3).addClass("column_name-Value")
-        if (js_data.se_exists) {
-          $('td', row).eq(5).addClass("column_name-SE")
-          if (js_data.has_num_cases === true) {
-            $('td', row).eq(6).addClass("column_name-num_cases")
-          } else {
-            if (js_data.has_num_cases === true) {
-              $('td', row).eq(4).addClass("column_name-num_cases")
-            }
-          }
+  if (!first_run){
+    $('#' + table_type.toLowerCase() + '_container').css("width", String($('#' + table_id).width() + width_change + 17) + "px"); //ZS : Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
+
+    let checked_rows = get_checked_rows(table_id);
+    if (checked_rows.length > 0){
+      recheck_rows(the_table, checked_rows);
+    }
+  }
+
+  if (first_run){
+    $('#' + table_type.toLowerCase() + '_container').css("width", String($('#' + table_id).width() + 17) + "px");
+  }
+
+  $('#' + table_type.toLowerCase() + '_searchbox').on( 'keyup', function () {
+    the_table.search($(this).val()).draw();
+  } );
+
+  $('.toggle-vis').on('click', function (e) {
+    e.preventDefault();
+
+    function toggle_column(column) {
+        //ZS: Toggle column visibility
+        column.visible( ! column.visible() );
+        if (column.visible()){
+            $(this).removeClass("active");
         } else {
-          if (js_data.has_num_cases === true) {
-            $('td', row).eq(4).addClass("column_name-num_cases")
-          }
+            $(this).addClass("active");
         }
+    }
 
-        for (i=0; i < attr_keys.length; i++) {
-          $('td', row).eq(attribute_start_pos + i + 1).addClass("column_name-" + js_data.attributes[attr_keys[i]].name)
-          $('td', row).eq(attribute_start_pos + i + 1).attr("style", "text-align: " + js_data.attributes[attr_keys[i]].alignment + "; padding-top: 2px; padding-bottom: 0px;")
-        }
-      },
-      'data': js_data['sample_lists'][1],
-      'columns': build_columns(),
-      'order': [[1, "asc"]],
-      'sDom': "Ztr",
-      'autoWidth': true,
-      'orderClasses': true,
-      "scrollY": "100vh",
-      'scroller':  true,
-      'scrollCollapse': true
+    // Get the column API object
+    var target_cols = $(this).attr('data-column').split(",")
+    for (let i = 0; i < target_cols.length; i++){
+        var column = the_table.column( target_cols[i] );
+        toggle_column(column);
+    }
   } );
 
-  other_table.draw(); //ZS: This makes the table adjust its height properly on initial load
 }