From 2168d7942dc8db8a92689042e4028904e84cb046 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 19 May 2022 20:02:59 +0000
Subject: Include json version of collection trait list, so it can be passed
 directly to DataTables

---
 wqflask/wqflask/collect.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/wqflask/wqflask/collect.py b/wqflask/wqflask/collect.py
index 891da437..b46e1859 100644
--- a/wqflask/wqflask/collect.py
+++ b/wqflask/wqflask/collect.py
@@ -285,6 +285,7 @@ def view_collection():
     else:
         return render_template(
             "collections/view.html",
+            traits_json=json_version,
             trait_info_str=trait_info_str,
             **collection_info)
 
-- 
cgit v1.2.3


From 03a92ba1b2ed0e79a74e5a791fdecf73304ee2e0 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 16 Jun 2022 20:43:33 +0000
Subject: Initial commit for create_datatable.js

This file will contain the generic function for initializing datatables,
that will take the table ID, table data, column definitions, and custom
settings as input (custom settings being additional DataTables settings
or settings differing from the defaults)
---
 .../static/new/javascript/create_datatable.js      | 92 ++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 wqflask/wqflask/static/new/javascript/create_datatable.js

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
new file mode 100644
index 00000000..18a4f9d7
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -0,0 +1,92 @@
+create_table = function(tableId, tableData, columnDefs, customSettings) {
+
+    loadDataTable(tableId=tableId, tableFata=tableData, tableSettings=tableSettings, firstRun=true)
+
+    function loadDataTable(tableId, tableData, tableSettings, firstRun=false){
+        if (!firstRun){
+            setUserColumnsDefWidths(tableId);
+        }
+
+        tableSettings = {
+            'data': tableData,
+            'columns': columnDefs,
+            "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: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
+                    resize: function( event, ui ) {
+                        widthChange = ui.size.width - ui.originalSize.width;
+                    },
+                    stop: function () {
+                        saveColumnSettings(table_id, the_table);
+                        loadDataTable(first_run=false, table_id, table_data);
+                    }
+                });
+            }
+        }
+
+        // Replace default settings with custom settings or add custom settings if not already set in default settings
+        $.each(customSettings, function(key, value)) {
+            tableSettings[key] = value
+        }
+    }
+
+    if (!firstRun){
+        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + widthChange + 17) + "px"); // Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
+
+        let checkedRows = getCheckedRows(tableId);
+        theTable = $('#' + tableId).DataTable(tableSettings);
+        if (checkedRows.length > 0){
+            recheckRows(theTable, checkedRows);
+        }
+    } 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){
+        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
+    }
+
+    $('#' + tableId + '_searchbox').on( 'keyup', function () {
+        theTable.search($(this).val()).draw();
+    } );
+
+    $('.toggle-vis').on('click', function (e) {
+        e.preventDefault();
+
+        function toggleColumn(column) {
+            // Toggle column visibility
+            column.visible( ! column.visible() );
+            if (column.visible()){
+                $(this).removeClass("active");
+            } else {
+                $(this).addClass("active");
+            }
+        }
+
+        // Get the column API object
+        var targetCols = $(this).attr('data-column').split(",")
+        for (let i = 0; i < targetCols.length; i++){
+            var column = theTable.column( target_cols[i] );
+            toggleColumn(column);
+        }
+    } );
+
+    }
+}
-- 
cgit v1.2.3


From 251aabe1c2e5712a7bd587fe393c408bf5dc4851 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 16 Jun 2022 20:47:04 +0000
Subject: Replace DataTables code in collection view page with call to new
 create_table.js

---
 wqflask/wqflask/templates/collections/view.html | 75 +++++++++----------------
 1 file changed, 27 insertions(+), 48 deletions(-)

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 39df161d..3ebee77c 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -181,6 +181,8 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.colVis.min.js') }}"></script>
     <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
 
     <script type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script>
 
@@ -190,55 +192,32 @@
 
     <script language="javascript" type="text/javascript">
         $(document).ready( function () {
-            $('#trait_table').dataTable( {
-                'drawCallback': function( settings ) {
-                      $('#trait_table tr').off().on("click", function(event) {
-                        if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                          var obj =$(this).find('input');
-                          obj.prop('checked', !obj.is(':checked'));
-                        }
-                        if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                          $(this).removeClass("selected")
-                        } else if (event.target.tagName.toLowerCase() !== 'a') {
-                          $(this).addClass("selected")
-                        }
-                        change_buttons()
-                      });
-                },
-                "columns": [
-                    {
-                        "orderDataType": "dom-checkbox",
-                        "orderSequence": [ "desc", "asc"],
-                        "width": 10
-                    },
-                    { "type": "natural", "width": 50 },
-                    { "type": "natural" },
-                    { 'type': "natural-minus-na", "width": 120 },
-                    { "type": "natural" },
-                    { "type": "natural"  },
-                    { "type": "natural", "width": 125 },
-                    { "type": "natural", "width": 60 },
-                    { "type": "natural", "width": 60 },
-                    { "type": "natural", "width": 125 },
-                    { "type": "natural", "width": 85 }
-                ],
-                "order": [[1, "asc" ]],
-                buttons: [
-                    {
-                        extend: 'columnsToggle',
-                        columns: ':not(:first-child)',
-                        postfixButtons: [ 'colvisRestore' ]
-                    }
-                ],
-                "sDom": "BZRtr",
-                "iDisplayLength": -1,
-                "autoWidth": false,
-                "bDeferRender": true,
-                "bSortClasses": false,
-                "paging": false,
-                "orderClasses": true
-            } );
 
+            table_id = "trait_table"
+
+            column_defs = [
+                {
+                    "orderDataType": "dom-checkbox",
+                    "orderSequence": [ "desc", "asc"],
+                    "width": 10
+                },
+                { "type": "natural", "width": 50 },
+                { "type": "natural" },
+                { 'type': "natural-minus-na", "width": 120 },
+                { "type": "natural" },
+                { "type": "natural"  },
+                { "type": "natural", "width": 125 },
+                { "type": "natural", "width": 60 },
+                { "type": "natural", "width": 60 },
+                { "type": "natural", "width": 125 },
+                { "type": "natural", "width": 85 }
+            ]
+
+            table_settings = {
+                "order": [[1, "asc" ]]
+            }
+
+            create_table(table_id, column_defs, table_settings)
 
             submit_special = function(url) {
                 $("#collection_form").attr("action", url);
-- 
cgit v1.2.3


From b1decd7288bb969d827ee04701df00e539935560 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 16 Jun 2022 20:48:40 +0000
Subject: Change table_functions.js variables to camelCase

---
 .../static/new/javascript/table_functions.js       | 42 +++++++++++-----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/table_functions.js b/wqflask/wqflask/static/new/javascript/table_functions.js
index 745563c2..22732397 100644
--- a/wqflask/wqflask/static/new/javascript/table_functions.js
+++ b/wqflask/wqflask/static/new/javascript/table_functions.js
@@ -1,36 +1,36 @@
-recheck_rows = function(the_table, checked_rows){
-  //ZS: This is meant to recheck checkboxes after columns are resized
-  check_cells = the_table.column(0).nodes().to$();
-  for (let i = 0; i < check_cells.length; i++) {
-    if (checked_rows.includes(i)){
-      check_cells[i].childNodes[0].checked = true;
+recheckRows = function(theTable, checkedRows){
+  // This is meant to recheck checkboxes after columns are resized
+  checkCells = theTable.column(0).nodes().to$();
+  for (let i = 0; i < checkCells.length; i++) {
+    if (checkedRows.includes(i)){
+      checkCells[i].childNodes[0].checked = true;
     }
   }
 
-  check_rows = trait_table.rows().nodes();
-  for (let i =0; i < check_rows.length; i++) {
-    if (checked_rows.includes(i)){
-      check_rows[i].classList.add("selected")
+  checkRows = traitTable.rows().nodes();
+  for (let i =0; i < checkRows.length; i++) {
+    if (checkedRows.includes(i)){
+      checkRows[i].classList.add("selected")
     }
   }
 }
 
-get_checked_rows = function(table_id){
-  let checked_rows = []
-  $("#" + table_id + " input").each(function(index){
+getCheckedRows = function(tableId){
+  let checkedRows = []
+  $("#" + tableId + " input").each(function(index){
     if ($(this).prop("checked") == true){
-      checked_rows.push(index);
+      checkedRows.push(index);
     }
   });
 
-  return checked_rows
+  return checkedRows
 }
 
-function setUserColumnsDefWidths(table_id) {
+function setUserColumnsDefWidths(tableId) {
   var userColumnDef;
 
   // Get the settings for this table from localStorage
-  var userColumnDefs = JSON.parse(localStorage.getItem(table_id)) || [];
+  var userColumnDefs = JSON.parse(localStorage.getItem(tableId)) || [];
 
   if (userColumnDefs.length === 0 ) return;
 
@@ -59,11 +59,11 @@ function setUserColumnsDefWidths(table_id) {
   });
 }
 
-function saveColumnSettings(table_id, trait_table) {
-  var userColumnDefs = JSON.parse(localStorage.getItem(table_id)) || [];
+function saveColumnSettings(tableId, traitTable) {
+  var userColumnDefs = JSON.parse(localStorage.getItem(tableId)) || [];
   var width, header, existingSetting; 
 
-  trait_table.columns().every( function ( targets ) {
+  traitTable.columns().every( function ( targets ) {
     // Check if there is a setting for this column in localStorage
     existingSetting = userColumnDefs.findIndex( function(column) { return column.targets === targets;});
 
@@ -84,5 +84,5 @@ function saveColumnSettings(table_id, trait_table) {
   });
 
   // Save (or update) the settings in localStorage
-  localStorage.setItem(table_id, JSON.stringify(userColumnDefs));
+  localStorage.setItem(tableId, JSON.stringify(userColumnDefs));
 }
-- 
cgit v1.2.3


From df02c35cc781c58e169c3574d78e00d1fea499f4 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 18:55:15 +0000
Subject: Pass table data to collections/view template and create_table.js

---
 wqflask/wqflask/templates/collections/view.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 3ebee77c..6d0e3edd 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -188,8 +188,9 @@
 
     <script type="text/javascript"
 	    src="/static/new/javascript/partial_correlations.js"></script>
-
-
+    <script type='text/javascript'>
+        var traits_json = {{ traits_json|safe }};
+    </script>
     <script language="javascript" type="text/javascript">
         $(document).ready( function () {
 
@@ -217,7 +218,7 @@
                 "order": [[1, "asc" ]]
             }
 
-            create_table(table_id, column_defs, table_settings)
+            create_table(table_id, traits_json, column_defs, table_settings)
 
             submit_special = function(url) {
                 $("#collection_form").attr("action", url);
-- 
cgit v1.2.3


From a4836e8d5d79660c57099a23d306ff2b2f13be06 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 18:57:32 +0000
Subject: Change create_datatable.js from CRLF to LF + fix a couple syntax bugs

---
 .../static/new/javascript/create_datatable.js      | 182 ++++++++++-----------
 1 file changed, 90 insertions(+), 92 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index 18a4f9d7..4c9d5c78 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -1,92 +1,90 @@
-create_table = function(tableId, tableData, columnDefs, customSettings) {
-
-    loadDataTable(tableId=tableId, tableFata=tableData, tableSettings=tableSettings, firstRun=true)
-
-    function loadDataTable(tableId, tableData, tableSettings, firstRun=false){
-        if (!firstRun){
-            setUserColumnsDefWidths(tableId);
-        }
-
-        tableSettings = {
-            'data': tableData,
-            'columns': columnDefs,
-            "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: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
-                    resize: function( event, ui ) {
-                        widthChange = ui.size.width - ui.originalSize.width;
-                    },
-                    stop: function () {
-                        saveColumnSettings(table_id, the_table);
-                        loadDataTable(first_run=false, table_id, table_data);
-                    }
-                });
-            }
-        }
-
-        // Replace default settings with custom settings or add custom settings if not already set in default settings
-        $.each(customSettings, function(key, value)) {
-            tableSettings[key] = value
-        }
-    }
-
-    if (!firstRun){
-        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + widthChange + 17) + "px"); // Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
-
-        let checkedRows = getCheckedRows(tableId);
-        theTable = $('#' + tableId).DataTable(tableSettings);
-        if (checkedRows.length > 0){
-            recheckRows(theTable, checkedRows);
-        }
-    } 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){
-        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
-    }
-
-    $('#' + tableId + '_searchbox').on( 'keyup', function () {
-        theTable.search($(this).val()).draw();
-    } );
-
-    $('.toggle-vis').on('click', function (e) {
-        e.preventDefault();
-
-        function toggleColumn(column) {
-            // Toggle column visibility
-            column.visible( ! column.visible() );
-            if (column.visible()){
-                $(this).removeClass("active");
-            } else {
-                $(this).addClass("active");
-            }
-        }
-
-        // Get the column API object
-        var targetCols = $(this).attr('data-column').split(",")
-        for (let i = 0; i < targetCols.length; i++){
-            var column = theTable.column( target_cols[i] );
-            toggleColumn(column);
-        }
-    } );
-
-    }
-}
+create_table = function(tableId, tableData, columnDefs, customSettings) {
+
+    loadDataTable(tableId=tableId, tableFata=tableData, tableSettings=tableSettings, firstRun=true)
+
+    function loadDataTable(tableId, tableData, tableSettings, firstRun=false){
+        if (!firstRun){
+            setUserColumnsDefWidths(tableId);
+        }
+
+        tableSettings = {
+            'data': tableData,
+            'columns': columnDefs,
+            "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: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
+                    resize: function( event, ui ) {
+                        widthChange = ui.size.width - ui.originalSize.width;
+                    },
+                    stop: function () {
+                        saveColumnSettings(table_id, the_table);
+                        loadDataTable(first_run=false, table_id, table_data);
+                    }
+                });
+            }
+        }
+
+        // Replace default settings with custom settings or add custom settings if not already set in default settings
+        $.each(customSettings, function(key, value) {
+            tableSettings[key] = value
+        });
+    }
+
+    if (!firstRun){
+        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + widthChange + 17) + "px"); // Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
+
+        let checkedRows = getCheckedRows(tableId);
+        theTable = $('#' + tableId).DataTable(tableSettings);
+        if (checkedRows.length > 0){
+            recheckRows(theTable, checkedRows);
+        }
+    } 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){
+        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
+    }
+
+    $('#' + tableId + '_searchbox').on( 'keyup', function () {
+        theTable.search($(this).val()).draw();
+    } );
+
+    $('.toggle-vis').on('click', function (e) {
+        e.preventDefault();
+
+        function toggleColumn(column) {
+            // Toggle column visibility
+            column.visible( ! column.visible() );
+            if (column.visible()){
+                $(this).removeClass("active");
+            } else {
+                $(this).addClass("active");
+            }
+        }
+
+        // Get the column API object
+        var targetCols = $(this).attr('data-column').split(",")
+        for (let i = 0; i < targetCols.length; i++){
+            var column = theTable.column( target_cols[i] );
+            toggleColumn(column);
+        }
+    } );
+}
-- 
cgit v1.2.3


From 895ae3ae28703d939d218429d15768649a53f18a Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 19:00:00 +0000
Subject: Convert trait.view to string for conversion to JSON

It's originally a boolean, which causes an error when passed to the JS
code as JSON
---
 wqflask/base/trait.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/wqflask/base/trait.py b/wqflask/base/trait.py
index 11b28c5c..0333e429 100644
--- a/wqflask/base/trait.py
+++ b/wqflask/base/trait.py
@@ -302,7 +302,7 @@ def jsonable(trait, dataset=None):
 
     if dataset.type == "ProbeSet":
         return dict(name=trait.name,
-                    view=trait.view,
+                    view=str(trait.view),
                     symbol=trait.symbol,
                     dataset=dataset.name,
                     dataset_name=dataset.shortname,
@@ -316,7 +316,7 @@ def jsonable(trait, dataset=None):
     elif dataset.type == "Publish":
         if trait.pubmed_id:
             return dict(name=trait.name,
-                        view=trait.view,
+                        view=str(trait.view),
                         dataset=dataset.name,
                         dataset_name=dataset.shortname,
                         description=trait.description_display,
@@ -332,7 +332,7 @@ def jsonable(trait, dataset=None):
                         )
         else:
             return dict(name=trait.name,
-                        view=trait.view,
+                        view=str(trait.view),
                         dataset=dataset.name,
                         dataset_name=dataset.shortname,
                         description=trait.description_display,
@@ -346,14 +346,14 @@ def jsonable(trait, dataset=None):
                         )
     elif dataset.type == "Geno":
         return dict(name=trait.name,
-                    view=trait.view,
+                    view=str(trait.view),
                     dataset=dataset.name,
                     dataset_name=dataset.shortname,
                     location=trait.location_repr
                     )
     elif dataset.name == "Temp":
         return dict(name=trait.name,
-                    view=trait.view,
+                    view=str(trait.view),
                     dataset="Temp",
                     dataset_name="Temp")
     else:
-- 
cgit v1.2.3


From 65768f80a4d5ec0320ca62355e5dec8e112b85c8 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 20:10:13 +0000
Subject: Change jsonable in GeneralTrait so that it passes all necessary table
 information

---
 wqflask/base/trait.py | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/wqflask/base/trait.py b/wqflask/base/trait.py
index 0333e429..b02c6033 100644
--- a/wqflask/base/trait.py
+++ b/wqflask/base/trait.py
@@ -300,10 +300,16 @@ def jsonable(trait, dataset=None):
                                 dataset_type=trait.dataset.type,
                                 group_name=trait.dataset.group.name)
 
+    trait_symbol = "N/A"
+    if trait.symbol:
+        trait_symbol = trait.symbol
+
     if dataset.type == "ProbeSet":
         return dict(name=trait.name,
+                    display_name=trait.display_name,
+                    hmac=hmac.data_hmac('{}:{}'.format(trait.display_name, dataset.name)),
                     view=str(trait.view),
-                    symbol=trait.symbol,
+                    symbol=trait_symbol,
                     dataset=dataset.name,
                     dataset_name=dataset.shortname,
                     description=trait.description_display,
@@ -316,7 +322,10 @@ def jsonable(trait, dataset=None):
     elif dataset.type == "Publish":
         if trait.pubmed_id:
             return dict(name=trait.name,
+                        display_name=trait.display_name,
+                        hmac=hmac.data_hmac('{}:{}'.format(trait.display_name, dataset.name)),
                         view=str(trait.view),
+                        symbol=trait_symbol,
                         dataset=dataset.name,
                         dataset_name=dataset.shortname,
                         description=trait.description_display,
@@ -332,7 +341,10 @@ def jsonable(trait, dataset=None):
                         )
         else:
             return dict(name=trait.name,
+                        display_name=trait.display_name,
+                        hmac=hmac.data_hmac('{}:{}'.format(trait.display_name, dataset.name)),
                         view=str(trait.view),
+                        symbol=trait_symbol,
                         dataset=dataset.name,
                         dataset_name=dataset.shortname,
                         description=trait.description_display,
@@ -346,6 +358,8 @@ def jsonable(trait, dataset=None):
                         )
     elif dataset.type == "Geno":
         return dict(name=trait.name,
+                    display_name=trait.display_name,
+                    hmac=hmac.data_hmac('{}:{}'.format(trait.display_name, dataset.name)),
                     view=str(trait.view),
                     dataset=dataset.name,
                     dataset_name=dataset.shortname,
@@ -353,6 +367,8 @@ def jsonable(trait, dataset=None):
                     )
     elif dataset.name == "Temp":
         return dict(name=trait.name,
+                    display_name=trait.display_name,
+                    hmac=hmac.data_hmac('{}:{}'.format(trait.display_name, dataset.name)),
                     view=str(trait.view),
                     dataset="Temp",
                     dataset_name="Temp")
-- 
cgit v1.2.3


From 7d93a4c91d57a0f47a3478a3c9e363963fdc9daf Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 20:11:01 +0000
Subject: Change tableSettings in loadDataTable parameters to customSettings

---
 wqflask/wqflask/static/new/javascript/create_datatable.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index 4c9d5c78..7b495a8b 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -1,8 +1,8 @@
 create_table = function(tableId, tableData, columnDefs, customSettings) {
 
-    loadDataTable(tableId=tableId, tableFata=tableData, tableSettings=tableSettings, firstRun=true)
+    loadDataTable(tableId=tableId, tableFata=tableData, customSettings=customSettings, firstRun=true)
 
-    function loadDataTable(tableId, tableData, tableSettings, firstRun=false){
+    function loadDataTable(tableId, tableData, customSettings, firstRun=false){
         if (!firstRun){
             setUserColumnsDefWidths(tableId);
         }
-- 
cgit v1.2.3


From d5c6bb7abfb3535c1fa5d0d8df95645a213ab030 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 20:11:28 +0000
Subject: Remove HTML table from collections/view.html and replace with list of
 column definitions passed to create_datatable.js

---
 wqflask/wqflask/templates/collections/view.html | 215 +++++++++++++++---------
 1 file changed, 138 insertions(+), 77 deletions(-)

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 6d0e3edd..6ea129f9 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -95,72 +95,9 @@
             </div>
             <div style="min-width: 1500px;">
                 <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
-                    <thead>
-                        <tr>
-                            <th></th>
-                            <th data-export="Index">Index</th>
-                            <th data-export="Dataset">Dataset</th>
-                            <th data-export="Record">Record</th>
-                            <th data-export="Symbol">Symbol</th>
-                            <th data-export="Description">Description</th>
-                            <th data-export="Location">Location</th>
-                            <th data-export="Mean">Mean</th>
-                            <th data-export="Max LRS">High P <a href="{{ url_for('glossary_blueprint.glossary') }}#L" target="_blank"><sup style="font-size: small; color: #FF0000;"> ?</sup></a></th>
-                            <th data-export="Peak Location">Peak Location</th>
-                            <th data-export="Add. Eff.">Effect Size <a href="{{ url_for('glossary_blueprint.glossary') }}#A" target="_blank"><sup style="font-size: small; color: #FF0000;"> ?</sup></a></th>
-                        </tr>
-                    </thead>
-
                     <tbody>
-                    {% for this_trait in trait_obs %}
-                        <TR id="trait:{{ this_trait.name }}:{{ this_trait.dataset.name }}">
-                            <TD align="center" style="padding: 0px;"><input type="checkbox"
-                                                                            name="searchResult"
-                                                                            class="checkbox trait_checkbox"
-                                                                            value="{{data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name))}}"
-                                                                            data-trait-info="{{trait_info_str(this_trait)}}">
-                            </TD>
-                            <TD data-export="{{ loop.index }}" align="right">{{ loop.index }}</TD>
-                            <TD title="{{ this_trait.dataset.fullname }}" data-export="{{ this_trait.dataset.fullname }}">{{ this_trait.dataset.fullname }}</TD>
-                            <TD data-export="{{ this_trait.name }}">
-                                <a href="{{ url_for('show_trait_page',
-                                        trait_id = this_trait.name,
-                                        dataset = this_trait.dataset.name
-                                        )}}">
-                                    {{ this_trait.display_name }}
-                                </a>
-                            </TD>
-                            {% if this_trait.symbol %}
-                            <TD title="{{ this_trait.symbol }}" data-export="{{ this_trait.symbol }}">{% if this_trait.symbol|length > 20 %}{{ this_trait.symbol[:20] }}...{% else %}{{ this_trait.symbol }}{% endif %}</TD>
-                            {% elif this_trait.abbreviation %}
-                            <TD title="{{ this_trait.abbreviation }}" data-export="{{ this_trait.abbreviation }}">{% if this_trait.abbreviation|length > 20 %}{{ this_trait.abbreviation[:20] }}...{% else %}{{ this_trait.abbreviation }}{% endif %}</TD>
-                            {% else %}
-                            <TD data-export="N/A">N/A</TD>
-                            {% endif %}
-                            {% if this_trait.dataset.type == "Geno" %}
-                            <TD title="Marker: {{ this_trait.name }}" data-export="Marker: {{ this_trait.name }}">Marker: {{ this_trait.name }}</TD>
-                            {% elif this_trait.description_display != "" %}
-                            <TD title="{{ this_trait.description_display }}" data-export="{{ this_trait.description_display }}">{{ this_trait.description_display }}</TD>
-                            {% else %}
-                            <TD title="N/A" data-export="N/A">N/A</TD>
-                            {% endif %}
-                            <TD data-export="{{ this_trait.location_repr }}">{{ this_trait.location_repr }}</TD>
-                            <TD data-export="{{ this_trait.mean }}" align="right">{{ '%0.3f' % this_trait.mean|float }}</TD>
-                            {% if this_trait.LRS_score_repr|float > 0 %}
-                            <TD data-export="{{ this_trait.LRS_score_repr }}" align="right">{{ '%0.3f' % this_trait.LRS_score_repr|float }}</TD>
-                            {% else %}
-                            <TD data-export="{{ this_trait.LRS_score_repr }}" align="right">N/A</TD>
-                            {% endif %}
-                            <TD data-export="{{ this_trait.LRS_location_repr }}">{{ this_trait.LRS_location_repr }}</TD>
-                            {% if this_trait.additive|float != 0 %}
-                            <TD data-export="{{ this_trait.additive }}" align="right">{{ '%0.3f' % this_trait.additive|float }}</TD>
-                            {% else %}
-                            <TD data-export="{{ this_trait.additive }}" align="right">N/A</TD>
-                            {% endif %}
-                        </TR>
-                    {% endfor %}
+                        <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
                     </tbody>
-
                 </table>
             </div>
             <br />
@@ -198,20 +135,144 @@
 
             column_defs = [
                 {
-                    "orderDataType": "dom-checkbox",
-                    "orderSequence": [ "desc", "asc"],
-                    "width": 10
+                    'data': null,
+                    'width': "5px",
+                    'orderDataType': "dom-checkbox",
+                    'targets': 0,
+                    'render': function(data, type, row, meta) {
+                        return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
+                    }
+                },
+                {
+                    'title': "Index",
+                    'type': "natural",
+                    'width': "35px",
+                    'searchable': false,
+                    'orderable': false,
+                    'targets': 1,
+                    'render': function(data, type, row, meta) {
+                        return meta.row
+                    }
+                },
+                {
+                    'title': "Dataset",
+                    'type': "natural",
+                    'targets': 2,
+                    'data': "dataset"
+                },
+                {
+                    'title': "Record",
+                    'type': "natural-minus-na",
+                    'width': "120px",
+                    'targets': 3,
+                    'data': null,
+                    'render': function(data, type, row, meta) {
+                        return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
+                    }
                 },
-                { "type": "natural", "width": 50 },
-                { "type": "natural" },
-                { 'type': "natural-minus-na", "width": 120 },
-                { "type": "natural" },
-                { "type": "natural"  },
-                { "type": "natural", "width": 125 },
-                { "type": "natural", "width": 60 },
-                { "type": "natural", "width": 60 },
-                { "type": "natural", "width": 125 },
-                { "type": "natural", "width": 85 }
+                {
+                    'title': "Symbol",
+                    'type': "natural",
+                    'targets': 4,
+                    'data': null,
+                    'render': function(data, type, row, meta) {
+                        if (Object.hasOwn(data, 'symbol')){
+                            return data.symbol
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "Description",
+                    'type': "natural",
+                    'targets': 5,
+                    'data': null,
+                    'render': function(data, type, row, meta) {
+                        if (Object.hasOwn(data, 'description')){
+                            try {
+                                return decodeURIComponent(escape(data.description))
+                            } catch(err){
+                                return escape(data.description)
+                            }
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right;'>Location</div>",
+                    'type': "natural-minus-na",
+                    'width': "125px",
+                    'targets': 6,
+                    'data': null,
+                    'render': function(data, type, row, meta) {
+                        if (Object.hasOwn(data, 'location')){
+                            return data.location
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right;'>Mean</div>",
+                    'type': "natural-minus-na",
+                    'width': "60px",
+                    'data': null,
+                    'targets': 7,
+                    'orderSequence': [ "desc", "asc"],
+                    'render': function(data, type, row, meta) {
+                        if (Object.hasOwn(data, 'mean')){
+                            return data.mean.toFixed(3)
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>LOD <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                    'type': "natural-minus-na",
+                    'data': null,
+                    'width': "60px",
+                    'targets': 8,
+                    'orderSequence': [ "desc", "asc"],
+                    'render': function(data, type, row, meta) {
+                        if (Object.hasOwn(data, 'lrs_score')){
+                            return (data.lrs_score / 4.61).toFixed(3)
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right;'>Peak Location</div>",
+                    'type': "natural-minus-na",
+                    'data': null,
+                    'width': "125px",
+                    'targets': 9,
+                    'render': function(data, type, row, meta) {
+                        if (Object.hasOwn(data, 'lrs_location')){
+                            return data.lrs_location
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                },
+                {
+                    'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                    'type': "natural-minus-na",
+                    'data': null,
+                    'width': "85px",
+                    'targets': 10,
+                    'orderSequence': [ "desc", "asc"],
+                    'render': function(data, type, row, meta) {
+                        if (Object.hasOwn(data, 'additive')){
+                            return data.additive.toFixed(3)
+                        } else {
+                            return "N/A"
+                        }
+                    }
+                }
             ]
 
             table_settings = {
-- 
cgit v1.2.3


From 0ddd74a4d417389f7a35ac0971b0c17f5d79fb56 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 20:56:24 +0000
Subject: Change some variables in search_result_page.html to camelCase

---
 wqflask/wqflask/templates/search_result_page.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 8eaf5f91..fb7f404b 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -392,7 +392,7 @@
             function loadDataTable(first_run=false){
 
               if (!first_run){
-                setUserColumnsDefWidths(tableId);
+                setUserColumnsDefWidths(tableId, columnDefs);
               }
 
               //ZS: Need to make sort by symbol, also need to make sure blank symbol fields at the bottom and symbols starting with numbers below letters
@@ -487,7 +487,7 @@
               if (!first_run){
                 $('#table_container').css("width", String($('#trait_table').width() + width_change {% if trait_list|length > 20 %}+ 17{% endif %}) + "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);
+                let checked_rows = getCheckedRows(tableId);
                 trait_table = $('#' + tableId).DataTable(table_settings);
                 if (checked_rows.length > 0){
                   recheck_rows(trait_table, checked_rows);
-- 
cgit v1.2.3


From ca368e32528073de15d925b4293b938f95f69dac Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 20:56:37 +0000
Subject: Fix JS/CSS imports and include scroller setting in custom table
 settings

---
 wqflask/wqflask/templates/collections/view.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 6ea129f9..a12c1369 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -3,6 +3,7 @@
 {% block css %}
     <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonStyles/css/buttons.dataTables.min.css') }}">
+    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/trait_list.css" />
 {% endblock %}
@@ -112,9 +113,8 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
-    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colResize/dataTables.colResize.js') }}"></script>
-    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colReorder/js/dataTables.colReorder.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.colVis.min.js') }}"></script>
     <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
@@ -276,7 +276,12 @@
             ]
 
             table_settings = {
-                "order": [[1, "asc" ]]
+                "order": [[1, "asc" ]],
+                {% if traits_json|length > 10 %}
+                "scroller": true
+                {% else %}
+                "scroller": false
+                {% endif %}
             }
 
             create_table(table_id, traits_json, column_defs, table_settings)
-- 
cgit v1.2.3


From 8e9423e0cdf771fe9603a7c1968ceac34bd4a64a Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 20:57:38 +0000
Subject: Add columnDefs as parameter for setUserColumnDefWidths

Now that the function is in a separate JS file it needs the parameter to
be directly provided
---
 wqflask/wqflask/static/new/javascript/table_functions.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/wqflask/wqflask/static/new/javascript/table_functions.js b/wqflask/wqflask/static/new/javascript/table_functions.js
index 22732397..ea2cf60c 100644
--- a/wqflask/wqflask/static/new/javascript/table_functions.js
+++ b/wqflask/wqflask/static/new/javascript/table_functions.js
@@ -26,7 +26,7 @@ getCheckedRows = function(tableId){
   return checkedRows
 }
 
-function setUserColumnsDefWidths(tableId) {
+function setUserColumnsDefWidths(tableId, columnDefs) {
   var userColumnDef;
 
   // Get the settings for this table from localStorage
@@ -57,6 +57,8 @@ function setUserColumnsDefWidths(tableId) {
       })
     }
   });
+
+  return columnDefs
 }
 
 function saveColumnSettings(tableId, traitTable) {
-- 
cgit v1.2.3


From 2e0e3aaa2c78c355e83cfae21c9655554451200b Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 23 Jun 2022 20:59:11 +0000
Subject: Fix manual column width change feature to work in create_datatable.js

---
 .../static/new/javascript/create_datatable.js      | 40 +++++++++++++---------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index 7b495a8b..217e99be 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -2,9 +2,11 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
 
     loadDataTable(tableId=tableId, tableFata=tableData, customSettings=customSettings, firstRun=true)
 
+    var widthChange = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
     function loadDataTable(tableId, tableData, customSettings, firstRun=false){
+
         if (!firstRun){
-            setUserColumnsDefWidths(tableId);
+            columnDefs = setUserColumnsDefWidths(tableId, columnDefs);
         }
 
         tableSettings = {
@@ -20,15 +22,15 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
             "iDisplayLength": -1,
             "initComplete": function (settings) {
                 // Add JQueryUI resizable functionality to each th in the ScrollHead table
-                $('#' + table_id + '_wrapper .dataTables_scrollHead thead th').resizable({
+                $('#' + 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 ) {
                         widthChange = ui.size.width - ui.originalSize.width;
                     },
                     stop: function () {
-                        saveColumnSettings(table_id, the_table);
-                        loadDataTable(first_run=false, table_id, table_data);
+                        saveColumnSettings(tableId, theTable);
+                        loadDataTable(tableId, tableData, firstRun=false);
                     }
                 });
             }
@@ -38,19 +40,23 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
         $.each(customSettings, function(key, value) {
             tableSettings[key] = value
         });
-    }
 
-    if (!firstRun){
-        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + widthChange + 17) + "px"); // Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
+        if (!firstRun){
+            $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + widthChange + 17) + "px"); // Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
 
-        let checkedRows = getCheckedRows(tableId);
-        theTable = $('#' + tableId).DataTable(tableSettings);
-        if (checkedRows.length > 0){
-            recheckRows(theTable, checkedRows);
+            let checkedRows = getCheckedRows(tableId);
+            theTable = $('#' + tableId).DataTable(tableSettings);
+            if (checkedRows.length > 0){
+                recheckRows(theTable, checkedRows);
+            }
+        } else {
+            theTable = $('#' + tableId).DataTable(tableSettings);
+            theTable.draw();
+        }
+
+        if (firstRun){
+            $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
         }
-    } else {
-        theTable = $('#' + tableId).DataTable(tableSettings);
-        theTable.draw();
     }
 
     theTable.on( 'order.dt search.dt draw.dt', function () {
@@ -59,9 +65,9 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
         } );
     } ).draw();
 
-    if (firstRun){
-        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
-    }
+    window.addEventListener('resize', function(){
+        theTable.columns.adjust();
+    });
 
     $('#' + tableId + '_searchbox').on( 'keyup', function () {
         theTable.search($(this).val()).draw();
-- 
cgit v1.2.3


From f22983a304d0c621ef3dab9aac8e824911e66485 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 19 Jul 2022 20:05:07 +0000
Subject: Change JS variables to camelCase and assign ID to table container div

---
 wqflask/wqflask/templates/collections/view.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index a12c1369..2349e16d 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -94,7 +94,7 @@
             <div style="margin-top: 10px; margin-bottom: 5px;">
                 <b>Show/Hide Columns:</b>
             </div>
-            <div style="min-width: 1500px;">
+            <div id="trait_table_container" style="min-width: 1500px;">
                 <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
                     <tbody>
                         <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
@@ -126,14 +126,14 @@
     <script type="text/javascript"
 	    src="/static/new/javascript/partial_correlations.js"></script>
     <script type='text/javascript'>
-        var traits_json = {{ traits_json|safe }};
+        var traitsJson = {{ traits_json|safe }};
     </script>
     <script language="javascript" type="text/javascript">
         $(document).ready( function () {
 
-            table_id = "trait_table"
+            tableId = "trait_table"
 
-            column_defs = [
+            columnDefs = [
                 {
                     'data': null,
                     'width': "5px",
@@ -275,7 +275,7 @@
                 }
             ]
 
-            table_settings = {
+            tableSettings = {
                 "order": [[1, "asc" ]],
                 {% if traits_json|length > 10 %}
                 "scroller": true
@@ -284,7 +284,7 @@
                 {% endif %}
             }
 
-            create_table(table_id, traits_json, column_defs, table_settings)
+            create_table(tableId, traitsJson, columnDefs, tableSettings)
 
             submit_special = function(url) {
                 $("#collection_form").attr("action", url);
-- 
cgit v1.2.3


From 0ca935b8abda975334b89673ccef4bcd55837773 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 19 Jul 2022 20:33:22 +0000
Subject: Added createdRow callback function to custom table settings for View
 Collection page

Also set a default table width of 2000px
---
 wqflask/wqflask/templates/collections/view.html | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 2349e16d..8dee5244 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -94,7 +94,7 @@
             <div style="margin-top: 10px; margin-bottom: 5px;">
                 <b>Show/Hide Columns:</b>
             </div>
-            <div id="trait_table_container" style="min-width: 1500px;">
+            <div id="trait_table_container" style="width: 2000px; min-width: 1500px;">
                 <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
                     <tbody>
                         <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
@@ -276,6 +276,27 @@
             ]
 
             tableSettings = {
+                "createdRow": function ( row, data, index ) {
+                    $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
+                    $('td', row).eq(1).attr("align", "right");
+                    $('td', row).eq(1).attr('data-export', index+1);
+                    $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+                    $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+                    $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                    $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                    if ($('td', row).eq(5).text().length > 500) {
+                        $('td', row).eq(5).text($('td', row).eq(5).text().substring(0, 500));
+                        $('td', row).eq(5).text($('td', row).eq(5).text() + '...')
+                    }
+                    $('td', row).slice(6,11).attr("align", "right");
+                    $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                    $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+                    $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+                    $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
+                    $('td', row).eq(10).attr('data-export', $('td', row).eq(9).text());
+                },
                 "order": [[1, "asc" ]],
                 {% if traits_json|length > 10 %}
                 "scroller": true
-- 
cgit v1.2.3


From 8a646b232b144323989f5cb701d18de4745920ba Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 19 Jul 2022 20:34:12 +0000
Subject: Fix issue where customSettings weren't being passed when manually
 adjusting column widths

---
 wqflask/wqflask/static/new/javascript/create_datatable.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index 217e99be..2a895e18 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -1,10 +1,9 @@
 create_table = function(tableId, tableData, columnDefs, customSettings) {
 
-    loadDataTable(tableId=tableId, tableFata=tableData, customSettings=customSettings, firstRun=true)
+    loadDataTable(tableId=tableId, tableData=tableData, customSettings, firstRun=true)
 
-    var widthChange = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
+    var widthChange = 0; // For storing the change in width so overall table width can be adjusted by that amount
     function loadDataTable(tableId, tableData, customSettings, firstRun=false){
-
         if (!firstRun){
             columnDefs = setUserColumnsDefWidths(tableId, columnDefs);
         }
@@ -30,7 +29,7 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
                     },
                     stop: function () {
                         saveColumnSettings(tableId, theTable);
-                        loadDataTable(tableId, tableData, firstRun=false);
+                        loadDataTable(tableId, tableData, customSettings, firstRun=false);
                     }
                 });
             }
-- 
cgit v1.2.3


From 714b64d8830cd5d4ca06cb07c162038155e56675 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 19 Jul 2022 20:38:47 +0000
Subject: Change search_result_page.html to generate its table with
 create_datatable.js

---
 wqflask/wqflask/templates/search_result_page.html | 583 +++++++++-------------
 1 file changed, 245 insertions(+), 338 deletions(-)

diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index fb7f404b..0bce6793 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -131,7 +131,7 @@
             {% endif %}
           </div>
           {% endif %}
-          <div id="table_container" style="width: {% if dataset.type == 'Geno' %}375px;{% else %}100%; min-width: 1400px;{% endif %}">
+          <div id="trait_table_container" style="{% if dataset.type == 'Geno' %}width: 450px;{% else %} min-width: 1400px;{% endif %}">
             <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
                 <tbody>
                  <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
@@ -163,9 +163,10 @@
 
     <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
 
     <script type='text/javascript'>
-        var trait_list = {{ trait_list|safe }};
+        var traitsJson = {{ trait_list|safe }};
     </script>
 
     <script type="text/javascript" charset="utf-8">
@@ -184,358 +185,264 @@
             {% if results|count > 0  and not too_many_results %}
             var tableId = "trait_table";
 
-            var width_change = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
+            var widthChange = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
 
             columnDefs = [
-            {
-              'data': null,
-              'width': "5px",
-              'orderDataType': "dom-checkbox",
-              'targets': 0,
-              'render': function(data, type, row, meta) {
-                return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
-              }
-            },
-            {
-              'title': "Index",
-              'type': "natural",
-              'width': "35px",
-              "searchable": false,
-              "orderable": false,
-              'targets': 1,
-              'data': "index"
-            }
-            {% if dataset.type == 'ProbeSet' %},
-            {
-              'title': "Record",
-              'type': "natural-minus-na",
-              'data': null,
-              'width': "{{ max_widths.display_name * 8 }}px",
-              'targets': 2,
-              'render': function(data, type, row, meta) {
-                return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
-              }
-            },
-            {
-              'title': "Symbol",
-              'type': "natural",
-              'width': "{{ max_widths.symbol * 8 }}px",
-              'targets': 3,
-              'data': "symbol"
-            },
-            {
-              'title': "Description",
-              'type': "natural",
-              'data': null,
-              'targets': 4,
-              'render': function(data, type, row, meta) {
-                try {
-                  return decodeURIComponent(escape(data.description))
-                } catch(err){
-                  return escape(data.description)
+              {
+                'data': null,
+                'width': "5px",
+                'orderDataType': "dom-checkbox",
+                'targets': 0,
+                'render': function(data, type, row, meta) {
+                  return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
                 }
+              },
+              {
+                'title': "Index",
+                'type': "natural",
+                'width': "35px",
+                "searchable": false,
+                "orderable": false,
+                'targets': 1,
+                'data': "index"
               }
-            },
-            {
-              'title': "<div style='text-align: right;'>Location</div>",
-              'type': "natural-minus-na",
-              'width': "130px",
-              'targets': 5,
-              'data': "location"
-            },
-            {
-              'title': "<div style='text-align: right;'>Mean</div>",
-              'type': "natural-minus-na",
-              'width': "40px",
-              'data': "mean",
-              'targets': 6,
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>LOD <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
-              'type': "natural-minus-na",
-              'data': "lod_score",
-              'width': "60px",
-              'targets': 7,
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "<div style='text-align: right;'>Peak Location</div>",
-              'type': "natural-minus-na",
-              'width': "130px",
-              'targets': 8,
-              'data': "lrs_location"
-            },
-            {
-              'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
-              'type': "natural-minus-na",
-              'data': "additive",
-              'width': "65px",
-              'targets': 9,
-              'orderSequence': [ "desc", "asc"]
-            }{% elif dataset.type == 'Publish' %},
-            {
-              'title': "Record",
-              'type': "natural-minus-na",
-              'width': "{{ max_widths.display_name * 9 }}px",
-              'data': null,
-              'targets': 2,
-              'render': function(data, type, row, meta) {
-                return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
-              }
-            },
-            {
-              'title': "Description",
-              'type': "natural",
-              {% if (max_widths.description * 7) < 500 %}
-              'width': "{{ max_widths.description * 7 }}px",
-              {% else %}
-              'width': "500px",
-              {% endif %}
-              'data': null,
-              'targets': 3,
-              'render': function(data, type, row, meta) {
-                try {
+              {% if dataset.type == 'ProbeSet' %},
+              {
+                'title': "Record",
+                'type': "natural-minus-na",
+                'data': null,
+                'width': "{{ max_widths.display_name * 8 }}px",
+                'targets': 2,
+                'render': function(data, type, row, meta) {
+                  return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
+                }
+              },
+              {
+                'title': "Symbol",
+                'type': "natural",
+                'width': "{{ max_widths.symbol * 8 }}px",
+                'targets': 3,
+                'data': "symbol"
+              },
+              {
+                'title': "Description",
+                'type': "natural",
+                'data': null,
+                'targets': 4,
+                'render': function(data, type, row, meta) {
+                  try {
                     return decodeURIComponent(escape(data.description))
-                } catch(err){
-                    return data.description
+                  } catch(err){
+                    return escape(data.description)
+                  }
                 }
-              }
-            },
-            {
-              'title': "<div style='text-align: right;'>Mean</div>",
-              'type': "natural-minus-na",
-              'width': "60px",
-              'data': "mean",
-              'targets': 4,
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "Authors",
-              'type': "natural",
-              {% if (max_widths.authors * 5) < 500 %}
-              'width': "{{ max_widths.authors * 5 }}px",
-              {% else %}
-              'width': "500px",
-              {% endif %}
-              'data': null,
-              'targets': 5,
-              'render': function(data, type, row, meta) {
-                author_list = data.authors.split(",")
-                if (author_list.length >= 2) {
-                  author_string = author_list.slice(0, 2).join(",") + ", et al."
-                } else{
-                  author_string = data.authors
+              },
+              {
+                'title': "<div style='text-align: right;'>Location</div>",
+                'type': "natural-minus-na",
+                'width': "130px",
+                'targets': 5,
+                'data': "location"
+              },
+              {
+                'title': "<div style='text-align: right;'>Mean</div>",
+                'type': "natural-minus-na",
+                'width': "40px",
+                'data': "mean",
+                'targets': 6,
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>LOD <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                'type': "natural-minus-na",
+                'data': "lod_score",
+                'width': "60px",
+                'targets': 7,
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "<div style='text-align: right;'>Peak Location</div>",
+                'type': "natural-minus-na",
+                'width': "130px",
+                'targets': 8,
+                'data': "lrs_location"
+              },
+              {
+                'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                'type': "natural-minus-na",
+                'data': "additive",
+                'width': "65px",
+                'targets': 9,
+                'orderSequence': [ "desc", "asc"]
+              }{% elif dataset.type == 'Publish' %},
+              {
+                'title': "Record",
+                'type': "natural-minus-na",
+                'width': "{{ max_widths.display_name * 9 }}px",
+                'data': null,
+                'targets': 2,
+                'render': function(data, type, row, meta) {
+                  return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
                 }
-                return author_string
-              }
-            },
-            {
-              'title': "<div style='text-align: right;'>Year</div>",
-              'type': "natural-minus-na",
-              'data': null,
-              'width': "50px",
-              'targets': 6,
-              'render': function(data, type, row, meta) {
-                if (data.pubmed_id != "N/A"){
-                  return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
-                } else {
-                  return data.pubmed_text
+              },
+              {
+                'title': "Description",
+                'type': "natural",
+                {% if (max_widths.description * 7) < 500 %}
+                'width': "{{ max_widths.description * 7 }}px",
+                {% else %}
+                'width': "500px",
+                {% endif %}
+                'data': null,
+                'targets': 3,
+                'render': function(data, type, row, meta) {
+                  try {
+                      return decodeURIComponent(escape(data.description))
+                  } catch(err){
+                      return data.description
+                  }
                 }
               },
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>LOD <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
-              'type': "natural-minus-na",
-              'data': "lod_score",
-              'targets': 7,
-              'width': "60px",
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "<div style='text-align: right;'>Peak Location</div>",
-              'type': "natural-minus-na",
-              'width': "125px",
-              'targets': 8,
-              'data': "lrs_location"
-            },
-            {
-              'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
-              'type': "natural-minus-na",
-              'width': "60px",
-              'data': "additive",
-              'targets': 9,
-              'orderSequence': [ "desc", "asc"]
-            }{% elif dataset.type == 'Geno' %},
-            {
-              'title': "Record",
-              'type': "natural-minus-na",
-              'width': "{{ max_widths.display_name * 9 }}px",
-              'data': null,
-              'targets': 2,
-              'render': function(data, type, row, meta) {
-                return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
-              }
-            },
-            {
-              'title': "<div style='text-align: right;'>Location</div>",
-              'type': "natural-minus-na",
-              'width': "125px",
-              'targets': 2,
-              'data': "location"
-            }{% endif %}
-            ];
-
-            loadDataTable(true);
-
-            function loadDataTable(first_run=false){
-
-              if (!first_run){
-                setUserColumnsDefWidths(tableId, columnDefs);
-              }
-
-              //ZS: Need to make sort by symbol, also need to make sure blank symbol fields at the bottom and symbols starting with numbers below letters
-              table_settings = {
-                'drawCallback': function( settings ) {
-                      $('#' + tableId + ' tr').off().on("click", function(event) {
-                        if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                          var obj =$(this).find('input');
-                          obj.prop('checked', !obj.is(':checked'));
-                        }
-                        if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                          $(this).removeClass("selected")
-                        } else if (event.target.tagName.toLowerCase() !== 'a') {
-                          $(this).addClass("selected")
-                        }
-                        change_buttons()
-                      });
-                },
-                'createdRow': function ( row, data, index ) {
-                    $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
-                    $('td', row).eq(1).attr("align", "right");
-                    $('td', row).eq(1).attr('data-export', index+1);
-                    $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
-                    {% if dataset.type == 'ProbeSet' %}
-                    $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
-                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
-                    if ($('td', row).eq(3).text().length > 20) {
-                        $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 20));
-                        $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
-                    }
-                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
-                    $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
-                    if ($('td', row).eq(4).text().length > 500) {
-                        $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 500));
-                        $('td', row).eq(4).text($('td', row).eq(4).text() + '...')
-                    }
-                    $('td', row).slice(5,10).attr("align", "right");
-                    $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
-                    $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
-                    $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
-                    $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
-                    $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
-                    {% elif dataset.type == 'Publish' %}
-                    $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
-                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
-                    if ($('td', row).eq(3).text().length > 500) {
-                        $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 500));
-                        $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
-                    }
-                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
-                    $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
-                    $('td', row).eq(4).attr('align', 'right');
-                    $('td', row).slice(6,10).attr("align", "right");
-                    $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
-                    $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
-                    $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
-                    $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
-                    $('td', row).eq(9).attr('data-export', $('td', row).eq(8).text());
-                    {% elif dataset.type == 'Geno' %}
-                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
-                    {% endif %}
-                },
-                "data": trait_list,
-                "columns": columnDefs,
-                "order": [[1, "asc" ]],
-                "sDom": "iti",
-                "destroy": true,
-                "autoWidth": false,
-                "bSortClasses": false,
-                "scrollY": "1000px",
-                "scrollCollapse": true,
-                {% if trait_list|length > 10 %}
-                "scroller":  true,
+              {
+                'title': "<div style='text-align: right;'>Mean</div>",
+                'type': "natural-minus-na",
+                'width': "60px",
+                'data': "mean",
+                'targets': 4,
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "Authors",
+                'type': "natural",
+                {% if (max_widths.authors * 5) < 500 %}
+                'width': "{{ max_widths.authors * 5 }}px",
+                {% else %}
+                'width': "500px",
                 {% endif %}
-                "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, trait_table);
-                      loadDataTable();
-                    }
-                  });
+                'data': null,
+                'targets': 5,
+                'render': function(data, type, row, meta) {
+                  author_list = data.authors.split(",")
+                  if (author_list.length >= 2) {
+                    author_string = author_list.slice(0, 2).join(",") + ", et al."
+                  } else{
+                    author_string = data.authors
+                  }
+                  return author_string
                 }
-              }
-
-              if (!first_run){
-                $('#table_container').css("width", String($('#trait_table').width() + width_change {% if trait_list|length > 20 %}+ 17{% endif %}) + "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 = getCheckedRows(tableId);
-                trait_table = $('#' + tableId).DataTable(table_settings);
-                if (checked_rows.length > 0){
-                  recheck_rows(trait_table, checked_rows);
+              },
+              {
+                'title': "<div style='text-align: right;'>Year</div>",
+                'type': "natural-minus-na",
+                'data': null,
+                'width': "50px",
+                'targets': 6,
+                'render': function(data, type, row, meta) {
+                  if (data.pubmed_id != "N/A"){
+                    return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
+                  } else {
+                    return data.pubmed_text
+                  }
+                },
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>LOD <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                'type': "natural-minus-na",
+                'data': "lod_score",
+                'targets': 7,
+                'width': "60px",
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "<div style='text-align: right;'>Peak Location</div>",
+                'type': "natural-minus-na",
+                'width': "125px",
+                'targets': 8,
+                'data': "lrs_location"
+              },
+              {
+                'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                'type': "natural-minus-na",
+                'width': "60px",
+                'data': "additive",
+                'targets': 9,
+                'orderSequence': [ "desc", "asc"]
+              }{% elif dataset.type == 'Geno' %},
+              {
+                'title': "Record",
+                'type': "natural-minus-na",
+                'width': "{{ max_widths.display_name * 9 }}px",
+                'data': null,
+                'targets': 2,
+                'render': function(data, type, row, meta) {
+                  return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
                 }
-              } else {
-                trait_table = $('#' + tableId).DataTable(table_settings);
-                trait_table.draw();
-              }
+              },
+              {
+                'title': "<div style='text-align: right;'>Location</div>",
+                'type': "natural-minus-na",
+                'width': "125px",
+                'targets': 2,
+                'data': "location"
+              }{% endif %}
+            ];
 
-              if (first_run){
-                {% if trait_list|length > 20 %}
-                $('#table_container').css("width", String($('#trait_table').width() + 17) + "px");
-                {% else %}
-                $('#table_container').css("width", String($('#trait_table').width()) + "px");
+            tableSettings = {
+              "createdRow": function ( row, data, index ) {
+                $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
+                $('td', row).eq(1).attr("align", "right");
+                $('td', row).eq(1).attr('data-export', index+1);
+                $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+                {% if dataset.type == 'ProbeSet' %}
+                $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+                $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                if ($('td', row).eq(3).text().length > 20) {
+                  $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 20));
+                  $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
+                }
+                $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+                $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                if ($('td', row).eq(4).text().length > 500) {
+                  $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 500));
+                  $('td', row).eq(4).text($('td', row).eq(4).text() + '...')
+                }
+                $('td', row).slice(5,10).attr("align", "right");
+                $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+                $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+                $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
+                {% elif dataset.type == 'Publish' %}
+                $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+                $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                if ($('td', row).eq(3).text().length > 500) {
+                  $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 500));
+                  $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
+                }
+                $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+                $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                $('td', row).eq(4).attr('align', 'right');
+                $('td', row).slice(6,10).attr("align", "right");
+                $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+                $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+                $('td', row).eq(9).attr('data-export', $('td', row).eq(8).text());
+                {% elif dataset.type == 'Geno' %}
+                $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
                 {% endif %}
-              }
+              },
+              "order": [[1, "asc" ]],
+              {% if traits_json|length > 10 %}
+              "scrollY": "1000px",
+              "scroller": true
+              {% else %}
+              "scroller": false
+              {% endif %}
             }
 
-            trait_table.on( 'order.dt search.dt', function () {
-              trait_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
-                cell.innerHTML = i+1;
-              } );
-            } ).draw();
-
-            window.addEventListener('resize', function(){
-              trait_table.columns.adjust();
-            });
-
-            $('.toggle-vis').on( 'click', function (e) {
-              e.preventDefault();
-
-              // Get the column API object
-              var column = trait_table.column( $(this).attr('data-column') );
-
-              // Toggle the visibility
-              column.visible( ! column.visible() );
-
-              if (column.visible()){
-                $(this).removeClass("active");
-              } else {
-                $(this).addClass("active");
-              }
-            } );
-
-            $('#redraw').click(function() {
-                var table = $('#' + tableId).DataTable();
-                table.colReorder.reset()
-            });
+            create_table(tableId, traitsJson, columnDefs, tableSettings)
             {% endif %}
 
             submit_special = function(url) {
-- 
cgit v1.2.3


From fb01efa96365cd649ac1a0892ac79bd371ddb405 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 20 Jul 2022 20:53:31 +0000
Subject: Change mapping results table (minus Interval Analyst) to use new
 create_datatable.js code and load table from JSON row data

---
 wqflask/wqflask/templates/mapping_results.html | 229 ++++++++++++++-----------
 1 file changed, 130 insertions(+), 99 deletions(-)

diff --git a/wqflask/wqflask/templates/mapping_results.html b/wqflask/wqflask/templates/mapping_results.html
index 29e9002d..55d18cba 100644
--- a/wqflask/wqflask/templates/mapping_results.html
+++ b/wqflask/wqflask/templates/mapping_results.html
@@ -65,7 +65,7 @@
         <input type="hidden" name="form_url" value="/run_mapping">
         
         <div class="container" style="width: 1200px; float: left;">
-          <div class="col-xs-4">
+          <div class="col-xs-4" style="word-wrap: normal;">
               <h2>Map Viewer: Whole Genome</h2><br>
               <b>Population:</b> {{ dataset.group.species|capitalize }} {{ dataset.group.name }}<br>
               <b>Database:</b> {{ dataset.fullname }}<br>
@@ -258,63 +258,10 @@
         <button class="btn btn-default export_mapping_results" >Download <span class="glyphicon glyphicon-download"></span></button>
         <br />
         <br />
-          <div id="table_container" style="width:{% if 'additive' in trimmed_markers[0] %}600{% else %}550{% endif %}px;">
-            <table id="trait_table" class="table-hover table-striped cell-border dataTable no-footer">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th>Row</th>
-                  <th>Marker</th>
-                  {% if LRS_LOD == "-logP" %}
-                  <th><div style="text-align: right;">–logP</div></th>
-                  {% else %}
-                  <th><div style="text-align: right;">{{ LRS_LOD }}</div></th>
-                  {% endif %}
-                  <th><div style="text-align: right;">Position ({% if plotScale == "physic" %}Mb{% else %}cM{% endif %})</div></th>
-                  {% if 'additive' in trimmed_markers[0] %}
-                  <th><div style="text-align: right;">Add Eff</div></th>
-                  {% endif %}
-                  {% if 'dominance' in trimmed_markers[0] and dataset.group.genetic_type != "riset" %}
-                  <th><div style="text-align: right;">Dom Eff</div></th>
-                  {% endif %}
-                </tr>
-              </thead>
+          <div id="trait_table_container" style="width:{% if 'additive' in trimmed_markers[0] %}600{% else %}550{% endif %}px;">
+            <table class="table-hover table-striped cell-border no-footer" id='trait_table' style="float: left;">
               <tbody>
-                {% for marker in trimmed_markers %}
-                <tr>
-                  <td align="center" style="padding: 1px 0px 1px 0px;">
-                    <input type="checkbox" name="selectCheck"
-                           class="checkbox trait_checkbox"
-                           value="{{ data_hmac('{}:{}Geno'.format(marker.name, dataset.group.name)) }}">
-                  </td>
-                  <td align="right">{{ loop.index }}</td>
-                  <td>{% if geno_db_exists == "True" %}<a href="/show_trait?trait_id={{ marker.name }}&dataset={{ dataset.group.name }}Geno">{{ marker.name }}</a>{% else %}{{ marker.name }}{% endif %}</td>
-                  {% if LRS_LOD == "LOD" or LRS_LOD == "-logP" %}
-                  {% if 'lod_score' in marker %}
-                  <td align="right">{{ '%0.2f' | format(marker.lod_score|float) }}</td>
-                  {% else %}
-                  <td align="right">{{ '%0.2f' | format(marker.lrs_value|float / 4.61) }}</td>
-                  {% endif %}
-                  {% else %}
-                  {% if 'lod_score' in marker %}
-                  <td align="right">{{ '%0.2f' | format(marker.lod_score|float * 4.61) }}</td>
-                  {% else %}
-                  <td align="right">{{ '%0.2f' | format(marker.lrs_value|float) }}</td>
-                  {% endif %}
-                  {% endif %}
-                  <td align="right">{{ marker.display_pos }}</td>
-                  {% if 'additive' in marker %}
-                  {% if geno_db_exists == "True" %}
-                  <td align="right"><a target"_blank" href="corr_scatter_plot?method=pearson&dataset_1={{ dataset.group.name }}Geno&dataset_2={{ dataset.name }}&trait_1={{ marker.name }}&trait_2={{ this_trait.name }}">{{ '%0.3f' | format(marker.additive|float) }}</a></td>
-                  {% else %}
-                  <td align="right">{{ '%0.3f' | format(marker.additive|float) }}</td>
-                  {% endif %}
-                  {% endif %}
-                  {% if 'dominance' in marker and dataset.group.genetic_type != "riset" %}
-                  <td align="right">{{ '%0.2f' | format(marker.dominance|float) }}</td>
-                  {% endif %}
-                </tr>
-                {% endfor %}
+               <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
               </tbody>
             </table>
           </div>
@@ -376,59 +323,143 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='purescript-genome-browser/js/purescript-genetics-browser.js') }}"></script>
 
     <script>
-        js_data = {{ js_data | safe }}
+        var js_data = {{ js_data | safe }};
+        var markersJson = {{ trimmed_markers|safe }};
     </script>
 
     <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
     {% if mapping_method == "gemma" or mapping_method == "reaper" %}
     <script language="javascript" type="text/javascript" src="/static/new/javascript/init_genome_browser.js"></script>
     {% endif %}
 
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
-            console.time("Creating table");
-
             {% if selectedChr == -1 %}
-            $('#trait_table').DataTable( {
-                "drawCallback": function( settings ) {
-                  $('#trait_table tr').off().on("click", function(event) {
-                    if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                      var obj =$(this).find('input');
-                      obj.prop('checked', !obj.is(':checked'));
-                    }
-                    if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                      $(this).removeClass("selected")
-                    } else if (event.target.tagName.toLowerCase() !== 'a') {
-                      $(this).addClass("selected")
-                    }
+            tableId = "trait_table"
+
+            columnDefs = [
+              {
+                'data': null,
+                'width': "5px",
+                'orderDataType': "dom-checkbox",
+                'targets': 0,
+                'render': function(data, type, row, meta) {
+                  return '<input type="checkbox" name="selectCheck" class="checkbox trait_checkbox" value="'+ data.hmac + '">'
+                }
+              },
+              {
+                'title': "Row",
+                'type': "natural",
+                'width': "35px",
+                'searchable': false,
+                'orderable': false,
+                'targets': 1,
+                'render': function(data, type, row, meta) {
+                    return meta.row
+                }
+              },
+              {
+                'title': "Marker",
+                'type': "natural",
+                'width': "20%",
+                'targets': 2,
+                {% if geno_db_exists == "True" %}
+                'data': null,
+                'render': function(data, type, row, meta) {
+                  return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset={{ dataset.group.name }}Geno">' + data.name + '</a>'
+                }
+                {% else %}
+                'data': "name"
+                {% endif %}
+              },
+              {
+                'title': "<div style='text-align: right;'>{{ LRS_LOD }}</div>",
+                'type': "natural",
+                'width': "60px",
+                'targets': 3,
+                'orderSequence': [ "desc", "asc"],
+                'data': null,
+                'render': function(data, type, row, meta) {
+                  {% if (LRS_LOD == "LOD") or (LRS_LOD == "-logP") %}
+                  if ('lod_score' in data){
+                    return String(parseFloat(data.lod_score).toFixed(2))
+                  } else {
+                    return String((parseFloat(data.lrs_value) / 4.61).toFixed(2))
+                  }
+                  {% else %}
+                  if ('lod_score' in data){
+                    return String((parseFloat(data.lod_score) * 4.61).toFixed(2))
+                  } else {
+                    return String(parseFloat(data.lrs_value).toFixed(2))
+                  }
+                  {% endif %}
+                }
+              },
+              {
+                'title': "<div style='text-align: right;'>Position ({% if plotScale == 'physic' %}Mb{% else %}cM{% endif %})</div>",
+                'type': 'natural',
+                'targets': 4,
+                'data': "display_pos"
+              },
+              {% if 'additive' in trimmed_markers[0] %}
+              {
+                'title': "<div style='text-align: right;'>Add Eff</div>",
+                'type': "natural",
+                'targets': 5,
+                'data': null,
+                'render': function(data, type, row, meta) {
+                  {% if geno_db_exists == "True" %}
+                  return '<a target"_blank" href="corr_scatter_plot?method=pearson&dataset_1={{ dataset.group.name }}Geno&dataset_2={{ dataset.name }}&trait_1=' + data.name + '&trait_2={{ this_trait.name }}">' + String(parseFloat(data.additive).toFixed(3)) + '</a>'
+                  {% else %}
+                  return String(parseFloat(data.additive).toFixed(3))
+                  {% endif %}
+                }
+              },
+              {% endif %}
+              {% if ('dominance' in trimmed_markers[0]) and (dataset.group.genetic_type != "riset") %}
+              {
+                'title': "<div style='text-align: right;'>Add Eff</div>",
+                'type': "natural",
+                'targets': {% if ('additive' in trimmed_markers[0]) %}6{% else %}5{% endif %},
+                'data': null,
+                'render': function(data, type, row, meta) {
+                  return String(parseFloat(data.dominance).toFixed(2))
+                }
+              }
+              {% endif %}
+            ]
+
+            tableSettings = {
+              "createdRow": function ( row, data, index ) {
+                $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
+                $('td', row).eq(1).attr("align", "right");
+                $('td', row).eq(1).attr('data-export', index+1);
+                $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+                $('td', row).eq(3).attr("align", "right");
+                $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                $('td', row).eq(4).attr("align", "right");
+                $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                {% if 'additive' in trimmed_markers[0] %}
+                $('td', row).eq(5).attr("align", "right");
+                $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                {% endif %}
+                {% if 'dominance' in trimmed_markers[0] %}
+                $('td', row).eq(6).attr("align", "right");
+                $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                {% endif %}
+              },
+              "language": {
+                "info": "Showing from _START_ to _END_ of " + js_data.total_markers + " records",
+              },
+              "order": [[1, "asc" ]],
+              "scrollY": "1000px",
+              "scroller": true
+            }
+
+            create_table(tableId, markersJson, columnDefs, tableSettings)
 
-                    {% if geno_db_exists == "True" %}change_buttons(check_node=1){% endif %}
-                  });
-                },
-                "columns": [
-                    { "type": "natural", "width": "5%" },
-                    { "type": "natural", "width": "8%" },
-                    { "type": "natural", "width": "20%" },
-                    { "type": "natural" },
-                    { "type": "natural" }{% if 'additive' in qtlresults[0] %},
-                    { "type": "natural" }{% endif %}{% if 'dominance' in qtlresults[0] and dataset.group.genetic_type != "riset" %},
-                    { "type": "natural" }{% endif %}
-                ],
-                "columnDefs": [ {
-                    "targets": 0,
-                    "orderable": false
-                } ],
-                "language": {
-                  "info": "Showing from _START_ to _END_ of " + js_data.total_markers + " records",
-                },
-                "order": [[1, "asc" ]],
-                "sDom": "itir",
-                "autoWidth": true,
-                "bSortClasses": false,
-                "scrollY": "100vh",
-                "scroller":  true,
-                "scrollCollapse": true
-            } );
             {% elif selectedChr != -1 and plotScale =="physic" and (dataset.group.species == 'mouse' or dataset.group.species == 'rat') %}
             $('#trait_table').dataTable( {
               "drawCallback": function( settings ) {
-- 
cgit v1.2.3


From 36a7408d2c5cf3b8b7ebb2168fd34415e37184d0 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 20 Jul 2022 20:54:11 +0000
Subject: Add drawCallback for highlighting selected rows to default
 tableSettings

---
 .../wqflask/static/new/javascript/create_datatable.js  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index 2a895e18..fc9530a5 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -9,8 +9,22 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
         }
 
         tableSettings = {
-            'data': tableData,
-            'columns': columnDefs,
+            "drawCallback": function( settings ) {
+                $('#' + tableId + ' tr').off().on("click", function(event) {
+                  if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
+                    var obj =$(this).find('input');
+                    obj.prop('checked', !obj.is(':checked'));
+                  }
+                  if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
+                    $(this).removeClass("selected")
+                  } else if (event.target.tagName.toLowerCase() !== 'a') {
+                    $(this).addClass("selected")
+                  }
+                  change_buttons()
+                });
+            },
+            "data": tableData,
+            "columns": columnDefs,
             "sDom": "iti",
             "destroy": true,
             "autoWidth": false,
-- 
cgit v1.2.3


From 7128050424f1e928a08011186c62d39c47e56bc0 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 20 Jul 2022 20:54:45 +0000
Subject: Add marker hmac to mapping result markers so it can be directly
 passed to the table

---
 wqflask/wqflask/marker_regression/run_mapping.py | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/wqflask/wqflask/marker_regression/run_mapping.py b/wqflask/wqflask/marker_regression/run_mapping.py
index 35678df9..af229f5c 100644
--- a/wqflask/wqflask/marker_regression/run_mapping.py
+++ b/wqflask/wqflask/marker_regression/run_mapping.py
@@ -29,10 +29,7 @@ from base.trait import GeneralTrait
 from base import data_set
 from base import species
 from base import webqtlConfig
-from utility import webqtlUtil
-from utility import helper_functions
-from utility import Plot, Bunch
-from utility import temp_data
+from utility import webqtlUtil, helper_functions, hmac, Plot, Bunch, temp_data
 from utility.benchmark import Bench
 from wqflask.marker_regression import gemma_mapping, rqtl_mapping, qtlreaper_mapping, plink_mapping
 from wqflask.show_trait.SampleList import SampleList
@@ -319,6 +316,7 @@ class RunMapping:
                 self.annotations_for_browser = []
                 highest_chr = 1  # This is needed in order to convert the highest chr to X/Y
                 for marker in results:
+                    marker['hmac'] = hmac.data_hmac('{}:{}'.format(marker['name'], self.dataset.group.name + "Geno"))
                     if 'Mb' in marker:
                         this_ps = marker['Mb'] * 1000000
                     else:
-- 
cgit v1.2.3


From d1616a5e0e225dbedddf423ac3ec74a99a66d5cc Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 18:29:51 +0000
Subject: Allow create_table to handle tables without row data provided as JSON
 (so it can also convert regular HTML tables drawn in the template

---
 wqflask/wqflask/static/new/javascript/create_datatable.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index fc9530a5..2953655c 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -1,4 +1,4 @@
-create_table = function(tableId, tableData, columnDefs, customSettings) {
+create_table = function(tableId, tableData = [], columnDefs = [], customSettings = {}) {
 
     loadDataTable(tableId=tableId, tableData=tableData, customSettings, firstRun=true)
 
@@ -23,7 +23,6 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
                   change_buttons()
                 });
             },
-            "data": tableData,
             "columns": columnDefs,
             "sDom": "iti",
             "destroy": true,
@@ -49,6 +48,10 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
             }
         }
 
+        if (tableData.length > 0){
+            tableSettings["data"] = tableData
+        }
+
         // Replace default settings with custom settings or add custom settings if not already set in default settings
         $.each(customSettings, function(key, value) {
             tableSettings[key] = value
-- 
cgit v1.2.3


From fe25fee2b74be85e094a3c5a430114a7f02e578d Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 18:30:16 +0000
Subject: Use create_datatable.js for the Collection List table

---
 wqflask/wqflask/templates/collections/list.html | 53 ++++++++-----------------
 1 file changed, 16 insertions(+), 37 deletions(-)

diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index 6e1261d7..1a125dbb 100644
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -75,44 +75,22 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
     <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
     <script>
-            $('#trait_table').dataTable( {
-                "drawCallback": function( settings ) {
-                     $('#trait_table tr').click(function(event) {
-                        if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                          var obj =$(this).find('input');
-                          obj.prop('checked', !obj.is(':checked'));
-                        }
-                        if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                          $(this).removeClass("selected")
-                        } else if (event.target.tagName.toLowerCase() !== 'a') {
-                          $(this).addClass("selected")
-                        }
-                     });
-                },
-                "buttons": [ 'copy', 'csv', 'excel' ],
-                "columns": [
-                    { "type": "natural", "width": "3%" },
-                    { "type": "natural", "width": "8%" },
-                    { "type": "natural", "width": "20%" },
-                    { "type": "natural", "width": "25%" },
-                    { "type": "natural", "width": "25%" },
-                    { "type": "natural", "width": "15%" }
-                ],
-                "columnDefs": [ {
-                    "targets": 0,
-                    "orderable": false
-                } ],
-                "order": [[1, "asc" ]],
-                "sDom": "BZtr",
-                "iDisplayLength": -1,
-                "autoWidth": false,
-                "bDeferRender": true,
-                "bSortClasses": false,
-                "scrollCollapse": true,
-                "paging": false,
-                "orderClasses": true
-            } );
+        $(document).ready( function () {
+            tableId = "trait_table";
+
+            columnDefs = [
+                { "type": "natural", "width": "3%", "targets": 0, "orderable": false},
+                { "type": "natural", "width": "8%", "targets": 1},
+                { "type": "natural", "width": "20%", "targets": 2},
+                { "type": "natural", "width": "25%", "targets": 3},
+                { "type": "natural", "width": "25%", "targets": 4},
+                { "type": "natural", "width": "15%", "targets": 5}
+            ];
+
+            create_table(tableId, [], columnDefs)
 
             submit_special = function(url) {
                 $("#collections_form").attr("action", url);
@@ -167,6 +145,7 @@
                 return submit_special(url)
             });
 
+        });
 
     </script>
 {% endblock %}
-- 
cgit v1.2.3


From 467603f6f1891dd79f39909b8ef7640f53b7e65f Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 18:32:35 +0000
Subject: Set default value for tableId parameter in creatae_table, since most
 tables will have this ID

---
 wqflask/wqflask/static/new/javascript/create_datatable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index 2953655c..8f24df1e 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -1,4 +1,4 @@
-create_table = function(tableId, tableData = [], columnDefs = [], customSettings = {}) {
+create_table = function(tableId="trait_table", tableData = [], columnDefs = [], customSettings = {}) {
 
     loadDataTable(tableId=tableId, tableData=tableData, customSettings, firstRun=true)
 
-- 
cgit v1.2.3


From 5f4722b894c7ff18fb191b82bbc3bcfb881da004 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 19:04:37 +0000
Subject: Change threshold for using scroller on View Collection page

---
 wqflask/wqflask/templates/collections/view.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 8dee5244..4f1c82f0 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -298,7 +298,7 @@
                     $('td', row).eq(10).attr('data-export', $('td', row).eq(9).text());
                 },
                 "order": [[1, "asc" ]],
-                {% if traits_json|length > 10 %}
+                {% if traits_json|length > 20 %}
                 "scroller": true
                 {% else %}
                 "scroller": false
-- 
cgit v1.2.3


From 6144a94c440d322bdd0dabca7dbe8389d99bda43 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 19:29:37 +0000
Subject: Add table redraw function to create_datatable.js since it applies to
 multiple tables

---
 wqflask/wqflask/static/new/javascript/create_datatable.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index 8f24df1e..68296f06 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -109,4 +109,10 @@ create_table = function(tableId="trait_table", tableData = [], columnDefs = [],
             toggleColumn(column);
         }
     } );
+
+    $('#redraw').on('click', function (e) {
+        e.preventDefault();
+        trait_table.columns().visible( true );
+        $('.toggle-vis.active').removeClass('active');
+    });
 }
-- 
cgit v1.2.3


From b4ba085d8761951c8220d67cd79fa6e8ff7107cb Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 19:31:18 +0000
Subject: Convert Correlation table to use create_datatable.js

---
 wqflask/wqflask/templates/correlation_page.html | 667 +++++++++++-------------
 1 file changed, 309 insertions(+), 358 deletions(-)

diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index ceaa34b1..dbab2ffc 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -131,9 +131,6 @@
 {% endblock %}
 
 {% block js %}
-    <script type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
-    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
-
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
@@ -143,10 +140,13 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='fontawesome/js/all.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script>
+    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
     
 
     <script type="text/javascript" charset="utf-8">
-        var table_json = {{ table_json | safe }}
+        var tableJson = {{ table_json | safe }}
     </script>
 
     <script type="text/javascript" charset="utf-8">
@@ -223,370 +223,321 @@
         {% endif %}
 
         $(document).ready( function () {
-            table_conf = {
-                buttons: [
-                  {
-                    extend: 'csvHtml5',
-                    text: 'Download <span class="glyphicon glyphicon-download"></span>',
-                    className: 'btn btn-default',
-                    exportOptions: {
-                      columns: 'th:not(:first-child)'
-                    }
-                  }
-                ],
-                'drawCallback': function( settings ) {
-                      $('#trait_table tr').off().on("click", function(event) {
-                        if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                          var obj =$(this).find('input');
-                          obj.prop('checked', !obj.is(':checked'));
-                        }
-                        if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                          $(this).removeClass("selected")
-                        } else if (event.target.tagName.toLowerCase() !== 'a') {
-                          $(this).addClass("selected")
-                        }
-                        change_buttons()
-                      });
-                },
-                "data": table_json,
-                "columns": [
-                    {
-                      'data': null,
-                      'width': "25px",
-                      'orderDataType': "dom-checkbox",
-                      'orderSequence': [ "desc", "asc"],
-                      'render': function(data, type, row, meta) {
-                        return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
-                      }
-                    },
-                    {
-                      'title': "Index",
-                      'type': "natural",
-                      'width': "30px",
-                      'data': "index"
-                    },
-                    {
-                      'title': "Record",
-                      'type': "natural-minus-na",
-                      'data': null,
-                      'width': "60px",
-                      'render': function(data, type, row, meta) {
-                        return '<a target="_blank" href="/show_trait?trait_id=' + data.trait_id + '&dataset=' + data.dataset + '">' + data.trait_id + '</a>'
-                      }
-                    }{% if target_dataset.type == 'ProbeSet' %},
-                    {
-                      'title': "Symbol",
-                      'type': "natural",
-                      'width': "120px",
-                      'data': "symbol"
-                    },
-                    {
-                      'title': "Description",
-                      'type': "natural",
-                      'data': null,
-                      'render': function(data, type, row, meta) {
-                        try {
-                          return decodeURIComponent(escape(data.description))
-                        } catch(err){
-                          return escape(data.description)
-                        }
-                      }
-                    },
-                    {
-                      'title': "Location",
-                      'type': "natural-minus-na",
-                      'width': "125px",
-                      'data': "location"
-                    },
-                    {
-                      'title': "Mean",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "mean",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': null,
-                      'orderSequence': [ "desc", "asc"],
-                      'render': function(data, type, row, meta) {
-                        if (data.sample_r != "N/A") {
-                          return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
-                        } else {
-                          return data.sample_r
-                        }
-                      }
-                    },
-                    {
-                      'title': "N",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "num_overlap",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
-                      'type': "scientific",
-                      'width': "65px",
-                      'data': "sample_p",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Lit {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "lit_corr",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Tissue {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "tissue_corr",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Tissue p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "tissue_pvalue",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
-                      'type': "natural-minus-na",
-                      'data': "lod_score",
-                      'width': "60px",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Peak Location",
-                      'type': "natural-minus-na",
-                      'width': "125px",
-                      'data': "lrs_location"
-                    },
-                    {
-                      'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
-                      'type': "natural-minus-na",
-                      'data': "additive",
-                      'width': "85px",
-                      'orderSequence': [ "desc", "asc"]
-                    }{% elif target_dataset.type == 'Publish' %},
-                    {
-                      'title': "Abbreviation",
-                      'type': "natural",
-                      'width': "200px",
-                      'data': null,
-                      'render': function(data, type, row, meta) {
-			                  try {
-                          return decodeURIComponent(escape(data.abbreviation_display))
-			                  } catch(err){
-			                    return data.abbreviation_display
-                        }
-                      }
-                    },
-                    {
-                      'title': "Description",
-                      'type': "natural",
-                      'data': null,
-                      'render': function(data, type, row, meta) {
-			                  try {
-                          return decodeURIComponent(escape(data.description))
-			                  } catch(err){
-			                    return data.description
-                        }
-                      }
-                    },
-                    {
-                      'title': "Mean",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "mean",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Authors",
-                      'type': "natural",
-                      'width': "400px",
-                      'data': null,
-                      'render': function(data, type, row, meta) {
-			                  try {
-                          return decodeURIComponent(escape(data.authors_display))
-			                  } catch(err){
-			                    return data.authors_display
-                        }
-                      }
-                    },
-                    {
-                      'title': "Year",
-                      'type': "natural-minus-na",
-                      'data': null,
-                      'width': "80px",
-                      'render': function(data, type, row, meta) {
-                        if (data.pubmed_id != "N/A"){
-                          return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
-                        } else {
-                          return data.pubmed_text
-                        }
-                      },
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': null,
-                      'orderSequence': [ "desc", "asc"],
-                      'render': function(data, type, row, meta) {
-                        if (data.sample_r != "N/A") {
-                          return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name== 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
-                        } else {
-                          return data.sample_r
-                        }
-                      }
-                    },
-                    {
-                      'title': "N",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "num_overlap",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
-                      'type': "scientific",
-                      'width': "65px",
-                      'data': "sample_p",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
-                      'type': "natural-minus-na",
-                      'data': "lod_score",
-                      'width': "60px",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Peak Location",
-                      'type': "natural-minus-na",
-                      'width': "125px",
-                      'data': "lrs_location"
-                    },
-                    {
-                      'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
-                      'type': "natural-minus-na",
-                      'data': "additive",
-                      'width': "85px",
-                      'orderSequence': [ "desc", "asc"]
-                    }{% elif target_dataset.type == 'Geno' %},
-                    {
-                      'title': "Location",
-                      'type': "natural-minus-na",
-                      'width': "120px",
-                      'data': "location"
-                    }, 
-                    {
-                      'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': null,
-                      'orderSequence': [ "desc", "asc"],
-                      'render': function(data, type, row, meta) {
-                        if (data.sample_r != "N/A") {
-                          return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
-                        } else {
-                          return data.sample_r
-                        }
-                      }
-                    },
-                    {
-                      'title': "N",
-                      'type': "natural-minus-na",
-                      'width': "40px",
-                      'data': "num_overlap",
-                      'orderSequence': [ "desc", "asc"]
-                    },
-                    {
-                      'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
-                      'type': "scientific",
-                      'width': "65px",
-                      'data': "sample_p",
-                      'orderSequence': [ "desc", "asc"]
-                    }{% endif %}
-                ],
-                "columnDefs": [ {
-                    "targets": 0,
-                    "orderable": false
-                } ],
-                {% if target_dataset.type == 'Geno' %}
-                "order": [[6, "asc" ]],
-                {% elif target_dataset.type == 'Publish' %}
-                "order": [[10, "asc" ]],
-                {% else %}
-                "order": [[9, "asc" ]],
-                {% endif %}
-                "sDom": "itir",
-                "autoWidth": true,
-                "bSortClasses": false,
-                "scrollY": "100vh",
-                "scroller":  true,
-                "scrollCollapse": true
-            }
-
-            trait_table = $('#trait_table').DataTable(table_conf);
 
-            trait_table.buttons().container().appendTo('#export_options')
+          tableId = "trait_table";
 
-            $('.buttons-csv').removeClass('dt-button')
-
-            trait_table.on( 'order.dt search.dt draw.dt', function () {
-                trait_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
-                cell.innerHTML = i+1;
-                } );
-            } ).draw();
-
-            $('.toggle-vis').on('click', function (e) {
-              e.preventDefault();
+          columnDefs = [
+            {
+              'data': null,
+              'width': "25px",
+              'orderDataType': "dom-checkbox",
+              'orderSequence': [ "desc", "asc"],
+              'render': function(data, type, row, meta) {
+                return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
+              }
+            },
+            {
+              'title': "Index",
+              'type': "natural",
+              'width': "30px",
+              'data': "index"
+            },
+            {
+              'title': "Record",
+              'type': "natural-minus-na",
+              'data': null,
+              'width': "60px",
+              'render': function(data, type, row, meta) {
+                return '<a target="_blank" href="/show_trait?trait_id=' + data.trait_id + '&dataset=' + data.dataset + '">' + data.trait_id + '</a>'
+              }
+            }{% if target_dataset.type == 'ProbeSet' %},
+            {
+              'title': "Symbol",
+              'type': "natural",
+              'width': "120px",
+              'data': "symbol"
+            },
+            {
+              'title': "Description",
+              'type': "natural",
+              'data': null,
+              'render': function(data, type, row, meta) {
+                try {
+                  return decodeURIComponent(escape(data.description))
+                } catch(err){
+                  return escape(data.description)
+                }
+              }
+            },
+            {
+              'title': "Location",
+              'type': "natural-minus-na",
+              'width': "125px",
+              'data': "location"
+            },
+            {
+              'title': "Mean",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "mean",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': null,
+              'orderSequence': [ "desc", "asc"],
+              'render': function(data, type, row, meta) {
+                if (data.sample_r != "N/A") {
+                  return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+                } else {
+                  return data.sample_r
+                }
+              }
+            },
+            {
+              'title': "N",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "num_overlap",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'type': "scientific",
+              'width': "65px",
+              'data': "sample_p",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Lit {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "lit_corr",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Tissue {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "tissue_corr",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Tissue p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "tissue_pvalue",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
+              'type': "natural-minus-na",
+              'data': "lod_score",
+              'width': "60px",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Peak Location",
+              'type': "natural-minus-na",
+              'width': "125px",
+              'data': "lrs_location"
+            },
+            {
+              'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+              'type': "natural-minus-na",
+              'data': "additive",
+              'width': "85px",
+              'orderSequence': [ "desc", "asc"]
+            }{% elif target_dataset.type == 'Publish' %},
+            {
+              'title': "Abbreviation",
+              'type': "natural",
+              'width': "200px",
+              'data': null,
+              'render': function(data, type, row, meta) {
+                try {
+                  return decodeURIComponent(escape(data.abbreviation_display))
+                } catch(err){
+                  return data.abbreviation_display
+                }
+              }
+            },
+            {
+              'title': "Description",
+              'type': "natural",
+              'data': null,
+              'render': function(data, type, row, meta) {
+                try {
+                  return decodeURIComponent(escape(data.description))
+                } catch(err){
+                  return data.description
+                }
+              }
+            },
+            {
+              'title': "Mean",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "mean",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Authors",
+              'type': "natural",
+              'width': "400px",
+              'data': null,
+              'render': function(data, type, row, meta) {
+                try {
+                  return decodeURIComponent(escape(data.authors_display))
+                } catch(err){
+                  return data.authors_display
+                }
+              }
+            },
+            {
+              'title': "Year",
+              'type': "natural-minus-na",
+              'data': null,
+              'width': "80px",
+              'render': function(data, type, row, meta) {
+                if (data.pubmed_id != "N/A"){
+                  return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
+                } else {
+                  return data.pubmed_text
+                }
+              },
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': null,
+              'orderSequence': [ "desc", "asc"],
+              'render': function(data, type, row, meta) {
+                if (data.sample_r != "N/A") {
+                  return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name== 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+                } else {
+                  return data.sample_r
+                }
+              }
+            },
+            {
+              'title': "N",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "num_overlap",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'type': "scientific",
+              'width': "65px",
+              'data': "sample_p",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>LOD",
+              'type': "natural-minus-na",
+              'data': "lod_score",
+              'width': "60px",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Peak Location",
+              'type': "natural-minus-na",
+              'width': "125px",
+              'data': "lrs_location"
+            },
+            {
+              'title': "Effect Size<a href=\"http://gn1.genenetwork.org/glossary.html#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a>",
+              'type': "natural-minus-na",
+              'data': "additive",
+              'width': "85px",
+              'orderSequence': [ "desc", "asc"]
+            }{% elif target_dataset.type == 'Geno' %},
+            {
+              'title': "Location",
+              'type': "natural-minus-na",
+              'width': "120px",
+              'data': "location"
+            },
+            {
+              'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': null,
+              'orderSequence': [ "desc", "asc"],
+              'render': function(data, type, row, meta) {
+                if (data.sample_r != "N/A") {
+                  return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+                } else {
+                  return data.sample_r
+                }
+              }
+            },
+            {
+              'title': "N",
+              'type': "natural-minus-na",
+              'width': "40px",
+              'data': "num_overlap",
+              'orderSequence': [ "desc", "asc"]
+            },
+            {
+              'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'type': "scientific",
+              'width': "65px",
+              'data': "sample_p",
+              'orderSequence': [ "desc", "asc"]
+            }{% endif %}
+          ]
 
-              // Get the column API object
-              var column = trait_table.column( $(this).attr('data-column') );
+          tableSettings = {
+            "buttons": [
+              {
+                extend: 'csvHtml5',
+                text: 'Download <span class="glyphicon glyphicon-download"></span>',
+                className: 'btn btn-default',
+                exportOptions: {
+                  columns: 'th:not(:first-child)'
+                }
+              }
+            ],
+            {% if target_dataset.type == 'Geno' %}
+            "order": [[6, "asc" ]],
+            {% elif target_dataset.type == 'Publish' %}
+            "order": [[10, "asc" ]],
+            {% else %}
+            "order": [[9, "asc" ]],
+            {% endif %}
+          }
 
-              // Toggle the visibility
-              column.visible( ! column.visible() );
+          create_table(tableId, tableJson, columnDefs, tableSettings)
 
-              if (column.visible()){
-                $(this).removeClass("active");
-              } else {
-                $(this).addClass("active");
-              }
-            } );
+          trait_table = $('#trait_table').DataTable();
+          trait_table.buttons().container().appendTo('#export_options')
 
-            $('#redraw').on('click', function (e) {
-              e.preventDefault();
-              trait_table.columns().visible( true );
-              $('.toggle-vis.active').removeClass('active');
-            });
+          $('.buttons-csv').removeClass('dt-button')
 
-            submit_special = function(url) {
-                $("#correlation_form").attr("action", url);
-                return $("#correlation_form").submit();
-            };
+          submit_special = function(url) {
+              $("#correlation_form").attr("action", url);
+              return $("#correlation_form").submit();
+          };
 
-            $("#delete").on("click", function() {
-                url = $(this).data("url")
-                return submit_special(url)
-            });
+          $("#delete").on("click", function() {
+              url = $(this).data("url")
+              return submit_special(url)
+          });
 
-            $("#more_options").click(function() {
-                $("div#filter_options").toggle();
-            });
+          $("#more_options").click(function() {
+              $("div#filter_options").toggle();
+          });
 
-            $("#select_traits").click(function() {
-                console.log("redrawing")
-                trait_table.draw();
-            });
+          $("#select_traits").click(function() {
+              trait_table.draw();
+          });
         });
     </script>
 {% endblock %}
-- 
cgit v1.2.3


From 6e0d422b23d2219298758cfe4bfa4da261f1cf9d Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 19:39:44 +0000
Subject: Convert gene global search to use create_datatable.js

---
 wqflask/wqflask/templates/gsearch_gene.html | 84 +++--------------------------
 1 file changed, 8 insertions(+), 76 deletions(-)

diff --git a/wqflask/wqflask/templates/gsearch_gene.html b/wqflask/wqflask/templates/gsearch_gene.html
index 69281ec5..36739ba3 100644
--- a/wqflask/wqflask/templates/gsearch_gene.html
+++ b/wqflask/wqflask/templates/gsearch_gene.html
@@ -56,6 +56,7 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colResize/dataTables.colResize.js') }}"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
 
     <script type='text/javascript'>
       var getParams = function(url) {
@@ -70,15 +71,13 @@
     </script>
 
     <script type='text/javascript'>
-      var trait_list = {{ trait_list|safe }};
+      var traitsJson = {{ trait_list|safe }};
     </script>
 
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
             var tableId = "trait_table";
 
-            var width_change = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
-
             columnDefs = [
               {
                 'orderDataType': "dom-checkbox",
@@ -196,30 +195,8 @@
               }
             ]
 
-            loadDataTable(true);
-
-            function loadDataTable(first_run=false){
-
-              if (!first_run){
-                setUserColumnsDefWidths(tableId);
-              }
-
-              table_settings = {
-                'drawCallback': function( settings ) {
-                  $('#' + tableId + ' tr').off().on("click", function(event) {
-                    if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                      var obj =$(this).find('input');
-                      obj.prop('checked', !obj.is(':checked'));
-                    }
-                    if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                      $(this).removeClass("selected")
-                    } else if (event.target.tagName.toLowerCase() !== 'a') {
-                      $(this).addClass("selected")
-                    }
-                    change_buttons()
-                  });
-                },
-                'createdRow': function ( row, data, index ) {
+            tableSettings = {
+              'createdRow': function ( row, data, index ) {
                     $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
                     $('td', row).eq(1).attr("align", "right");
                     $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
@@ -257,59 +234,14 @@
                     $('td', row).eq(12).attr('data-export', $('td', row).eq(12).text());
                     $('td', row).eq(13).attr('data-export', $('td', row).eq(13).text());
                 },
-                'data': trait_list,
-                'columns': columnDefs,
-                "order": [[1, "asc" ]],
-                'sDom': "iti",
-                "destroy": true,
-                "deferRender": true,
-                "bSortClasses": false,
-                {% if trait_count > 20 %}
-                "scrollY": "100vh",
-                "scroller":  true,
-                "scrollCollapse": true,
+                {% if trait_count <= 20 %}
+                "scroller":  false
                 {% else %}
-                "iDisplayLength": -1,
+                "scroller": true
                 {% endif %}
-                "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, trait_table);
-                      loadDataTable();
-                    }
-                  });
-                }
-              }
-
-              if (!first_run){
-                table_settings['autoWidth'] = false;
-                $('#table_container').css("width", String($('#trait_table').width() + width_change {% if trait_list|length > 20 %}+ 17{% endif %}) + "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);
-              trait_table = $('#' + tableId).DataTable(table_settings);
-              if (checked_rows.length > 0){
-                recheck_rows(trait_table, checked_rows);
-              }
-
-              if (first_run){
-                  {% if trait_list|length > 20 %}
-                  $('#table_container').css("width", String($('#trait_table').width() + 17) + "px");
-                  {% endif %}
-                  trait_table.draw();
-              }
             }
 
-            $('#redraw').click(function() {
-                var table = $('#' + tableId).DataTable();
-                table.colReorder.reset()
-            });
+            create_table(tableId, traitsJson, columnDefs, tableSettings);
 
         });
         
-- 
cgit v1.2.3


From e7e8972e1110aa9317f369da3e1a9660f8d33e12 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 19:43:03 +0000
Subject: Convert phenotype global search to use create_datatable.js

---
 wqflask/wqflask/templates/gsearch_pheno.html | 86 +++-------------------------
 1 file changed, 9 insertions(+), 77 deletions(-)

diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index 7abdb222..8824ce55 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -56,6 +56,7 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colResize/dataTables.colResize.js') }}"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
 
     <script type='text/javascript'>
       var getParams = function(url) {
@@ -70,15 +71,13 @@
     </script>
 
     <script type='text/javascript'>
-      var trait_list = {{ trait_list|safe }};
+      var traitsJson = {{ trait_list|safe }};
     </script>
 
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
           var tableId = "trait_table";
 
-          var width_change = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
-
           columnDefs = [
             {
               'data': null,
@@ -199,30 +198,8 @@
             }
           ]
 
-          loadDataTable(true);
-
-          function loadDataTable(first_run=false){
-
-            if (!first_run){
-              setUserColumnsDefWidths(tableId);
-            }
-
-            table_settings = {
-              'drawCallback': function( settings ) {
-                $('#' + tableId + ' tr').off().on("click", function(event) {
-                  if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                    var obj =$(this).find('input');
-                    obj.prop('checked', !obj.is(':checked'));
-                  }
-                  if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                    $(this).removeClass("selected")
-                  } else if (event.target.tagName.toLowerCase() !== 'a') {
-                    $(this).addClass("selected")
-                  }
-                  change_buttons()
-                });
-              },
-              "createdRow": function ( row, data, index ) {
+          tableSettings = {
+            "createdRow": function ( row, data, index ) {
                 $('td', row).eq(0).attr("style", "text-align: center; padding: 4px 10px 2px 10px;");
                 $('td', row).eq(1).attr("align", "right");
                 $('td', row).eq(5).attr('title', $('td', row).eq(5).text());
@@ -248,60 +225,15 @@
                 $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
                 $('td', row).eq(10).attr('data-export', $('td', row).eq(10).text());
               },
-              'data': trait_list,
-              'columns': columnDefs,
-              "order": [[1, "asc" ]],
-              'sDom': "iti",
-              "destroy": true,
-              "deferRender": true,
-              "bSortClasses": false,
-              {% if trait_count > 20 %}
-              "scrollY": "100vh",
-              "scroller":  true,
-              "scrollCollapse": true,
+              {% if trait_count <= 20 %}
+              "scroller":  false
               {% else %}
-              "iDisplayLength": -1,
+              "scroller": true
               {% endif %}
-              "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, trait_table);
-                    loadDataTable();
-                  }
-                });
-              }
-            }
+          }
 
-            if (!first_run){
-                table_settings['autoWidth'] = false;
-                $('#table_container').css("width", String($('#trait_table').width() + width_change {% if trait_list|length > 20 %}+ 17{% endif %}) + "px"); // 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);
-              trait_table = $('#' + tableId).DataTable(table_settings);
-              if (checked_rows.length > 0){
-                recheck_rows(trait_table, checked_rows);
-              }
-
-              if (first_run){
-                  {% if trait_list|length > 20 %}
-                  $('#table_container').css("width", String($('#trait_table').width() + 17) + "px");
-                  {% endif %}
-              }
-
-              trait_table.draw();
-            }
+          create_table(tableId, traitsJson, columnDefs, tableSettings);
 
-            $('#redraw').click(function() {
-                var table = $('#' + tableId).DataTable();
-                table.colReorder.reset()
-            });
         });
     </script>
 {% endblock %}
-- 
cgit v1.2.3


From 4f40cdf5aad12c719201c45c03bf570f6aa787be Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 21:42:47 +0000
Subject: Fix one target_cols variable I forgot to switch to camelCase

---
 wqflask/wqflask/static/new/javascript/create_datatable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index 68296f06..d42301f9 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -105,7 +105,7 @@ create_table = function(tableId="trait_table", tableData = [], columnDefs = [],
         // Get the column API object
         var targetCols = $(this).attr('data-column').split(",")
         for (let i = 0; i < targetCols.length; i++){
-            var column = theTable.column( target_cols[i] );
+            var column = theTable.column( targetCols[i] );
             toggleColumn(column);
         }
     } );
-- 
cgit v1.2.3


From f3d2cc63d95aefccb5f78233e12e4b145cb3e29a Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 21:44:03 +0000
Subject: Add necessary new JS files to show_trait.html and make formatting of
 all js imports the same

---
 wqflask/wqflask/templates/show_trait.html | 63 ++++++++++---------------------
 1 file changed, 19 insertions(+), 44 deletions(-)

diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index f366d33f..0f93188b 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -131,19 +131,19 @@
         $('.collapse').collapse()
     </script>
 
-    <script type="text/javascript" src="{{ url_for('js', filename='d3js/d3.min.js') }}"></script>
-     <script type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('js', filename='underscore-string/underscore.string.min.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('js', filename='d3-tip/d3-tip.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('js', filename='js_alt/jstat.min.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('js', filename='shapiro-wilk/shapiro-wilk.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script>
-    <script type="text/javascript" src="/static/new/javascript/colorbrewer.js"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='d3js/d3.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='underscore-string/underscore.string.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='d3-tip/d3-tip.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/jstat.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='shapiro-wilk/shapiro-wilk.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/colorbrewer.js"></script>
 
-    <script type="text/javascript" src="/static/new/javascript/stats.js"></script>
-    <script type="text/javascript" src="/static/new/javascript/scatter-matrix.js"></script>
-    <script type="text/javascript" src="/static/new/javascript/plotly_probability_plot.js"></script>
-    <script type="text/javascript" src="/static/new/javascript/compare_traits_scatterplot.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/stats.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/scatter-matrix.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/plotly_probability_plot.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/compare_traits_scatterplot.js"></script>
 
 
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.js') }}"></script>
@@ -151,12 +151,13 @@
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='nouislider/nouislider.js') }}"></script>
-    <script type="text/javascript" src="/static/new/javascript/initialize_show_trait_tables.js"></script>
-    <script type="text/javascript" src="/static/new/javascript/show_trait_mapping_tools.js"></script>
-    <script type="text/javascript" src="/static/new/javascript/show_trait.js"></script>
-    <script type="text/javascript" src="/static/new/javascript/validation.js"></script>
-    <script type="text/javascript" src="/static/new/javascript/get_covariates_from_collection.js"></script>
-    <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/initialize_show_trait_tables.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/show_trait_mapping_tools.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/show_trait.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/validation.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/get_covariates_from_collection.js"></script>
 
     <script type="text/javascript" charset="utf-8">
 
@@ -213,32 +214,6 @@
                    }
                 });
 
-                $('.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 = primary_table.column( target_cols[i] );
-                        toggle_column(column);
-
-                        {% if sample_groups|length != 1 %}
-                        var column2 = other_table.column( target_cols[i] );
-                        toggle_column(column2);
-                        {% endif %}
-                    }
-                } );
-
                 $('#samples_primary, #samples_other').find("tr.outlier").css('background-color', 'orange')
 
                 $('.edit_sample_checkbox:checkbox').change(function() {
-- 
cgit v1.2.3


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


From 3d39fbe474312b2de75bb0fc9142ff210917b0c4 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 21:48:30 +0000
Subject: Define drawCallback in trait page tableSettings, since this table
 shouldn't call change_buttons

---
 .../static/new/javascript/initialize_show_trait_tables.js   | 13 +++++++++++++
 1 file changed, 13 insertions(+)

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 868f3ada..748e4f28 100644
--- a/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
+++ b/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
@@ -176,6 +176,19 @@ for (var i = 0; i < tableIds.length; i++) {
   }
 
   tableSettings = {
+    "drawCallback": function( settings ) {
+      $('#' + tableId + ' tr').off().on("click", function(event) {
+        if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
+          var obj =$(this).find('input');
+          obj.prop('checked', !obj.is(':checked'));
+        }
+        if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
+          $(this).removeClass("selected")
+        } else if (event.target.tagName.toLowerCase() !== 'a') {
+          $(this).addClass("selected")
+        }
+      });
+    },
     'createdRow': function ( row, data, index ) {
       $(row).attr('id', tableType + "_" + data.this_id)
       $(row).addClass("value_se");
-- 
cgit v1.2.3


From 606718eef5bcc24baac69c24a65c4fdec984ef25 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 21:48:48 +0000
Subject: Change most variables in show_trait.js to camelCase

---
 .../wqflask/static/new/javascript/show_trait.js    | 584 ++++++++++-----------
 1 file changed, 292 insertions(+), 292 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 6b81b47e..1b79e261 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -1,12 +1,12 @@
-var Stat_Table_Rows, is_number,
+var statTableRows, isNumber,
   __hasProp = {}.hasOwnProperty,
   __slice = [].slice;
 
-is_number = function(o) {
+isNumber = function(o) {
   return !isNaN((o - 0) && o !== null);
 };
 
-Stat_Table_Rows = [
+statTableRows = [
   {
     vn: "n_of_samples",
     pretty: "N of Samples",
@@ -40,27 +40,27 @@ Stat_Table_Rows = [
 
 if (js_data.dataset_type == "ProbeSet"){
   if (js_data.data_scale == "linear_positive" || js_data.data_scale == "log2") {
-    Stat_Table_Rows.push({
+    statTableRows.push({
                            vn: "range",
                            pretty: "Range (log2)",
                            digits: 3
                          })
   } else {
-    Stat_Table_Rows.push({
+    statTableRows.push({
                            vn: "range",
                            pretty: "Range",
                            digits: 3
                          })
   }
 } else {
-  Stat_Table_Rows.push({
+  statTableRows.push({
                        vn: "range",
                        pretty: "Range",
                        digits: 3
                      })
 }
 
-Stat_Table_Rows.push(
+statTableRows.push(
   {
     vn: "range_fold",
     pretty: "Range (fold)",
@@ -83,7 +83,7 @@ Stat_Table_Rows.push(
   }
 );
 
-var add, block_by_attribute_value, block_by_index, block_outliers, change_stats_value, create_value_dropdown, edit_data_change, export_sample_table_data, get_sample_table_data, hide_no_value, hide_tabs, make_table, on_corr_method_change, open_trait_selection, populate_sample_attributes_values_dropdown, process_id, update_bar_chart, update_histogram, update_prob_plot, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values;
+var add, blockByAttributeValue, blockByIndex, blockOutliers, changeStatsValue, createValueDropdown, editDataChange, exportSampleTableData, getSampleTableData, hideNoValue, hideTabs, makeTable, onCorrMethodChange, openTraitSelection, populateSampleAttributesValuesDropdown, processId, updateBarChart, updateHistogram, updateProbPlot, resetSamplesTable, sampleGroupTypes, sampleLists, showHideOutliers, statsMdpChange, updateStatValues;
 add = function() {
   var trait;
   trait = $("input[name=trait_hmac]").val();
@@ -92,11 +92,11 @@ add = function() {
   });
 };
 $('#add_to_collection').click(add);
-sample_lists = js_data.sample_lists;
-sample_group_types = js_data.sample_group_types;
+sampleLists = js_data.sample_lists;
+sampleGroupTypes = js_data.sample_group_types;
 
 $(".select_covariates").click(function () {
-  open_covariate_selection();
+  openCovariateSelection();
 });
 
 $(".remove_covariates").click(function () {
@@ -146,7 +146,7 @@ $(".remove_all_covariates").click(function() {
   $("input[name=covariates]").val("");
 })
 
-open_trait_selection = function() {
+openTraitSelection = function() {
   return $('#collections_holder').load('/collections/list?color_by_trait #collections_list', (function(_this) {
     return function() {
       $.colorbox({
@@ -160,7 +160,7 @@ open_trait_selection = function() {
     };
   })(this));
 };
-open_covariate_selection = function() {
+openCovariateSelection = function() {
   return $('#collections_holder').load('/collections/list #collections_list', (function(_this) {
     return function() {
       $.colorbox({
@@ -176,7 +176,7 @@ open_covariate_selection = function() {
     };
   })(this));
 };
-hide_tabs = function(start) {
+hideTabs = function(start) {
   var x, _i, _results;
   _results = [];
   for (x = _i = start; start <= 10 ? _i <= 10 : _i >= 10; x = start <= 10 ? ++_i : --_i) {
@@ -184,15 +184,15 @@ hide_tabs = function(start) {
   }
   return _results;
 };
-stats_mdp_change = function() {
+statsMdpChange = function() {
   var selected;
   selected = $(this).val();
-  hide_tabs(0);
+  hideTabs(0);
   return $("#stats_tabs" + selected).show();
 };
-change_stats_value = function(sample_sets, category, value_type, decimal_places, effects) {
+changeStatsValue = function(sample_sets, category, value_type, decimal_places, effects) {
   var current_value, id, in_box, the_value, title_value;
-  id = "#" + process_id(category, value_type);
+  id = "#" + processId(category, value_type);
   in_box = $(id).html;
   current_value = parseFloat($(in_box)).toFixed(decimal_places);
   the_value = sample_sets[category][value_type]();
@@ -213,7 +213,7 @@ change_stats_value = function(sample_sets, category, value_type, decimal_places,
     return $(id).attr('title', title_value);
   }
 };
-update_stat_values = function(sample_sets) {
+updateStatValues = function(sample_sets) {
   var category, row, show_effects, _i, _len, _ref, _results;
   show_effects = $(".tab-pane.active").attr("id") === "stats_tab";
   _ref = ['samples_primary', 'samples_other', 'samples_all'];
@@ -223,9 +223,9 @@ update_stat_values = function(sample_sets) {
     _results.push((function() {
       var _j, _len1, _results1;
       _results1 = [];
-      for (_j = 0, _len1 = Stat_Table_Rows.length; _j < _len1; _j++) {
-        row = Stat_Table_Rows[_j];
-        _results1.push(change_stats_value(sample_sets, category, row.vn, row.digits, show_effects));
+      for (_j = 0, _len1 = statTableRows.length; _j < _len1; _j++) {
+        row = statTableRows[_j];
+        _results1.push(changeStatsValue(sample_sets, category, row.vn, row.digits, show_effects));
       }
       return _results1;
     })());
@@ -233,7 +233,7 @@ update_stat_values = function(sample_sets) {
   return _results;
 };
 
-update_histogram_width = function() {
+updateHistogram_width = function() {
   num_bins = $('#histogram').find('g.trace.bars').find('g.point').length
 
   if (num_bins < 10) {
@@ -245,7 +245,7 @@ update_histogram_width = function() {
   }
 }
 
-update_histogram = function() {
+updateHistogram = function() {
   var x;
   var _i, _len, _ref, data;
   _ref = _.values(root.selected_samples[root.stats_group]);
@@ -263,10 +263,10 @@ update_histogram = function() {
   }
 
   Plotly.newPlot('histogram', root.histogram_data, root.histogram_layout, root.modebar_options);
-  update_histogram_width()
+  updateHistogram_width()
 };
 
-update_bar_chart = function() {
+updateBarChart = function() {
   var x;
   var _i, _len, _ref, data;
   _ref = _.values(root.selected_samples[root.stats_group]);
@@ -302,7 +302,7 @@ update_bar_chart = function() {
     }
   }
 
-  new_chart_range = get_bar_range(trait_vals, trait_vars)
+  new_chart_range = getBarRange(trait_vals, trait_vars)
 
   root.bar_layout['yaxis']['range'] = new_chart_range
 
@@ -327,7 +327,7 @@ update_bar_chart = function() {
 
 update_box_plot = function() {
   var y_value_list = []
-  if (sample_lists.length > 1) {
+  if (sampleLists.length > 1) {
     i = 0;
     for (var sample_group in root.selected_samples){
       var trait_sample_data = _.values(root.selected_samples[sample_group])
@@ -358,9 +358,9 @@ update_box_plot = function() {
   Plotly.newPlot('box_plot', root.box_data, root.box_layout, root.modebar_options)
 }
 
-update_violin_plot = function() {
+updateViolinPlot = function() {
   var y_value_list = []
-  if (sample_lists.length > 1) {
+  if (sampleLists.length > 1) {
     i = 0;
     for (var sample_group in root.selected_samples){
       var trait_sample_data = _.values(root.selected_samples[sample_group])
@@ -392,11 +392,11 @@ update_violin_plot = function() {
 }
 
 
-update_prob_plot = function() {
+updateProbPlot = function() {
   return root.redraw_prob_plot_impl(root.selected_samples, root.prob_plot_group);
 };
 
-make_table = function() {
+makeTable = function() {
   var header, key, row, row_line, table, the_id, the_rows, value, _i, _len, _ref, _ref1;
   if (js_data.trait_symbol != null) {
     header = "<thead><tr><th style=\"color: white; background-color: #369; text-align: center;\" colspan=\"100%\">Trait " + js_data.trait_id + " - " + js_data.trait_symbol + "</th></tr><tr><th style=\"text-align: right; padding-left: 5px;\">Statistic</th>";
@@ -409,7 +409,7 @@ make_table = function() {
   for (key in _ref) {
     if (!__hasProp.call(_ref, key)) continue;
     value = _ref[key];
-    the_id = process_id("column", key);
+    the_id = processId("column", key);
     if (Object.keys(_ref).length > 1) {
         header += "<th id=\"" + the_id + "\" style=\"text-align: right; padding-left: 5px;\">" + value + "</th>";
     } else {
@@ -419,8 +419,8 @@ make_table = function() {
 
   header += "</thead>";
   the_rows = "<tbody>";
-  for (_i = 0, _len = Stat_Table_Rows.length; _i < _len; _i++) {
-    row = Stat_Table_Rows[_i];
+  for (_i = 0, _len = statTableRows.length; _i < _len; _i++) {
+    row = statTableRows[_i];
     if ((row.vn == "range_fold") && js_data.dataset_type == "Publish"){
         continue;
     }
@@ -434,7 +434,7 @@ make_table = function() {
     for (key in _ref1) {
       if (!__hasProp.call(_ref1, key)) continue;
       value = _ref1[key];
-      the_id = process_id(key, row.vn);
+      the_id = processId(key, row.vn);
       row_line += "<td id=\"" + the_id + "\" align=\"right\">N/A</td>";
     }
     row_line += "</tr>";
@@ -444,7 +444,7 @@ make_table = function() {
   table = header + the_rows;
   return $("#stats_table").append(table);
 };
-process_id = function() {
+processId = function() {
   var processed, value, values, _i, _len;
   values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
 
@@ -461,14 +461,14 @@ process_id = function() {
   return processed;
 };
 
-fetch_sample_values = function() {
+fetchSampleValues = function() {
   // This is meant to fetch all sample values using DataTables API, since they can't all be submitted with the form when using Scroller (and this should also be faster)
   sample_val_dict = {};
 
   table = 'samples_primary';
   if ($('#' + table).length){
-    table_api = $('#' + table).DataTable();
-    val_nodes = table_api.column(3).nodes().to$();
+    tableApi = $('#' + table).DataTable();
+    val_nodes = tableApi.column(3).nodes().to$();
     for (_j = 0; _j < val_nodes.length; _j++){
       sample_name = val_nodes[_j].childNodes[0].name.split(":")[1]
       sample_val = val_nodes[_j].childNodes[0].value
@@ -479,7 +479,7 @@ fetch_sample_values = function() {
   return sample_val_dict;
 }
 
-edit_data_change = function() {
+editDataChange = function() {
   var already_seen, checkbox, name, real_dict, real_value, real_variance, row, rows, sample_sets, table, tables, _i, _j, _len, _len1;
   already_seen = {};
   sample_sets = {
@@ -497,20 +497,20 @@ edit_data_change = function() {
   for (_i = 0, _len = tables.length; _i < _len; _i++) {
     table = tables[_i];
     if ($('#' + table).length){
-      table_api = $('#' + table).DataTable();
+      tableApi = $('#' + table).DataTable();
       sample_vals = [];
-      name_nodes = table_api.column(2).nodes().to$();
-      val_nodes = table_api.column(3).nodes().to$();
-      var_nodes = table_api.column(5).nodes().to$();
+      name_nodes = tableApi.column(2).nodes().to$();
+      val_nodes = tableApi.column(3).nodes().to$();
+      var_nodes = tableApi.column(5).nodes().to$();
       for (_j = 0; _j < val_nodes.length; _j++){
         sample_val = val_nodes[_j].childNodes[0].value
         sample_name = $.trim(name_nodes[_j].childNodes[0].textContent)
-        if (is_number(sample_val) && sample_val !== "") {
+        if (isNumber(sample_val) && sample_val !== "") {
           sample_val = parseFloat(sample_val);
           sample_sets[table].add_value(sample_val);
           try {
             sample_var = var_nodes[_j].childNodes[0].value
-            if (is_number(sample_var)) {
+            if (isNumber(sample_var)) {
               sample_var = parseFloat(sample_var)
             } else {
               sample_var = null;
@@ -534,37 +534,37 @@ edit_data_change = function() {
 
   }
 
-  update_stat_values(sample_sets);
+  updateStatValues(sample_sets);
 
   if ($('#histogram').hasClass('js-plotly-plot')){
-    update_histogram();
+    updateHistogram();
   }
   if ($('#bar_chart').hasClass('js-plotly-plot')){
-    update_bar_chart();
+    updateBarChart();
   }
   if ($('#box_plot').hasClass('js-plotly-plot')){
     update_box_plot();
   }
   if ($('#violin_plot').hasClass('js-plotly-plot')){
-    update_violin_plot();
+    updateViolinPlot();
   }
   if ($('#prob_plot_div').hasClass('js-plotly-plot')){
-    return update_prob_plot();
+    return updateProbPlot();
   }
 };
 
-show_hide_outliers = function() {
+showHideOutliers = function() {
   var label;
-  label = $('#show_hide_outliers').val();
+  label = $('#showHideOutliers').val();
   if (label === "Hide Outliers") {
-    return $('#show_hide_outliers').val("Show Outliers");
+    return $('#showHideOutliers').val("Show Outliers");
   } else if (label === "Show Outliers") {
-    $('#show_hide_outliers').val("Hide Outliers");
+    $('#showHideOutliers').val("Hide Outliers");
     return console.log("Should be now Hide Outliers");
   }
 };
 
-on_corr_method_change = function() {
+onCorrMethodChange = function() {
   var corr_method;
   corr_method = $('select[name=corr_type]').val();
   $('.correlation_desc').hide();
@@ -575,7 +575,7 @@ on_corr_method_change = function() {
     return $("#corr_sample_method").show();
   }
 };
-$('select[name=corr_type]').change(on_corr_method_change);
+$('select[name=corr_type]').change(onCorrMethodChange);
 
 on_dataset_change = function() {
   let dataset_type = $('select[name=corr_dataset] option:selected').data('type');
@@ -601,38 +601,38 @@ $('select[name=corr_dataset]').change(on_dataset_change);
 $('select[name=location_type]').change(on_dataset_change);
 
 submit_special = function(url) {
-  $("input[name=sample_vals]").val(JSON.stringify(fetch_sample_values()))
+  $("input[name=sample_vals]").val(JSON.stringify(fetchSampleValues()))
   $("#trait_data_form").attr("action", url);
   $("#trait_data_form").submit();
 };
 
-get_table_contents_for_form_submit = function(form_id) {
-  // Borrowed code from - https://stackoverflow.com/questions/31418047/how-to-post-data-for-the-whole-table-using-jquery-datatables
-  let this_form = $("#" + form_id);
-  var params = primary_table.$('input').serializeArray();
-
-  $.each(params, function(){
-    // If element doesn't exist in DOM
-    if(!$.contains(document, this_form[this.name])){
-       // Create a hidden element
-       this_form.append(
-          $('<input>')
-             .attr('type', 'hidden')
-             .attr('name', this.name)
-             .val(this.value)
-       );
-    }
- });
-}
-
-var corr_input_list = ['sample_vals', 'corr_type', 'primary_samples', 'trait_id', 'dataset', 'group', 'tool_used', 'form_url', 'corr_sample_method', 'corr_samples_group', 'corr_dataset', 'min_expr',
+// getTableContentsForFormSubmit = function(form_id) {
+//   // Borrowed code from - https://stackoverflow.com/questions/31418047/how-to-post-data-for-the-whole-table-using-jquery-datatables
+//   let this_form = $("#" + form_id);
+//   var params = primary_table.$('input').serializeArray();
+
+//   $.each(params, function(){
+//     // If element doesn't exist in DOM
+//     if(!$.contains(document, this_form[this.name])){
+//        // Create a hidden element
+//        this_form.append(
+//           $('<input>')
+//              .attr('type', 'hidden')
+//              .attr('name', this.name)
+//              .val(this.value)
+//        );
+//     }
+//  });
+// }
+
+var corrInputList = ['sample_vals', 'corr_type', 'primary_samples', 'trait_id', 'dataset', 'group', 'tool_used', 'form_url', 'corr_sample_method', 'corr_samples_group', 'corr_dataset', 'min_expr',
                         'corr_return_results', 'location_type', 'loc_chr', 'min_loc_mb', 'max_loc_mb', 'p_range_lower', 'p_range_upper']
 
 $(".test_corr_compute").on("click", (function(_this) {
   return function() {
     $('input[name=tool_used]').val("Correlation");
     $('input[name=form_url]').val("/test_corr_compute");
-    $('input[name=wanted_inputs]').val(corr_input_list.join(","));
+    $('input[name=wanted_inputs]').val(corrInputList.join(","));
     url = "/loading";
     return submit_special(url);
   };
@@ -642,17 +642,17 @@ $(".corr_compute").on("click", (function(_this) {
   return function() {
     $('input[name=tool_used]').val("Correlation");
     $('input[name=form_url]').val("/corr_compute");
-    $('input[name=wanted_inputs]').val(corr_input_list.join(","));
+    $('input[name=wanted_inputs]').val(corrInputList.join(","));
     url = "/loading";
     return submit_special(url);
   };
 })(this));
 
-create_value_dropdown = function(value) {
+createValueDropdown = function(value) {
   return "<option val=" + value + ">" + value + "</option>";
 };
 
-populate_sample_attributes_values_dropdown = function() {
+populateSampleAttributesValuesDropdown = function() {
   var attribute_info, key, sample_attributes, selected_attribute, value, _i, _len, _ref, _ref1, _results;
   $('#attribute_values').empty();
   sample_attributes = [];
@@ -682,33 +682,33 @@ populate_sample_attributes_values_dropdown = function() {
   for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
     value = _ref1[_i];
     if (value != ""){
-      _results.push($(create_value_dropdown(value)).appendTo($('#attribute_values')));
+      _results.push($(createValueDropdown(value)).appendTo($('#attribute_values')));
     }
   }
   return _results;
 };
 
 if (js_data.categorical_attr_exists == "true"){
-  populate_sample_attributes_values_dropdown();
+  populateSampleAttributesValuesDropdown();
 }
 
-$('#exclude_column').change(populate_sample_attributes_values_dropdown);
-block_by_attribute_value = function() {
+$('#exclude_column').change(populateSampleAttributesValuesDropdown);
+blockByAttributeValue = function() {
   var attribute_name, cell_class, exclude_by_value;
 
   let exclude_group = $('#exclude_by_attr_group').val();
   let exclude_column = $('#exclude_column').val();
 
   if (exclude_group === "other") {
-    var table_api = $('#samples_other').DataTable();
+    var tableApi = $('#samples_other').DataTable();
   } else {
-    var table_api = $('#samples_primary').DataTable();
+    var tableApi = $('#samples_primary').DataTable();
   }
 
   exclude_by_value = $('#attribute_values').val();
 
-  let val_nodes = table_api.column(3).nodes().to$();
-  let exclude_val_nodes = table_api.column(attribute_start_pos + parseInt(exclude_column)).nodes().to$();
+  let val_nodes = tableApi.column(3).nodes().to$();
+  let exclude_val_nodes = tableApi.column(attributeStartPos + parseInt(exclude_column)).nodes().to$();
 
   for (i = 0; i < exclude_val_nodes.length; i++) {
     if (exclude_val_nodes[i].hasChildNodes()) {
@@ -721,11 +721,11 @@ block_by_attribute_value = function() {
     }
   }
 
-  edit_data_change();
+  editDataChange();
 };
-$('#exclude_by_attr').click(block_by_attribute_value);
+$('#exclude_by_attr').click(blockByAttributeValue);
 
-block_by_index = function() {
+blockByIndex = function() {
   var end_index, error, index, index_list, index_set, index_string, start_index, _i, _j, _k, _len, _len1, _ref;
   index_string = $('#remove_samples_field').val();
   index_list = [];
@@ -751,11 +751,11 @@ block_by_index = function() {
 
   let block_group = $('#block_group').val();
   if (block_group === "other") {
-    table_api = $('#samples_other').DataTable();
+    tableApi = $('#samples_other').DataTable();
   } else {
-    table_api = $('#samples_primary').DataTable();
+    tableApi = $('#samples_primary').DataTable();
   }
-  val_nodes = table_api.column(3).nodes().to$();
+  val_nodes = tableApi.column(3).nodes().to$();
   for (_k = 0, _len1 = index_list.length; _k < _len1; _k++) {
     index = index_list[_k];
     val_nodes[index - 1].childNodes[0].value = "x";
@@ -771,14 +771,14 @@ filter_by_study = function() {
   if ($('#filter_study_group').length){
     let block_group = $('#filter_study_group').val();
     if (block_group === "other") {
-      table_api = $('#samples_other').DataTable();
+      tableApi = $('#samples_other').DataTable();
     } else {
-      table_api = $('#samples_primary').DataTable();
+      tableApi = $('#samples_primary').DataTable();
     }
   }
 
-  let sample_nodes = table_api.column(2).nodes().to$();
-  let val_nodes = table_api.column(3).nodes().to$();
+  let sample_nodes = tableApi.column(2).nodes().to$();
+  let val_nodes = tableApi.column(3).nodes().to$();
   for (i = 0; i < sample_nodes.length; i++) {
     this_sample = sample_nodes[i].childNodes[0].innerText;
     if (!filter_samples.includes(this_sample)){
@@ -794,20 +794,20 @@ filter_by_value = function() {
   let block_group = $('#filter_group').val();
 
   if (block_group === "other") {
-    var table_api = $('#samples_other').DataTable();
+    var tableApi = $('#samples_other').DataTable();
   } else {
-    var table_api = $('#samples_primary').DataTable();
+    var tableApi = $('#samples_primary').DataTable();
   }
 
-  let val_nodes = table_api.column(3).nodes().to$();
+  let val_nodes = tableApi.column(3).nodes().to$();
   if (filter_column == "value"){
-    var filter_val_nodes = table_api.column(3).nodes().to$();
+    var filter_val_nodes = tableApi.column(3).nodes().to$();
   }
   else if (filter_column == "stderr"){
-    var filter_val_nodes = table_api.column(5).nodes().to$();
+    var filter_val_nodes = tableApi.column(5).nodes().to$();
   }
   else if (!isNaN(filter_column)){
-    var filter_val_nodes = table_api.column(attribute_start_pos + parseInt(filter_column)).nodes().to$();
+    var filter_val_nodes = tableApi.column(attributeStartPos + parseInt(filter_column)).nodes().to$();
   }
   else {
     return false
@@ -850,8 +850,8 @@ filter_by_value = function() {
   }
 };
 
-hide_no_value_filter = function( settings, data, dataIndex ) {
-  this_value = table_api.column(3).nodes().to$()[dataIndex].childNodes[0].value;
+hideNoValue_filter = function( settings, data, dataIndex ) {
+  this_value = tableApi.column(3).nodes().to$()[dataIndex].childNodes[0].value;
   if (this_value == "x"){
     return false
   } else {
@@ -859,77 +859,77 @@ hide_no_value_filter = function( settings, data, dataIndex ) {
   }
 }
 
-hide_no_value = function() {
+hideNoValue = function() {
   tables = ['samples_primary', 'samples_other'];
   filter_active = $(this).data("active");
   for (_i = 0, _len = tables.length; _i < _len; _i++) {
     table = tables[_i];
     if ($('#' + table).length) {
-      table_api = $('#' + table).DataTable();
+      tableApi = $('#' + table).DataTable();
       if (filter_active == "true"){
         $(this).val("Hide No Value")
-        table_api.draw();
+        tableApi.draw();
         $(this).data("active", "false");
       } else {
         $(this).val("Show No Value")
-        $.fn.dataTable.ext.search.push(hide_no_value_filter);
-        table_api.search();
-        table_api.draw();
-        $.fn.dataTable.ext.search.splice($.fn.dataTable.ext.search.indexOf(hide_no_value_filter, 1));
+        $.fn.dataTable.ext.search.push(hideNoValue_filter);
+        tableApi.search();
+        tableApi.draw();
+        $.fn.dataTable.ext.search.splice($.fn.dataTable.ext.search.indexOf(hideNoValue_filter, 1));
         $(this).data("active", "true");
       }
     }
   }
 };
-$('#hide_no_value').click(hide_no_value);
+$('#hideNoValue').click(hideNoValue);
 
-block_outliers = function() {
+blockOutliers = function() {
   return $('.outlier').each((function(_this) {
     return function(_index, element) {
       return $(element).find('.trait-value-input').val('x');
     };
   })(this));
 };
-$('#block_outliers').click(block_outliers);
+$('#blockOutliers').click(blockOutliers);
 
-reset_samples_table = function() {
+resetSamplesTable = function() {
   $('input[name="transform"]').val("");
   $('span[name="transform_text"]').text("")
-  $('#hide_no_value').val("Hide No Value")
+  $('#hideNoValue').val("Hide No Value")
   tables = ['samples_primary', 'samples_other'];
   for (_i = 0, _len = tables.length; _i < _len; _i++) {
     table = tables[_i];
     if ($('#' + table).length) {
-      table_api = $('#' + table).DataTable();
-      val_nodes = table_api.column(3).nodes().to$();
+      tableApi = $('#' + table).DataTable();
+      val_nodes = tableApi.column(3).nodes().to$();
       for (i = 0; i < val_nodes.length; i++) {
         this_node = val_nodes[i].childNodes[0];
         this_node.value = this_node.attributes["data-value"].value;
       }
       if (js_data.se_exists){
-        se_nodes = table_api.column(5).nodes().to$();
+        se_nodes = tableApi.column(5).nodes().to$();
         for (i = 0; i < val_nodes.length; i++) {
           this_node = val_nodes[i].childNodes[0];
           this_node.value = this_node.attributes["data-value"].value;
         }
       }
-      table_api.draw();
+      tableApi.draw();
     }
   }
 };
 $('.reset').click(function() {
-  reset_samples_table();
+  resetSamplesTable();
   $('input[name="transform"]').val("");
-  edit_data_change();
+  editDataChange();
 });
 
-check_for_zero_to_one_vals = function() {
+checkForZeroToOneVals = function() {
   tables = ['samples_primary', 'samples_other'];
   for (_i = 0, _len = tables.length; _i < _len; _i++) {
     table = tables[_i];
     if ($('#' + table).length) {
-      table_api = $('#' + table).DataTable();
-      val_nodes = table_api.column(3).nodes().to$();
+      tableApi = $('#' + table).DataTable();
+      val_nodes = tableApi.column(3).nodes().to$();
       for (i = 0; i < val_nodes.length; i++) {
         this_node = val_nodes[i].childNodes[0];
         if(!isNaN(this_node.value)) {
@@ -943,47 +943,47 @@ check_for_zero_to_one_vals = function() {
   return false
 }
 
-log2_data = function(this_node) {
+log2Data = function(this_node) {
   current_value = this_node.value;
   original_value = this_node.attributes['data-value'].value;
   if(!isNaN(current_value) && !isNaN(original_value)) {
-    if (zero_to_one_vals_exist){
+    if (zeroToOneValsExist){
       original_value = parseFloat(original_value) + 1;
     }
     this_node.value = Math.log2(original_value).toFixed(3);
   }
 };
 
-log10_data = function() {
+log10Data = function() {
   current_value = this_node.value;
   original_value = this_node.attributes['data-value'].value;
   if(!isNaN(current_value) && !isNaN(original_value)) {
-    if (zero_to_one_vals_exist){
+    if (zeroToOneValsExist){
       original_value = parseFloat(original_value) + 1;
     }
     this_node.value = Math.log10(original_value).toFixed(3);
   }
 };
 
-sqrt_data = function() {
+sqrtData = function() {
   current_value = this_node.value;
   original_value = this_node.attributes['data-value'].value;
   if(!isNaN(current_value) && !isNaN(original_value)) {
-    if (zero_to_one_vals_exist){
+    if (zeroToOneValsExist){
       original_value = parseFloat(original_value) + 1;
     }
     this_node.value = Math.sqrt(original_value).toFixed(3);
   }
 };
 
-invert_data = function() {
+invertData = function() {
   current_value = this_node.value;
   if(!isNaN(current_value)) {
     this_node.value = parseFloat(-(current_value)).toFixed(3);
   }
 };
 
-qnorm_data = function() {
+qnormData = function() {
   current_value = this_node.value;
   qnorm_value = this_node.attributes['data-qnorm'].value;
   if(!isNaN(current_value)) {
@@ -991,7 +991,7 @@ qnorm_data = function() {
   }
 };
 
-zscore_data = function() {
+zScoreData = function() {
   current_value = this_node.value;
   zscore_value = this_node.attributes['data-zscore'].value;
   if(!isNaN(current_value)) {
@@ -999,47 +999,47 @@ zscore_data = function() {
   }
 };
 
-do_transform = function(transform_type) {
+doTransform = function(transform_type) {
   tables = ['samples_primary', 'samples_other'];
   for (_i = 0, _len = tables.length; _i < _len; _i++) {
     table = tables[_i];
     if ($('#' + table).length) {
-      table_api = $('#' + table).DataTable();
-      val_nodes = table_api.column(3).nodes().to$();
+      tableApi = $('#' + table).DataTable();
+      val_nodes = tableApi.column(3).nodes().to$();
       for (i = 0; i < val_nodes.length; i++) {
         this_node = val_nodes[i].childNodes[0]
         if (transform_type == "log2"){
-          log2_data(this_node)
+          log2Data(this_node)
         }
         if (transform_type == "log10"){
-          log10_data(this_node)
+          log10Data(this_node)
         }
         if (transform_type == "sqrt"){
-          sqrt_data(this_node)
+          sqrtData(this_node)
         }
         if (transform_type == "invert"){
-          invert_data(this_node)
+          invertData(this_node)
         }
         if (transform_type == "qnorm"){
-          qnorm_data(this_node)
+          qnormData(this_node)
         }
         if (transform_type == "zscore"){
-          zscore_data(this_node)
+          zScoreData(this_node)
         }
       }
     }
   }
 }
 
-normalize_data = function() {
+normalizeData = function() {
   if ($('#norm_method option:selected').val() == 'log2' || $('#norm_method option:selected').val() == 'log10'){
     if ($('input[name="transform"]').val() != "log2" && $('#norm_method option:selected').val() == 'log2') {
-      do_transform("log2")
+      doTransform("log2")
       $('input[name="transform"]').val("log2")
       $('span[name="transform_text"]').text(" - log2 Transformed")
     } else {
       if ($('input[name="transform"]').val() != "log10" && $('#norm_method option:selected').val() == 'log10'){
-        do_transform("log10")
+        doTransform("log10")
         $('input[name="transform"]').val("log10")
         $('span[name="transform_text"]').text(" - log10 Transformed")
       }
@@ -1047,13 +1047,13 @@ normalize_data = function() {
   }
   else if ($('#norm_method option:selected').val() == 'sqrt'){
     if ($('input[name="transform"]').val() != "sqrt") {
-      do_transform("sqrt")
+      doTransform("sqrt")
       $('input[name="transform"]').val("sqrt")
       $('span[name="transform_text"]').text(" - Square Root Transformed")
     }
   }
   else if ($('#norm_method option:selected').val() == 'invert'){
-    do_transform("invert")
+    doTransform("invert")
     $('input[name="transform"]').val("inverted")
     if ($('span[name="transform_text"]:eq(0)').text() != ""){
       current_text = $('span[name="transform_text"]:eq(0)').text();
@@ -1064,26 +1064,26 @@ normalize_data = function() {
   }
   else if ($('#norm_method option:selected').val() == 'qnorm'){
     if ($('input[name="transform"]').val() != "qnorm") {
-      do_transform("qnorm")
+      doTransform("qnorm")
       $('input[name="transform"]').val("qnorm")
       $('span[name="transform_text"]').text(" - Quantile Normalized")
     }
   }
   else if ($('#norm_method option:selected').val() == 'zscore'){
     if ($('input[name="transform"]').val() != "zscore") {
-      do_transform("zscore")
+      doTransform("zscore")
       $('input[name="transform"]').val("zscore")
       $('span[name="transform_text"]').text(" - Z-Scores")
     }
   }
 }
 
-zero_to_one_vals_exist = check_for_zero_to_one_vals();
+zeroToOneValsExist = checkForZeroToOneVals();
 
-show_transform_warning = function() {
+showTransformWarning = function() {
   transform_type = $('#norm_method option:selected').val()
   if (transform_type == "log2" || transform_type == "log10"){
-    if (zero_to_one_vals_exist){
+    if (zeroToOneValsExist){
       $('#transform_alert').css("display", "block")
     }
   } else {
@@ -1092,15 +1092,15 @@ show_transform_warning = function() {
 }
 
 $('#norm_method').change(function(){
-  show_transform_warning()
+  showTransformWarning()
 });
 $('#normalize').hover(function(){
-  show_transform_warning()
+  showTransformWarning()
 });
 
-$('#normalize').click(normalize_data)
+$('#normalize').click(normalizeData)
 
-switch_qnorm_data = function() {
+switchQNormData = function() {
   return $('.trait-value-input').each((function(_this) {
     return function(_index, element) {
       transform_val = $(element).data('transform')
@@ -1111,9 +1111,9 @@ switch_qnorm_data = function() {
     };
   })(this));
 };
-$('#qnorm').click(switch_qnorm_data);
+$('#qnorm').click(switchQNormData);
 
-get_sample_table_data = function(table_name) {
+getSampleTableData = function(table_name) {
   var samples;
   samples = [];
 
@@ -1121,32 +1121,32 @@ get_sample_table_data = function(table_name) {
   var n_exists = false;
 
   if ($('#' + table_name).length){
-    table_api = $('#' + table_name).DataTable();
+    tableApi = $('#' + table_name).DataTable();
     sample_vals = [];
 
-    name_nodes = table_api.column(2).nodes().to$();
-    val_nodes = table_api.column(3).nodes().to$();
+    name_nodes = tableApi.column(2).nodes().to$();
+    val_nodes = tableApi.column(3).nodes().to$();
     if (js_data.se_exists){
-      var_nodes = table_api.column(5).nodes().to$();
+      var_nodes = tableApi.column(5).nodes().to$();
       if (js_data.has_num_cases) {
-        n_nodes = table_api.column(6).nodes().to$();
+        n_nodes = tableApi.column(6).nodes().to$();
       }
     } else {
       if (js_data.has_num_cases){
-        n_nodes = table_api.column(4).nodes().to$();
+        n_nodes = tableApi.column(4).nodes().to$();
       }
     }
 
     for (_j = 0; _j < val_nodes.length; _j++){
       sample_val = val_nodes[_j].childNodes[0].value
       sample_name = $.trim(name_nodes[_j].childNodes[0].textContent)
-      if (is_number(sample_val) && sample_val !== "") {
+      if (isNumber(sample_val) && sample_val !== "") {
         sample_val = parseFloat(sample_val);
         if (typeof var_nodes == 'undefined'){
           sample_var = null;
         } else {
           sample_var = var_nodes[_j].childNodes[0].value;
-          if (is_number(sample_var)) {
+          if (isNumber(sample_var)) {
             sample_var = parseFloat(sample_var);
             se_exists = true;
           } else {
@@ -1157,7 +1157,7 @@ get_sample_table_data = function(table_name) {
           sample_n = null;
         } else {
           sample_n = n_nodes[_j].childNodes[0].value;
-          if (is_number(sample_n)) {
+          if (isNumber(sample_n)) {
             n_exists = true;
             sample_n = parseInt(sample_n);
           } else {
@@ -1177,11 +1177,11 @@ get_sample_table_data = function(table_name) {
 
   return samples;
 };
-export_sample_table_data = function() {
+exportSampleTableData = function() {
   var format, json_sample_data, sample_data;
   sample_data = {};
-  sample_data.primary_samples = get_sample_table_data('samples_primary');
-  sample_data.other_samples = get_sample_table_data('samples_other');
+  sample_data.primary_samples = getSampleTableData('samples_primary');
+  sample_data.other_samples = getSampleTableData('samples_other');
   json_sample_data = JSON.stringify(sample_data);
   $('input[name=export_data]').val(json_sample_data);
   format = $('input[name=export_format]').val();
@@ -1203,11 +1203,11 @@ $('.export_format').change(function() {
   $('.export_format').val( this.value );
 });
 
-$('.export').click(export_sample_table_data);
-$('#block_outliers').click(block_outliers);
+$('.export').click(exportSampleTableData);
+$('#blockOutliers').click(blockOutliers);
 _.mixin(_.str.exports());
 
-get_sample_vals = function(sample_list) {
+getSampleVals = function(sample_list) {
   var sample;
   return this.sample_vals = (function() {
     var i, len, results;
@@ -1222,7 +1222,7 @@ get_sample_vals = function(sample_list) {
   })();
 };
 
-get_sample_errors = function(sample_list) {
+getSampleErrors = function(sample_list) {
   var sample;
   return this.sample_vals = (function() {
     var i, len, results;
@@ -1239,9 +1239,9 @@ get_sample_errors = function(sample_list) {
   })();
 };
 
-get_sample_names = function(sample_list) {
+getSampleNames = function(sample_list) {
   var sample;
-  return this.sample_names = (function() {
+  return this.sampleNames = (function() {
     var i, len, results;
     results = [];
     for (i = 0, len = sample_list.length; i < len; i++) {
@@ -1254,31 +1254,31 @@ get_sample_names = function(sample_list) {
   })();
 };
 
-get_bar_bottom_margin = function(sample_list){
-  bottom_margin = 80
-  max_length = 0
-  sample_names = get_sample_names(sample_list)
-  for (i=0; i < sample_names.length; i++){
-    if (sample_names[i].length > max_length) {
-      max_length = sample_names[i].length
+getBarBottomMargin = function(sample_list){
+  bottomMargin = 80
+  maxLength = 0
+  sampleNames = getSampleNames(sample_list)
+  for (i=0; i < sampleNames.length; i++){
+    if (sampleNames[i].length > maxLength) {
+      maxLength = sampleNames[i].length
     }
   }
 
-  if (max_length > 6){
-    bottom_margin += 11*(max_length - 6)
+  if (maxLength > 6){
+    bottomMargin += 11*(maxLength - 6)
   }
 
-  return bottom_margin;
+  return bottomMargin;
 }
 
 root.stats_group = 'samples_primary';
 
 if (Object.keys(js_data.sample_group_types).length > 1) {
-    full_sample_lists = [sample_lists[0], sample_lists[1], sample_lists[0].concat(sample_lists[1])]
-    sample_group_list = [js_data.sample_group_types['samples_primary'], js_data.sample_group_types['samples_other'], js_data.sample_group_types['samples_all']]
+    fullSampleLists = [sampleLists[0], sampleLists[1], sampleLists[0].concat(sampleLists[1])]
+    sampleGroupList = [js_data.sample_group_types['samples_primary'], js_data.sample_group_types['samples_other'], js_data.sample_group_types['samples_all']]
 } else {
-    full_sample_lists = [sample_lists[0]]
-    sample_group_list = [js_data.sample_group_types['samples_primary']]
+    fullSampleLists = [sampleLists[0]]
+    sampleGroupList = [js_data.sample_group_types['samples_primary']]
 }
 
 // Define Plotly Options (for the options bar at the top of each figure)
@@ -1307,76 +1307,76 @@ root.modebar_options = {
 
 // Bar Chart
 
-root.errors_exist = get_sample_errors(sample_lists[0])[1]
-var bar_trace = {
-    x: get_sample_names(sample_lists[0]),
-    y: get_sample_vals(sample_lists[0]),
+root.errors_exist = getSampleErrors(sampleLists[0])[1]
+var barTrace = {
+    x: getSampleNames(sampleLists[0]),
+    y: getSampleVals(sampleLists[0]),
     error_y: {
         type: 'data',
-        array: get_sample_errors(sample_lists[0])[0],
+        array: getSampleErrors(sampleLists[0])[0],
         visible: root.errors_exist
     },
     type: 'bar'
 }
 
-root.bar_data = [bar_trace]
+root.bar_data = [barTrace]
 
-get_bar_range = function(sample_vals, sample_errors = null){
-  positive_error_vals = []
-  negative_error_vals = []
+getBarRange = function(sample_vals, sampleErrors = null){
+  positiveErrorVals = []
+  negativeErrorVals = []
   for (i = 0;i < sample_vals.length; i++){
-    if (sample_errors[i] != undefined) {
-        positive_error_vals.push(sample_vals[i] + sample_errors[i])
-        negative_error_vals.push(sample_vals[i] - sample_errors[i])
+    if (sampleErrors[i] != undefined) {
+        positiveErrorVals.push(sample_vals[i] + sampleErrors[i])
+        negativeErrorVals.push(sample_vals[i] - sampleErrors[i])
     } else {
-        positive_error_vals.push(sample_vals[i])
-        negative_error_vals.push(sample_vals[i])
+        positiveErrorVals.push(sample_vals[i])
+        negativeErrorVals.push(sample_vals[i])
     }
   }
 
-  min_y_val = Math.min(...negative_error_vals)
-  max_y_val = Math.max(...positive_error_vals)
+  minYVal = Math.min(...negativeErrorVals)
+  maxYVal = Math.max(...positiveErrorVals)
 
-  if (min_y_val == 0) {
-    range_top = max_y_val + Math.abs(max_y_val)*0.1
-    range_bottom = 0;
+  if (minYVal == 0) {
+    rangeTop = maxYVal + Math.abs(maxYVal)*0.1
+    rangeBottom = 0;
   } else {
-    range_top = max_y_val + Math.abs(max_y_val)*0.1
-    range_bottom = min_y_val - Math.abs(min_y_val)*0.1
-    if (min_y_val > 0) {
-        range_bottom = min_y_val - 0.1*Math.abs(min_y_val)
-    } else if (min_y_val < 0) {
-        range_bottom = min_y_val + 0.1*min_y_val
+    rangeTop = maxYVal + Math.abs(maxYVal)*0.1
+    rangeBottom = minYVal - Math.abs(minYVal)*0.1
+    if (minYVal > 0) {
+        rangeBottom = minYVal - 0.1*Math.abs(minYVal)
+    } else if (minYVal < 0) {
+        rangeBottom = minYVal + 0.1*minYVal
     } else {
-        range_bottom = 0
+        rangeBottom = 0
     }
   }
 
-  return [range_bottom, range_top]
+  return [rangeBottom, rangeTop]
 }
 
-root.chart_range = get_bar_range(get_sample_vals(sample_lists[0]), get_sample_errors(sample_lists[0])[0])
-val_range = root.chart_range[1] - root.chart_range[0]
-
-if (val_range < 0.05){
-  tick_digits = '.3f'
-  left_margin = 80
-} else if (val_range < 0.5) {
-  tick_digits = '.2f'
-  left_margin = 70
-} else if (val_range < 5){
-  tick_digits = '.1f'
-  left_margin = 60
+root.chart_range = getBarRange(getSampleVals(sampleLists[0]), getSampleErrors(sampleLists[0])[0])
+valRange = root.chart_range[1] - root.chart_range[0]
+
+if (valRange < 0.05){
+  tickDigits = '.3f'
+  leftMargin = 80
+} else if (valRange < 0.5) {
+  tickDigits = '.2f'
+  leftMargin = 70
+} else if (valRange < 5){
+  tickDigits = '.1f'
+  leftMargin = 60
 } else {
-  tick_digits = 'f'
-  left_margin = 55
+  tickDigits = 'f'
+  leftMargin = 55
 }
 
 if (js_data.num_values < 256) {
-  bar_chart_width = 25 * get_sample_vals(sample_lists[0]).length
+  barChartWidth = 25 * getSampleVals(sampleLists[0]).length
 
   //ZS: Set bottom margin dependent on longest sample name length, since those can get long
-  bottom_margin = get_bar_bottom_margin(sample_lists[0])
+  bottomMargin = getBarBottomMargin(sampleLists[0])
 
   root.bar_layout = {
     title: "<b>Trait " + js_data.trait_id + ": " + js_data.short_description + "</b>",
@@ -1402,32 +1402,32 @@ if (js_data.num_values < 256) {
         tickfont: {
           size: 16
         },
-        tickformat: tick_digits,
+        tickformat: tickDigits,
         fixedrange: true
     },
-    width: bar_chart_width,
+    width: barChartWidth,
     height: 600,
     margin: {
-        l: left_margin,
+        l: leftMargin,
         r: 30,
         t: 100,
-        b: bottom_margin
+        b: bottomMargin
     }
   };
 
   $('.bar_chart_tab').click(function() {
-    update_bar_chart();
+    updateBarChart();
   });
 }
 
 total_sample_count = 0
-for (i = 0, i < sample_lists.length; i++;) {
-  total_sample_count += get_sample_vals(sample_lists[i]).length
+for (i = 0, i < sampleLists.length; i++;) {
+  total_sample_count += getSampleVals(sampleLists[i]).length
 }
 
 // Histogram
 var hist_trace = {
-    x: get_sample_vals(sample_lists[0]),
+    x: getSampleVals(sampleLists[0]),
     type: 'histogram'
 };
 root.histogram_data = [hist_trace];
@@ -1472,14 +1472,14 @@ root.histogram_layout = {
 };
 
 $('.histogram_tab').click(function() {
-  update_histogram();
-  update_histogram_width();
+  updateHistogram();
+  updateHistogram_width();
 });
 
 $('.histogram_samples_group').val(root.stats_group);
 $('.histogram_samples_group').change(function() {
   root.stats_group = $(this).val();
-  return update_histogram();
+  return updateHistogram();
 });
 
 root.box_layout = {
@@ -1505,7 +1505,7 @@ root.box_layout = {
         tickfont: {
           size: 16
         },
-        tickformat: tick_digits,
+        tickformat: tickDigits,
         zeroline: false,
         automargin: true
     },
@@ -1516,13 +1516,13 @@ root.box_layout = {
         b: 80
     }
 };
-if (full_sample_lists.length > 1) {
+if (fullSampleLists.length > 1) {
     root.box_layout['width'] = 600;
     root.box_layout['height'] = 500;
     var trace1 = {
-        y: get_sample_vals(full_sample_lists[0]),
+        y: getSampleVals(fullSampleLists[0]),
         type: 'box',
-        name: sample_group_list[0],
+        name: sampleGroupList[0],
         boxpoints: 'Outliers',
         jitter: 0.5,
         whiskerwidth: 0.2,
@@ -1537,9 +1537,9 @@ if (full_sample_lists.length > 1) {
         }
     }
     var trace2 = {
-        y: get_sample_vals(full_sample_lists[1]),
+        y: getSampleVals(fullSampleLists[1]),
         type: 'box',
-        name: sample_group_list[1],
+        name: sampleGroupList[1],
         boxpoints: 'Outliers',
         jitter: 0.5,
         whiskerwidth: 0.2,
@@ -1554,9 +1554,9 @@ if (full_sample_lists.length > 1) {
         }
     }
     var trace3 = {
-        y: get_sample_vals(full_sample_lists[2]),
+        y: getSampleVals(fullSampleLists[2]),
         type: 'box',
-        name: sample_group_list[2],
+        name: sampleGroupList[2],
         boxpoints: 'Outliers',
         jitter: 0.5,
         whiskerwidth: 0.2,
@@ -1577,7 +1577,7 @@ if (full_sample_lists.length > 1) {
     root.box_data = [
       {
         type: 'box',
-        y: get_sample_vals(full_sample_lists[0]),
+        y: getSampleVals(fullSampleLists[0]),
         name: "<b>Trait " + js_data.trait_id + "</b>",
         boxpoints: 'Outliers',
         jitter: 0.5,
@@ -1628,7 +1628,7 @@ root.violin_layout = {
       tickfont: {
         size: 16
       },
-      tickformat: tick_digits,
+      tickformat: tickDigits,
       zeroline: false,
       automargin: true
   },
@@ -1640,11 +1640,11 @@ root.violin_layout = {
   }
 };
 
-if (full_sample_lists.length > 1) {
+if (fullSampleLists.length > 1) {
     root.violin_layout['width'] = 600;
     root.violin_layout['height'] = 500;
     var trace1 = {
-        y: get_sample_vals(full_sample_lists[2]),
+        y: getSampleVals(fullSampleLists[2]),
         type: 'violin',
         points: 'none',
         box: {
@@ -1656,11 +1656,11 @@ if (full_sample_lists.length > 1) {
         meanline: {
           visible: true
         },
-        name: sample_group_list[2],
-        x0: sample_group_list[2]
+        name: sampleGroupList[2],
+        x0: sampleGroupList[2]
     }
     var trace2 = {
-        y: get_sample_vals(full_sample_lists[1]),
+        y: getSampleVals(fullSampleLists[1]),
         type: 'violin',
         points: 'none',
         box: {
@@ -1672,11 +1672,11 @@ if (full_sample_lists.length > 1) {
         meanline: {
           visible: true
         },
-        name: sample_group_list[1],
-        x0: sample_group_list[1]
+        name: sampleGroupList[1],
+        x0: sampleGroupList[1]
     }
     var trace3 = {
-        y: get_sample_vals(full_sample_lists[0]),
+        y: getSampleVals(fullSampleLists[0]),
         type: 'violin',
         points: 'none',
         box: {
@@ -1688,8 +1688,8 @@ if (full_sample_lists.length > 1) {
         meanline: {
           visible: true
         },
-        name: sample_group_list[0],
-        x0: sample_group_list[0]
+        name: sampleGroupList[0],
+        x0: sampleGroupList[0]
     }
     root.violin_data = [trace1, trace2, trace3]
 } else {
@@ -1697,7 +1697,7 @@ if (full_sample_lists.length > 1) {
     root.violin_layout['height'] = 400;
     root.violin_data = [
       {
-        y: get_sample_vals(full_sample_lists[0]),
+        y: getSampleVals(fullSampleLists[0]),
         type: 'violin',
         points: 'none',
         box: {
@@ -1713,33 +1713,33 @@ if (full_sample_lists.length > 1) {
 }
 
 $('.violin_plot_tab').click(function() {
-  update_violin_plot();
+  updateViolinPlot();
 });
 
-if (get_sample_vals(sample_lists[0]).length < 256) {
+if (getSampleVals(sampleLists[0]).length < 256) {
   $('.bar_chart_samples_group').change(function() {
     root.stats_group = $(this).val();
-    return update_bar_chart();
+    return updateBarChart();
   });
   root.bar_sort = "name"
 }
 $('.sort_by_name').click(function() {
   root.bar_sort = "name"
-  return update_bar_chart();
+  return updateBarChart();
 });
 $('.sort_by_value').click(function() {
   root.bar_sort = "value"
-  return update_bar_chart();
+  return updateBarChart();
 });
 
 root.prob_plot_group = 'samples_primary';
 $('.prob_plot_samples_group').val(root.prob_plot_group);
 $('.prob_plot_tab').click(function() {
-  return update_prob_plot();
+  return updateProbPlot();
 });
 $('.prob_plot_samples_group').change(function() {
   root.prob_plot_group = $(this).val();
-  return update_prob_plot();
+  return updateProbPlot();
 });
 
 function isEmpty( el ){
@@ -1748,37 +1748,37 @@ function isEmpty( el ){
 
 $('.stats_panel').click(function() {
   if (isEmpty($('#stats_table'))){
-    make_table();
-    edit_data_change();
+    makeTable();
+    editDataChange();
   } else {
-    edit_data_change();
+    editDataChange();
   }
 });
 
-$('#block_by_index').click(function(){
-  block_by_index();
-  edit_data_change();
+$('#blockByIndex').click(function(){
+  blockByIndex();
+  editDataChange();
 });
 
 $('#filter_by_study').click(function(){
   filter_by_study();
-  edit_data_change();
+  editDataChange();
 })
 
 $('#filter_by_value').click(function(){
   filter_by_value();
-  edit_data_change();
+  editDataChange();
 })
 
 $('.edit_sample_value').change(function() {
-  edit_data_change();
+  editDataChange();
 });
 
-$('#exclude_group').click(edit_data_change);
-$('#block_outliers').click(edit_data_change);
-$('#reset').click(edit_data_change);
-$('#qnorm').click(edit_data_change);
-$('#normalize').click(edit_data_change);
+$('#exclude_group').click(editDataChange);
+$('#blockOutliers').click(editDataChange);
+$('#reset').click(editDataChange);
+$('#qnorm').click(editDataChange);
+$('#normalize').click(editDataChange);
 
 Number.prototype.countDecimals = function () {
   if(Math.floor(this.valueOf()) === this.valueOf()) return 0;
-- 
cgit v1.2.3


From 02481d43cfcfb9fd36d99d800b6f64fc45f5393e Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 27 Jul 2022 21:51:42 +0000
Subject: From console log from plotly_probability_plot.js

---
 wqflask/wqflask/static/new/javascript/plotly_probability_plot.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js b/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js
index e8b7ab83..59c23819 100644
--- a/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js
+++ b/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js
@@ -286,7 +286,6 @@
         var data = [all_intercept_trace, primary_trace, other_trace]
     }
 
-    console.log("TRACE:", data)
     Plotly.newPlot('prob_plot_div', data, layout, root.modebar_options)
   };
 
-- 
cgit v1.2.3


From 7a3d54708c1a6c64b538f1fbf9abf39b42295dd4 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Mon, 1 Aug 2022 15:05:11 +0000
Subject: Remove commented out code

---
 .../new/javascript/initialize_show_trait_tables.js | 124 ---------------------
 1 file changed, 124 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 748e4f28..2765a880 100644
--- a/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
+++ b/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
@@ -223,127 +223,3 @@ for (var i = 0; i < tableIds.length; i++) {
 
   create_table(tableId, js_data['sample_lists'][i], columnDefs, tableSettings);
 }
-
-
-// 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])
-// }
-
-// function loadDataTable(firstRun=false, tableId, tableData){
-//   if (!firstRun){
-//     setUserColumnsDefWidths(tableId);
-//   }
-
-//   if (tableId == "samples_primary"){
-//     tableType = "Primary"
-//   } else {
-//     tableType = "Other"
-//   }
-
-//   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")
-//         }
-//       }
-
-//       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);
-//         }
-//       });
-//     }
-//   }
-
-//   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


From fe533f2b59397a5254a92c1075338a0b1d17339f Mon Sep 17 00:00:00 2001
From: zsloan
Date: Mon, 1 Aug 2022 15:05:50 +0000
Subject: Fix BNW link by making it https

---
 wqflask/wqflask/templates/bnw_page.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/wqflask/wqflask/templates/bnw_page.html b/wqflask/wqflask/templates/bnw_page.html
index e506d8a8..317b4bd7 100644
--- a/wqflask/wqflask/templates/bnw_page.html
+++ b/wqflask/wqflask/templates/bnw_page.html
@@ -1,7 +1,7 @@
 <title>Opening BNW</title>
-<form method="post" action="http://bnw.genenetwork.org/BNW/sourcecodes/bn_genenet.php" name="bnwform" id="bnwform">
+<form method="post" action="https://bnw.genenetwork.org/sourcecodes/bn_genenet.php" name="bnwform" id="bnwform">
   <input type="hidden" name="My_Genenet" value="{{ form_value }}">
 </form>
 <script  type="text/javascript">
     document.bnwform.submit();
-</script>
\ No newline at end of file
+</script>
-- 
cgit v1.2.3


From 268415b5fe1dd4c355b80e4a74359ef346be1565 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Mon, 1 Aug 2022 15:06:18 +0000
Subject: Change min-width to something more reasonable (will put this in CSS
 later)

---
 wqflask/wqflask/templates/search_result_page.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 0bce6793..d129a7cd 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -131,7 +131,7 @@
             {% endif %}
           </div>
           {% endif %}
-          <div id="trait_table_container" style="{% if dataset.type == 'Geno' %}width: 450px;{% else %} min-width: 1400px;{% endif %}">
+          <div id="trait_table_container" style="{% if dataset.type == 'Geno' %}width: 450px;{% else %} min-width: 800px;{% endif %}">
             <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
                 <tbody>
                  <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
-- 
cgit v1.2.3


From 7bad8d7d86a72932ab49498c44c0e345ec93f43e Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:04:18 +0000
Subject: Condense some conditional logic

---
 wqflask/wqflask/static/new/javascript/create_datatable.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index d42301f9..7635cae0 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -68,9 +68,6 @@ create_table = function(tableId="trait_table", tableData = [], columnDefs = [],
         } else {
             theTable = $('#' + tableId).DataTable(tableSettings);
             theTable.draw();
-        }
-
-        if (firstRun){
             $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
         }
     }
-- 
cgit v1.2.3


From 1c13e5aa3f221a85448c8d453e8e79ef19c05ed0 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:07:53 +0000
Subject: Remove unused parameters from column render functions in
 search_result_page.html

---
 wqflask/wqflask/templates/search_result_page.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index d129a7cd..62ee93cc 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -193,7 +193,7 @@
                 'width': "5px",
                 'orderDataType': "dom-checkbox",
                 'targets': 0,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
                 }
               },
@@ -213,7 +213,7 @@
                 'data': null,
                 'width': "{{ max_widths.display_name * 8 }}px",
                 'targets': 2,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
                 }
               },
@@ -229,7 +229,7 @@
                 'type': "natural",
                 'data': null,
                 'targets': 4,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   try {
                     return decodeURIComponent(escape(data.description))
                   } catch(err){
@@ -281,7 +281,7 @@
                 'width': "{{ max_widths.display_name * 9 }}px",
                 'data': null,
                 'targets': 2,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
                 }
               },
@@ -295,7 +295,7 @@
                 {% endif %}
                 'data': null,
                 'targets': 3,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   try {
                       return decodeURIComponent(escape(data.description))
                   } catch(err){
@@ -321,7 +321,7 @@
                 {% endif %}
                 'data': null,
                 'targets': 5,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   author_list = data.authors.split(",")
                   if (author_list.length >= 2) {
                     author_string = author_list.slice(0, 2).join(",") + ", et al."
@@ -337,7 +337,7 @@
                 'data': null,
                 'width': "50px",
                 'targets': 6,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   if (data.pubmed_id != "N/A"){
                     return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
                   } else {
@@ -375,7 +375,7 @@
                 'width': "{{ max_widths.display_name * 9 }}px",
                 'data': null,
                 'targets': 2,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
                 }
               },
-- 
cgit v1.2.3


From a27af20d34190ab5320350dfe73d0a4ce6e116d7 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:09:01 +0000
Subject: Remove unused parameters from correlation_page.html column render
 functions

---
 wqflask/wqflask/templates/correlation_page.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index dbab2ffc..8e9af648 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -232,7 +232,7 @@
               'width': "25px",
               'orderDataType': "dom-checkbox",
               'orderSequence': [ "desc", "asc"],
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
               }
             },
@@ -247,7 +247,7 @@
               'type': "natural-minus-na",
               'data': null,
               'width': "60px",
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 return '<a target="_blank" href="/show_trait?trait_id=' + data.trait_id + '&dataset=' + data.dataset + '">' + data.trait_id + '</a>'
               }
             }{% if target_dataset.type == 'ProbeSet' %},
@@ -261,7 +261,7 @@
               'title': "Description",
               'type': "natural",
               'data': null,
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 try {
                   return decodeURIComponent(escape(data.description))
                 } catch(err){
@@ -288,7 +288,7 @@
               'width': "40px",
               'data': null,
               'orderSequence': [ "desc", "asc"],
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 if (data.sample_r != "N/A") {
                   return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
                 } else {
@@ -356,7 +356,7 @@
               'type': "natural",
               'width': "200px",
               'data': null,
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 try {
                   return decodeURIComponent(escape(data.abbreviation_display))
                 } catch(err){
@@ -368,7 +368,7 @@
               'title': "Description",
               'type': "natural",
               'data': null,
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 try {
                   return decodeURIComponent(escape(data.description))
                 } catch(err){
@@ -388,7 +388,7 @@
               'type': "natural",
               'width': "400px",
               'data': null,
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 try {
                   return decodeURIComponent(escape(data.authors_display))
                 } catch(err){
@@ -401,7 +401,7 @@
               'type': "natural-minus-na",
               'data': null,
               'width': "80px",
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 if (data.pubmed_id != "N/A"){
                   return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
                 } else {
@@ -416,7 +416,7 @@
               'width': "40px",
               'data': null,
               'orderSequence': [ "desc", "asc"],
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 if (data.sample_r != "N/A") {
                   return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name== 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
                 } else {
@@ -470,7 +470,7 @@
               'width': "40px",
               'data': null,
               'orderSequence': [ "desc", "asc"],
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 if (data.sample_r != "N/A") {
                   return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
                 } else {
-- 
cgit v1.2.3


From 12d9c5d87c75e5b2eee69f3533ea4452d88b1b35 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:12:10 +0000
Subject: Remove unused parameters from collections/view.html column render
 functions

---
 wqflask/wqflask/templates/collections/view.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 4f1c82f0..a9c84cb0 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -139,7 +139,7 @@
                     'width': "5px",
                     'orderDataType': "dom-checkbox",
                     'targets': 0,
-                    'render': function(data, type, row, meta) {
+                    'render': function(data) {
                         return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
                     }
                 },
@@ -166,7 +166,7 @@
                     'width': "120px",
                     'targets': 3,
                     'data': null,
-                    'render': function(data, type, row, meta) {
+                    'render': function(data) {
                         return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
                     }
                 },
@@ -175,7 +175,7 @@
                     'type': "natural",
                     'targets': 4,
                     'data': null,
-                    'render': function(data, type, row, meta) {
+                    'render': function(data) {
                         if (Object.hasOwn(data, 'symbol')){
                             return data.symbol
                         } else {
@@ -188,7 +188,7 @@
                     'type': "natural",
                     'targets': 5,
                     'data': null,
-                    'render': function(data, type, row, meta) {
+                    'render': function(data) {
                         if (Object.hasOwn(data, 'description')){
                             try {
                                 return decodeURIComponent(escape(data.description))
@@ -206,7 +206,7 @@
                     'width': "125px",
                     'targets': 6,
                     'data': null,
-                    'render': function(data, type, row, meta) {
+                    'render': function(data) {
                         if (Object.hasOwn(data, 'location')){
                             return data.location
                         } else {
@@ -221,7 +221,7 @@
                     'data': null,
                     'targets': 7,
                     'orderSequence': [ "desc", "asc"],
-                    'render': function(data, type, row, meta) {
+                    'render': function(data) {
                         if (Object.hasOwn(data, 'mean')){
                             return data.mean.toFixed(3)
                         } else {
@@ -236,7 +236,7 @@
                     'width': "60px",
                     'targets': 8,
                     'orderSequence': [ "desc", "asc"],
-                    'render': function(data, type, row, meta) {
+                    'render': function(data) {
                         if (Object.hasOwn(data, 'lrs_score')){
                             return (data.lrs_score / 4.61).toFixed(3)
                         } else {
@@ -250,7 +250,7 @@
                     'data': null,
                     'width': "125px",
                     'targets': 9,
-                    'render': function(data, type, row, meta) {
+                    'render': function(data) {
                         if (Object.hasOwn(data, 'lrs_location')){
                             return data.lrs_location
                         } else {
@@ -265,7 +265,7 @@
                     'width': "85px",
                     'targets': 10,
                     'orderSequence': [ "desc", "asc"],
-                    'render': function(data, type, row, meta) {
+                    'render': function(data) {
                         if (Object.hasOwn(data, 'additive')){
                             return data.additive.toFixed(3)
                         } else {
-- 
cgit v1.2.3


From e7db621fa700ec8749dddc183e75fa3b1bd7460e Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:13:27 +0000
Subject: Remove unused parameters from gsearch_gene.html's column render
 functions

---
 wqflask/wqflask/templates/gsearch_gene.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/wqflask/wqflask/templates/gsearch_gene.html b/wqflask/wqflask/templates/gsearch_gene.html
index 36739ba3..39c46f02 100644
--- a/wqflask/wqflask/templates/gsearch_gene.html
+++ b/wqflask/wqflask/templates/gsearch_gene.html
@@ -84,7 +84,7 @@
                 'width': "5px",
                 'data': null,
                 'targets': 0,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   return '<input type="checkbox" name="searchResult" class="trait_checkbox checkbox" value="' + data.hmac + '">'
                 }
               },
@@ -102,7 +102,7 @@
                 'width': "60px",
                 'data': null,
                 'targets': 2,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.name + '</a>'
                 }
               },
@@ -147,7 +147,7 @@
                 'data': null,
                 'width': "120px",
                 'targets': 8,
-                'render': function(data, type, row, meta) {
+                'render': function(data) {
                   try {
                       return decodeURIComponent(escape(data.description))
                   } catch(err) {
-- 
cgit v1.2.3


From dd89575d502e691157f210cdebbd2afb8c292bff Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:14:07 +0000
Subject: Remove unused parameters from gsearch_pheno.html's column render
 functions

---
 wqflask/wqflask/templates/gsearch_pheno.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index 8824ce55..a7357b03 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -84,7 +84,7 @@
               'orderDataType': "dom-checkbox",
               'width': "10px",
               'targets': 0,
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 return '<input type="checkbox" name="searchResult" class="trait_checkbox checkbox" value="' + data.hmac + '">'
               }
             },
@@ -116,7 +116,7 @@
               'width': "60px",
               'targets': 4,
               'orderDataType': "dom-inner-text",
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
               }
             },
@@ -126,7 +126,7 @@
               'width': "500px",
               'targets': 5,
               'data': null,
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 try {
                     return decodeURIComponent(escape(data.description))
                 } catch(err) {
@@ -147,7 +147,7 @@
               'width': "300px",
               'targets': 7,
               'data': null,
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 author_list = data.authors.split(",")
                 if (author_list.length >= 6) {
                   author_string = author_list.slice(0, 6).join(",") + ", et al."
@@ -164,7 +164,7 @@
               'orderDataType': "dom-inner-text",
               'width': "25px",
               'targets': 8,
-              'render': function(data, type, row, meta) {
+              'render': function(data) {
                 if (data.pubmed_id != "N/A"){
                   return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
                 } else {
-- 
cgit v1.2.3


From 6a30e25598b2ca665746954bb26a6c6e08021b34 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:16:07 +0000
Subject: Remove unused parameters from trait page sample table's column render
 functions

---
 .../static/new/javascript/initialize_show_trait_tables.js  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 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 2765a880..cfc4f39e 100644
--- a/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
+++ b/wqflask/wqflask/static/new/javascript/initialize_show_trait_tables.js
@@ -17,7 +17,7 @@ buildColumns = function() {
       'searchable' : false,
       'targets': 0,
       'width': "25px",
-      'render': function(data, type, row, meta) {
+      'render': function() {
       return '<input type="checkbox" name="searchResult" class="checkbox edit_sample_checkbox" value="">'
       }
     },
@@ -35,7 +35,7 @@ buildColumns = function() {
       'data': null,
       'targets': 2,
       'width': "60px",
-      'render': function(data, type, row, meta) {
+      'render': function(data) {
       return '<span class="edit_sample_sample_name">' + data.name + '</span>'
       }
     },
@@ -46,7 +46,7 @@ buildColumns = function() {
       'data': null,
       'targets': 3,
       'width': "60px",
-      'render': function(data, type, row, meta) {
+      'render': function(data) {
         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] + '>'
         } else {
@@ -67,7 +67,7 @@ buildColumns = function() {
         'targets': 4,
         'searchable' : false,
         'width': "25px",
-        'render': function(data, type, row, meta) {
+        'render': function() {
         return '±'
         }
       },
@@ -78,7 +78,7 @@ buildColumns = function() {
         'data': null,
         'targets': 5,
         'width': "60px",
-        'render': function(data, type, row, meta) {
+        'render': function(data) {
           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>'
           } else {
@@ -98,7 +98,7 @@ buildColumns = function() {
           'data': null,
           'targets': 6,
           'width': "60px",
-          'render': function(data, type, row, meta) {
+          'render': function(data) {
             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 {
@@ -120,7 +120,7 @@ buildColumns = function() {
           'data': null,
           'targets': 4,
           'width': "60px",
-          'render': function(data, type, row, meta) {
+          'render': function(data) {
             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 {
-- 
cgit v1.2.3


From a64daab776d2b5637a11204848dc871e3f762308 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:26:28 +0000
Subject: Move logic for creating authors display string to the server-side
 Python code

---
 wqflask/wqflask/search_results.py                 |  4 ++++
 wqflask/wqflask/templates/search_result_page.html | 13 ++-----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/wqflask/wqflask/search_results.py b/wqflask/wqflask/search_results.py
index a82390cb..eb8879dd 100644
--- a/wqflask/wqflask/search_results.py
+++ b/wqflask/wqflask/search_results.py
@@ -172,6 +172,10 @@ class SearchResultPage:
                     trait_dict['pubmed_text'] = result[4]
 
                 trait_dict['authors'] = result[3]
+                trait_dict['authors_display'] = trait_dict['authors']
+                author_list = trait_dict['authors'].split(",")
+                if len(author_list) >= 2:
+                    trait_dict['authors_display'] = (",").join(author_list[:2]) + ", et al."
 
                 if result[6] != "" and result[6] != None:
                     trait_dict['mean'] = f"{result[6]:.3f}"
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 62ee93cc..bd832420 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -319,17 +319,8 @@
                 {% else %}
                 'width': "500px",
                 {% endif %}
-                'data': null,
-                'targets': 5,
-                'render': function(data) {
-                  author_list = data.authors.split(",")
-                  if (author_list.length >= 2) {
-                    author_string = author_list.slice(0, 2).join(",") + ", et al."
-                  } else{
-                    author_string = data.authors
-                  }
-                  return author_string
-                }
+                'data': "authors_display",
+                'targets': 5
               },
               {
                 'title': "<div style='text-align: right;'>Year</div>",
-- 
cgit v1.2.3


From e3930602e3c76200d617542833469c0850fb0449 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:32:41 +0000
Subject: Move logic for creating authors display string to the server-side
 Python code + change this_trait to trait_dict to be more consistent with the
 regular search variable names

---
 wqflask/wqflask/gsearch.py                   | 135 ++++++++++++++-------------
 wqflask/wqflask/templates/gsearch_pheno.html |  11 +--
 2 files changed, 72 insertions(+), 74 deletions(-)

diff --git a/wqflask/wqflask/gsearch.py b/wqflask/wqflask/gsearch.py
index 53a124d0..9df7b2e1 100644
--- a/wqflask/wqflask/gsearch.py
+++ b/wqflask/wqflask/gsearch.py
@@ -72,38 +72,38 @@ class GSearch:
             dataset_to_permissions = {}
             with Bench("Creating trait objects"):
                 for i, line in enumerate(re):
-                    this_trait = {}
-                    this_trait['index'] = i + 1
-                    this_trait['name'] = line[5]
-                    this_trait['dataset'] = line[3]
-                    this_trait['dataset_fullname'] = line[4]
-                    this_trait['hmac'] = hmac.data_hmac(
+                    trait_dict = {}
+                    trait_dict['index'] = i + 1
+                    trait_dict['name'] = line[5]
+                    trait_dict['dataset'] = line[3]
+                    trait_dict['dataset_fullname'] = line[4]
+                    trait_dict['hmac'] = hmac.data_hmac(
                         '{}:{}'.format(line[5], line[3]))
-                    this_trait['species'] = line[0]
-                    this_trait['group'] = line[1]
-                    this_trait['tissue'] = line[2]
-                    this_trait['symbol'] = "N/A"
+                    trait_dict['species'] = line[0]
+                    trait_dict['group'] = line[1]
+                    trait_dict['tissue'] = line[2]
+                    trait_dict['symbol'] = "N/A"
                     if line[6]:
-                        this_trait['symbol'] = line[6]
-                    this_trait['description'] = "N/A"
+                        trait_dict['symbol'] = line[6]
+                    trait_dict['description'] = "N/A"
                     if line[7]:
-                        this_trait['description'] = line[7].decode(
+                        trait_dict['description'] = line[7].decode(
                             'utf-8', 'replace')
-                    this_trait['location_repr'] = "N/A"
+                    trait_dict['location_repr'] = "N/A"
                     if (line[8] != "NULL" and line[8] != "") and (line[9] != 0):
-                        this_trait['location_repr'] = 'Chr%s: %.6f' % (
+                        trait_dict['location_repr'] = 'Chr%s: %.6f' % (
                             line[8], float(line[9]))
 
-                    this_trait['LRS_score_repr'] = "N/A"
-                    this_trait['additive'] = "N/A"
-                    this_trait['mean'] = "N/A"
+                    trait_dict['LRS_score_repr'] = "N/A"
+                    trait_dict['additive'] = "N/A"
+                    trait_dict['mean'] = "N/A"
 
                     if line[11] != "" and line[11] != None:
-                        this_trait['LRS_score_repr'] = f"{line[11]:.3f}"
+                        trait_dict['LRS_score_repr'] = f"{line[11]:.3f}"
                     if line[14] != "" and line[14] != None:
-                        this_trait['additive'] = f"{line[14]:.3f}"
+                        trait_dict['additive'] = f"{line[14]:.3f}"
                     if line[10] != "" and line[10] != None:
-                        this_trait['mean'] = f"{line[10]:.3f}"
+                        trait_dict['mean'] = f"{line[10]:.3f}"
 
                     locus_chr = line[16]
                     locus_mb = line[17]
@@ -111,15 +111,15 @@ class GSearch:
                     max_lrs_text = "N/A"
                     if locus_chr and locus_mb:
                         max_lrs_text = f"Chr{locus_chr}: {locus_mb}"
-                    this_trait['max_lrs_text'] = max_lrs_text
+                    trait_dict['max_lrs_text'] = max_lrs_text
 
-                    this_trait['additive'] = "N/A"
+                    trait_dict['additive'] = "N/A"
                     if line[14] != "" and line[14] != None:
-                        this_trait['additive'] = '%.3f' % line[14]
-                    this_trait['dataset_id'] = line[15]
+                        trait_dict['additive'] = '%.3f' % line[14]
+                    trait_dict['dataset_id'] = line[15]
 
                     dataset_ob = SimpleNamespace(
-                        id=this_trait["dataset_id"], type="ProbeSet", name=this_trait["dataset"], species=this_trait["species"])
+                        id=trait_dict["dataset_id"], type="ProbeSet", name=trait_dict["dataset"], species=trait_dict["species"])
                     if dataset_ob.id not in dataset_to_permissions:
                         permissions = check_resource_availability(dataset_ob)
                         dataset_to_permissions[dataset_ob.id] = permissions
@@ -132,7 +132,7 @@ class GSearch:
                         if permissions['data'] == 'no-access':
                             continue
 
-                    trait_list.append(this_trait)
+                    trait_list.append(trait_dict)
 
             self.trait_count = len(trait_list)
             self.trait_list = trait_list
@@ -215,43 +215,43 @@ class GSearch:
             trait_list = []
             with Bench("Creating trait objects"):
                 for i, line in enumerate(re):
-                    this_trait = {}
-                    this_trait['index'] = i + 1
-                    this_trait['name'] = str(line[4])
+                    trait_dict = {}
+                    trait_dict['index'] = i + 1
+                    trait_dict['name'] = str(line[4])
                     if len(str(line[12])) == 3:
-                        this_trait['display_name'] = str(
-                            line[12]) + "_" + this_trait['name']
+                        trait_dict['display_name'] = str(
+                            line[12]) + "_" + trait_dict['name']
                     else:
-                        this_trait['display_name'] = this_trait['name']
-                    this_trait['dataset'] = line[2]
-                    this_trait['dataset_fullname'] = line[3]
-                    this_trait['hmac'] = hmac.data_hmac(
+                        trait_dict['display_name'] = trait_dict['name']
+                    trait_dict['dataset'] = line[2]
+                    trait_dict['dataset_fullname'] = line[3]
+                    trait_dict['hmac'] = hmac.data_hmac(
                         '{}:{}'.format(line[4], line[2]))
-                    this_trait['species'] = line[0]
-                    this_trait['group'] = line[1]
+                    trait_dict['species'] = line[0]
+                    trait_dict['group'] = line[1]
                     if line[9] != None and line[6] != None:
-                        this_trait['description'] = line[6].decode(
+                        trait_dict['description'] = line[6].decode(
                             'utf-8', 'replace')
                     elif line[5] != None:
-                        this_trait['description'] = line[5].decode(
+                        trait_dict['description'] = line[5].decode(
                             'utf-8', 'replace')
                     else:
-                        this_trait['description'] = "N/A"
-                    this_trait['dataset_id'] = line[14]
+                        trait_dict['description'] = "N/A"
+                    trait_dict['dataset_id'] = line[14]
 
-                    this_trait['LRS_score_repr'] = "N/A"
-                    this_trait['additive'] = "N/A"
-                    this_trait['mean'] = "N/A"
+                    trait_dict['LRS_score_repr'] = "N/A"
+                    trait_dict['additive'] = "N/A"
+                    trait_dict['mean'] = "N/A"
 
                     if line[10] != "" and line[10] != None:
-                        this_trait['LRS_score_repr'] = f"{line[10]:.3f}"
+                        trait_dict['LRS_score_repr'] = f"{line[10]:.3f}"
                         # Some Max LRS values in the DB are wrongly listed as 0.000, but shouldn't be displayed
-                        if this_trait['LRS_score_repr'] == "0.000":
-                            this_trait['LRS_score_repr'] = "N/A"
+                        if trait_dict['LRS_score_repr'] == "0.000":
+                            trait_dict['LRS_score_repr'] = "N/A"
                     if line[11] != "" and line[11] != None:
-                        this_trait['additive'] = f"{line[11]:.3f}"
+                        trait_dict['additive'] = f"{line[11]:.3f}"
                     if line[13] != "" and line[13] != None:
-                        this_trait['mean'] = f"{line[13]:.3f}"
+                        trait_dict['mean'] = f"{line[13]:.3f}"
 
                     locus_chr = line[15]
                     locus_mb = line[16]
@@ -259,22 +259,29 @@ class GSearch:
                     max_lrs_text = "N/A"
                     if locus_chr and locus_mb:
                         max_lrs_text = f"Chr{locus_chr}: {locus_mb}"
-                    this_trait['max_lrs_text'] = max_lrs_text
-
-                    this_trait['authors'] = line[7]
-                    this_trait['year'] = line[8]
-                    this_trait['pubmed_text'] = "N/A"
-                    this_trait['pubmed_link'] = "N/A"
-                    if this_trait['year'].isdigit():
-                        this_trait['pubmed_text'] = this_trait['year']
+                    trait_dict['max_lrs_text'] = max_lrs_text
+
+                    trait_dict['authors'] = line[7]
+
+                    trait_dict['authors'] = line[7]
+                    trait_dict['authors_display'] = trait_dict['authors']
+                    author_list = trait_dict['authors'].split(",")
+                    if len(author_list) >= 2:
+                        trait_dict['authors_display'] = (",").join(author_list[:2]) + ", et al."
+
+                    trait_dict['year'] = line[8]
+                    trait_dict['pubmed_text'] = "N/A"
+                    trait_dict['pubmed_link'] = "N/A"
+                    if trait_dict['year'].isdigit():
+                        trait_dict['pubmed_text'] = trait_dict['year']
                     if line[9] != "" and line[9] != None:
-                        this_trait['pubmed_link'] = webqtlConfig.PUBMEDLINK_URL % line[8]
+                        trait_dict['pubmed_link'] = webqtlConfig.PUBMEDLINK_URL % line[8]
                         if line[12]:
-                            this_trait['display_name'] = line[12] + \
-                                "_" + str(this_trait['name'])
+                            trait_dict['display_name'] = line[12] + \
+                                "_" + str(trait_dict['name'])
 
-                    dataset_ob = SimpleNamespace(id=this_trait["dataset_id"], type="Publish", species=this_trait["species"])
-                    permissions = check_resource_availability(dataset_ob, this_trait['name'])
+                    dataset_ob = SimpleNamespace(id=trait_dict["dataset_id"], type="Publish", species=trait_dict["species"])
+                    permissions = check_resource_availability(dataset_ob, trait_dict['name'])
                     if type(permissions['data']) is list:
                         if "view" not in permissions['data']:
                             continue
@@ -282,7 +289,7 @@ class GSearch:
                         if permissions['data'] == 'no-access':
                             continue
 
-                    trait_list.append(this_trait)
+                    trait_list.append(trait_dict)
 
             self.trait_count = len(trait_list)
             self.trait_list = trait_list
diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index a7357b03..0d18a0bf 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -146,16 +146,7 @@
               'type': "natural",
               'width': "300px",
               'targets': 7,
-              'data': null,
-              'render': function(data) {
-                author_list = data.authors.split(",")
-                if (author_list.length >= 6) {
-                  author_string = author_list.slice(0, 6).join(",") + ", et al."
-                } else{
-                  author_string = data.authors
-                }
-                return author_string
-              }
+              'data': "authors_display"
             },
             {
               'title': "Year",
-- 
cgit v1.2.3


From e0626f40d8fe4fa83daba52b82c1b459b34b1849 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Aug 2022 19:47:16 +0000
Subject: Define ROrRho and corr_method in JS to get rid of some of the
 template logic that was mixed into the JS

---
 wqflask/wqflask/templates/correlation_page.html | 32 +++++++++++++++----------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index 8e9af648..c6cd2544 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -226,6 +226,14 @@
 
           tableId = "trait_table";
 
+          {% if corr_method == 'pearson' %}
+          rOrRho = "r"
+          corr_method = "pearson"
+          {% else %}
+          rOrRho = "rho"
+          corr_method = "spearman"
+          {% endif %}
+
           columnDefs = [
             {
               'data': null,
@@ -283,14 +291,14 @@
               'orderSequence': [ "desc", "asc"]
             },
             {
-              'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'title': "Sample " + rOrRho,
               'type': "natural-minus-na",
               'width': "40px",
               'data': null,
               'orderSequence': [ "desc", "asc"],
               'render': function(data) {
                 if (data.sample_r != "N/A") {
-                  return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+                  return "<a target\"_blank\" href=\"corr_scatter_plot?method=" + corr_method + "&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
                 } else {
                   return data.sample_r
                 }
@@ -304,28 +312,28 @@
               'orderSequence': [ "desc", "asc"]
             },
             {
-              'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'title': "Sample p(" + rOrRho + ")",
               'type': "scientific",
               'width': "65px",
               'data': "sample_p",
               'orderSequence': [ "desc", "asc"]
             },
             {
-              'title': "Lit {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'title': "Lit " + rOrRho,
               'type': "natural-minus-na",
               'width': "40px",
               'data': "lit_corr",
               'orderSequence': [ "desc", "asc"]
             },
             {
-              'title': "Tissue {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'title': "Tissue " + rOrRho,
               'type': "natural-minus-na",
               'width': "40px",
               'data': "tissue_corr",
               'orderSequence': [ "desc", "asc"]
             },
             {
-              'title': "Tissue p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'title': "Tissue p(" + rOrRho + ")",
               'type': "natural-minus-na",
               'width': "40px",
               'data': "tissue_pvalue",
@@ -411,14 +419,14 @@
               'orderSequence': [ "desc", "asc"]
             },
             {
-              'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'title': "Sample " + rOrRho,
               'type': "natural-minus-na",
               'width': "40px",
               'data': null,
               'orderSequence': [ "desc", "asc"],
               'render': function(data) {
                 if (data.sample_r != "N/A") {
-                  return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name== 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+                  return "<a target\"_blank\" href=\"corr_scatter_plot?method=" + corr_method + "&dataset_1={% if this_dataset.name== 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
                 } else {
                   return data.sample_r
                 }
@@ -432,7 +440,7 @@
               'orderSequence': [ "desc", "asc"]
             },
             {
-              'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'title': "Sample p(" + rOrRho + ")",
               'type': "scientific",
               'width': "65px",
               'data': "sample_p",
@@ -465,14 +473,14 @@
               'data': "location"
             },
             {
-              'title': "Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}",
+              'title': "Sample " + rOrRho,
               'type': "natural-minus-na",
               'width': "40px",
               'data': null,
               'orderSequence': [ "desc", "asc"],
               'render': function(data) {
                 if (data.sample_r != "N/A") {
-                  return "<a target\"_blank\" href=\"corr_scatter_plot?method={% if corr_method == 'spearman' %}spearman{% else %}pearson{% endif %}&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
+                  return "<a target\"_blank\" href=\"corr_scatter_plot?method=" + corr_method + "&dataset_1={% if this_dataset.name == 'Temp' %}Temp_{{ this_dataset.group }}{% else %}{{ this_dataset.name }}{% endif %}&dataset_2=" + data.dataset + "&trait_1={{ this_trait.name }}&trait_2=" + data.trait_id + "\">" + data.sample_r + "</a>"
                 } else {
                   return data.sample_r
                 }
@@ -486,7 +494,7 @@
               'orderSequence': [ "desc", "asc"]
             },
             {
-              'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
+              'title': "Sample p(" + rOrRho + ")",
               'type': "scientific",
               'width': "65px",
               'data': "sample_p",
-- 
cgit v1.2.3