Highlighting works for all trait selection options (select all, invert, select top)

Search table and Select Top options added to global and regular search pages

8 files changed, 127 insertions, 53 deletions

diff --git a/wqflask/wqflask/interval_mapping/interval_mapping.py b/wqflask/wqflask/interval_mapping/interval_mapping.py
index 79cb1481..108bc747 100755
--- a/wqflask/wqflask/interval_mapping/interval_mapping.py
+++ b/wqflask/wqflask/interval_mapping/interval_mapping.py
@@ -72,7 +72,7 @@ class IntervalMapping(object):
         
         json_filename = webqtlUtil.genRandStr(prefix="intmap_")
         json.dumps(self.json_data, webqtlConfig.TMPDIR + json_filename)
-        
+
         self.js_data = dict(
             result_score_type = self.score_type,
             manhattan_plot = self.manhattan_plot,
@@ -220,7 +220,7 @@ class IntervalMapping(object):
                 self.json_data['additive'].append(qtl.additive)
             locus = {"name":reaper_locus.name, "chr":reaper_locus.chr, "cM":reaper_locus.cM, "Mb":reaper_locus.Mb}
             qtl = {"lrs_value": qtl.lrs, "chr":reaper_locus.chr, "Mb":reaper_locus.Mb,
-                   "cM":reaper_locus.cM, "name":reaper_locus.name, "additive":qtl.additive}
+                   "cM":reaper_locus.cM, "name":reaper_locus.name, "additive":qtl.additive, "dominance":qtl.dominance}
             self.qtl_results.append(qtl)
 
 
diff --git a/wqflask/wqflask/static/new/javascript/create_lodchart.js b/wqflask/wqflask/static/new/javascript/create_lodchart.js
index 2537e9e2..b8fcf1f8 100644
--- a/wqflask/wqflask/static/new/javascript/create_lodchart.js
+++ b/wqflask/wqflask/static/new/javascript/create_lodchart.js
@@ -3,7 +3,7 @@
   var create_lod_chart;
 
   create_lod_chart = function() {
-    var additive, chrrect, data, h, halfh, margin, mychart, totalh, totalw, w;
+    var chrrect, data, h, halfh, margin, mychart, totalh, totalw, w;
     h = 500;
     w = 1200;
     margin = {
@@ -16,12 +16,7 @@
     halfh = h + margin.top + margin.bottom;
     totalh = halfh * 2;
     totalw = w + margin.left + margin.right;
-    if ('additive' in js_data) {
-      additive = js_data.additive;
-    } else {
-      additive = false;
-    }
-    console.log("js_data:", js_data);
+    //console.log("js_data:", js_data);
     mychart = lodchart().lodvarname("lod.hk").height(h).width(w).margin(margin).ylab(js_data.result_score_type + " score").manhattanPlot(js_data.manhattan_plot);
     data = js_data.json_data;
     d3.select("div#topchart").datum(data).call(mychart);
diff --git a/wqflask/wqflask/static/new/javascript/lod_chart.js b/wqflask/wqflask/static/new/javascript/lod_chart.js
index 35b37070..2ea3a3e8 100644
--- a/wqflask/wqflask/static/new/javascript/lod_chart.js
+++ b/wqflask/wqflask/static/new/javascript/lod_chart.js
@@ -29,7 +29,8 @@ lodchart = function() {
   darkrect = "#F1F1F9";
   lightrect = "#FBFBFF";
   lodlinecolor = "darkslateblue";
-  additivelinecolor = "red";
+  additivelinecolor_plus = "red";
+  additivelinecolor_negative = "green";
   linewidth = 2;
   suggestivecolor = "gainsboro";
   significantcolor = "#EBC7C7";
@@ -208,7 +209,13 @@ lodchart = function() {
           for (k = 0, len1 = ref1.length; k < len1; k++) {
             chr = ref1[k];
             if (chr.indexOf(data['chr'])) {
-              curves.append("path").datum(data.posByChr[chr[0]]).attr("d", additivecurve(chr[0], lodvarnum)).attr("stroke", additivelinecolor).attr("fill", "none").attr("stroke-width", 1).style("pointer-events", "none");
+              if (additivecurve(chr[0], lodvarnum).y < 0) {
+                additivecurve(chr[0], lodvarnum).y = Math.abs(additivecurve(chr[0], lodvarnum).y)
+                curves.append("path").datum(data.posByChr[chr[0]]).attr("d", additivecurve(chr[0], lodvarnum)).attr("stroke", additivelinecolor_negative).attr("fill", "none").attr("stroke-width", 1).style("pointer-events", "none");
+              }
+              else {
+                curves.append("path").datum(data.posByChr[chr[0]]).attr("d", additivecurve(chr[0], lodvarnum)).attr("stroke", additivelinecolor_plus).attr("fill", "none").attr("stroke-width", 1).style("pointer-events", "none");
+              }
             }
           }
         }
diff --git a/wqflask/wqflask/static/new/javascript/search_results.coffee b/wqflask/wqflask/static/new/javascript/search_results.coffee
index c4e6b1a2..e0cfc61a 100755
--- a/wqflask/wqflask/static/new/javascript/search_results.coffee
+++ b/wqflask/wqflask/static/new/javascript/search_results.coffee
@@ -15,8 +15,7 @@ $ ->
         $(".trait_checkbox").trigger('click')
 
     add = ->
-        traits = $("#trait_table input:checked").map(->
-            return $(this).val()).get()
+        traits = $("#trait_table input:checked").map(-> return $(this).val()).get()
         console.log("checked length is:", traits.length)
         console.log("checked is:", traits)
         $.colorbox({href:"/collections/add?traits=#{traits}"})
diff --git a/wqflask/wqflask/static/new/javascript/search_results.js b/wqflask/wqflask/static/new/javascript/search_results.js
index ba2ebb4f..7f9ff896 100755
--- a/wqflask/wqflask/static/new/javascript/search_results.js
+++ b/wqflask/wqflask/static/new/javascript/search_results.js
@@ -1,17 +1,81 @@
-// Generated by CoffeeScript 1.8.0
 $(function() {
   var add, change_buttons, checked_traits, deselect_all, invert, remove, removed_traits, select_all;
+
   checked_traits = null;
   select_all = function() {
     console.log("selected_all");
-    return $(".trait_checkbox").prop('checked', true);
+    $(".trait_checkbox").each(function() {
+        $(this).prop('checked', true);
+        if (!$(this).closest('tr').hasClass('selected')) {
+            $(this).closest('tr').addClass('selected')
+        }
+    });
   };
+
   deselect_all = function() {
-    return $(".trait_checkbox").prop('checked', false);
+    $(".trait_checkbox").each(function() {
+        $(this).prop('checked', false);
+        if ($(this).closest('tr').hasClass('selected')) {
+            $(this).closest('tr').removeClass('selected')
+        }
+    });
   };
+
   invert = function() {
-    return $(".trait_checkbox").trigger('click');
+    $(".trait_checkbox").each(function() {
+        if ($(this).prop('checked') == true) {
+            $(this).prop('checked', false)
+        }
+        else {
+            $(this).prop('checked', true)
+        }
+
+        if ($(this).closest('tr').hasClass('selected')) {
+            $(this).closest('tr').removeClass('selected')
+        }
+        else {
+            $(this).closest('tr').addClass('selected')
+        }
+    });
   };
+
+  $('#searchbox').keyup(function(){
+      $('#trait_table').DataTable().search($(this).val()).draw();
+  });
+
+  $('#select_top').keyup(function(){
+      num_rows = $(this).val()
+      if (num_rows = parseInt(num_rows)){
+          i = 0
+          $('#trait_table > tbody > tr').each(function(){
+              if (i < num_rows) {
+                  $(this).find('.trait_checkbox').prop("checked", true)
+                  if (!$(this).closest('tr').hasClass('selected')) {
+                      $(this).closest('tr').addClass('selected')
+                  }
+              }
+              i += 1
+          });
+      }
+  });            
+
+  $('.trait_checkbox:checkbox').change(function() {
+      console.log("CHANGED")
+      change_buttons()
+
+      if ($(this).is(":checked")) {
+          if (!$(this).closest('tr').hasClass('selected')) {
+              $(this).closest('tr').addClass('selected')
+          }
+      }
+      else {
+          if ($(this).closest('tr').hasClass('selected')) {
+              $(this).closest('tr').removeClass('selected')
+          }
+      }  
+       
+  });
+
   add = function() {
     var traits;
     traits = $("#trait_table input:checked").map(function() {
@@ -28,7 +92,7 @@ $(function() {
     return checked_traits.closest("tr").fadeOut();
   };
   change_buttons = function() {
-    var button, buttons, item, num_checked, text, _i, _j, _k, _l, _len, _len1, _len2, _len3, _results, _results1;
+    var button, buttons, item, num_checked, text, _i, _j, _k, _l, _len, _len2, _len3, _len4, _results, _results2;
     buttons = ["#add", "#remove"];
     num_checked = $('.trait_checkbox:checked').length;
     console.log("num_checked is:", num_checked);
@@ -38,31 +102,13 @@ $(function() {
         $(button).prop("disabled", true);
       }
     } else {
-      for (_j = 0, _len1 = buttons.length; _j < _len1; _j++) {
+      for (_j = 0, _len2 = buttons.length; _j < _len2; _j++) {
         button = buttons[_j];
         $(button).prop("disabled", false);
       }
     }
-    if (num_checked > 1) {
-      console.log("in loop");
-      _results = [];
-      for (_k = 0, _len2 = buttons.length; _k < _len2; _k++) {
-        item = buttons[_k];
-        console.log("  processing item:", item);
-        _results.push(text = $(item).html());
-      }
-      return _results;
-    } else {
-      console.log("in loop");
-      _results1 = [];
-      for (_l = 0, _len3 = buttons.length; _l < _len3; _l++) {
-        item = buttons[_l];
-        console.log("  processing item:", item);
-        _results1.push(text = $(item).html());
-      }
-      return _results1;
-    }
   };
+
   remove = function() {
     var traits, uc_id;
     checked_traits = $("#trait_table input:checked");
@@ -88,6 +134,5 @@ $(function() {
   $("#invert").click(invert);
   $("#add").click(add);
   $("#remove").click(remove);
-  $('.trait_checkbox').click(change_buttons);
-  return $('.btn').click(change_buttons);
-});
+  $('.trait_checkbox, .btn').click(change_buttons);
+});
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
index eec02ef5..c8303de2 100755
--- a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
+++ b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
@@ -65,7 +65,7 @@ table.dataTable tbody tr {
   background-color: #ffffff;
 }
 table.dataTable tbody tr.selected {
-  background-color: #B0BED9;
+  background-color: #ffff99;
 }
 table.dataTable tbody th,
 table.dataTable tbody td {
diff --git a/wqflask/wqflask/templates/gsearch_gene.html b/wqflask/wqflask/templates/gsearch_gene.html
index 3e1cb32e..1f525c5f 100755
--- a/wqflask/wqflask/templates/gsearch_gene.html
+++ b/wqflask/wqflask/templates/gsearch_gene.html
@@ -21,6 +21,9 @@
             <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
             <button class="btn btn-default" id="add"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
             <button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-download"></span> Download Table</button>
+            <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
+            <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
+
             <br />
             <br />
             <table class="table table-hover table-striped" id="trait_table">
@@ -47,7 +50,7 @@
                 <tbody>
                     {% for this_trait in results %}
                     <TR>
-						<td><input type="checkbox">{{ loop.index }}</td>
+						<td><input class="trait_checkbox" type="checkbox">{{ loop.index }}</td>
                         {% for item in this_trait %}
 							<TD>{{ item }}</TD>
 						{% endfor %}
@@ -64,7 +67,7 @@
 {% endblock %}
 
 {% block js %}
-	<script type="text/javascript" src="/static/new/javascript/search_results.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/packages/DataTables/js/jquery.dataTables.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
@@ -105,13 +108,35 @@
                 return ((x < y) ? -1 : ((x > y) ? 1 : 0));
             }
         };
+
+        jQuery.fn.dataTableExt.oSort['cust-txt-asc'] = function (a, b) {
+            var x = getValue(a);
+            var y = getValue(b); 
             
+            if (x == 'N/A' || x == '') {
+                return 1;
+            }
+            else if (y == 'N/A' || y == '') {
+                return -1;
+            }
+            else {
+                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
+            }
+        };
+  
         jQuery.fn.dataTableExt.oSort['cust-txt-desc'] = function (a, b) {
             var x = getValue(a);
             var y = getValue(b);
             return ((x < y) ? 1 : ((x > y) ? -1 : 0));
         };
 
+        $.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
+        {
+            return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
+                return $('input', td).prop('checked') ? '1' : '0';
+            } );
+        }
+
         $(document).ready( function () {
             
             $('#trait_table tr').click(function(event) {
@@ -129,17 +154,17 @@
                     { "type": "natural", "width": "15%"  },
                     { "type": "cust-txt" },
                     { "type": "natural", "width": "12%"  },
-					{ "type": "natural", "width": "12%"  },
-					{ "type": "natural", "width": "12%"  },
-					{ "type": "natural", "width": "12%"  },
-					{ "type": "natural", "width": "12%"  },
+                    { "type": "natural", "width": "12%"  },
+                    { "type": "natural", "width": "12%"  },
+                    { "type": "natural", "width": "12%"  },
+                    { "type": "natural", "width": "12%"  },
                     { "type": "natural", "width": "15%"  },
-					{ "type": "natural" },
-					{ "type": "natural" },
-					{ "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
+                    { "type": "natural" },
                     { "type": "cust-txt" }
                 ],
-				"sDom": "RJtir",
+                "sDom": "RJtir",
                 "iDisplayLength": -1,
                 "autoWidth": true,
                 "bLengthChange": true,
@@ -153,6 +178,7 @@
                 "paging": false
             } );
             console.timeEnd("Creating table");
+
         });
         
     </script>
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 335ab213..ca5f28d9 100755
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -43,9 +43,11 @@
           <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
           <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
           <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
-          <button class="btn btn-default" id="add"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
+          <button class="btn btn-default" id="add" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
           <button class="btn btn-default"><span class="glyphicon glyphicon-download"></span> Download Table</button>
           <button id="redraw" class="btn btn-default">Reset Columns</button>
+          <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
+          <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
           <br />
           <br />
           <div id="table_container">