Merge pull request #53 from lomereiter/bar_chart_improvements

Bar chart improvements

7 files changed, 767 insertions, 643 deletions

diff --git a/wqflask/runserver.py b/wqflask/runserver.py
index 5a76d1e2..59ebf0d4 100755
--- a/wqflask/runserver.py
+++ b/wqflask/runserver.py
@@ -30,6 +30,7 @@ logging_tree.printout()
 
 app.run(host='0.0.0.0',
         port=app.config['SERVER_PORT'],
-        use_debugger=False,
+        debug=True,
+        use_debugger=True,
         threaded=True,
         use_reloader=True)
diff --git a/wqflask/wqflask/static/new/css/bar_chart.css b/wqflask/wqflask/static/new/css/bar_chart.css
index 78d31eee..0dda47c4 100755
--- a/wqflask/wqflask/static/new/css/bar_chart.css
+++ b/wqflask/wqflask/static/new/css/bar_chart.css
@@ -9,6 +9,10 @@
   fill: steelblue;

   shape-rendering: crispEdges;

 }

+

+#legend-left, #legend-right {

+  font-size: 20px;

+}

 /*

 .x.axis path {

   display: none;

diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index c83de64e..7a2b38f3 100755
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -10,11 +10,10 @@ class Bar_Chart
             @get_attr_color_dict(@distinct_attr_vals)
         
         #Used to calculate the bottom margin so sample names aren't cut off
-        longest_sample_name = d3.max(sample.length for sample in @sample_names)
+        longest_sample_name = d3.max(sample.name.length for sample in @sample_list)
         
         @margin = {top: 20, right: 20, bottom: longest_sample_name * 7, left: 40}
-        @plot_width = @sample_vals.length * 20 - @margin.left - @margin.right
-        @range = @sample_vals.length * 20
+        @plot_width = @sample_vals.length * 20
         @plot_height = 500 - @margin.top - @margin.bottom
 
         @x_buffer = @plot_width/20
@@ -26,41 +25,36 @@ class Bar_Chart
         @svg = @create_svg()
 
         @plot_height -= @y_buffer
-        @create_scales()
+        @create_scales(@sample_names)
         @create_graph()
 
         d3.select("#color_attribute").on("change", =>
             @attribute = $("#color_attribute").val()
+
             console.log("attr_color_dict:", @attr_color_dict)
-            #if $("#update_bar_chart").html() == 'Sort By Name'
-            if @sort_by = "name" 
-                @svg.selectAll(".bar")
-                    .data(@sorted_samples())
-                    .transition()
-                    .duration(1000)
-                    .style("fill", (d) =>
-                        if @attribute == "None"
-                            return "steelblue"
-                        else
-                            return @attr_color_dict[@attribute][d[2][@attribute]]
-                    )
-                    .select("title")
-                    .text((d) =>
-                        return d[1]
-                    )
+
+            @svg.selectAll(".bar")
+                .data(if @sort_by == "name" then @samples else @sorted_samples())
+                .transition()
+                .duration(1000)
+                .style("fill", (d) =>
+                    if @attribute == "None"
+                        return "steelblue"
+                    else
+                        return @attr_color_dict[@attribute][d[2][@attribute]]
+                )
+                .select("title")
+                .text((d) =>
+                    return d[1]
+                )
+
+            $(".legend").remove()
+            if @attribute == "None" or @is_discrete[@attribute]
+                $("#legend-left,#legend-right,#legend-colors").empty()
+                if @attribute != "None"
+                    @add_legend(@attribute, @distinct_attr_vals[@attribute])
             else
-                @svg.selectAll(".bar")
-                    .data(@samples)
-                    .transition()
-                    .duration(1000)
-                    .style("fill", (d) =>
-                        if @attribute == "None"
-                            return "steelblue"
-                        else
-                            return @attr_color_dict[@attribute][d[2][@attribute]]
-                    )
-            @draw_legend()
-            @add_legend(@attribute, @distinct_attr_vals[@attribute])
+                @draw_legend()
         )
 
         $(".sort_by_value").on("click", =>
@@ -136,11 +130,45 @@ class Bar_Chart
             @open_trait_selection()
         )
 
+    extra: (sample) ->
+        attr_vals = {}
+        for attribute in @attributes
+            attr_vals[attribute] = sample["extra_attributes"][attribute]
+        attr_vals
+
+    # takes a dict: name -> value and rebuilds the graph
+    redraw: (samples_dict) ->
+        curr = (x for x in @sample_list when\
+                x.name of samples_dict and samples_dict[x.name] != null)
+        @sample_names = (x.name for x in curr)
+        @sample_vals = (samples_dict[x.name] for x in curr)
+        @sample_attr_vals = (@extra(x) for x in curr)
+        @samples = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
+
+        @rebuild_bar_graph(if @sort_by == 'name' then @samples else @sorted_samples())
+
     rebuild_bar_graph: (samples) ->
         console.log("samples:", samples)
-        @svg.selectAll(".bar")
-            .data(samples)
-            .transition()
+        @attribute = $("#color_attribute").val()
+
+        # recompute sizes
+        vals = (x[1] for x in samples)
+        @y_min = d3.min(vals)
+        @y_max = d3.max(vals) * 1.1
+        @plot_width = samples.length * 20
+
+        $("svg.bar_chart").attr("width", @plot_width + @margin.left + @margin.right)
+
+        names = (x[0] for x in samples)
+        @create_scales(names)
+        $('.bar_chart').find('.x.axis').remove()
+        $('.bar_chart').find('.y.axis').remove()
+        @add_x_axis()
+        @add_y_axis()
+
+        bars = @update_bars(samples)
+
+        bars.transition()
             .duration(1000)
             .style("fill", (d) =>
                 if @attributes.length == 0 and @trait_color_dict?
@@ -156,6 +184,7 @@ class Bar_Chart
                 else
                     return "steelblue"
             )
+            .attr("x", (d) => return @x_scale(d[0]))
             .attr("y", (d) =>
                 return @y_scale(d[1])
             )
@@ -170,22 +199,19 @@ class Bar_Chart
             #    return @trait_color_dict[d[0]]
             #    #return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
             #)
-        sample_names = (sample[0] for sample in samples)
-        console.log("sample_names2:", sample_names)
-        x_scale = d3.scale.ordinal()
-            .domain(sample_names)
-            .rangeRoundBands([0, @range], 0.1, 0)
-        $('.bar_chart').find('.x.axis').remove()
-        @add_x_axis(x_scale)
 
     get_attr_color_dict: (vals) ->
         @attr_color_dict = {}
+        @is_discrete = {}
+        @minimum_values = {}
+        @maximum_values = {}
         console.log("vals:", vals)
         for own key, distinct_vals of vals
             @min_val = d3.min(distinct_vals)
             @max_val = d3.max(distinct_vals)
             this_color_dict = {}
-            if distinct_vals.length < 10
+            discrete = distinct_vals.length < 10
+            if discrete
                 color = d3.scale.category10()
                 for value, i in distinct_vals
                     this_color_dict[value] = color(i)
@@ -200,8 +226,7 @@ class Bar_Chart
                         return true
                 )
                     color_range = d3.scale.linear()
-                                    .domain([min_val,
-                                            max_val])
+                                    .domain([@min_val, @max_val])
                                     .range([0,255])
                     for value, i in distinct_vals
                         console.log("color_range(value):", parseInt(color_range(value)))
@@ -209,19 +234,22 @@ class Bar_Chart
                         #this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)))
                         #this_color_dict[value] = "rgb(0, 0, " + color_range(parseInt(value)) + ")"
             @attr_color_dict[key] = this_color_dict
+            @is_discrete[key] = discrete
+            @minimum_values[key] = @min_val
+            @maximum_values[key] = @max_val
        
 
 
     draw_legend: () ->
-        $('#legend-left').html(@min_val)
-        $('#legend-right').html(@max_val)
-        svg_html = '<svg height="10" width="90"> \
-                        <rect x="0" width="15" height="10" style="fill: rgb(0, 0, 0);"></rect> \
-                        <rect x="15" width="15" height="10" style="fill: rgb(50, 0, 0);"></rect> \
-                        <rect x="30" width="15" height="10" style="fill: rgb(100, 0, 0);"></rect> \
-                        <rect x="45" width="15" height="10" style="fill: rgb(150, 0, 0);"></rect> \
-                        <rect x="60" width="15" height="10" style="fill: rgb(200, 0, 0);"></rect> \
-                        <rect x="75" width="15" height="10" style="fill: rgb(255, 0, 0);"></rect> \
+        $('#legend-left').html(@minimum_values[@attribute])
+        $('#legend-right').html(@maximum_values[@attribute])
+        svg_html = '<svg height="15" width="120"> \
+                        <rect x="0" width="20" height="15" style="fill: rgb(0, 0, 0);"></rect> \
+                        <rect x="20" width="20" height="15" style="fill: rgb(50, 0, 0);"></rect> \
+                        <rect x="40" width="20" height="15" style="fill: rgb(100, 0, 0);"></rect> \
+                        <rect x="60" width="20" height="15" style="fill: rgb(150, 0, 0);"></rect> \
+                        <rect x="80" width="20" height="15" style="fill: rgb(200, 0, 0);"></rect> \
+                        <rect x="100" width="20" height="15" style="fill: rgb(255, 0, 0);"></rect> \
                     </svg>'
         console.log("svg_html:", svg_html)
         $('#legend-colors').html(svg_html)
@@ -272,16 +300,11 @@ class Bar_Chart
         @sample_vals = (sample.value for sample in @sample_list when sample.value != null)
         @attributes = (key for key of @sample_list[0]["extra_attributes"])
         console.log("attributes:", @attributes)
-        @sample_attr_vals = []
-        if @attributes.length > 0
-            for sample in @sample_list
-                attr_vals = {}
-                for attribute in @attributes
-                    attr_vals[attribute] = sample["extra_attributes"][attribute]
-                @sample_attr_vals.push(attr_vals)
+        @sample_attr_vals = (@extra(sample) for sample in @sample_list when sample.value != null)
         @samples = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
 
     get_distinct_attr_vals: () ->
+        # FIXME: this has quadratic behaviour, may cause issues with many samples and continuous attributes
         @distinct_attr_vals = {}
         for sample in @sample_attr_vals
             for attribute of sample
@@ -302,10 +325,10 @@ class Bar_Chart
             
         return svg
         
-    create_scales: () ->
+    create_scales: (sample_names) ->
         @x_scale = d3.scale.ordinal()
-            .domain(@sample_names)
-            .rangeRoundBands([0, @range], 0.1, 0)
+            .domain(sample_names)
+            .rangeRoundBands([0, @plot_width], 0.1, 0)
 
         @y_scale = d3.scale.linear()
             .domain([@y_min * 0.75, @y_max])
@@ -314,14 +337,14 @@ class Bar_Chart
     create_graph: () ->
         
         #@add_border()
-        @add_x_axis(@x_scale)
+        @add_x_axis()
         @add_y_axis() 
         
-        @add_bars()
+        @update_bars(@samples)
         
     add_x_axis: (scale) ->
         xAxis = d3.svg.axis()
-            .scale(scale)
+            .scale(@x_scale)
             .orient("bottom");
         
         @svg.append("g")
@@ -352,10 +375,9 @@ class Bar_Chart
             .attr("dy", ".71em")
             .style("text-anchor", "end")
 
-    add_bars: () ->
-        @svg.selectAll(".bar")
-            .data(@samples)
-          .enter().append("rect")
+    update_bars: (samples) ->
+        bars = @svg.selectAll(".bar").data(samples, (d) => return d[0])
+        bars.enter().append("rect")
             .style("fill", "steelblue")
             .attr("class", "bar")
             .attr("x", (d) =>
@@ -372,7 +394,8 @@ class Bar_Chart
             .text((d) =>
                 return d[1]
             )
-            
+        bars.exit().remove()
+        return bars
 
     sorted_samples: () ->
         #if @sample_attr_vals.length > 0
@@ -386,38 +409,19 @@ class Bar_Chart
         return sorted
 
     add_legend: (attribute, distinct_vals) ->
-        legend = @svg.append("g")
-            .attr("class", "legend")
-            .attr("height", 100)
-            .attr("width", 100)
-            .attr('transform', 'translate(-20,50)')
-
-        legend_rect = legend.selectAll('rect')
-                        .data(distinct_vals)
-                        .enter()
-                        .append("rect")
-                        .attr("x", @plot_width - 65)
-                        .attr("width", 10)
-                        .attr("height", 10)
-                        .attr("y", (d, i) =>
-                            return i * 20
-                        )
-                        .style("fill", (d) =>
-                            console.log("TEST:", @attr_color_dict[attribute][d])
-                            return @attr_color_dict[attribute][d]
-                        )
-
-        legend_text = legend.selectAll('text')
-                        .data(distinct_vals)
-                        .enter()
-                        .append("text")
-                        .attr("x", @plot_width - 52)
-                        .attr("y", (d, i) =>
-                            return i*20 + 9    
-                        )
-                        .text((d) =>
-                            return d
-                        )
+        legend_span = d3.select('#bar_chart_legend')
+            .append('div').style('word-wrap', 'break-word')
+            .attr('class', 'legend').selectAll('span')
+            .data(distinct_vals)
+          .enter().append('span').style({'word-wrap': 'normal', 'display': 'inline-block'})
+
+        legend_span.append('span')
+            .style("background-color", (d) =>
+                return @attr_color_dict[attribute][d]
+            )
+            .style({'display': 'inline-block', 'width': '15px', 'height': '15px',\
+                    'margin': '0px 5px 0px 15px'})
+        legend_span.append('span').text((d) => return d).style('font-size', '20px')
 
     open_trait_selection: () ->
         $('#collections_holder').load('/collections/list?color_by_trait #collections_list', =>
@@ -488,4 +492,4 @@ class Bar_Chart
         #for sample in samples
         #    if samples[sample] in distinct_values
 
-root.Bar_Chart = Bar_Chart
\ No newline at end of file
+root.Bar_Chart = Bar_Chart
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index f5ed544b..cc21550e 100755
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -1,54 +1,53 @@
-// Generated by CoffeeScript 1.8.0
-var Bar_Chart, root,
-  __hasProp = {}.hasOwnProperty,
-  __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; };
+// Generated by CoffeeScript 1.9.2
+(function() {
+  var Bar_Chart, root,
+    hasProp = {}.hasOwnProperty,
+    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; };
 
-root = typeof exports !== "undefined" && exports !== null ? exports : this;
+  root = typeof exports !== "undefined" && exports !== null ? exports : this;
 
-Bar_Chart = (function() {
-  function Bar_Chart(sample_list) {
-    var longest_sample_name, sample;
-    this.sample_list = sample_list;
-    this.sort_by = "name";
-    this.get_samples();
-    console.log("sample names:", this.sample_names);
-    if (this.sample_attr_vals.length > 0) {
-      this.get_distinct_attr_vals();
-      this.get_attr_color_dict(this.distinct_attr_vals);
-    }
-    longest_sample_name = d3.max((function() {
-      var _i, _len, _ref, _results;
-      _ref = this.sample_names;
-      _results = [];
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        sample = _ref[_i];
-        _results.push(sample.length);
+  Bar_Chart = (function() {
+    function Bar_Chart(sample_list1) {
+      var longest_sample_name, sample;
+      this.sample_list = sample_list1;
+      this.sort_by = "name";
+      this.get_samples();
+      console.log("sample names:", this.sample_names);
+      if (this.sample_attr_vals.length > 0) {
+        this.get_distinct_attr_vals();
+        this.get_attr_color_dict(this.distinct_attr_vals);
       }
-      return _results;
-    }).call(this));
-    this.margin = {
-      top: 20,
-      right: 20,
-      bottom: longest_sample_name * 7,
-      left: 40
-    };
-    this.plot_width = this.sample_vals.length * 20 - this.margin.left - this.margin.right;
-    this.range = this.sample_vals.length * 20;
-    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.svg = this.create_svg();
-    this.plot_height -= this.y_buffer;
-    this.create_scales();
-    this.create_graph();
-    d3.select("#color_attribute").on("change", (function(_this) {
-      return function() {
-        _this.attribute = $("#color_attribute").val();
-        console.log("attr_color_dict:", _this.attr_color_dict);
-        if (_this.sort_by = "name") {
-          _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
+      longest_sample_name = d3.max((function() {
+        var j, len, ref, results;
+        ref = this.sample_list;
+        results = [];
+        for (j = 0, len = ref.length; j < len; j++) {
+          sample = ref[j];
+          results.push(sample.name.length);
+        }
+        return results;
+      }).call(this));
+      this.margin = {
+        top: 20,
+        right: 20,
+        bottom: longest_sample_name * 7,
+        left: 40
+      };
+      this.plot_width = this.sample_vals.length * 20;
+      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.svg = this.create_svg();
+      this.plot_height -= this.y_buffer;
+      this.create_scales(this.sample_names);
+      this.create_graph();
+      d3.select("#color_attribute").on("change", (function(_this) {
+        return function() {
+          _this.attribute = $("#color_attribute").val();
+          console.log("attr_color_dict:", _this.attr_color_dict);
+          _this.svg.selectAll(".bar").data(_this.sort_by === "name" ? _this.samples : _this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
             if (_this.attribute === "None") {
               return "steelblue";
             } else {
@@ -57,438 +56,526 @@ Bar_Chart = (function() {
           }).select("title").text(function(d) {
             return d[1];
           });
-        } else {
-          _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).style("fill", function(d) {
-            if (_this.attribute === "None") {
-              return "steelblue";
-            } else {
-              return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]];
+          $(".legend").remove();
+          if (_this.attribute === "None" || _this.is_discrete[_this.attribute]) {
+            $("#legend-left,#legend-right,#legend-colors").empty();
+            if (_this.attribute !== "None") {
+              return _this.add_legend(_this.attribute, _this.distinct_attr_vals[_this.attribute]);
             }
-          });
+          } else {
+            return _this.draw_legend();
+          }
+        };
+      })(this));
+      $(".sort_by_value").on("click", (function(_this) {
+        return function() {
+          console.log("sorting by value");
+          _this.sort_by = "value";
+          if (_this.attributes.length > 0) {
+            _this.attribute = $("#color_attribute").val();
+          }
+          return _this.rebuild_bar_graph(_this.sorted_samples());
+        };
+      })(this));
+      $(".sort_by_name").on("click", (function(_this) {
+        return function() {
+          console.log("sorting by name");
+          _this.sort_by = "name";
+          if (_this.attributes.length > 0) {
+            _this.attribute = $("#color_attribute").val();
+          }
+          return _this.rebuild_bar_graph(_this.samples);
+        };
+      })(this));
+      d3.select("#color_by_trait").on("click", (function(_this) {
+        return function() {
+          return _this.open_trait_selection();
+        };
+      })(this));
+    }
+
+    Bar_Chart.prototype.extra = function(sample) {
+      var attr_vals, attribute, j, len, ref;
+      attr_vals = {};
+      ref = this.attributes;
+      for (j = 0, len = ref.length; j < len; j++) {
+        attribute = ref[j];
+        attr_vals[attribute] = sample["extra_attributes"][attribute];
+      }
+      return attr_vals;
+    };
+
+    Bar_Chart.prototype.redraw = function(samples_dict) {
+      var curr, x;
+      curr = (function() {
+        var j, len, ref, results;
+        ref = this.sample_list;
+        results = [];
+        for (j = 0, len = ref.length; j < len; j++) {
+          x = ref[j];
+          if (x.name in samples_dict && samples_dict[x.name] !== null) {
+            results.push(x);
+          }
         }
-        _this.draw_legend();
-        return _this.add_legend(_this.attribute, _this.distinct_attr_vals[_this.attribute]);
-      };
-    })(this));
-    $(".sort_by_value").on("click", (function(_this) {
-      return function() {
-        console.log("sorting by value");
-        _this.sort_by = "value";
-        if (_this.attributes.length > 0) {
-          _this.attribute = $("#color_attribute").val();
+        return results;
+      }).call(this);
+      this.sample_names = (function() {
+        var j, len, results;
+        results = [];
+        for (j = 0, len = curr.length; j < len; j++) {
+          x = curr[j];
+          results.push(x.name);
         }
-        return _this.rebuild_bar_graph(_this.sorted_samples());
-      };
-    })(this));
-    $(".sort_by_name").on("click", (function(_this) {
-      return function() {
-        console.log("sorting by name");
-        _this.sort_by = "name";
-        if (_this.attributes.length > 0) {
-          _this.attribute = $("#color_attribute").val();
+        return results;
+      })();
+      this.sample_vals = (function() {
+        var j, len, results;
+        results = [];
+        for (j = 0, len = curr.length; j < len; j++) {
+          x = curr[j];
+          results.push(samples_dict[x.name]);
         }
-        return _this.rebuild_bar_graph(_this.samples);
-      };
-    })(this));
-    d3.select("#color_by_trait").on("click", (function(_this) {
-      return function() {
-        return _this.open_trait_selection();
-      };
-    })(this));
-  }
-
-  Bar_Chart.prototype.rebuild_bar_graph = function(samples) {
-    var sample, sample_names, x_scale;
-    console.log("samples:", samples);
-    this.svg.selectAll(".bar").data(samples).transition().duration(1000).style("fill", (function(_this) {
-      return function(d) {
-        if (_this.attributes.length === 0 && (_this.trait_color_dict != null)) {
-          console.log("SAMPLE:", d[0]);
-          console.log("CHECKING:", _this.trait_color_dict[d[0]]);
-          return _this.trait_color_dict[d[0]];
-        } else if (_this.attributes.length > 0 && _this.attribute !== "None") {
-          console.log("@attribute:", _this.attribute);
-          console.log("d[2]", d[2]);
-          console.log("the_color:", _this.attr_color_dict[_this.attribute][d[2][_this.attribute]]);
-          return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]];
-        } else {
-          return "steelblue";
+        return results;
+      })();
+      this.sample_attr_vals = (function() {
+        var j, len, results;
+        results = [];
+        for (j = 0, len = curr.length; j < len; j++) {
+          x = curr[j];
+          results.push(this.extra(x));
         }
-      };
-    })(this)).attr("y", (function(_this) {
-      return function(d) {
-        return _this.y_scale(d[1]);
-      };
-    })(this)).attr("height", (function(_this) {
-      return function(d) {
-        return _this.plot_height - _this.y_scale(d[1]);
-      };
-    })(this)).select("title").text((function(_this) {
-      return function(d) {
-        return d[1];
-      };
-    })(this));
-    sample_names = (function() {
-      var _i, _len, _results;
-      _results = [];
-      for (_i = 0, _len = samples.length; _i < _len; _i++) {
-        sample = samples[_i];
-        _results.push(sample[0]);
-      }
-      return _results;
-    })();
-    console.log("sample_names2:", sample_names);
-    x_scale = d3.scale.ordinal().domain(sample_names).rangeRoundBands([0, this.range], 0.1, 0);
-    $('.bar_chart').find('.x.axis').remove();
-    return this.add_x_axis(x_scale);
-  };
+        return results;
+      }).call(this);
+      this.samples = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
+      return this.rebuild_bar_graph(this.sort_by === 'name' ? this.samples : this.sorted_samples());
+    };
 
-  Bar_Chart.prototype.get_attr_color_dict = function(vals) {
-    var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _results;
-    this.attr_color_dict = {};
-    console.log("vals:", vals);
-    _results = [];
-    for (key in vals) {
-      if (!__hasProp.call(vals, key)) continue;
-      distinct_vals = vals[key];
-      this.min_val = d3.min(distinct_vals);
-      this.max_val = d3.max(distinct_vals);
-      this_color_dict = {};
-      if (distinct_vals.length < 10) {
-        color = d3.scale.category10();
-        for (i = _i = 0, _len = distinct_vals.length; _i < _len; i = ++_i) {
-          value = distinct_vals[i];
-          this_color_dict[value] = color(i);
+    Bar_Chart.prototype.rebuild_bar_graph = function(samples) {
+      var bars, names, vals, x;
+      console.log("samples:", samples);
+      this.attribute = $("#color_attribute").val();
+      vals = (function() {
+        var j, len, results;
+        results = [];
+        for (j = 0, len = samples.length; j < len; j++) {
+          x = samples[j];
+          results.push(x[1]);
         }
-      } else {
-        console.log("distinct_values:", distinct_vals);
-        if (_.every(distinct_vals, (function(_this) {
-          return function(d) {
-            if (isNaN(d)) {
-              return false;
-            } else {
-              return true;
-            }
-          };
-        })(this))) {
-          color_range = d3.scale.linear().domain([min_val, max_val]).range([0, 255]);
-          for (i = _j = 0, _len1 = distinct_vals.length; _j < _len1; i = ++_j) {
+        return results;
+      })();
+      this.y_min = d3.min(vals);
+      this.y_max = d3.max(vals) * 1.1;
+      this.plot_width = samples.length * 20;
+      $("svg.bar_chart").attr("width", this.plot_width + this.margin.left + this.margin.right);
+      names = (function() {
+        var j, len, results;
+        results = [];
+        for (j = 0, len = samples.length; j < len; j++) {
+          x = samples[j];
+          results.push(x[0]);
+        }
+        return results;
+      })();
+      this.create_scales(names);
+      $('.bar_chart').find('.x.axis').remove();
+      $('.bar_chart').find('.y.axis').remove();
+      this.add_x_axis();
+      this.add_y_axis();
+      bars = this.update_bars(samples);
+      return bars.transition().duration(1000).style("fill", (function(_this) {
+        return function(d) {
+          if (_this.attributes.length === 0 && (_this.trait_color_dict != null)) {
+            console.log("SAMPLE:", d[0]);
+            console.log("CHECKING:", _this.trait_color_dict[d[0]]);
+            return _this.trait_color_dict[d[0]];
+          } else if (_this.attributes.length > 0 && _this.attribute !== "None") {
+            console.log("@attribute:", _this.attribute);
+            console.log("d[2]", d[2]);
+            console.log("the_color:", _this.attr_color_dict[_this.attribute][d[2][_this.attribute]]);
+            return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]];
+          } else {
+            return "steelblue";
+          }
+        };
+      })(this)).attr("x", (function(_this) {
+        return function(d) {
+          return _this.x_scale(d[0]);
+        };
+      })(this)).attr("y", (function(_this) {
+        return function(d) {
+          return _this.y_scale(d[1]);
+        };
+      })(this)).attr("height", (function(_this) {
+        return function(d) {
+          return _this.plot_height - _this.y_scale(d[1]);
+        };
+      })(this)).select("title").text((function(_this) {
+        return function(d) {
+          return d[1];
+        };
+      })(this));
+    };
+
+    Bar_Chart.prototype.get_attr_color_dict = function(vals) {
+      var color, color_range, discrete, distinct_vals, i, j, k, key, len, len1, results, this_color_dict, value;
+      this.attr_color_dict = {};
+      this.is_discrete = {};
+      this.minimum_values = {};
+      this.maximum_values = {};
+      console.log("vals:", vals);
+      results = [];
+      for (key in vals) {
+        if (!hasProp.call(vals, key)) continue;
+        distinct_vals = vals[key];
+        this.min_val = d3.min(distinct_vals);
+        this.max_val = d3.max(distinct_vals);
+        this_color_dict = {};
+        discrete = distinct_vals.length < 10;
+        if (discrete) {
+          color = d3.scale.category10();
+          for (i = j = 0, len = distinct_vals.length; j < len; i = ++j) {
             value = distinct_vals[i];
-            console.log("color_range(value):", parseInt(color_range(value)));
-            this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0);
+            this_color_dict[value] = color(i);
+          }
+        } else {
+          console.log("distinct_values:", distinct_vals);
+          if (_.every(distinct_vals, (function(_this) {
+            return function(d) {
+              if (isNaN(d)) {
+                return false;
+              } else {
+                return true;
+              }
+            };
+          })(this))) {
+            color_range = d3.scale.linear().domain([this.min_val, this.max_val]).range([0, 255]);
+            for (i = k = 0, len1 = distinct_vals.length; k < len1; i = ++k) {
+              value = distinct_vals[i];
+              console.log("color_range(value):", parseInt(color_range(value)));
+              this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0);
+            }
           }
         }
+        this.attr_color_dict[key] = this_color_dict;
+        this.is_discrete[key] = discrete;
+        this.minimum_values[key] = this.min_val;
+        results.push(this.maximum_values[key] = this.max_val);
       }
-      _results.push(this.attr_color_dict[key] = this_color_dict);
-    }
-    return _results;
-  };
+      return results;
+    };
 
-  Bar_Chart.prototype.draw_legend = function() {
-    var svg_html;
-    $('#legend-left').html(this.min_val);
-    $('#legend-right').html(this.max_val);
-    svg_html = '<svg height="10" width="90"> <rect x="0" width="15" height="10" style="fill: rgb(0, 0, 0);"></rect> <rect x="15" width="15" height="10" style="fill: rgb(50, 0, 0);"></rect> <rect x="30" width="15" height="10" style="fill: rgb(100, 0, 0);"></rect> <rect x="45" width="15" height="10" style="fill: rgb(150, 0, 0);"></rect> <rect x="60" width="15" height="10" style="fill: rgb(200, 0, 0);"></rect> <rect x="75" width="15" height="10" style="fill: rgb(255, 0, 0);"></rect> </svg>';
-    console.log("svg_html:", svg_html);
-    return $('#legend-colors').html(svg_html);
-  };
+    Bar_Chart.prototype.draw_legend = function() {
+      var svg_html;
+      $('#legend-left').html(this.minimum_values[this.attribute]);
+      $('#legend-right').html(this.maximum_values[this.attribute]);
+      svg_html = '<svg height="15" width="120"> <rect x="0" width="20" height="15" style="fill: rgb(0, 0, 0);"></rect> <rect x="20" width="20" height="15" style="fill: rgb(50, 0, 0);"></rect> <rect x="40" width="20" height="15" style="fill: rgb(100, 0, 0);"></rect> <rect x="60" width="20" height="15" style="fill: rgb(150, 0, 0);"></rect> <rect x="80" width="20" height="15" style="fill: rgb(200, 0, 0);"></rect> <rect x="100" width="20" height="15" style="fill: rgb(255, 0, 0);"></rect> </svg>';
+      console.log("svg_html:", svg_html);
+      return $('#legend-colors').html(svg_html);
+    };
 
-  Bar_Chart.prototype.get_trait_color_dict = function(samples, vals) {
-    var color, color_range, distinct_vals, i, key, sample, this_color_dict, value, _i, _j, _len, _len1, _results;
-    this.trait_color_dict = {};
-    console.log("vals:", vals);
-    for (key in vals) {
-      if (!__hasProp.call(vals, key)) continue;
-      distinct_vals = vals[key];
-      this_color_dict = {};
-      this.min_val = d3.min(distinct_vals);
-      this.max_val = d3.max(distinct_vals);
-      if (distinct_vals.length < 10) {
-        color = d3.scale.category10();
-        for (i = _i = 0, _len = distinct_vals.length; _i < _len; i = ++_i) {
-          value = distinct_vals[i];
-          this_color_dict[value] = color(i);
-        }
-      } else {
-        console.log("distinct_values:", distinct_vals);
-        if (_.every(distinct_vals, (function(_this) {
-          return function(d) {
-            if (isNaN(d)) {
-              return false;
-            } else {
-              return true;
-            }
-          };
-        })(this))) {
-          color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 255]);
-          for (i = _j = 0, _len1 = distinct_vals.length; _j < _len1; i = ++_j) {
+    Bar_Chart.prototype.get_trait_color_dict = function(samples, vals) {
+      var color, color_range, distinct_vals, i, j, k, key, len, len1, results, sample, this_color_dict, value;
+      this.trait_color_dict = {};
+      console.log("vals:", vals);
+      for (key in vals) {
+        if (!hasProp.call(vals, key)) continue;
+        distinct_vals = vals[key];
+        this_color_dict = {};
+        this.min_val = d3.min(distinct_vals);
+        this.max_val = d3.max(distinct_vals);
+        if (distinct_vals.length < 10) {
+          color = d3.scale.category10();
+          for (i = j = 0, len = distinct_vals.length; j < len; i = ++j) {
             value = distinct_vals[i];
-            console.log("color_range(value):", parseInt(color_range(value)));
-            this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0);
+            this_color_dict[value] = color(i);
+          }
+        } else {
+          console.log("distinct_values:", distinct_vals);
+          if (_.every(distinct_vals, (function(_this) {
+            return function(d) {
+              if (isNaN(d)) {
+                return false;
+              } else {
+                return true;
+              }
+            };
+          })(this))) {
+            color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 255]);
+            for (i = k = 0, len1 = distinct_vals.length; k < len1; i = ++k) {
+              value = distinct_vals[i];
+              console.log("color_range(value):", parseInt(color_range(value)));
+              this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0);
+            }
           }
         }
       }
-    }
-    _results = [];
-    for (sample in samples) {
-      if (!__hasProp.call(samples, sample)) continue;
-      value = samples[sample];
-      _results.push(this.trait_color_dict[sample] = this_color_dict[value]);
-    }
-    return _results;
-  };
+      results = [];
+      for (sample in samples) {
+        if (!hasProp.call(samples, sample)) continue;
+        value = samples[sample];
+        results.push(this.trait_color_dict[sample] = this_color_dict[value]);
+      }
+      return results;
+    };
 
-  Bar_Chart.prototype.convert_into_colors = function(values) {
-    var color_range, i, value, _i, _len, _results;
-    color_range = d3.scale.linear().domain([d3.min(values), d3.max(values)]).range([0, 255]);
-    _results = [];
-    for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {
-      value = values[i];
-      console.log("color_range(value):", color_range(parseInt(value)));
-      _results.push(this_color_dict[value] = d3.rgb(color_range(parseInt(value)), 0, 0));
-    }
-    return _results;
-  };
+    Bar_Chart.prototype.convert_into_colors = function(values) {
+      var color_range, i, j, len, results, value;
+      color_range = d3.scale.linear().domain([d3.min(values), d3.max(values)]).range([0, 255]);
+      results = [];
+      for (i = j = 0, len = values.length; j < len; i = ++j) {
+        value = values[i];
+        console.log("color_range(value):", color_range(parseInt(value)));
+        results.push(this_color_dict[value] = d3.rgb(color_range(parseInt(value)), 0, 0));
+      }
+      return results;
+    };
 
-  Bar_Chart.prototype.get_samples = function() {
-    var attr_vals, attribute, key, sample, _i, _j, _len, _len1, _ref, _ref1;
-    this.sample_names = (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.name);
+    Bar_Chart.prototype.get_samples = function() {
+      var key, sample;
+      this.sample_names = (function() {
+        var j, len, ref, results;
+        ref = this.sample_list;
+        results = [];
+        for (j = 0, len = ref.length; j < len; j++) {
+          sample = ref[j];
+          if (sample.value !== null) {
+            results.push(sample.name);
+          }
         }
-      }
-      return _results;
-    }).call(this);
-    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);
+        return results;
+      }).call(this);
+      this.sample_vals = (function() {
+        var j, len, ref, results;
+        ref = this.sample_list;
+        results = [];
+        for (j = 0, len = ref.length; j < len; j++) {
+          sample = ref[j];
+          if (sample.value !== null) {
+            results.push(sample.value);
+          }
         }
-      }
-      return _results;
-    }).call(this);
-    this.attributes = (function() {
-      var _results;
-      _results = [];
-      for (key in this.sample_list[0]["extra_attributes"]) {
-        _results.push(key);
-      }
-      return _results;
-    }).call(this);
-    console.log("attributes:", this.attributes);
-    this.sample_attr_vals = [];
-    if (this.attributes.length > 0) {
-      _ref = this.sample_list;
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        sample = _ref[_i];
-        attr_vals = {};
-        _ref1 = this.attributes;
-        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-          attribute = _ref1[_j];
-          attr_vals[attribute] = sample["extra_attributes"][attribute];
+        return results;
+      }).call(this);
+      this.attributes = (function() {
+        var results;
+        results = [];
+        for (key in this.sample_list[0]["extra_attributes"]) {
+          results.push(key);
         }
-        this.sample_attr_vals.push(attr_vals);
-      }
-    }
-    return this.samples = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
-  };
-
-  Bar_Chart.prototype.get_distinct_attr_vals = function() {
-    var attribute, sample, _i, _len, _ref, _results;
-    this.distinct_attr_vals = {};
-    _ref = this.sample_attr_vals;
-    _results = [];
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      sample = _ref[_i];
-      _results.push((function() {
-        var _ref1, _results1;
-        _results1 = [];
-        for (attribute in sample) {
-          if (!this.distinct_attr_vals[attribute]) {
-            this.distinct_attr_vals[attribute] = [];
-          }
-          if (_ref1 = sample[attribute], __indexOf.call(this.distinct_attr_vals[attribute], _ref1) < 0) {
-            _results1.push(this.distinct_attr_vals[attribute].push(sample[attribute]));
-          } else {
-            _results1.push(void 0);
+        return results;
+      }).call(this);
+      console.log("attributes:", this.attributes);
+      this.sample_attr_vals = (function() {
+        var j, len, ref, results;
+        ref = this.sample_list;
+        results = [];
+        for (j = 0, len = ref.length; j < len; j++) {
+          sample = ref[j];
+          if (sample.value !== null) {
+            results.push(this.extra(sample));
           }
         }
-        return _results1;
-      }).call(this));
-    }
-    return _results;
-  };
-
-  Bar_Chart.prototype.create_svg = function() {
-    var svg;
-    svg = d3.select("#bar_chart").append("svg").attr("class", "bar_chart").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;
-  };
-
-  Bar_Chart.prototype.create_scales = function() {
-    this.x_scale = d3.scale.ordinal().domain(this.sample_names).rangeRoundBands([0, this.range], 0.1, 0);
-    return this.y_scale = d3.scale.linear().domain([this.y_min * 0.75, this.y_max]).range([this.plot_height, this.y_buffer]);
-  };
-
-  Bar_Chart.prototype.create_graph = function() {
-    this.add_x_axis(this.x_scale);
-    this.add_y_axis();
-    return this.add_bars();
-  };
+        return results;
+      }).call(this);
+      return this.samples = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
+    };
 
-  Bar_Chart.prototype.add_x_axis = function(scale) {
-    var xAxis;
-    xAxis = d3.svg.axis().scale(scale).orient("bottom");
-    return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").style("font-size", "12px").attr("dx", "-.8em").attr("dy", "-.3em").attr("transform", (function(_this) {
-      return function(d) {
-        return "rotate(-90)";
-      };
-    })(this));
-  };
+    Bar_Chart.prototype.get_distinct_attr_vals = function() {
+      var attribute, j, len, ref, results, sample;
+      this.distinct_attr_vals = {};
+      ref = this.sample_attr_vals;
+      results = [];
+      for (j = 0, len = ref.length; j < len; j++) {
+        sample = ref[j];
+        results.push((function() {
+          var ref1, results1;
+          results1 = [];
+          for (attribute in sample) {
+            if (!this.distinct_attr_vals[attribute]) {
+              this.distinct_attr_vals[attribute] = [];
+            }
+            if (ref1 = sample[attribute], indexOf.call(this.distinct_attr_vals[attribute], ref1) < 0) {
+              results1.push(this.distinct_attr_vals[attribute].push(sample[attribute]));
+            } else {
+              results1.push(void 0);
+            }
+          }
+          return results1;
+        }).call(this));
+      }
+      return results;
+    };
 
-  Bar_Chart.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");
-  };
+    Bar_Chart.prototype.create_svg = function() {
+      var svg;
+      svg = d3.select("#bar_chart").append("svg").attr("class", "bar_chart").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;
+    };
 
-  Bar_Chart.prototype.add_bars = function() {
-    return this.svg.selectAll(".bar").data(this.samples).enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", (function(_this) {
-      return function(d) {
-        return _this.x_scale(d[0]);
-      };
-    })(this)).attr("width", this.x_scale.rangeBand()).attr("y", (function(_this) {
-      return function(d) {
-        return _this.y_scale(d[1]);
-      };
-    })(this)).attr("height", (function(_this) {
-      return function(d) {
-        return _this.plot_height - _this.y_scale(d[1]);
-      };
-    })(this)).append("svg:title").text((function(_this) {
-      return function(d) {
-        return d[1];
-      };
-    })(this));
-  };
+    Bar_Chart.prototype.create_scales = function(sample_names) {
+      this.x_scale = d3.scale.ordinal().domain(sample_names).rangeRoundBands([0, this.plot_width], 0.1, 0);
+      return this.y_scale = d3.scale.linear().domain([this.y_min * 0.75, this.y_max]).range([this.plot_height, this.y_buffer]);
+    };
 
-  Bar_Chart.prototype.sorted_samples = function() {
-    var sample_list, sorted;
-    sample_list = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
-    sorted = _.sortBy(sample_list, (function(_this) {
-      return function(sample) {
-        return sample[1];
-      };
-    })(this));
-    console.log("sorted:", sorted);
-    return sorted;
-  };
+    Bar_Chart.prototype.create_graph = function() {
+      this.add_x_axis();
+      this.add_y_axis();
+      return this.update_bars(this.samples);
+    };
 
-  Bar_Chart.prototype.add_legend = function(attribute, distinct_vals) {
-    var legend, legend_rect, legend_text;
-    legend = this.svg.append("g").attr("class", "legend").attr("height", 100).attr("width", 100).attr('transform', 'translate(-20,50)');
-    legend_rect = legend.selectAll('rect').data(distinct_vals).enter().append("rect").attr("x", this.plot_width - 65).attr("width", 10).attr("height", 10).attr("y", (function(_this) {
-      return function(d, i) {
-        return i * 20;
-      };
-    })(this)).style("fill", (function(_this) {
-      return function(d) {
-        console.log("TEST:", _this.attr_color_dict[attribute][d]);
-        return _this.attr_color_dict[attribute][d];
-      };
-    })(this));
-    return legend_text = legend.selectAll('text').data(distinct_vals).enter().append("text").attr("x", this.plot_width - 52).attr("y", (function(_this) {
-      return function(d, i) {
-        return i * 20 + 9;
-      };
-    })(this)).text((function(_this) {
-      return function(d) {
-        return d;
-      };
-    })(this));
-  };
+    Bar_Chart.prototype.add_x_axis = function(scale) {
+      var xAxis;
+      xAxis = 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(xAxis).selectAll("text").style("text-anchor", "end").style("font-size", "12px").attr("dx", "-.8em").attr("dy", "-.3em").attr("transform", (function(_this) {
+        return function(d) {
+          return "rotate(-90)";
+        };
+      })(this));
+    };
 
-  Bar_Chart.prototype.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));
-  };
+    Bar_Chart.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");
+    };
 
-  Bar_Chart.prototype.color_by_trait = function(trait_sample_data) {
-    var distinct_values, trimmed_samples;
-    console.log("BXD1:", trait_sample_data["BXD1"]);
-    console.log("trait_sample_data:", trait_sample_data);
-    trimmed_samples = this.trim_values(trait_sample_data);
-    distinct_values = {};
-    distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples);
-    this.get_trait_color_dict(trimmed_samples, distinct_values);
-    console.log("TRAIT_COLOR_DICT:", this.trait_color_dict);
-    console.log("SAMPLES:", this.samples);
-    if (this.sort_by = "value") {
-      this.svg.selectAll(".bar").data(this.samples).transition().duration(1000).style("fill", (function(_this) {
+    Bar_Chart.prototype.update_bars = function(samples) {
+      var bars;
+      bars = this.svg.selectAll(".bar").data(samples, (function(_this) {
         return function(d) {
-          console.log("this color:", _this.trait_color_dict[d[0]]);
-          return _this.trait_color_dict[d[0]];
+          return d[0];
         };
-      })(this)).select("title").text((function(_this) {
+      })(this));
+      bars.enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", (function(_this) {
+        return function(d) {
+          return _this.x_scale(d[0]);
+        };
+      })(this)).attr("width", this.x_scale.rangeBand()).attr("y", (function(_this) {
+        return function(d) {
+          return _this.y_scale(d[1]);
+        };
+      })(this)).attr("height", (function(_this) {
+        return function(d) {
+          return _this.plot_height - _this.y_scale(d[1]);
+        };
+      })(this)).append("svg:title").text((function(_this) {
         return function(d) {
           return d[1];
         };
       })(this));
-      return this.draw_legend();
-    } else {
-      this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", (function(_this) {
+      bars.exit().remove();
+      return bars;
+    };
+
+    Bar_Chart.prototype.sorted_samples = function() {
+      var sample_list, sorted;
+      sample_list = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
+      sorted = _.sortBy(sample_list, (function(_this) {
+        return function(sample) {
+          return sample[1];
+        };
+      })(this));
+      console.log("sorted:", sorted);
+      return sorted;
+    };
+
+    Bar_Chart.prototype.add_legend = function(attribute, distinct_vals) {
+      var legend_span;
+      legend_span = d3.select('#bar_chart_legend').append('div').style('word-wrap', 'break-word').attr('class', 'legend').selectAll('span').data(distinct_vals).enter().append('span').style({
+        'word-wrap': 'normal',
+        'display': 'inline-block'
+      });
+      legend_span.append('span').style("background-color", (function(_this) {
         return function(d) {
-          console.log("this color:", _this.trait_color_dict[d[0]]);
-          return _this.trait_color_dict[d[0]];
+          return _this.attr_color_dict[attribute][d];
         };
-      })(this)).select("title").text((function(_this) {
+      })(this)).style({
+        'display': 'inline-block',
+        'width': '15px',
+        'height': '15px',
+        'margin': '0px 5px 0px 15px'
+      });
+      return legend_span.append('span').text((function(_this) {
         return function(d) {
-          return d[1];
+          return d;
+        };
+      })(this)).style('font-size', '20px');
+    };
+
+    Bar_Chart.prototype.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));
-      return this.draw_legend();
-    }
-  };
+    };
 
-  Bar_Chart.prototype.trim_values = function(trait_sample_data) {
-    var sample, trimmed_samples, _i, _len, _ref;
-    trimmed_samples = {};
-    _ref = this.sample_names;
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      sample = _ref[_i];
-      if (sample in trait_sample_data) {
-        trimmed_samples[sample] = trait_sample_data[sample];
+    Bar_Chart.prototype.color_by_trait = function(trait_sample_data) {
+      var distinct_values, trimmed_samples;
+      console.log("BXD1:", trait_sample_data["BXD1"]);
+      console.log("trait_sample_data:", trait_sample_data);
+      trimmed_samples = this.trim_values(trait_sample_data);
+      distinct_values = {};
+      distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples);
+      this.get_trait_color_dict(trimmed_samples, distinct_values);
+      console.log("TRAIT_COLOR_DICT:", this.trait_color_dict);
+      console.log("SAMPLES:", this.samples);
+      if (this.sort_by = "value") {
+        this.svg.selectAll(".bar").data(this.samples).transition().duration(1000).style("fill", (function(_this) {
+          return function(d) {
+            console.log("this color:", _this.trait_color_dict[d[0]]);
+            return _this.trait_color_dict[d[0]];
+          };
+        })(this)).select("title").text((function(_this) {
+          return function(d) {
+            return d[1];
+          };
+        })(this));
+        return this.draw_legend();
+      } else {
+        this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", (function(_this) {
+          return function(d) {
+            console.log("this color:", _this.trait_color_dict[d[0]]);
+            return _this.trait_color_dict[d[0]];
+          };
+        })(this)).select("title").text((function(_this) {
+          return function(d) {
+            return d[1];
+          };
+        })(this));
+        return this.draw_legend();
       }
-    }
-    console.log("trimmed_samples:", trimmed_samples);
-    return trimmed_samples;
-  };
+    };
+
+    Bar_Chart.prototype.trim_values = function(trait_sample_data) {
+      var j, len, ref, sample, trimmed_samples;
+      trimmed_samples = {};
+      ref = this.sample_names;
+      for (j = 0, len = ref.length; j < len; j++) {
+        sample = ref[j];
+        if (sample in trait_sample_data) {
+          trimmed_samples[sample] = trait_sample_data[sample];
+        }
+      }
+      console.log("trimmed_samples:", trimmed_samples);
+      return trimmed_samples;
+    };
+
+    Bar_Chart.prototype.get_distinct_values = function(samples) {
+      var distinct_values;
+      distinct_values = _.uniq(_.values(samples));
+      console.log("distinct_values:", distinct_values);
+      return distinct_values;
+    };
 
-  Bar_Chart.prototype.get_distinct_values = function(samples) {
-    var distinct_values;
-    distinct_values = _.uniq(_.values(samples));
-    console.log("distinct_values:", distinct_values);
-    return distinct_values;
-  };
+    return Bar_Chart;
 
-  return Bar_Chart;
+  })();
 
-})();
+  root.Bar_Chart = Bar_Chart;
 
-root.Bar_Chart = Bar_Chart;
+}).call(this);
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index 1d3123ba..d548b253 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -64,36 +64,6 @@ $ ->
     sample_lists = js_data.sample_lists
     sample_group_types = js_data.sample_group_types
 
-    #if $("#update_bar_chart").length
-    #    $("#update_bar_chart.btn-group").button()
-    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 ->
-        $('#bar_chart').remove()
-        $('#bar_chart_container').append('<div id="bar_chart"></div>')
-        group = $(this).val()
-        if group == "samples_primary"
-            root.bar_chart = new Bar_Chart(sample_lists[0])
-        else if group == "samples_other"
-            root.bar_chart = new Bar_Chart(sample_lists[1])
-        else if group == "samples_all"
-            all_samples = sample_lists[0].concat sample_lists[1]
-            root.bar_chart = new Bar_Chart(all_samples)
-
-    $('.box_plot_samples_group').change ->
-        $('#box_plot').remove()
-        $('#box_plot_container').append('<div id="box_plot"></div>')
-        group = $(this).val()
-        if group == "samples_primary"
-            new Box_Plot(sample_lists[0])
-        else if group == "samples_other"
-            new Box_Plot(sample_lists[1])
-        else if group == "samples_all"
-            all_samples = sample_lists[0].concat sample_lists[1]
-            new Box_Plot(all_samples)
-
     d3.select("#select_compare_trait").on("click", =>
         $('.scatter-matrix-container').remove()
         open_trait_selection()
@@ -126,7 +96,7 @@ $ ->
         $("#stats_tabs" + selected).show()
 
 
-    change_stats_value = (sample_sets, category, value_type, decimal_places)->
+    change_stats_value = (sample_sets, category, value_type, decimal_places, effects) ->
         id = "#" + process_id(category, value_type)
         console.log("the_id:", id)
         in_box = $(id).html
@@ -145,7 +115,10 @@ $ ->
         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 effects
+                $(id).html(the_value).effect("highlight")
+            else
+                $(id).html(the_value)
 
         # We go ahead and always change the title value if we have it
         if title_value
@@ -153,11 +126,17 @@ $ ->
 
 
     update_stat_values = (sample_sets)->
+        show_effects = $(".tab-pane.active").attr("id") == "stats_tab"
         for category in ['samples_primary', 'samples_other', 'samples_all']
             for row in Stat_Table_Rows
                 console.log("Calling change_stats_value")
-                change_stats_value(sample_sets, category, row.vn, row.digits)
+                change_stats_value(sample_sets, category, row.vn, row.digits, show_effects)
+
+    redraw_histogram = ->
+        root.histogram.redraw(_.values(root.selected_samples[root.histogram_group]))
 
+    redraw_bar_chart = ->
+        root.bar_chart.redraw(root.selected_samples[root.bar_chart_group])
 
     make_table = ->
         header = "<thead><tr><th>&nbsp;</th>"
@@ -213,6 +192,11 @@ $ ->
             samples_other: new Stats([])
             samples_all: new Stats([])
 
+        root.selected_samples = # maps: sample name -> value
+            samples_primary: {}
+            samples_other: {}
+            samples_all: {}
+
         console.log("at beginning:", sample_sets)
 
         tables = ['samples_primary', 'samples_other']
@@ -222,25 +206,32 @@ $ ->
                 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)
+                #console.log("real_value:", real_value)
                 
                 checkbox = $(row).find(".edit_sample_checkbox")
-                checked = $(checkbox).attr('checked')
+                checked = $(checkbox).prop('checked')
 
                 if checked and is_number(real_value) and real_value != ""
-                    console.log("in the iffy if")
+                    #console.log("in the iffy if")
                     real_value = parseFloat(real_value)
 
                     sample_sets[table].add_value(real_value)
-                    console.log("checking name of:", name)
+                    root.selected_samples[table][name] = real_value
+                    #console.log("checking name of:", name)
                     if not (name of already_seen)
-                        console.log("haven't seen")
+                        #console.log("haven't seen")
                         sample_sets['samples_all'].add_value(real_value)
+                        root.selected_samples['samples_all'][name] = 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)
 
+        console.log("redrawing histogram")
+        redraw_histogram()
+
+        console.log("redrawing bar chart")
+        redraw_bar_chart()
+
     show_hide_outliers = ->
         console.log("FOOBAR in beginning of show_hide_outliers")
         label = $('#show_hide_outliers').val()
@@ -427,11 +418,43 @@ $ ->
     console.log("after registering block_outliers")
 
     _.mixin(_.str.exports());  # Add string fuctions directly to underscore
-    $('#edit_sample_lists').change(edit_data_change)
-    console.log("loaded")
-    #console.log("basic_table is:", basic_table)
-    # Add back following two lines later
+
+    root.histogram_group = 'samples_primary'
+    root.histogram = new Histogram(sample_lists[0])
+    $('.histogram_samples_group').change ->
+        root.histogram_group = $(this).val()
+        redraw_histogram()
+
+    root.bar_chart_group = 'samples_primary'
+    root.bar_chart = new Bar_Chart(sample_lists[0])
+    $('.bar_chart_samples_group').change ->
+        root.bar_chart_group = $(this).val()
+        redraw_bar_chart()
+
+    new Box_Plot(sample_lists[0])
+        
+    $('.box_plot_samples_group').change ->
+        $('#box_plot').remove()
+        $('#box_plot_container').append('<div id="box_plot"></div>')
+        group = $(this).val()
+        if group == "samples_primary"
+            new Box_Plot(sample_lists[0])
+        else if group == "samples_other"
+            new Box_Plot(sample_lists[1])
+        else if group == "samples_all"
+            all_samples = sample_lists[0].concat sample_lists[1]
+            new Box_Plot(all_samples)
+
     make_table()
     edit_data_change()   # Set the values at the beginning
+
+    $('#edit_sample_lists').change(edit_data_change)
+
+    # bind additional handlers for pushing data updates
+    $('#block_by_index').click(edit_data_change)
+    $('#exclude_group').click(edit_data_change)
+    $('#block_outliers').click(edit_data_change)
+    $('#reset').click(edit_data_change)
+
     #$("#all-mean").html('foobar8')
     console.log("end")
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 9323862a..d1b43677 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -56,40 +56,9 @@
   ];
 
   $(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;
+    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, redraw_bar_chart, redraw_histogram, 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() {
         $('.scatter-matrix-container').remove();
@@ -126,7 +95,7 @@
       hide_tabs(0);
       return $("#stats_tabs" + selected).show();
     };
-    change_stats_value = function(sample_sets, category, value_type, decimal_places) {
+    change_stats_value = function(sample_sets, category, value_type, decimal_places, effects) {
       var current_value, id, in_box, the_value, title_value;
       id = "#" + process_id(category, value_type);
       console.log("the_id:", id);
@@ -144,14 +113,19 @@
       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 (effects) {
+          $(id).html(the_value).effect("highlight");
+        } else {
+          $(id).html(the_value);
+        }
       }
       if (title_value) {
         return $(id).attr('title', title_value);
       }
     };
     update_stat_values = function(sample_sets) {
-      var category, i, len, ref, results, row;
+      var category, i, len, ref, results, row, show_effects;
+      show_effects = $(".tab-pane.active").attr("id") === "stats_tab";
       ref = ['samples_primary', 'samples_other', 'samples_all'];
       results = [];
       for (i = 0, len = ref.length; i < len; i++) {
@@ -162,13 +136,19 @@
           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));
+            results1.push(change_stats_value(sample_sets, category, row.vn, row.digits, show_effects));
           }
           return results1;
         })());
       }
       return results;
     };
+    redraw_histogram = function() {
+      return root.histogram.redraw(_.values(root.selected_samples[root.histogram_group]));
+    };
+    redraw_bar_chart = function() {
+      return root.bar_chart.redraw(root.selected_samples[root.bar_chart_group]);
+    };
     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>";
@@ -238,6 +218,11 @@
         samples_other: new Stats([]),
         samples_all: new Stats([])
       };
+      root.selected_samples = {
+        samples_primary: {},
+        samples_other: {},
+        samples_all: {}
+      };
       console.log("at beginning:", sample_sets);
       tables = ['samples_primary', 'samples_other'];
       for (i = 0, len = tables.length; i < len; i++) {
@@ -248,25 +233,26 @@
           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');
+          checked = $(checkbox).prop('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);
+            root.selected_samples[table][name] = real_value;
             if (!(name in already_seen)) {
-              console.log("haven't seen");
               sample_sets['samples_all'].add_value(real_value);
+              root.selected_samples['samples_all'][name] = real_value;
               already_seen[name] = true;
             }
           }
         }
       }
       console.log("towards end:", sample_sets);
-      root.histogram.redraw(sample_sets['samples_primary'].the_values);
-      return update_stat_values(sample_sets);
+      update_stat_values(sample_sets);
+      console.log("redrawing histogram");
+      redraw_histogram();
+      console.log("redrawing bar chart");
+      return redraw_bar_chart();
     };
     show_hide_outliers = function() {
       var label;
@@ -460,10 +446,40 @@
     $('#block_outliers').click(block_outliers);
     console.log("after registering block_outliers");
     _.mixin(_.str.exports());
-    $('#edit_sample_lists').change(edit_data_change);
-    console.log("loaded");
+    root.histogram_group = 'samples_primary';
+    root.histogram = new Histogram(sample_lists[0]);
+    $('.histogram_samples_group').change(function() {
+      root.histogram_group = $(this).val();
+      return redraw_histogram();
+    });
+    root.bar_chart_group = 'samples_primary';
+    root.bar_chart = new Bar_Chart(sample_lists[0]);
+    $('.bar_chart_samples_group').change(function() {
+      root.bar_chart_group = $(this).val();
+      return redraw_bar_chart();
+    });
+    new Box_Plot(sample_lists[0]);
+    $('.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);
+      }
+    });
     make_table();
     edit_data_change();
+    $('#edit_sample_lists').change(edit_data_change);
+    $('#block_by_index').click(edit_data_change);
+    $('#exclude_group').click(edit_data_change);
+    $('#block_outliers').click(edit_data_change);
+    $('#reset').click(edit_data_change);
     return console.log("end");
   });
 
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index f2ebbbef..54bd79f2 100755
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -80,20 +80,9 @@
                         </div>
                     </div>
                         <div class="row" style="height: 0px">
-                          <div id="bar_chart_legend" style="margin-left: 900px; margin-top:50px; positive: relative;">
+                          <div id="bar_chart_legend" style="margin-left: 150px; margin-top:50px; positive: relative;">
                             <span id="legend-left"></span>
-                            <span id="legend-colors">
-                            <!--
-                              <svg height="10" width="90">
-                                <rect x="0" width="15" height="10" style="fill: rgb(0, 0, 0);"></rect>
-                                <rect x="15" width="15" height="10" style="fill: rgb(50, 0, 0);"></rect>
-                                <rect x="30" width="15" height="10" style="fill: rgb(100, 0, 0);"></rect>
-                                <rect x="45" width="15" height="10" style="fill: rgb(150, 0, 0);"></rect>
-                                <rect x="60" width="15" height="10" style="fill: rgb(200, 0, 0);"></rect>
-                                <rect x="75" width="15" height="10" style="fill: rgb(255, 0, 0);"></rect>
-                              </svg>
-                            -->
-                            </span>
+                            <span id="legend-colors"></span>
                             <span id="legend-right"></span>
                           </div>
                         </div>
@@ -140,4 +129,4 @@
         <div id="collections_holder"></div>
     </div>
    
-</div>
\ No newline at end of file
+</div>