Merge github.com:genenetwork/genenetwork2

8 files changed, 655 insertions, 596 deletions

diff --git a/wqflask/wqflask/show_trait/SampleList.py b/wqflask/wqflask/show_trait/SampleList.py
index d196e722..060cb519 100755
--- a/wqflask/wqflask/show_trait/SampleList.py
+++ b/wqflask/wqflask/show_trait/SampleList.py
@@ -25,7 +25,11 @@ class SampleList(object):
 
         self.sample_list = [] # The actual list
 
-        self.get_attributes()
+        try:
+            self.get_attributes()
+        except Exception:
+            print("failed to get attributes")
+            self.attributes = {}
         
         print("camera: attributes are:", pf(self.attributes))
 
@@ -243,4 +247,4 @@ def natural_sort_key(x):
         x = int(x)
     except ValueError:
         pass
-    return x        
\ No newline at end of file
+    return x
diff --git a/wqflask/wqflask/show_trait/show_trait.py b/wqflask/wqflask/show_trait/show_trait.py
index 836a0be5..b28c9b76 100755
--- a/wqflask/wqflask/show_trait/show_trait.py
+++ b/wqflask/wqflask/show_trait/show_trait.py
@@ -123,6 +123,7 @@ class ShowTrait(object):
             hddn['control_marker'] = ""
         hddn['maf'] = 0.01
         hddn['compare_traits'] = []
+        hddn['export_data'] = ""
     
         # We'll need access to this_trait and hddn in the Jinja2 Template, so we put it inside self
         self.hddn = hddn
diff --git a/wqflask/wqflask/static/new/javascript/histogram.coffee b/wqflask/wqflask/static/new/javascript/histogram.coffee
index 98f89ac6..68d9b5a2 100755
--- a/wqflask/wqflask/static/new/javascript/histogram.coffee
+++ b/wqflask/wqflask/static/new/javascript/histogram.coffee
@@ -4,7 +4,6 @@ class Histogram
     constructor: (@sample_list, @sample_group) ->

         @sort_by = "name"

         @format_count = d3.format(",.0f") #a formatter for counts

-        @get_sample_vals()

         

         @margin = {top: 10, right: 30, bottom: 30, left: 30}

         @plot_width = 960 - @margin.left - @margin.right

@@ -12,21 +11,25 @@ class Histogram
 

         @x_buffer = @plot_width/20

         @y_buffer = @plot_height/20

+        @plot_height -= @y_buffer

+

+        @get_sample_vals(@sample_list)

+        @redraw(@sample_vals)

 

+    redraw: (@sample_vals) ->

         @y_min = d3.min(@sample_vals)  

         @y_max = d3.max(@sample_vals) * 1.1

-        

-        @plot_height -= @y_buffer

+

         @create_x_scale()

         @get_histogram_data()

         @create_y_scale()

         

+        $("#histogram").empty()

         @svg = @create_svg()

-

         @create_graph()

 

-    get_sample_vals: () ->

-        @sample_vals = (sample.value for sample in @sample_list when sample.value != null)

+    get_sample_vals: (sample_list) ->

+        @sample_vals = (sample.value for sample in sample_list when sample.value != null)

 

     create_svg: () ->

         svg = d3.select("#histogram")

@@ -53,8 +56,9 @@ class Histogram
 

     get_histogram_data: () ->

         console.log("sample_vals:", @sample_vals)

+        n_bins = Math.sqrt(@sample_vals.length)

         @histogram_data = d3.layout.histogram()

-            .bins(@x_scale.ticks(20))(@sample_vals)

+            .bins(@x_scale.ticks(n_bins))(@sample_vals)

         console.log("histogram_data:", @histogram_data[0])

 

     create_y_scale: () ->

@@ -112,17 +116,20 @@ class Histogram
             .attr("class", "bar")

             .attr("transform", (d) =>

                 return "translate(" + @x_scale(d.x) + "," + @y_scale(d.y) + ")")

+

+        rect_width = @x_scale(@histogram_data[0].x + @histogram_data[0].dx) -

+                     @x_scale(@histogram_data[0].x)

         

         bar.append("rect")

             .attr("x", 1)

-            .attr("width", @x_scale(@histogram_data[0].x + @histogram_data[0].dx) - 1)

+            .attr("width", rect_width - 1)

             .attr("height", (d) =>

                 return @plot_height - @y_scale(d.y)

             )

         bar.append("text")

             .attr("dy", ".75em")

             .attr("y", 6)

-            .attr("x", @x_scale(@histogram_data[0].dx)/2)

+            .attr("x", rect_width / 2)

             .attr("text-anchor", "middle")

             .style("fill", "#fff")

             .text((d) =>

@@ -131,4 +138,4 @@ class Histogram
                     return @format_count(d.y)

             )

 

-root.Histogram = Histogram
\ No newline at end of file
+root.Histogram = Histogram

diff --git a/wqflask/wqflask/static/new/javascript/histogram.js b/wqflask/wqflask/static/new/javascript/histogram.js
index 561a3068..d872a3ba 100755
--- a/wqflask/wqflask/static/new/javascript/histogram.js
+++ b/wqflask/wqflask/static/new/javascript/histogram.js
@@ -1,124 +1,135 @@
-// Generated by CoffeeScript 1.8.0
-var Histogram, root;
-
-root = typeof exports !== "undefined" && exports !== null ? exports : this;
-
-Histogram = (function() {
-  function Histogram(sample_list, sample_group) {
-    this.sample_list = sample_list;
-    this.sample_group = sample_group;
-    this.sort_by = "name";
-    this.format_count = d3.format(",.0f");
-    this.get_sample_vals();
-    this.margin = {
-      top: 10,
-      right: 30,
-      bottom: 30,
-      left: 30
+// Generated by CoffeeScript 1.9.2
+(function() {
+  var Histogram, root;
+
+  root = typeof exports !== "undefined" && exports !== null ? exports : this;
+
+  Histogram = (function() {
+    function Histogram(sample_list1, sample_group) {
+      this.sample_list = sample_list1;
+      this.sample_group = sample_group;
+      this.sort_by = "name";
+      this.format_count = d3.format(",.0f");
+      this.margin = {
+        top: 10,
+        right: 30,
+        bottom: 30,
+        left: 30
+      };
+      this.plot_width = 960 - this.margin.left - this.margin.right;
+      this.plot_height = 500 - this.margin.top - this.margin.bottom;
+      this.x_buffer = this.plot_width / 20;
+      this.y_buffer = this.plot_height / 20;
+      this.plot_height -= this.y_buffer;
+      this.get_sample_vals(this.sample_list);
+      this.redraw(this.sample_vals);
+    }
+
+    Histogram.prototype.redraw = function(sample_vals) {
+      this.sample_vals = sample_vals;
+      this.y_min = d3.min(this.sample_vals);
+      this.y_max = d3.max(this.sample_vals) * 1.1;
+      this.create_x_scale();
+      this.get_histogram_data();
+      this.create_y_scale();
+      $("#histogram").empty();
+      this.svg = this.create_svg();
+      return this.create_graph();
     };
-    this.plot_width = 960 - this.margin.left - this.margin.right;
-    this.plot_height = 500 - this.margin.top - this.margin.bottom;
-    this.x_buffer = this.plot_width / 20;
-    this.y_buffer = this.plot_height / 20;
-    this.y_min = d3.min(this.sample_vals);
-    this.y_max = d3.max(this.sample_vals) * 1.1;
-    this.plot_height -= this.y_buffer;
-    this.create_x_scale();
-    this.get_histogram_data();
-    this.create_y_scale();
-    this.svg = this.create_svg();
-    this.create_graph();
-  }
-
-  Histogram.prototype.get_sample_vals = function() {
-    var sample;
-    return this.sample_vals = (function() {
-      var _i, _len, _ref, _results;
-      _ref = this.sample_list;
-      _results = [];
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        sample = _ref[_i];
-        if (sample.value !== null) {
-          _results.push(sample.value);
+
+    Histogram.prototype.get_sample_vals = function(sample_list) {
+      var sample;
+      return this.sample_vals = (function() {
+        var i, len, results;
+        results = [];
+        for (i = 0, len = sample_list.length; i < len; i++) {
+          sample = sample_list[i];
+          if (sample.value !== null) {
+            results.push(sample.value);
+          }
         }
-      }
-      return _results;
-    }).call(this);
-  };
-
-  Histogram.prototype.create_svg = function() {
-    var svg;
-    svg = d3.select("#histogram").append("svg").attr("class", "histogram").attr("width", this.plot_width + this.margin.left + this.margin.right).attr("height", this.plot_height + this.margin.top + this.margin.bottom).append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
-    return svg;
-  };
-
-  Histogram.prototype.create_x_scale = function() {
-    var x0;
-    console.log("min/max:", d3.min(this.sample_vals) + "," + d3.max(this.sample_vals));
-    x0 = Math.max(-d3.min(this.sample_vals), d3.max(this.sample_vals));
-    return this.x_scale = d3.scale.linear().domain([d3.min(this.sample_vals), d3.max(this.sample_vals)]).range([0, this.plot_width]).nice();
-  };
-
-  Histogram.prototype.get_histogram_data = function() {
-    console.log("sample_vals:", this.sample_vals);
-    this.histogram_data = d3.layout.histogram().bins(this.x_scale.ticks(20))(this.sample_vals);
-    return console.log("histogram_data:", this.histogram_data[0]);
-  };
-
-  Histogram.prototype.create_y_scale = function() {
-    return this.y_scale = d3.scale.linear().domain([
-      0, d3.max(this.histogram_data, (function(_this) {
+        return results;
+      })();
+    };
+
+    Histogram.prototype.create_svg = function() {
+      var svg;
+      svg = d3.select("#histogram").append("svg").attr("class", "histogram").attr("width", this.plot_width + this.margin.left + this.margin.right).attr("height", this.plot_height + this.margin.top + this.margin.bottom).append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
+      return svg;
+    };
+
+    Histogram.prototype.create_x_scale = function() {
+      var x0;
+      console.log("min/max:", d3.min(this.sample_vals) + "," + d3.max(this.sample_vals));
+      x0 = Math.max(-d3.min(this.sample_vals), d3.max(this.sample_vals));
+      return this.x_scale = d3.scale.linear().domain([d3.min(this.sample_vals), d3.max(this.sample_vals)]).range([0, this.plot_width]).nice();
+    };
+
+    Histogram.prototype.get_histogram_data = function() {
+      var n_bins;
+      console.log("sample_vals:", this.sample_vals);
+      n_bins = Math.sqrt(this.sample_vals.length);
+      this.histogram_data = d3.layout.histogram().bins(this.x_scale.ticks(n_bins))(this.sample_vals);
+      return console.log("histogram_data:", this.histogram_data[0]);
+    };
+
+    Histogram.prototype.create_y_scale = function() {
+      return this.y_scale = d3.scale.linear().domain([
+        0, d3.max(this.histogram_data, (function(_this) {
+          return function(d) {
+            return d.y;
+          };
+        })(this))
+      ]).range([this.plot_height, 0]);
+    };
+
+    Histogram.prototype.create_graph = function() {
+      this.add_x_axis();
+      this.add_y_axis();
+      return this.add_bars();
+    };
+
+    Histogram.prototype.add_x_axis = function() {
+      var x_axis;
+      x_axis = d3.svg.axis().scale(this.x_scale).orient("bottom");
+      return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(x_axis);
+    };
+
+    Histogram.prototype.add_y_axis = function() {
+      var yAxis;
+      yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5);
+      return this.svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end");
+    };
+
+    Histogram.prototype.add_bars = function() {
+      var bar, rect_width;
+      console.log("bar_width:", this.x_scale(this.histogram_data[0].dx));
+      bar = this.svg.selectAll(".bar").data(this.histogram_data).enter().append("g").attr("class", "bar").attr("transform", (function(_this) {
         return function(d) {
-          return d.y;
+          return "translate(" + _this.x_scale(d.x) + "," + _this.y_scale(d.y) + ")";
         };
-      })(this))
-    ]).range([this.plot_height, 0]);
-  };
-
-  Histogram.prototype.create_graph = function() {
-    this.add_x_axis();
-    this.add_y_axis();
-    return this.add_bars();
-  };
-
-  Histogram.prototype.add_x_axis = function() {
-    var x_axis;
-    x_axis = d3.svg.axis().scale(this.x_scale).orient("bottom");
-    return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(x_axis);
-  };
-
-  Histogram.prototype.add_y_axis = function() {
-    var yAxis;
-    yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5);
-    return this.svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end");
-  };
-
-  Histogram.prototype.add_bars = function() {
-    var bar;
-    console.log("bar_width:", this.x_scale(this.histogram_data[0].dx));
-    bar = this.svg.selectAll(".bar").data(this.histogram_data).enter().append("g").attr("class", "bar").attr("transform", (function(_this) {
-      return function(d) {
-        return "translate(" + _this.x_scale(d.x) + "," + _this.y_scale(d.y) + ")";
-      };
-    })(this));
-    bar.append("rect").attr("x", 1).attr("width", this.x_scale(this.histogram_data[0].x + this.histogram_data[0].dx) - 1).attr("height", (function(_this) {
-      return function(d) {
-        return _this.plot_height - _this.y_scale(d.y);
-      };
-    })(this));
-    return bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", this.x_scale(this.histogram_data[0].dx) / 2).attr("text-anchor", "middle").style("fill", "#fff").text((function(_this) {
-      return function(d) {
-        var bar_height;
-        bar_height = _this.plot_height - _this.y_scale(d.y);
-        if (bar_height > 20) {
-          return _this.format_count(d.y);
-        }
-      };
-    })(this));
-  };
+      })(this));
+      rect_width = this.x_scale(this.histogram_data[0].x + this.histogram_data[0].dx) - this.x_scale(this.histogram_data[0].x);
+      bar.append("rect").attr("x", 1).attr("width", rect_width - 1).attr("height", (function(_this) {
+        return function(d) {
+          return _this.plot_height - _this.y_scale(d.y);
+        };
+      })(this));
+      return bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", rect_width / 2).attr("text-anchor", "middle").style("fill", "#fff").text((function(_this) {
+        return function(d) {
+          var bar_height;
+          bar_height = _this.plot_height - _this.y_scale(d.y);
+          if (bar_height > 20) {
+            return _this.format_count(d.y);
+          }
+        };
+      })(this));
+    };
+
+    return Histogram;
 
-  return Histogram;
+  })();
 
-})();
+  root.Histogram = Histogram;
 
-root.Histogram = Histogram;
+}).call(this);
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index d05ccbf7..1d3123ba 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -238,6 +238,7 @@ $ ->
                         sample_sets['samples_all'].add_value(real_value)
                         already_seen[name] = true
         console.log("towards end:", sample_sets)
+        root.histogram.redraw(sample_sets['samples_primary'].the_values)
         update_stat_values(sample_sets)
 
     show_hide_outliers = ->
@@ -377,11 +378,9 @@ $ ->
 
     ##Get Sample Data From Table Code
 
-    get_sample_table_data = ->
-        samples = {}
-        primary_samples = []
-        other_samples = []
-        $('#sortable1').find('.value_se').each (_index, element) =>
+    get_sample_table_data = (table_name) ->
+        samples = []
+        $('#' + table_name).find('.value_se').each (_index, element) =>
             row_data = {}
             row_data.name = $.trim($(element).find('.column_name-Sample').text())
             row_data.value = $(element).find('.edit_sample_value').val()
@@ -391,10 +390,7 @@ $ ->
                 row_data[attribute_info.name] = $.trim($(element).find(
                     '.column_name-'+attribute_info.name.replace(" ", "_")).text())
             console.log("row_data is:", row_data)
-            primary_samples.push(row_data)
-        console.log("primary_samples is:", primary_samples)
-        samples.primary_samples = primary_samples
-        samples.other_samples = other_samples
+            samples.push(row_data)
         return samples
 
     ##End Get Sample Data from Table Code
@@ -402,7 +398,9 @@ $ ->
     ##Export Sample Table Data Code
 
     export_sample_table_data = ->
-        sample_data = get_sample_table_data()
+        sample_data = {}
+        sample_data.primary_samples = get_sample_table_data('samples_primary')
+        sample_data.other_samples = get_sample_table_data('samples_other')
         console.log("sample_data is:", sample_data)
         json_sample_data = JSON.stringify(sample_data)
         console.log("json_sample_data is:", json_sample_data)
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 159dafcb..9323862a 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -1,469 +1,470 @@
-// Generated by CoffeeScript 1.8.0
-var Stat_Table_Rows, is_number,
-  __hasProp = {}.hasOwnProperty,
-  __slice = [].slice;
+// Generated by CoffeeScript 1.9.2
+(function() {
+  var Stat_Table_Rows, is_number,
+    hasProp = {}.hasOwnProperty,
+    slice = [].slice;
 
-console.log("start_b");
+  console.log("start_b");
 
-is_number = function(o) {
-  return !isNaN((o - 0) && o !== null);
-};
-
-Stat_Table_Rows = [
-  {
-    vn: "n_of_samples",
-    pretty: "N of Samples",
-    digits: 0
-  }, {
-    vn: "mean",
-    pretty: "Mean",
-    digits: 2
-  }, {
-    vn: "median",
-    pretty: "Median",
-    digits: 2
-  }, {
-    vn: "std_error",
-    pretty: "Standard Error (SE)",
-    digits: 2
-  }, {
-    vn: "std_dev",
-    pretty: "Standard Deviation (SD)",
-    digits: 2
-  }, {
-    vn: "min",
-    pretty: "Minimum",
-    digits: 2
-  }, {
-    vn: "max",
-    pretty: "Maximum",
-    digits: 2
-  }, {
-    vn: "range",
-    pretty: "Range (log2)",
-    digits: 2
-  }, {
-    vn: "range_fold",
-    pretty: "Range (fold)",
-    digits: 2
-  }, {
-    vn: "interquartile",
-    pretty: "Interquartile Range",
-    url: "/glossary.html#Interquartile",
-    digits: 2
-  }
-];
+  is_number = function(o) {
+    return !isNaN((o - 0) && o !== null);
+  };
 
-$(function() {
-  var 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, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values;
-  sample_lists = js_data.sample_lists;
-  sample_group_types = js_data.sample_group_types;
-  root.bar_chart = new Bar_Chart(sample_lists[0]);
-  root.histogram = new Histogram(sample_lists[0]);
-  new Box_Plot(sample_lists[0]);
-  $('.bar_chart_samples_group').change(function() {
-    var all_samples, group;
-    $('#bar_chart').remove();
-    $('#bar_chart_container').append('<div id="bar_chart"></div>');
-    group = $(this).val();
-    if (group === "samples_primary") {
-      return root.bar_chart = new Bar_Chart(sample_lists[0]);
-    } else if (group === "samples_other") {
-      return root.bar_chart = new Bar_Chart(sample_lists[1]);
-    } else if (group === "samples_all") {
-      all_samples = sample_lists[0].concat(sample_lists[1]);
-      return root.bar_chart = new Bar_Chart(all_samples);
-    }
-  });
-  $('.box_plot_samples_group').change(function() {
-    var all_samples, group;
-    $('#box_plot').remove();
-    $('#box_plot_container').append('<div id="box_plot"></div>');
-    group = $(this).val();
-    if (group === "samples_primary") {
-      return new Box_Plot(sample_lists[0]);
-    } else if (group === "samples_other") {
-      return new Box_Plot(sample_lists[1]);
-    } else if (group === "samples_all") {
-      all_samples = sample_lists[0].concat(sample_lists[1]);
-      return new Box_Plot(all_samples);
+  Stat_Table_Rows = [
+    {
+      vn: "n_of_samples",
+      pretty: "N of Samples",
+      digits: 0
+    }, {
+      vn: "mean",
+      pretty: "Mean",
+      digits: 2
+    }, {
+      vn: "median",
+      pretty: "Median",
+      digits: 2
+    }, {
+      vn: "std_error",
+      pretty: "Standard Error (SE)",
+      digits: 2
+    }, {
+      vn: "std_dev",
+      pretty: "Standard Deviation (SD)",
+      digits: 2
+    }, {
+      vn: "min",
+      pretty: "Minimum",
+      digits: 2
+    }, {
+      vn: "max",
+      pretty: "Maximum",
+      digits: 2
+    }, {
+      vn: "range",
+      pretty: "Range (log2)",
+      digits: 2
+    }, {
+      vn: "range_fold",
+      pretty: "Range (fold)",
+      digits: 2
+    }, {
+      vn: "interquartile",
+      pretty: "Interquartile Range",
+      url: "/glossary.html#Interquartile",
+      digits: 2
     }
-  });
-  d3.select("#select_compare_trait").on("click", (function(_this) {
-    return function() {
-      $('.scatter-matrix-container').remove();
-      return open_trait_selection();
-    };
-  })(this));
-  d3.select("#clear_compare_trait").on("click", (function(_this) {
-    return function() {
-      return $('.scatter-matrix-container').remove();
-    };
-  })(this));
-  open_trait_selection = function() {
-    return $('#collections_holder').load('/collections/list?color_by_trait #collections_list', (function(_this) {
+  ];
+
+  $(function() {
+    var 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, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values;
+    sample_lists = js_data.sample_lists;
+    sample_group_types = js_data.sample_group_types;
+    root.bar_chart = new Bar_Chart(sample_lists[0]);
+    root.histogram = new Histogram(sample_lists[0]);
+    new Box_Plot(sample_lists[0]);
+    $('.bar_chart_samples_group').change(function() {
+      var all_samples, group;
+      $('#bar_chart').remove();
+      $('#bar_chart_container').append('<div id="bar_chart"></div>');
+      group = $(this).val();
+      if (group === "samples_primary") {
+        return root.bar_chart = new Bar_Chart(sample_lists[0]);
+      } else if (group === "samples_other") {
+        return root.bar_chart = new Bar_Chart(sample_lists[1]);
+      } else if (group === "samples_all") {
+        all_samples = sample_lists[0].concat(sample_lists[1]);
+        return root.bar_chart = new Bar_Chart(all_samples);
+      }
+    });
+    $('.box_plot_samples_group').change(function() {
+      var all_samples, group;
+      $('#box_plot').remove();
+      $('#box_plot_container').append('<div id="box_plot"></div>');
+      group = $(this).val();
+      if (group === "samples_primary") {
+        return new Box_Plot(sample_lists[0]);
+      } else if (group === "samples_other") {
+        return new Box_Plot(sample_lists[1]);
+      } else if (group === "samples_all") {
+        all_samples = sample_lists[0].concat(sample_lists[1]);
+        return new Box_Plot(all_samples);
+      }
+    });
+    d3.select("#select_compare_trait").on("click", (function(_this) {
       return function() {
-        $.colorbox({
-          inline: true,
-          href: "#collections_holder"
-        });
-        return $('a.collection_name').attr('onClick', 'return false');
+        $('.scatter-matrix-container').remove();
+        return open_trait_selection();
       };
     })(this));
-  };
-  hide_tabs = function(start) {
-    var x, _i, _results;
-    _results = [];
-    for (x = _i = start; start <= 10 ? _i <= 10 : _i >= 10; x = start <= 10 ? ++_i : --_i) {
-      _results.push($("#stats_tabs" + x).hide());
-    }
-    return _results;
-  };
-  stats_mdp_change = function() {
-    var selected;
-    selected = $(this).val();
-    hide_tabs(0);
-    return $("#stats_tabs" + selected).show();
-  };
-  change_stats_value = function(sample_sets, category, value_type, decimal_places) {
-    var current_value, id, in_box, the_value, title_value;
-    id = "#" + process_id(category, value_type);
-    console.log("the_id:", id);
-    in_box = $(id).html;
-    current_value = parseFloat($(in_box)).toFixed(decimal_places);
-    the_value = sample_sets[category][value_type]();
-    console.log("After running sample_sets, the_value is:", the_value);
-    if (decimal_places > 0) {
-      title_value = the_value.toFixed(decimal_places * 2);
-      the_value = the_value.toFixed(decimal_places);
-    } else {
-      title_value = null;
-    }
-    console.log("*-* the_value:", the_value);
-    console.log("*-* current_value:", current_value);
-    if (the_value !== current_value) {
-      console.log("object:", $(id).html(the_value));
-      $(id).html(the_value).effect("highlight");
-    }
-    if (title_value) {
-      return $(id).attr('title', title_value);
-    }
-  };
-  update_stat_values = function(sample_sets) {
-    var category, row, _i, _len, _ref, _results;
-    _ref = ['samples_primary', 'samples_other', 'samples_all'];
-    _results = [];
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      category = _ref[_i];
-      _results.push((function() {
-        var _j, _len1, _results1;
-        _results1 = [];
-        for (_j = 0, _len1 = Stat_Table_Rows.length; _j < _len1; _j++) {
-          row = Stat_Table_Rows[_j];
-          console.log("Calling change_stats_value");
-          _results1.push(change_stats_value(sample_sets, category, row.vn, row.digits));
-        }
-        return _results1;
-      })());
-    }
-    return _results;
-  };
-  make_table = function() {
-    var header, key, row, row_line, table, the_id, the_rows, value, _i, _len, _ref, _ref1;
-    header = "<thead><tr><th>&nbsp;</th>";
-    console.log("js_data.sample_group_types:", js_data.sample_group_types);
-    _ref = js_data.sample_group_types;
-    for (key in _ref) {
-      if (!__hasProp.call(_ref, key)) continue;
-      value = _ref[key];
-      console.log("aa key:", key);
-      console.log("aa value:", value);
-      the_id = process_id("column", key);
-      header += "<th id=\"" + the_id + "\">" + value + "</th>";
-    }
-    header += "</thead>";
-    console.log("windex header is:", header);
-    the_rows = "<tbody>";
-    for (_i = 0, _len = Stat_Table_Rows.length; _i < _len; _i++) {
-      row = Stat_Table_Rows[_i];
-      console.log("rowing");
-      row_line = "<tr>";
-      if (row.url != null) {
-        row_line += "<td id=\"" + row.vn + "\"><a href=\"" + row.url + "\">" + row.pretty + "</a></td>";
+    d3.select("#clear_compare_trait").on("click", (function(_this) {
+      return function() {
+        return $('.scatter-matrix-container').remove();
+      };
+    })(this));
+    open_trait_selection = function() {
+      return $('#collections_holder').load('/collections/list?color_by_trait #collections_list', (function(_this) {
+        return function() {
+          $.colorbox({
+            inline: true,
+            href: "#collections_holder"
+          });
+          return $('a.collection_name').attr('onClick', 'return false');
+        };
+      })(this));
+    };
+    hide_tabs = function(start) {
+      var i, ref, results, x;
+      results = [];
+      for (x = i = ref = start; ref <= 10 ? i <= 10 : i >= 10; x = ref <= 10 ? ++i : --i) {
+        results.push($("#stats_tabs" + x).hide());
+      }
+      return results;
+    };
+    stats_mdp_change = function() {
+      var selected;
+      selected = $(this).val();
+      hide_tabs(0);
+      return $("#stats_tabs" + selected).show();
+    };
+    change_stats_value = function(sample_sets, category, value_type, decimal_places) {
+      var current_value, id, in_box, the_value, title_value;
+      id = "#" + process_id(category, value_type);
+      console.log("the_id:", id);
+      in_box = $(id).html;
+      current_value = parseFloat($(in_box)).toFixed(decimal_places);
+      the_value = sample_sets[category][value_type]();
+      console.log("After running sample_sets, the_value is:", the_value);
+      if (decimal_places > 0) {
+        title_value = the_value.toFixed(decimal_places * 2);
+        the_value = the_value.toFixed(decimal_places);
       } else {
-        row_line += "<td id=\"" + row.vn + "\">" + row.pretty + "</td>";
+        title_value = null;
       }
-      console.log("box - js_data.sample_group_types:", js_data.sample_group_types);
-      _ref1 = js_data.sample_group_types;
-      for (key in _ref1) {
-        if (!__hasProp.call(_ref1, key)) continue;
-        value = _ref1[key];
-        console.log("apple key:", key);
-        the_id = process_id(key, row.vn);
-        console.log("the_id:", the_id);
-        row_line += "<td id=\"" + the_id + "\">foo</td>";
+      console.log("*-* the_value:", the_value);
+      console.log("*-* current_value:", current_value);
+      if (the_value !== current_value) {
+        console.log("object:", $(id).html(the_value));
+        $(id).html(the_value).effect("highlight");
       }
-      row_line += "</tr>";
-      console.log("row line:", row_line);
-      the_rows += row_line;
-    }
-    the_rows += "</tbody>";
-    table = header + the_rows;
-    console.log("table is:", table);
-    return $("#stats_table").append(table);
-  };
-  process_id = function() {
-    var processed, value, values, _i, _len;
-    values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-
-    /* Make an id or a class valid javascript by, for example, eliminating spaces */
-    processed = "";
-    for (_i = 0, _len = values.length; _i < _len; _i++) {
-      value = values[_i];
-      console.log("value:", value);
-      value = value.replace(" ", "_");
-      if (processed.length) {
-        processed += "-";
+      if (title_value) {
+        return $(id).attr('title', title_value);
       }
-      processed += value;
-    }
-    return processed;
-  };
-  edit_data_change = function() {
-    var already_seen, checkbox, checked, name, real_value, row, rows, sample_sets, table, tables, _i, _j, _len, _len1;
-    already_seen = {};
-    sample_sets = {
-      samples_primary: new Stats([]),
-      samples_other: new Stats([]),
-      samples_all: new Stats([])
     };
-    console.log("at beginning:", sample_sets);
-    tables = ['samples_primary', 'samples_other'];
-    for (_i = 0, _len = tables.length; _i < _len; _i++) {
-      table = tables[_i];
-      rows = $("#" + table).find('tr');
-      for (_j = 0, _len1 = rows.length; _j < _len1; _j++) {
-        row = rows[_j];
-        name = $(row).find('.edit_sample_sample_name').html();
-        name = $.trim(name);
-        real_value = $(row).find('.edit_sample_value').val();
-        console.log("real_value:", real_value);
-        checkbox = $(row).find(".edit_sample_checkbox");
-        checked = $(checkbox).attr('checked');
-        if (checked && is_number(real_value) && real_value !== "") {
-          console.log("in the iffy if");
-          real_value = parseFloat(real_value);
-          sample_sets[table].add_value(real_value);
-          console.log("checking name of:", name);
-          if (!(name in already_seen)) {
-            console.log("haven't seen");
-            sample_sets['samples_all'].add_value(real_value);
-            already_seen[name] = true;
+    update_stat_values = function(sample_sets) {
+      var category, i, len, ref, results, row;
+      ref = ['samples_primary', 'samples_other', 'samples_all'];
+      results = [];
+      for (i = 0, len = ref.length; i < len; i++) {
+        category = ref[i];
+        results.push((function() {
+          var j, len1, results1;
+          results1 = [];
+          for (j = 0, len1 = Stat_Table_Rows.length; j < len1; j++) {
+            row = Stat_Table_Rows[j];
+            console.log("Calling change_stats_value");
+            results1.push(change_stats_value(sample_sets, category, row.vn, row.digits));
           }
+          return results1;
+        })());
+      }
+      return results;
+    };
+    make_table = function() {
+      var header, i, key, len, ref, ref1, row, row_line, table, the_id, the_rows, value;
+      header = "<thead><tr><th>&nbsp;</th>";
+      console.log("js_data.sample_group_types:", js_data.sample_group_types);
+      ref = js_data.sample_group_types;
+      for (key in ref) {
+        if (!hasProp.call(ref, key)) continue;
+        value = ref[key];
+        console.log("aa key:", key);
+        console.log("aa value:", value);
+        the_id = process_id("column", key);
+        header += "<th id=\"" + the_id + "\">" + value + "</th>";
+      }
+      header += "</thead>";
+      console.log("windex header is:", header);
+      the_rows = "<tbody>";
+      for (i = 0, len = Stat_Table_Rows.length; i < len; i++) {
+        row = Stat_Table_Rows[i];
+        console.log("rowing");
+        row_line = "<tr>";
+        if (row.url != null) {
+          row_line += "<td id=\"" + row.vn + "\"><a href=\"" + row.url + "\">" + row.pretty + "</a></td>";
+        } else {
+          row_line += "<td id=\"" + row.vn + "\">" + row.pretty + "</td>";
         }
+        console.log("box - js_data.sample_group_types:", js_data.sample_group_types);
+        ref1 = js_data.sample_group_types;
+        for (key in ref1) {
+          if (!hasProp.call(ref1, key)) continue;
+          value = ref1[key];
+          console.log("apple key:", key);
+          the_id = process_id(key, row.vn);
+          console.log("the_id:", the_id);
+          row_line += "<td id=\"" + the_id + "\">foo</td>";
+        }
+        row_line += "</tr>";
+        console.log("row line:", row_line);
+        the_rows += row_line;
       }
-    }
-    console.log("towards end:", sample_sets);
-    return update_stat_values(sample_sets);
-  };
-  show_hide_outliers = function() {
-    var label;
-    console.log("FOOBAR in beginning of show_hide_outliers");
-    label = $('#show_hide_outliers').val();
-    console.log("lable is:", label);
-    if (label === "Hide Outliers") {
-      return $('#show_hide_outliers').val("Show Outliers");
-    } else if (label === "Show Outliers") {
-      console.log("Found Show Outliers");
-      $('#show_hide_outliers').val("Hide Outliers");
-      return console.log("Should be now Hide Outliers");
-    }
-  };
-  on_corr_method_change = function() {
-    var corr_method;
-    console.log("in beginning of on_corr_method_change");
-    corr_method = $('select[name=corr_method]').val();
-    console.log("corr_method is:", corr_method);
-    $('.correlation_desc').hide();
-    $('#' + corr_method + "_r_desc").show().effect("highlight");
-    if (corr_method === "lit") {
-      return $("#corr_sample_method_options").hide();
-    } else {
-      return $("#corr_sample_method_options").show();
-    }
-  };
-  $('select[name=corr_method]').change(on_corr_method_change);
-  create_value_dropdown = function(value) {
-    return "<option val=" + value + ">" + value + "</option>";
-  };
-  populate_sample_attributes_values_dropdown = function() {
-    var attribute_info, key, sample_attributes, selected_attribute, value, _i, _len, _ref, _ref1, _results;
-    console.log("in beginning of psavd");
-    $('#attribute_values').empty();
-    sample_attributes = {};
-    _ref = js_data.attribute_names;
-    for (key in _ref) {
-      if (!__hasProp.call(_ref, key)) continue;
-      attribute_info = _ref[key];
-      sample_attributes[attribute_info.name] = attribute_info.distinct_values;
-    }
-    console.log("[visa] attributes is:", sample_attributes);
-    selected_attribute = $('#exclude_menu').val().replace("_", " ");
-    console.log("selected_attribute is:", selected_attribute);
-    _ref1 = sample_attributes[selected_attribute];
-    _results = [];
-    for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
-      value = _ref1[_i];
-      _results.push($(create_value_dropdown(value)).appendTo($('#attribute_values')));
-    }
-    return _results;
-  };
-  if (js_data.attribute_names.length > 0) {
-    populate_sample_attributes_values_dropdown();
-  }
-  $('#exclude_menu').change(populate_sample_attributes_values_dropdown);
-  block_by_attribute_value = function() {
-    var attribute_name, cell_class, exclude_by_value;
-    attribute_name = $('#exclude_menu').val();
-    exclude_by_value = $('#attribute_values').val();
-    cell_class = ".column_name-" + attribute_name;
-    return $(cell_class).each((function(_this) {
-      return function(index, element) {
-        var row;
-        if ($.trim($(element).text()) === exclude_by_value) {
-          row = $(element).parent('tr');
-          return $(row).find(".trait_value_input").val("x");
+      the_rows += "</tbody>";
+      table = header + the_rows;
+      console.log("table is:", table);
+      return $("#stats_table").append(table);
+    };
+    process_id = function() {
+      var i, len, processed, value, values;
+      values = 1 <= arguments.length ? slice.call(arguments, 0) : [];
+
+      /* Make an id or a class valid javascript by, for example, eliminating spaces */
+      processed = "";
+      for (i = 0, len = values.length; i < len; i++) {
+        value = values[i];
+        console.log("value:", value);
+        value = value.replace(" ", "_");
+        if (processed.length) {
+          processed += "-";
         }
+        processed += value;
+      }
+      return processed;
+    };
+    edit_data_change = function() {
+      var already_seen, checkbox, checked, i, j, len, len1, name, real_value, row, rows, sample_sets, table, tables;
+      already_seen = {};
+      sample_sets = {
+        samples_primary: new Stats([]),
+        samples_other: new Stats([]),
+        samples_all: new Stats([])
       };
-    })(this));
-  };
-  $('#exclude_group').click(block_by_attribute_value);
-  block_by_index = function() {
-    var end_index, error, index, index_list, index_set, index_string, start_index, _i, _j, _k, _len, _len1, _ref, _results;
-    index_string = $('#remove_samples_field').val();
-    index_list = [];
-    _ref = index_string.split(",");
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      index_set = _ref[_i];
-      if (index_set.indexOf('-') !== -1) {
-        try {
-          start_index = parseInt(index_set.split("-")[0]);
-          end_index = parseInt(index_set.split("-")[1]);
-          for (index = _j = start_index; start_index <= end_index ? _j <= end_index : _j >= end_index; index = start_index <= end_index ? ++_j : --_j) {
-            index_list.push(index);
+      console.log("at beginning:", sample_sets);
+      tables = ['samples_primary', 'samples_other'];
+      for (i = 0, len = tables.length; i < len; i++) {
+        table = tables[i];
+        rows = $("#" + table).find('tr');
+        for (j = 0, len1 = rows.length; j < len1; j++) {
+          row = rows[j];
+          name = $(row).find('.edit_sample_sample_name').html();
+          name = $.trim(name);
+          real_value = $(row).find('.edit_sample_value').val();
+          console.log("real_value:", real_value);
+          checkbox = $(row).find(".edit_sample_checkbox");
+          checked = $(checkbox).attr('checked');
+          if (checked && is_number(real_value) && real_value !== "") {
+            console.log("in the iffy if");
+            real_value = parseFloat(real_value);
+            sample_sets[table].add_value(real_value);
+            console.log("checking name of:", name);
+            if (!(name in already_seen)) {
+              console.log("haven't seen");
+              sample_sets['samples_all'].add_value(real_value);
+              already_seen[name] = true;
+            }
           }
-        } catch (_error) {
-          error = _error;
-          alert("Syntax error");
         }
-      } else {
-        index = parseInt(index_set);
-        console.log("index:", index);
-        index_list.push(index);
       }
-    }
-    console.log("index_list:", index_list);
-    _results = [];
-    for (_k = 0, _len1 = index_list.length; _k < _len1; _k++) {
-      index = index_list[_k];
-      if ($('#block_group').val() === "primary") {
-        console.log("block_group:", $('#block_group').val());
-        console.log("row:", $('#Primary_' + index.toString()));
-        _results.push($('#Primary_' + index.toString()).find('.trait_value_input').val("x"));
-      } else if ($('#block_group').val() === "other") {
-        console.log("block_group:", $('#block_group').val());
-        console.log("row:", $('#Other_' + index.toString()));
-        _results.push($('#Other_' + index.toString()).find('.trait_value_input').val("x"));
+      console.log("towards end:", sample_sets);
+      root.histogram.redraw(sample_sets['samples_primary'].the_values);
+      return update_stat_values(sample_sets);
+    };
+    show_hide_outliers = function() {
+      var label;
+      console.log("FOOBAR in beginning of show_hide_outliers");
+      label = $('#show_hide_outliers').val();
+      console.log("lable is:", label);
+      if (label === "Hide Outliers") {
+        return $('#show_hide_outliers').val("Show Outliers");
+      } else if (label === "Show Outliers") {
+        console.log("Found Show Outliers");
+        $('#show_hide_outliers').val("Hide Outliers");
+        return console.log("Should be now Hide Outliers");
+      }
+    };
+    on_corr_method_change = function() {
+      var corr_method;
+      console.log("in beginning of on_corr_method_change");
+      corr_method = $('select[name=corr_method]').val();
+      console.log("corr_method is:", corr_method);
+      $('.correlation_desc').hide();
+      $('#' + corr_method + "_r_desc").show().effect("highlight");
+      if (corr_method === "lit") {
+        return $("#corr_sample_method_options").hide();
       } else {
-        _results.push(void 0);
+        return $("#corr_sample_method_options").show();
+      }
+    };
+    $('select[name=corr_method]').change(on_corr_method_change);
+    create_value_dropdown = function(value) {
+      return "<option val=" + value + ">" + value + "</option>";
+    };
+    populate_sample_attributes_values_dropdown = function() {
+      var attribute_info, i, key, len, ref, ref1, results, sample_attributes, selected_attribute, value;
+      console.log("in beginning of psavd");
+      $('#attribute_values').empty();
+      sample_attributes = {};
+      ref = js_data.attribute_names;
+      for (key in ref) {
+        if (!hasProp.call(ref, key)) continue;
+        attribute_info = ref[key];
+        sample_attributes[attribute_info.name] = attribute_info.distinct_values;
       }
+      console.log("[visa] attributes is:", sample_attributes);
+      selected_attribute = $('#exclude_menu').val().replace("_", " ");
+      console.log("selected_attribute is:", selected_attribute);
+      ref1 = sample_attributes[selected_attribute];
+      results = [];
+      for (i = 0, len = ref1.length; i < len; i++) {
+        value = ref1[i];
+        results.push($(create_value_dropdown(value)).appendTo($('#attribute_values')));
+      }
+      return results;
+    };
+    if (js_data.attribute_names.length > 0) {
+      populate_sample_attributes_values_dropdown();
     }
-    return _results;
-  };
-  $('#block_by_index').click(block_by_index);
-  hide_no_value = function() {
-    return $('.value_se').each((function(_this) {
-      return function(_index, element) {
-        if ($(element).find('.trait_value_input').val() === 'x') {
-          return $(element).hide();
-        }
-      };
-    })(this));
-  };
-  $('#hide_no_value').click(hide_no_value);
-  block_outliers = function() {
-    return $('.outlier').each((function(_this) {
-      return function(_index, element) {
-        return $(element).find('.trait_value_input').val('x');
-      };
-    })(this));
-  };
-  $('#block_outliers').click(block_outliers);
-  reset_samples_table = function() {
-    return $('.trait_value_input').each((function(_this) {
-      return function(_index, element) {
-        console.log("value is:", $(element).val());
-        $(element).val($(element).data('value'));
-        console.log("data-value is:", $(element).data('value'));
-        return $(element).parents('.value_se').show();
-      };
-    })(this));
-  };
-  $('#reset').click(reset_samples_table);
-  get_sample_table_data = function() {
-    var other_samples, primary_samples, samples;
-    samples = {};
-    primary_samples = [];
-    other_samples = [];
-    $('#sortable1').find('.value_se').each((function(_this) {
-      return function(_index, element) {
-        var attribute_info, key, row_data, _ref;
-        row_data = {};
-        row_data.name = $.trim($(element).find('.column_name-Sample').text());
-        row_data.value = $(element).find('.edit_sample_value').val();
-        if ($(element).find('.edit_sample_se').length !== -1) {
-          row_data.se = $(element).find('.edit_sample_se').val();
+    $('#exclude_menu').change(populate_sample_attributes_values_dropdown);
+    block_by_attribute_value = function() {
+      var attribute_name, cell_class, exclude_by_value;
+      attribute_name = $('#exclude_menu').val();
+      exclude_by_value = $('#attribute_values').val();
+      cell_class = ".column_name-" + attribute_name;
+      return $(cell_class).each((function(_this) {
+        return function(index, element) {
+          var row;
+          if ($.trim($(element).text()) === exclude_by_value) {
+            row = $(element).parent('tr');
+            return $(row).find(".trait_value_input").val("x");
+          }
+        };
+      })(this));
+    };
+    $('#exclude_group').click(block_by_attribute_value);
+    block_by_index = function() {
+      var end_index, error, i, index, index_list, index_set, index_string, j, k, len, len1, ref, ref1, ref2, results, start_index;
+      index_string = $('#remove_samples_field').val();
+      index_list = [];
+      ref = index_string.split(",");
+      for (i = 0, len = ref.length; i < len; i++) {
+        index_set = ref[i];
+        if (index_set.indexOf('-') !== -1) {
+          try {
+            start_index = parseInt(index_set.split("-")[0]);
+            end_index = parseInt(index_set.split("-")[1]);
+            for (index = j = ref1 = start_index, ref2 = end_index; ref1 <= ref2 ? j <= ref2 : j >= ref2; index = ref1 <= ref2 ? ++j : --j) {
+              index_list.push(index);
+            }
+          } catch (_error) {
+            error = _error;
+            alert("Syntax error");
+          }
+        } else {
+          index = parseInt(index_set);
+          console.log("index:", index);
+          index_list.push(index);
         }
-        _ref = js_data.attribute_names;
-        for (key in _ref) {
-          if (!__hasProp.call(_ref, key)) continue;
-          attribute_info = _ref[key];
-          row_data[attribute_info.name] = $.trim($(element).find('.column_name-' + attribute_info.name.replace(" ", "_")).text());
+      }
+      console.log("index_list:", index_list);
+      results = [];
+      for (k = 0, len1 = index_list.length; k < len1; k++) {
+        index = index_list[k];
+        if ($('#block_group').val() === "primary") {
+          console.log("block_group:", $('#block_group').val());
+          console.log("row:", $('#Primary_' + index.toString()));
+          results.push($('#Primary_' + index.toString()).find('.trait_value_input').val("x"));
+        } else if ($('#block_group').val() === "other") {
+          console.log("block_group:", $('#block_group').val());
+          console.log("row:", $('#Other_' + index.toString()));
+          results.push($('#Other_' + index.toString()).find('.trait_value_input').val("x"));
+        } else {
+          results.push(void 0);
         }
-        console.log("row_data is:", row_data);
-        return primary_samples.push(row_data);
-      };
-    })(this));
-    console.log("primary_samples is:", primary_samples);
-    samples.primary_samples = primary_samples;
-    samples.other_samples = other_samples;
-    return samples;
-  };
-  export_sample_table_data = function() {
-    var format, json_sample_data, sample_data;
-    sample_data = get_sample_table_data();
-    console.log("sample_data is:", sample_data);
-    json_sample_data = JSON.stringify(sample_data);
-    console.log("json_sample_data is:", json_sample_data);
-    $('input[name=export_data]').val(json_sample_data);
-    console.log("export_data is", $('input[name=export_data]').val());
-    format = $('#export_format').val();
-    if (format === "excel") {
-      $('#trait_data_form').attr('action', '/export_trait_excel');
-    } else {
-      $('#trait_data_form').attr('action', '/export_trait_csv');
-    }
-    console.log("action is:", $('#trait_data_form').attr('action'));
-    return $('#trait_data_form').submit();
-  };
-  $('#export').click(export_sample_table_data);
-  console.log("before registering block_outliers");
-  $('#block_outliers').click(block_outliers);
-  console.log("after registering block_outliers");
-  _.mixin(_.str.exports());
-  $('#edit_sample_lists').change(edit_data_change);
-  console.log("loaded");
-  make_table();
-  edit_data_change();
-  return console.log("end");
-});
+      }
+      return results;
+    };
+    $('#block_by_index').click(block_by_index);
+    hide_no_value = function() {
+      return $('.value_se').each((function(_this) {
+        return function(_index, element) {
+          if ($(element).find('.trait_value_input').val() === 'x') {
+            return $(element).hide();
+          }
+        };
+      })(this));
+    };
+    $('#hide_no_value').click(hide_no_value);
+    block_outliers = function() {
+      return $('.outlier').each((function(_this) {
+        return function(_index, element) {
+          return $(element).find('.trait_value_input').val('x');
+        };
+      })(this));
+    };
+    $('#block_outliers').click(block_outliers);
+    reset_samples_table = function() {
+      return $('.trait_value_input').each((function(_this) {
+        return function(_index, element) {
+          console.log("value is:", $(element).val());
+          $(element).val($(element).data('value'));
+          console.log("data-value is:", $(element).data('value'));
+          return $(element).parents('.value_se').show();
+        };
+      })(this));
+    };
+    $('#reset').click(reset_samples_table);
+    get_sample_table_data = function(table_name) {
+      var samples;
+      samples = [];
+      $('#' + table_name).find('.value_se').each((function(_this) {
+        return function(_index, element) {
+          var attribute_info, key, ref, row_data;
+          row_data = {};
+          row_data.name = $.trim($(element).find('.column_name-Sample').text());
+          row_data.value = $(element).find('.edit_sample_value').val();
+          if ($(element).find('.edit_sample_se').length !== -1) {
+            row_data.se = $(element).find('.edit_sample_se').val();
+          }
+          ref = js_data.attribute_names;
+          for (key in ref) {
+            if (!hasProp.call(ref, key)) continue;
+            attribute_info = ref[key];
+            row_data[attribute_info.name] = $.trim($(element).find('.column_name-' + attribute_info.name.replace(" ", "_")).text());
+          }
+          console.log("row_data is:", row_data);
+          return samples.push(row_data);
+        };
+      })(this));
+      return samples;
+    };
+    export_sample_table_data = 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');
+      console.log("sample_data is:", sample_data);
+      json_sample_data = JSON.stringify(sample_data);
+      console.log("json_sample_data is:", json_sample_data);
+      $('input[name=export_data]').val(json_sample_data);
+      console.log("export_data is", $('input[name=export_data]').val());
+      format = $('#export_format').val();
+      if (format === "excel") {
+        $('#trait_data_form').attr('action', '/export_trait_excel');
+      } else {
+        $('#trait_data_form').attr('action', '/export_trait_csv');
+      }
+      console.log("action is:", $('#trait_data_form').attr('action'));
+      return $('#trait_data_form').submit();
+    };
+    $('#export').click(export_sample_table_data);
+    console.log("before registering block_outliers");
+    $('#block_outliers').click(block_outliers);
+    console.log("after registering block_outliers");
+    _.mixin(_.str.exports());
+    $('#edit_sample_lists').change(edit_data_change);
+    console.log("loaded");
+    make_table();
+    edit_data_change();
+    return console.log("end");
+  });
+
+}).call(this);
diff --git a/wqflask/wqflask/templates/new_security/login_user.html b/wqflask/wqflask/templates/new_security/login_user.html
index 81e8b53a..a66a85d6 100755
--- a/wqflask/wqflask/templates/new_security/login_user.html
+++ b/wqflask/wqflask/templates/new_security/login_user.html
@@ -24,18 +24,18 @@
             <h4>Already have an account? Sign in here.</h4>
 
 
-            <form class="form-horizontal" action="/n/login" method="POST" name="login_user_form">
+            <form class="form-horizontal" action="/n/login" method="POST" name="login_user_form" id="loginUserForm">
                  <fieldset>
                     <div class="form-group">
                         <label style="text-align:left;" class="col-xs-1 control-label" for="email_address">Email&nbsp;Address</label>
-                        <div style="margin-left:20px;" class="col-xs-10">
+                        <div style="margin-left:20px;" class="col-xs-4">
                             <input id="email_address" class="focused" name="email_address" type="text" value="">
                         </div>
                     </div>
 
                     <div class="form-group">
                         <label style="text-align:left;" class="col-xs-1 control-label" for="password">Password</label>
-                        <div style="margin-left:20px;" class="col-xs-3 controls">
+                        <div style="margin-left:20px;" class="col-xs-4 controls">
                             <input id="password" name="password" type="password" value="">
                             <br />
                             <a href="/n/forgot_password">Forgot your password?</a><br/>
@@ -45,14 +45,14 @@
 
                     <div class="form-group">
                         <label class="col-xs-1 control-label" for="remember"></label>
-                        <div style="margin-left:20px;" class="col-xs-3 controls">
+                        <div style="margin-left:20px;" class="col-xs-4 controls">
                             <input id="remember" name="remember" type="checkbox" value="y"> <b>Remember me</b>
                         </div>
                     </div>
 
                     <div class="form-group">
                         <label class="col-xs-1 control-label" for="submit"></label>
-                        <div style="margin-left:20px;" class="col-xs-3 controls">
+                        <div style="margin-left:20px;" class="col-xs-4 controls">
                             <input id="next" name="next" type="hidden" value="">
                             <input class="btn btn-primary" id="submit" name="submit" type="submit" value="Sign in">
                         </div>
@@ -66,9 +66,42 @@
 
   {% endblock %}
 
+{% block css %}
+<style type="text/css">
+input.error{
+    border:1px solid #FF0000 !important;
+}
+
+label.error,div.error{
+    font-weight:normal;
+    color:#FF0000 !important;
+}
+</style>
+{% endblock %}
+
 {% block js %}
     <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
 
+    <script type="text/javascript" src="/static/new/packages/ValidationPlugin/dist/jquery.validate.min.js"></script>
+    <script>
+    $(document).ready(function () {
+        $("#loginUserForm").validate({
+            onkeyup: false,
+            onsubmit: true,
+            onfocusout: function(element) { $(element).valid(); },
+            rules: {
+                email_address: {
+                    required: true,
+                    email: true
+                },
+                password: {
+                    required: true
+                }
+            }
+        });
+    });
+    </script>
+
     {% include "new_security/_scripts.html" %}
 
 {% endblock %}
diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py
index 39004f07..79c1c967 100755
--- a/wqflask/wqflask/views.py
+++ b/wqflask/wqflask/views.py
@@ -5,6 +5,7 @@ import sys
 print("sys.path is:", sys.path)
 
 import csv
+import xlsxwriter
 import StringIO  # Todo: Use cStringIO?
 
 import gc
@@ -186,7 +187,7 @@ def environments():
     doc = docs.Docs("environments")
     return render_template("docs.html", **doc.__dict__)
 
-@app.route('/export_trait_csv', methods=('POST',))
+@app.route('/export_trait_excel', methods=('POST',))
 def export_trait_excel():
     """Excel file consisting of the sample data from the trait data and analysis page"""
     print("In export_trait_excel")
@@ -196,15 +197,18 @@ def export_trait_excel():
     print("sample_data - type: %s -- size: %s" % (type(sample_data), len(sample_data)))
 
     buff = StringIO.StringIO()
-    writer = csv.writer(buff)
-    for row in sample_data:
-        writer.writerow(row)
-    csv_data = buff.getvalue()
+    workbook = xlsxwriter.Workbook(buff, {'in_memory': True})
+    worksheet = workbook.add_worksheet()
+    for i, row in enumerate(sample_data):
+        worksheet.write(i, 0, row[0])
+        worksheet.write(i, 1, row[1])
+    workbook.close()
+    excel_data = buff.getvalue()
     buff.close()
 
-    return Response(csv_data,
-                    mimetype='text/csv',
-                    headers={"Content-Disposition":"attachment;filename=test.csv"})
+    return Response(excel_data,
+                    mimetype='application/vnd.ms-excel',
+                    headers={"Content-Disposition":"attachment;filename=test.xlsx"})
 
 @app.route('/export_trait_csv', methods=('POST',))
 def export_trait_csv():