Improved table appearance for global searches

Scatterplot Matrix works again

Added the first few changes to get covariates working (not done yet)

9 files changed, 298 insertions, 20 deletions

diff --git a/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js
new file mode 100644
index 00000000..c267b045
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js
@@ -0,0 +1,238 @@
+// Generated by CoffeeScript 1.8.0
+var add_trait_data, assemble_into_json, back_to_collections, collection_click, collection_list, color_by_trait, create_trait_data_csv, get_this_trait_vals, get_trait_data, process_traits, selected_traits, submit_click, this_trait_data, trait_click,
+  __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+console.log("before get_traits_from_collection");
+
+collection_list = null;
+
+this_trait_data = null;
+
+selected_traits = {};
+
+collection_click = function() {
+  var this_collection_url;
+  console.log("Clicking on:", $(this));
+  this_collection_url = $(this).find('.collection_name').prop("href");
+  this_collection_url += "&json";
+  console.log("this_collection_url", this_collection_url);
+  collection_list = $("#collections_holder").html();
+  return $.ajax({
+    dataType: "json",
+    url: this_collection_url,
+    success: process_traits
+  });
+};
+
+submit_click = function() {
+  var all_vals, sample, samples, scatter_matrix, this_trait_vals, trait, trait_names, trait_vals_csv, traits, _i, _j, _len, _len1, _ref;
+  selected_traits = {};
+  traits = [];
+  $('#collections_holder').find('input[type=checkbox]:checked').each(function() {
+    var this_dataset, this_trait, this_trait_url;
+    this_trait = $(this).parents('tr').find('.trait').text();
+    console.log("this_trait is:", this_trait);
+    this_dataset = $(this).parents('tr').find('.dataset').text();
+    console.log("this_dataset is:", this_dataset);
+    this_trait_url = "/trait/get_sample_data?trait=" + this_trait + "&dataset=" + this_dataset;
+    return $.ajax({
+      dataType: "json",
+      url: this_trait_url,
+      async: false,
+      success: add_trait_data
+    });
+  });
+  console.log("SELECTED_TRAITS IS:", selected_traits);
+  trait_names = [];
+  samples = $('input[name=allsamples]').val().split(" ");
+  all_vals = [];
+  this_trait_vals = get_this_trait_vals(samples);
+  all_vals.push(this_trait_vals);
+  _ref = Object.keys(selected_traits);
+  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+    trait = _ref[_i];
+    trait_names.push(trait);
+    this_trait_vals = [];
+    for (_j = 0, _len1 = samples.length; _j < _len1; _j++) {
+      sample = samples[_j];
+      if (__indexOf.call(Object.keys(selected_traits[trait]), sample) >= 0) {
+        this_trait_vals.push(parseFloat(selected_traits[trait][sample]));
+      } else {
+        this_trait_vals.push(null);
+      }
+    }
+    all_vals.push(this_trait_vals);
+  }
+  trait_vals_csv = create_trait_data_csv(selected_traits);
+  scatter_matrix = new ScatterMatrix(trait_vals_csv);
+  scatter_matrix.render();
+  return $.colorbox.close();
+};
+
+create_trait_data_csv = function(selected_traits) {
+  var all_vals, index, sample, sample_vals, samples, this_trait_vals, trait, trait_names, trait_vals_csv, _i, _j, _k, _l, _len, _len1, _len2, _len3, _ref;
+  trait_names = [];
+  trait_names.push($('input[name=trait_id]').val());
+  samples = $('input[name=allsamples]').val().split(" ");
+  all_vals = [];
+  this_trait_vals = get_this_trait_vals(samples);
+  all_vals.push(this_trait_vals);
+  _ref = Object.keys(selected_traits);
+  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+    trait = _ref[_i];
+    trait_names.push(trait);
+    this_trait_vals = [];
+    for (_j = 0, _len1 = samples.length; _j < _len1; _j++) {
+      sample = samples[_j];
+      if (__indexOf.call(Object.keys(selected_traits[trait]), sample) >= 0) {
+        this_trait_vals.push(parseFloat(selected_traits[trait][sample]));
+      } else {
+        this_trait_vals.push(null);
+      }
+    }
+    all_vals.push(this_trait_vals);
+  }
+  console.log("all_vals:", all_vals);
+  trait_vals_csv = trait_names.join(",");
+  trait_vals_csv += "\n";
+  for (index = _k = 0, _len2 = samples.length; _k < _len2; index = ++_k) {
+    sample = samples[index];
+    if (all_vals[0][index] === null) {
+      continue;
+    }
+    sample_vals = [];
+    for (_l = 0, _len3 = all_vals.length; _l < _len3; _l++) {
+      trait = all_vals[_l];
+      sample_vals.push(trait[index]);
+    }
+    trait_vals_csv += sample_vals.join(",");
+    trait_vals_csv += "\n";
+  }
+  return trait_vals_csv;
+};
+
+trait_click = function() {
+  var dataset, this_trait_url, trait;
+  console.log("Clicking on:", $(this));
+  trait = $(this).parent().find('.trait').text();
+  dataset = $(this).parent().find('.dataset').text();
+  console.log("BEFORE COVAR:", trait + ":" + dataset)
+  $('input[name=covariates]').val(trait + ":" + dataset)
+  console.log("AFTER COVAR:", $('input[name=covariates]').val())
+  return $.colorbox.close();
+  // this_trait_url = "/trait/get_sample_data?trait=" + trait + "&dataset=" + dataset;
+  // console.log("this_trait_url", this_trait_url);
+  // $.ajax({
+    // dataType: "json",
+    // url: this_trait_url,
+    // success: get_trait_data
+  // });
+  // return $.colorbox.close();
+};
+
+add_trait_data = function(trait_data, textStatus, jqXHR) {
+  var trait_name, trait_sample_data;
+  trait_name = trait_data[0];
+  trait_sample_data = trait_data[1];
+  selected_traits[trait_name] = trait_sample_data;
+  return console.log("selected_traits:", selected_traits);
+};
+
+get_trait_data = function(trait_data, textStatus, jqXHR) {
+  var sample, samples, this_trait_vals, trait_sample_data, vals, _i, _len;
+  console.log("trait:", trait_data[0]);
+  trait_sample_data = trait_data[1];
+  console.log("trait_sample_data:", trait_sample_data);
+  samples = $('input[name=allsamples]').val().split(" ");
+  vals = [];
+  for (_i = 0, _len = samples.length; _i < _len; _i++) {
+    sample = samples[_i];
+    if (__indexOf.call(Object.keys(trait_sample_data), sample) >= 0) {
+      vals.push(parseFloat(trait_sample_data[sample]));
+    } else {
+      vals.push(null);
+    }
+  }
+  if ($('input[name=samples]').length < 1) {
+    $('#hidden_inputs').append('<input type="hidden" name="samples" value="[' + samples.toString() + ']" />');
+  }
+  $('#hidden_inputs').append('<input type="hidden" name="vals" value="[' + vals.toString() + ']" />');
+  this_trait_vals = get_this_trait_vals(samples);
+  console.log("THE LENGTH IS:", $('input[name=vals]').length);
+  return color_by_trait(trait_sample_data);
+};
+
+get_this_trait_vals = function(samples) {
+  var sample, this_trait_vals, this_val, this_vals_json, _i, _len;
+  this_trait_vals = [];
+  for (_i = 0, _len = samples.length; _i < _len; _i++) {
+    sample = samples[_i];
+    this_val = parseFloat($("input[name='value:" + sample + "']").val());
+    if (!isNaN(this_val)) {
+      this_trait_vals.push(this_val);
+    } else {
+      this_trait_vals.push(null);
+    }
+  }
+  console.log("this_trait_vals:", this_trait_vals);
+  this_vals_json = '[' + this_trait_vals.toString() + ']';
+  return this_trait_vals;
+};
+
+assemble_into_json = function(this_trait_vals) {
+  var json_data, json_ids, num_traits, samples;
+  num_traits = $('input[name=vals]').length;
+  samples = $('input[name=samples]').val();
+  json_ids = samples;
+  json_data = '[' + this_trait_vals;
+  $('input[name=vals]').each((function(_this) {
+    return function(index, element) {
+      return json_data += ',' + $(element).val();
+    };
+  })(this));
+  json_data += ']';
+  return [json_ids, json_data];
+};
+
+color_by_trait = function(trait_sample_data, textStatus, jqXHR) {
+  console.log('in color_by_trait:', trait_sample_data);
+  return root.bar_chart.color_by_trait(trait_sample_data);
+};
+
+process_traits = function(trait_data, textStatus, jqXHR) {
+  var the_html, trait, _i, _len;
+  console.log('in process_traits with trait_data:', trait_data);
+  the_html = "<button id='back_to_collections' class='btn btn-inverse btn-small'>";
+  the_html += "<i class='icon-white icon-arrow-left'></i> Back </button>";
+  the_html += "    <button id='submit' class='btn btn-primary btn-small'> Submit </button>";
+  the_html += "<table class='table table-hover'>";
+  the_html += "<thead><tr><th></th><th>Record</th><th>Data Set</th><th>Description</th><th>Mean</th></tr></thead>";
+  the_html += "<tbody>";
+  for (_i = 0, _len = trait_data.length; _i < _len; _i++) {
+    trait = trait_data[_i];
+    the_html += "<tr class='trait_line'>";
+    the_html += "<td class='select_trait'><input type='checkbox' name='selectCheck' class='checkbox edit_sample_checkbox'></td>";
+    the_html += "<td class='trait'>" + trait.name + "</td>";
+    the_html += "<td class='dataset'>" + trait.dataset + "</td>";
+    the_html += "<td>" + trait.description + "</td>";
+    the_html += "<td>" + (trait.mean || '&nbsp;') + "</td></tr>";
+  }
+  the_html += "</tbody>";
+  the_html += "</table>";
+  the_html += "<script type='text/javascript' src='/static/new/javascript/get_covariates_from_collection.js'></script>"
+  $("#collections_holder").html(the_html);
+  return $('#collections_holder').colorbox.resize();
+};
+
+back_to_collections = function() {
+  console.log("collection_list:", collection_list);
+  $("#collections_holder").html(collection_list);
+  $(document).on("click", ".collection_line", collection_click);
+  return $('#collections_holder').colorbox.resize();
+};
+
+console.log("inside get_traits_from_collection");
+$(".collection_line").on("click", collection_click);
+$("#submit").on("click", submit_click);
+$(".trait").on("click", trait_click);
+$("#back_to_collections").on("click", back_to_collections);
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
index bcd83889..4abb0735 100644
--- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
@@ -215,6 +215,7 @@ process_traits = function(trait_data, textStatus, jqXHR) {
   }
   the_html += "</tbody>";
   the_html += "</table>";
+  the_html += "<script type='text/javascript' src='/static/new/javascript/get_traits_from_collection.js'></script>"
   $("#collections_holder").html(the_html);
   return $('#collections_holder').colorbox.resize();
 };
diff --git a/wqflask/wqflask/static/new/javascript/scatter-matrix.js b/wqflask/wqflask/static/new/javascript/scatter-matrix.js
index 278a93bc..31cb384b 100644
--- a/wqflask/wqflask/static/new/javascript/scatter-matrix.js
+++ b/wqflask/wqflask/static/new/javascript/scatter-matrix.js
@@ -60,7 +60,7 @@ ScatterMatrix.prototype.render = function () {
                          .style({'float':'left', 'margin-right':'50px'})
   var svg = container.append('div')
                      .attr('class', 'scatter-matrix-svg')
-                     .style({'float':'right'})
+                     .style({'float':'left'})
                      .html('<em>Loading data...</em>');
 
   this.onData(function() {
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index bb1af326..f232c6eb 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -74,6 +74,11 @@
         return open_trait_selection();
       };
     })(this));
+    d3.select("#select_covariate").on("click", (function(_this) {
+      return function() {
+        return open_covariate_selection();
+      };
+    })(this));
     d3.select("#clear_compare_trait").on("click", (function(_this) {
       return function() {
         return $('.scatter-matrix-container').remove();
@@ -84,7 +89,28 @@
         return function() {
           $.colorbox({
             inline: true,
-            href: "#collections_holder"
+            href: "#collections_holder",
+            onComplete: function(){
+                console.log("before get script")
+                $.getScript("/static/new/javascript/get_traits_from_collection.js");
+                console.log("after get script")
+            }
+          });
+          return $('a.collection_name').attr('onClick', 'return false');
+        };
+      })(this));
+    };
+    open_covariate_selection = function() {
+      return $('#collections_holder').load('/collections/list?select_covariates #collections_list', (function(_this) {
+        return function() {
+          $.colorbox({
+            inline: true,
+            href: "#collections_holder",
+            onComplete: function(){
+                console.log("before get script")
+                $.getScript("/static/new/javascript/get_covariates_from_collection.js");
+                console.log("after get script")
+            }
           });
           return $('a.collection_name').attr('onClick', 'return false');
         };
diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index b1284895..cc60ecff 100644
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -65,7 +65,11 @@
             {% endfor %}
             </tbody>
         </table>
-        
+        {% if "color_by_trait" in params %}
+        <script language="javascript" type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>
+        {% else %}
+        <script language="javascript" type="text/javascript" src="/static/new/javascript/get_covariates_from_collection.js"></script>
+        {% endif %}
         </div>
     </div>
 
@@ -84,9 +88,6 @@
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script>
-    {% if "color_by_trait" in params %}
-    <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>
-    {% endif %}
     <script>
             $('#trait_table').dataTable( {
                 "drawCallback": function( settings ) {
diff --git a/wqflask/wqflask/templates/gsearch_gene.html b/wqflask/wqflask/templates/gsearch_gene.html
index c1f039c7..c2f687fd 100644
--- a/wqflask/wqflask/templates/gsearch_gene.html
+++ b/wqflask/wqflask/templates/gsearch_gene.html
@@ -28,7 +28,7 @@
             </form>
             <br />
             <div style="width: 2000px;">
-              <table width="2000px" id="trait_table" class="table table-hover table-striped nowrap" style="float: left;">
+              <table width="2000px" id="trait_table" class="display dataTable nowrap" style="float: left;">
                 <thead>
                   <tr>
                     <th></th>
@@ -155,9 +155,14 @@
                 "order": [[1, "asc" ]],
                 "sDom": "tir",
                 "autoWidth": false,
-                "bDeferRender": true,
-                "scrollY": "800px",
-                "scrollCollapse": false
+                "deferRender": true,
+                "bSortClasses": false,
+                "scrollY": "600px",
+                "scrollCollapse": true,
+                "scroller": true,
+                "scrollX": true,
+                "paging": false,
+                "orderClasses": true
             } );
 
             console.timeEnd("Creating table");
diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index 46a80a09..7a8ca07b 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -28,7 +28,7 @@
             </form>
             <br />
             <div>
-              <table id="trait_table" class="table table-hover table-striped nowrap" style="float: left;">
+              <table id="trait_table" class="display dataTable nowrap" style="float: left;">
                 <thead>
                     <tr>
                         <th></th>
@@ -148,9 +148,14 @@
                 "order": [[1, "asc" ]],
                 "sDom": "tir",
                 "autoWidth": false,
-                "bDeferRender": true,
-                "scrollY": "800px",
-                "scrollCollapse": false
+                "deferRender": true,
+                "bSortClasses": false,
+                "scrollY": "600px",
+                "scrollCollapse": true,
+                "scroller": true,
+                "scrollX": true,
+                "paging": false,
+                "orderClasses": true
             } );
             console.timeEnd("Creating table");
         });
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 5a880647..7c4dbc60 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -42,6 +42,7 @@
 
         <input type="hidden" name="temp_uuid" id="temp_uuid" value="{{ temp_uuid }}">
         <input type="hidden" name="genofile" value="">
+        <input type="hidden" name="covariates" value="">
 
         <div class="container">
             <div class="panel-group" id="accordion">
@@ -140,11 +141,10 @@
     <script type="text/javascript" src="/static/new/javascript/scatterplot.js"></script>
     <script type="text/javascript" src="/static/new/javascript/scatter-matrix.js"></script>
     <script type="text/javascript" src="/static/new/javascript/draw_probability_plot.js"></script>  
-    <script type="text/javascript" src="/static/new/javascript/compare_traits_scatterplot.js"></script>  
-    
+    <script type="text/javascript" src="/static/new/javascript/compare_traits_scatterplot.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/get_traits_from_collection.js"></script>
     <script type="text/javascript" src="/static/new/javascript/validation.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/libs/FileSaver.js/FileSaver.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/libs/Blob.js/BlobBuilder.js"></script>
diff --git a/wqflask/wqflask/templates/show_trait_statistics.html b/wqflask/wqflask/templates/show_trait_statistics.html
index 1fc470ff..d4a8c1f7 100644
--- a/wqflask/wqflask/templates/show_trait_statistics.html
+++ b/wqflask/wqflask/templates/show_trait_statistics.html
@@ -13,12 +13,12 @@
                 <li>
                     <a href="#probability_plot" data-toggle="tab">Probability Plot</a>
                 </li>
-                <!--
                 {% if g.user_session.user_ob %}
                 <li>
                     <a href="#scatterplot_matrix" data-toggle="tab">Scatterplot Matrix</a>
                 </li>
                 {% endif %}
+                <!--
                 <li>
                     <a href="#box_plot_tab" data-toggle="tab">Box Plot</a>
                 </li>-->
@@ -119,7 +119,8 @@
                     </div>
 
                 </div>
-<!--                <div class="tab-pane" id="box_plot_tab">
+<!--
+                <div class="tab-pane" id="box_plot_tab">
                     {% if sample_groups|length > 1 %}
                     <select class="box_plot_samples_group">
                         {% for group, pretty_group in sample_group_types.items() %}
@@ -132,6 +133,7 @@
                         <div id="box_plot"></div>
                     </div>
                 </div>
+-->
                 {% if g.user_session.user_ob %}
                 <div class="tab-pane" id="scatterplot_matrix">
                     
@@ -147,7 +149,7 @@
                         <div id="comparison_scatterplot" class="qtlcharts"></div>
                     </div>
                 </div>
-                {% endif %}-->
+                {% endif %}
             </div>
         </div>
     <!--</div>-->