bar charts polished

* fixed bar chart width (two bars were invisible)
* disabled basic stats update effects, if they are not visible
* fix: unchecked samples were shown in charts
  (because attr('checked') was used instead of prop('checked'))
* bar chart gets redrawn after checkbox changes
* edit_data_change is also called when clicking buttons
  from the 'Block samples' panel
* better bar chart transitions (use sample name as d3 key function)

4 files changed, 95 insertions, 60 deletions

diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index c91918b2..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
@@ -152,13 +151,24 @@ class Bar_Chart
         console.log("samples:", samples)
         @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.selectAll(".bar")
-            .data(samples)
-            .transition()
+        $("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?
@@ -174,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])
             )
@@ -188,12 +199,6 @@ class Bar_Chart
             #    return @trait_color_dict[d[0]]
             #    #return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
             #)
-        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() 
 
     get_attr_color_dict: (vals) ->
         @attr_color_dict = {}
@@ -323,7 +328,7 @@ class Bar_Chart
     create_scales: (sample_names) ->
         @x_scale = d3.scale.ordinal()
             .domain(sample_names)
-            .rangeRoundBands([0, @range], 0.1, 0)
+            .rangeRoundBands([0, @plot_width], 0.1, 0)
 
         @y_scale = d3.scale.linear()
             .domain([@y_min * 0.75, @y_max])
@@ -335,7 +340,7 @@ class Bar_Chart
         @add_x_axis()
         @add_y_axis() 
         
-        @add_bars()
+        @update_bars(@samples)
         
     add_x_axis: (scale) ->
         xAxis = d3.svg.axis()
@@ -370,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) =>
@@ -390,7 +394,8 @@ class Bar_Chart
             .text((d) =>
                 return d[1]
             )
-            
+        bars.exit().remove()
+        return bars
 
     sorted_samples: () ->
         #if @sample_attr_vals.length > 0
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index d20a8615..cc21550e 100755
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -19,11 +19,11 @@
       }
       longest_sample_name = d3.max((function() {
         var j, len, ref, results;
-        ref = this.sample_names;
+        ref = this.sample_list;
         results = [];
         for (j = 0, len = ref.length; j < len; j++) {
           sample = ref[j];
-          results.push(sample.length);
+          results.push(sample.name.length);
         }
         return results;
       }).call(this));
@@ -33,8 +33,7 @@
         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_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;
@@ -152,7 +151,7 @@
     };
 
     Bar_Chart.prototype.rebuild_bar_graph = function(samples) {
-      var names, vals, x;
+      var bars, names, vals, x;
       console.log("samples:", samples);
       this.attribute = $("#color_attribute").val();
       vals = (function() {
@@ -166,7 +165,24 @@
       })();
       this.y_min = d3.min(vals);
       this.y_max = d3.max(vals) * 1.1;
-      this.svg.selectAll(".bar").data(samples).transition().duration(1000).style("fill", (function(_this) {
+      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]);
@@ -181,6 +197,10 @@
             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]);
@@ -194,20 +214,6 @@
           return d[1];
         };
       })(this));
-      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();
-      return this.add_y_axis();
     };
 
     Bar_Chart.prototype.get_attr_color_dict = function(vals) {
@@ -407,14 +413,14 @@
     };
 
     Bar_Chart.prototype.create_scales = function(sample_names) {
-      this.x_scale = d3.scale.ordinal().domain(sample_names).rangeRoundBands([0, this.range], 0.1, 0);
+      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.create_graph = function() {
       this.add_x_axis();
       this.add_y_axis();
-      return this.add_bars();
+      return this.update_bars(this.samples);
     };
 
     Bar_Chart.prototype.add_x_axis = function(scale) {
@@ -433,8 +439,14 @@
       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.add_bars = function() {
-      return this.svg.selectAll(".bar").data(this.samples).enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", (function(_this) {
+    Bar_Chart.prototype.update_bars = function(samples) {
+      var bars;
+      bars = this.svg.selectAll(".bar").data(samples, (function(_this) {
+        return function(d) {
+          return d[0];
+        };
+      })(this));
+      bars.enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", (function(_this) {
         return function(d) {
           return _this.x_scale(d[0]);
         };
@@ -451,6 +463,8 @@
           return d[1];
         };
       })(this));
+      bars.exit().remove();
+      return bars;
     };
 
     Bar_Chart.prototype.sorted_samples = function() {
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index 4bfc8690..d548b253 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -96,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
@@ -115,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
@@ -123,10 +126,11 @@ $ ->
 
 
     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]))
@@ -202,20 +206,20 @@ $ ->
                 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)
                     root.selected_samples[table][name] = real_value
-                    console.log("checking name of:", name)
+                    #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
@@ -445,5 +449,12 @@ $ ->
     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 26c0a275..d1b43677 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -95,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);
@@ -113,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++) {
@@ -131,7 +136,7 @@
           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;
         })());
@@ -228,17 +233,13 @@
           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);
             root.selected_samples[table][name] = 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);
               root.selected_samples['samples_all'][name] = real_value;
               already_seen[name] = true;
@@ -475,6 +476,10 @@
     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");
   });