Added call to change_buttons to mapping results table (which deals with highlighting rows and enabling the Add (to collection) button

Also added a "check_node" paramter to change_buttons since sometimes the checkbox is in the second node instead of the first when it's preceded by blank text

2 files changed, 16 insertions, 2 deletions

diff --git a/wqflask/wqflask/static/new/javascript/search_results.js b/wqflask/wqflask/static/new/javascript/search_results.js
index 9ffef4f8..05dcfda5 100644
--- a/wqflask/wqflask/static/new/javascript/search_results.js
+++ b/wqflask/wqflask/static/new/javascript/search_results.js
@@ -1,4 +1,4 @@
-change_buttons = function() {
+change_buttons = function(check_node = 0) {
   var button, buttons, item, num_checked, text, _i, _j, _k, _l, _len, _len2, _len3, _len4, _results, _results2;
   buttons = ["#add", "#remove"];
 
@@ -6,7 +6,7 @@ change_buttons = function() {
   table_api = $('#trait_table').DataTable();
   check_cells = table_api.column(0).nodes().to$();
   for (let i = 0; i < check_cells.length; i++) {
-    if (check_cells[i].childNodes[0].checked){
+    if (check_cells[i].childNodes[check_node].checked){
       num_checked += 1
     }
   }
diff --git a/wqflask/wqflask/templates/mapping_results.html b/wqflask/wqflask/templates/mapping_results.html
index 1a76ef7a..022e9f6a 100644
--- a/wqflask/wqflask/templates/mapping_results.html
+++ b/wqflask/wqflask/templates/mapping_results.html
@@ -375,6 +375,20 @@
             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")){
+                      $(this).removeClass("selected")
+                    } else {
+                      $(this).addClass("selected")
+                    }
+                    change_buttons(check_node=1)
+                  });
+                },
                 "columns": [
                     { "type": "natural", "width": "5%" },
                     { "type": "natural", "width": "8%" },