From 20089ec8d1820ebecc5bb9de3100d98990f1e1a4 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 21:44:55 +0000
Subject: Use create_datatable.js to create trait page sample data tables +
 change most variables to camelCase

---
 .../new/javascript/initialize_show_trait_tables.js | 256 ++++++++++++---------
 1 file changed, 153 insertions(+), 103 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 e1026f8c..868f3ada 100644
--- a/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
+++ b/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
@@ -1,16 +1,16 @@
-// ZS: This file initializes the tables for the show_trait page
+// This file initializes the tables for the show_trait page
 
-// ZS: This variable is just created to get the column position of the first case attribute (if case attributes exist), since it's needed to set the row classes in createdRow for the DataTable
-var attribute_start_pos = 3;
+// This variable is just created to get the column position of the first case attribute (if case attributes exist), since it's needed to set the row classes in createdRow for the DataTable
+var attributeStartPos = 3;
 if (js_data.se_exists) {
-  attribute_start_pos += 2;
+  attributeStartPos += 2;
 }
 if (js_data.has_num_cases === true) {
-  attribute_start_pos += 1;
+  attributeStartPos += 1;
 }
 
-build_columns = function() {
-  let column_list = [
+buildColumns = function() {
+  let columnList = [
     {
       'data': null,
       'orderDataType': "dom-checkbox",
@@ -56,10 +56,10 @@ build_columns = function() {
     }
   ];
 
-  attr_start = 4
+  attrStart = 4
   if (js_data.se_exists) {
-    attr_start += 2
-    column_list.push(
+    attrStart += 2
+    columnList.push(
       {
         'bSortable': false,
         'type': "natural",
@@ -89,8 +89,8 @@ build_columns = function() {
     );
 
     if (js_data.has_num_cases === true) {
-      attr_start += 1
-      column_list.push(
+      attrStart += 1
+      columnList.push(
         {
           'title': "<div style='text-align: right;'>N</div>",
           'orderDataType': "dom-input",
@@ -111,8 +111,8 @@ build_columns = function() {
   }
   else {
     if (js_data.has_num_cases === true) {
-      attr_start += 1
-      column_list.push(
+      attrStart += 1
+      columnList.push(
         {
           'title': "<div style='text-align: right;'>N</div>",
           'orderDataType': "dom-input",
@@ -132,14 +132,14 @@ build_columns = function() {
     }
   }
 
-  attr_keys = Object.keys(js_data.attributes).sort((a, b) => (js_data.attributes[a].id > js_data.attributes[b].id) ? 1 : -1)
-  for (i = 0; i < attr_keys.length; i++){
-    column_list.push(
+  attrKeys = Object.keys(js_data.attributes).sort((a, b) => (js_data.attributes[a].id > js_data.attributes[b].id) ? 1 : -1)
+  for (i = 0; i < attrKeys.length; i++){
+    columnList.push(
       {
-        'title': "<div title='" + js_data.attributes[attr_keys[i]].description + "' style='text-align: " + js_data.attributes[attr_keys[i]].alignment + "'>" + js_data.attributes[attr_keys[i]].name + "</div>",
+        'title': "<div title='" + js_data.attributes[attrKeys[i]].description + "' style='text-align: " + js_data.attributes[attrKeys[i]].alignment + "'>" + js_data.attributes[attrKeys[i]].name + "</div>",
         'type': "natural",
         'data': null,
-        'targets': attr_start + i,
+        'targets': attrStart + i,
         'render': function(data, type, row, meta) {
           attr_name = Object.keys(data.extra_attributes).sort((a, b) => (parseInt(a) > parseInt(b)) ? 1 : -1)[meta.col - data.first_attr_col]
 
@@ -156,30 +156,28 @@ build_columns = function() {
       }
     )
   }
-  return column_list
+  return columnList
 }
 
-columnDefs = build_columns()
+columnDefs = buildColumns();
 
-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])
+tableIds = ["samples_primary"]
+if (js_data.sample_lists.length > 1) {
+  tableIds.push("samples_other")
 }
 
-function loadDataTable(first_run=false, table_id, table_data){
-  if (!first_run){
-    setUserColumnsDefWidths(table_id);
-  }
+for (var i = 0; i < tableIds.length; i++) {
+  tableId = tableIds[i]
 
-  if (table_id == "samples_primary"){
-    table_type = "Primary"
+  if (tableId == "samples_primary"){
+    tableType = "Primary"
   } else {
-    table_type = "Other"
+    tableType = "Other"
   }
 
-  table_settings = {
+  tableSettings = {
     'createdRow': function ( row, data, index ) {
-      $(row).attr('id', table_type + "_" + data.this_id)
+      $(row).attr('id', tableType + "_" + data.this_id)
       $(row).addClass("value_se");
       if (data.outlier) {
         $(row).addClass("outlier");
@@ -202,85 +200,137 @@ function loadDataTable(first_run=false, table_id, table_data){
           $('td', row).eq(4).addClass("column_name-num_cases")
         }
       }
-
-      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;")
+  
+      for (j=0; j < attrKeys.length; j++) {
+        $('td', row).eq(attributeStartPos + j + 1).addClass("column_name-" + js_data.attributes[attrKeys[j]].name)
+        $('td', row).eq(attributeStartPos + j + 1).attr("style", "text-align: " + js_data.attributes[attrKeys[j]].alignment + "; padding-top: 2px; padding-bottom: 0px;")
       }
-    },
-    'data': table_data,
-    'columns': columnDefs,
-    "order": [[1, "asc" ]],
-    "sDom": "iti",
-    "destroy": true,
-    "autoWidth": false,
-    "bSortClasses": false,
-    "scrollY": "100vh",
-    "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);
-        }
-      });
     }
   }
 
-  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
+  create_table(tableId, js_data['sample_lists'][i], columnDefs, tableSettings);
+}
 
-    let checked_rows = get_checked_rows(table_id);
-    the_table = $('#' + table_id).DataTable(table_settings);
-    if (checked_rows.length > 0){
-      recheck_rows(the_table, checked_rows);
-    }
-  } else {
-    the_table = $('#' + table_id).DataTable(table_settings);
-    the_table.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();
+// loadDataTable(firstRun=true, tableId="samples_primary", tableData=js_data['sample_lists'][0])
+// if (js_data.sample_lists.length > 1){
+//   loadDataTable(firstRun=true, tableId="samples_other", tableData=js_data['sample_lists'][1])
+// }
 
-  if (first_run){
-    $('#' + table_type.toLowerCase() + '_container').css("width", String($('#' + table_id).width() + 17) + "px");
-  }
+// function loadDataTable(firstRun=false, tableId, tableData){
+//   if (!firstRun){
+//     setUserColumnsDefWidths(tableId);
+//   }
 
-  $('#' + table_type.toLowerCase() + '_searchbox').on( 'keyup', function () {
-    the_table.search($(this).val()).draw();
-  } );
+//   if (tableId == "samples_primary"){
+//     tableType = "Primary"
+//   } else {
+//     tableType = "Other"
+//   }
 
-  $('.toggle-vis').on('click', function (e) {
-    e.preventDefault();
+//   tableSettings = {
+//     'createdRow': function ( row, data, index ) {
+//       $(row).attr('id', tableType + "_" + data.this_id)
+//       $(row).addClass("value_se");
+//       if (data.outlier) {
+//         $(row).addClass("outlier");
+//         $(row).attr("style", "background-color: orange;");
+//       }
+//       $('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")
+//           }
+//         }
+//       } else {
+//         if (js_data.has_num_cases === true) {
+//           $('td', row).eq(4).addClass("column_name-num_cases")
+//         }
+//       }
 
-    function toggle_column(column) {
-        //ZS: Toggle column visibility
-        column.visible( ! column.visible() );
-        if (column.visible()){
-            $(this).removeClass("active");
-        } else {
-            $(this).addClass("active");
-        }
-    }
+//       for (i=0; i < attrKeys.length; i++) {
+//         $('td', row).eq(attributeStartPos + i + 1).addClass("column_name-" + js_data.attributes[attrKeys[i]].name)
+//         $('td', row).eq(attributeStartPos + i + 1).attr("style", "text-align: " + js_data.attributes[attrKeys[i]].alignment + "; padding-top: 2px; padding-bottom: 0px;")
+//       }
+//     },
+//     'data': tableData,
+//     'columns': columnDefs,
+//     "order": [[1, "asc" ]],
+//     "sDom": "iti",
+//     "destroy": true,
+//     "autoWidth": false,
+//     "bSortClasses": false,
+//     "scrollY": "100vh",
+//     "scrollCollapse": true,
+//     "scroller":  true,
+//     "iDisplayLength": -1,
+//     "initComplete": function (settings) {
+//       //Add JQueryUI resizable functionality to each th in the ScrollHead table
+//       $('#' + tableId + '_wrapper .dataTables_scrollHead thead th').resizable({
+//         handles: "e",
+//         alsoResize: '#' + tableId + '_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(tableId, theTable);
+//           loadDataTable(firstRun=false, tableId, tableData);
+//         }
+//       });
+//     }
+//   }
 
-    // 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);
-    }
-  } );
+//   if (!firstRun){
+//     $('#' + tableType.toLowerCase() + '_container').css("width", String($('#' + tableId).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(tableId);
+//     theTable = $('#' + tableId).DataTable(tableSettings);
+//     if (checked_rows.length > 0){
+//       recheck_rows(theTable, checked_rows);
+//     }
+//   } else {
+//     theTable = $('#' + tableId).DataTable(tableSettings);
+//     theTable.draw();
+//   }
+
+//   theTable.on( 'order.dt search.dt draw.dt', function () {
+//     theTable.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
+//     cell.innerHTML = i+1;
+//     } );
+//   } ).draw();
+
+//   if (firstRun){
+//     $('#' + tableType.toLowerCase() + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
+//   }
+
+//   $('#' + tableType.toLowerCase() + '_searchbox').on( 'keyup', function () {
+//     theTable.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 {
+//             $(this).addClass("active");
+//         }
+//     }
+
+//     // Get the column API object
+//     var target_cols = $(this).attr('data-column').split(",")
+//     for (let i = 0; i < target_cols.length; i++){
+//         var column = theTable.column( target_cols[i] );
+//         toggle_column(column);
+//     }
+//   } );
+// }
-- 
cgit v1.2.3