Got sort by name/value buttons working and committing before trying

to put some of the d3 code into a function

5 files changed, 197 insertions, 131 deletions

diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index 6af14687..f59d947d 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -60,75 +60,138 @@ class Bar_Chart
         )
         
         
-        d3.select(".update_bar_chart").on("click", =>
-            sort_by = $('.update_bar_chart.active').val()
-            console.log("sort_by: ", sort_by)
-            if @attributes.length > 0
-                attribute = $("#color_attribute").val()
-            if sort_by = "value"
-                console.log("sorting by value")
-            #if $("#update_bar_chart").html() == 'Sort By Value' 
-                #$("#update_bar_chart").html('Sort By Name')
-                sortItems = (a, b) ->
-                    return a[1] - b[1]
-
-                @svg.selectAll(".bar")
-                    .data(@sorted_samples())
-                    .transition()
-                    .duration(1000)
-                    .attr("y", (d) =>
-
-                        return @y_scale(d[1])
-                    )
-                    .attr("height", (d) =>
-                        return @plot_height - @y_scale(d[1])
-                    )
-                    .style("fill", (d) =>
-                        if @attributes.length > 0
-                            return @attr_color_dict[attribute][d[2][attribute]]
-                        else
-                            return "steelblue"
-                    )
-                    .select("title")
-                    .text((d) =>
-                        return d[1]
-                    )
-                sorted_sample_names = (sample[0] for sample in @sorted_samples())
-                x_scale = d3.scale.ordinal()
-                    .domain(sorted_sample_names)
-                    .rangeBands([0, @plot_width], .1)
-                $('.x.axis').remove()
-                @add_x_axis(x_scale)
-            else
-                console.log("sorting by name")
-                #$("#update_bar_chart").html('Sort By Value')
-                @svg.selectAll(".bar")
-                    .data(@samples)
-                    .transition()
-                    .duration(1000)
-                    .attr("y", (d) =>
-                        return @y_scale(d[1])
-                    )
-                    .attr("height", (d) =>
-                        return @plot_height - @y_scale(d[1])
-                    )
-                    .style("fill", (d) =>
-                        if @attributes.length > 0
-                            return @attr_color_dict[attribute][d[2][attribute]]
-                        else
-                            return "steelblue"
-                    )
-                    .select("title")
-                    .text((d) =>
-                        return d[1]
-                    )
-                x_scale = d3.scale.ordinal()
-                    .domain(@sample_names)
-                    .rangeBands([0, @plot_width], .1)
-                $('.x.axis').remove()
-                @add_x_axis(x_scale)
+        
+        $(".sort_by_value").on("click", =>
+            console.log("sorting by value")
+            sortItems = (a, b) ->
+                return a[1] - b[1]
+    
+            @svg.selectAll(".bar")
+                .data(@sorted_samples())
+                .transition()
+                .duration(1000)
+                .attr("y", (d) =>
+                    return @y_scale(d[1])
+                )
+                .attr("height", (d) =>
+                    return @plot_height - @y_scale(d[1])
+                )
+                .style("fill", (d) =>
+                    if @attributes.length > 0
+                        return @attr_color_dict[attribute][d[2][attribute]]
+                    else
+                        return "steelblue"
+                )
+                .select("title")
+                .text((d) =>
+                    return d[1]
+                )
+            sorted_sample_names = (sample[0] for sample in @sorted_samples())
+            x_scale = d3.scale.ordinal()
+                .domain(sorted_sample_names)
+                .rangeBands([0, @plot_width], .1)
+            $('.x.axis').remove()
+            @add_x_axis(x_scale)
+        )
+        
+        $(".sort_by_name").on("click", =>
+            console.log("sorting by name")
+            #$("#update_bar_chart").html('Sort By Value')
+            @svg.selectAll(".bar")
+                .data(@samples)
+                .transition()
+                .duration(1000)
+                .attr("y", (d) =>
+                    return @y_scale(d[1])
+                )
+                .attr("height", (d) =>
+                    return @plot_height - @y_scale(d[1])
+                )
+                .style("fill", (d) =>
+                    if @attributes.length > 0
+                        return @attr_color_dict[attribute][d[2][attribute]]
+                    else
+                        return "steelblue"
+                )
+                .select("title")
+                .text((d) =>
+                    return d[1]
+                )
+            x_scale = d3.scale.ordinal()
+                .domain(@sample_names)
+                .rangeBands([0, @plot_width], .1)
+            $('.x.axis').remove()
+            @add_x_axis(x_scale)
         )
         
+        #d3.select(".update_bar_chart").on("click", =>
+        #    console.log("THIS IS:", $(this))
+        #    sort_by = $(this).val()
+        #    console.log("sort_by: ", sort_by)
+        #    if @attributes.length > 0
+        #        attribute = $("#color_attribute").val()
+        #    if sort_by = "value"
+        #        console.log("sorting by value")
+        #        sortItems = (a, b) ->
+        #            return a[1] - b[1]
+        #
+        #        @svg.selectAll(".bar")
+        #            .data(@sorted_samples())
+        #            .transition()
+        #            .duration(1000)
+        #            .attr("y", (d) =>
+        #
+        #                return @y_scale(d[1])
+        #            )
+        #            .attr("height", (d) =>
+        #                return @plot_height - @y_scale(d[1])
+        #            )
+        #            .style("fill", (d) =>
+        #                if @attributes.length > 0
+        #                    return @attr_color_dict[attribute][d[2][attribute]]
+        #                else
+        #                    return "steelblue"
+        #            )
+        #            .select("title")
+        #            .text((d) =>
+        #                return d[1]
+        #            )
+        #        sorted_sample_names = (sample[0] for sample in @sorted_samples())
+        #        x_scale = d3.scale.ordinal()
+        #            .domain(sorted_sample_names)
+        #            .rangeBands([0, @plot_width], .1)
+        #        $('.x.axis').remove()
+        #        @add_x_axis(x_scale)
+        #    else
+        #        console.log("sorting by name")
+        #        #$("#update_bar_chart").html('Sort By Value')
+        #        @svg.selectAll(".bar")
+        #            .data(@samples)
+        #            .transition()
+        #            .duration(1000)
+        #            .attr("y", (d) =>
+        #                return @y_scale(d[1])
+        #            )
+        #            .attr("height", (d) =>
+        #                return @plot_height - @y_scale(d[1])
+        #            )
+        #            .style("fill", (d) =>
+        #                if @attributes.length > 0
+        #                    return @attr_color_dict[attribute][d[2][attribute]]
+        #                else
+        #                    return "steelblue"
+        #            )
+        #            .select("title")
+        #            .text((d) =>
+        #                return d[1]
+        #            )
+        #        x_scale = d3.scale.ordinal()
+        #            .domain(@sample_names)
+        #            .rangeBands([0, @plot_width], .1)
+        #        $('.x.axis').remove()
+        #        @add_x_axis(x_scale)
+        #)
+        
         d3.select("#color_by_trait").on("click", =>
             @open_trait_selection()
             
@@ -367,7 +430,6 @@ class Bar_Chart
                     return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
                 )
         
-        
     
     trim_values: (trait_sample_data) ->
         trimmed_samples = {}
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index 17bada7e..63a71857 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -70,63 +70,58 @@
         }
         return _this.add_legend(attribute, _this.distinct_attr_vals[attribute]);
       });
-      d3.select(".update_bar_chart").on("click", function() {
-        var attribute, sortItems, sort_by, sorted_sample_names, x_scale;
-        sort_by = $('.update_bar_chart.active').val();
-        console.log("sort_by: ", sort_by);
-        if (_this.attributes.length > 0) {
-          attribute = $("#color_attribute").val();
-        }
-        if (sort_by = "value") {
-          console.log("sorting by value");
-          sortItems = function(a, b) {
-            return a[1] - b[1];
-          };
-          _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).attr("y", function(d) {
-            return _this.y_scale(d[1]);
-          }).attr("height", function(d) {
-            return _this.plot_height - _this.y_scale(d[1]);
-          }).style("fill", function(d) {
-            if (_this.attributes.length > 0) {
-              return _this.attr_color_dict[attribute][d[2][attribute]];
-            } else {
-              return "steelblue";
-            }
-          }).select("title").text(function(d) {
-            return d[1];
-          });
-          sorted_sample_names = (function() {
-            var _i, _len, _ref, _results;
-            _ref = this.sorted_samples();
-            _results = [];
-            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-              sample = _ref[_i];
-              _results.push(sample[0]);
-            }
-            return _results;
-          }).call(_this);
-          x_scale = d3.scale.ordinal().domain(sorted_sample_names).rangeBands([0, _this.plot_width], .1);
-          $('.x.axis').remove();
-          return _this.add_x_axis(x_scale);
-        } else {
-          console.log("sorting by name");
-          _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).attr("y", function(d) {
-            return _this.y_scale(d[1]);
-          }).attr("height", function(d) {
-            return _this.plot_height - _this.y_scale(d[1]);
-          }).style("fill", function(d) {
-            if (_this.attributes.length > 0) {
-              return _this.attr_color_dict[attribute][d[2][attribute]];
-            } else {
-              return "steelblue";
-            }
-          }).select("title").text(function(d) {
-            return d[1];
-          });
-          x_scale = d3.scale.ordinal().domain(_this.sample_names).rangeBands([0, _this.plot_width], .1);
-          $('.x.axis').remove();
-          return _this.add_x_axis(x_scale);
-        }
+      $(".sort_by_value").on("click", function() {
+        var sortItems, sorted_sample_names, x_scale;
+        console.log("sorting by value");
+        sortItems = function(a, b) {
+          return a[1] - b[1];
+        };
+        _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).attr("y", function(d) {
+          return _this.y_scale(d[1]);
+        }).attr("height", function(d) {
+          return _this.plot_height - _this.y_scale(d[1]);
+        }).style("fill", function(d) {
+          if (_this.attributes.length > 0) {
+            return _this.attr_color_dict[attribute][d[2][attribute]];
+          } else {
+            return "steelblue";
+          }
+        }).select("title").text(function(d) {
+          return d[1];
+        });
+        sorted_sample_names = (function() {
+          var _i, _len, _ref, _results;
+          _ref = this.sorted_samples();
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            sample = _ref[_i];
+            _results.push(sample[0]);
+          }
+          return _results;
+        }).call(_this);
+        x_scale = d3.scale.ordinal().domain(sorted_sample_names).rangeBands([0, _this.plot_width], .1);
+        $('.x.axis').remove();
+        return _this.add_x_axis(x_scale);
+      });
+      $(".sort_by_name").on("click", function() {
+        var x_scale;
+        console.log("sorting by name");
+        _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).attr("y", function(d) {
+          return _this.y_scale(d[1]);
+        }).attr("height", function(d) {
+          return _this.plot_height - _this.y_scale(d[1]);
+        }).style("fill", function(d) {
+          if (_this.attributes.length > 0) {
+            return _this.attr_color_dict[attribute][d[2][attribute]];
+          } else {
+            return "steelblue";
+          }
+        }).select("title").text(function(d) {
+          return d[1];
+        });
+        x_scale = d3.scale.ordinal().domain(_this.sample_names).rangeBands([0, _this.plot_width], .1);
+        $('.x.axis').remove();
+        return _this.add_x_axis(x_scale);
       });
       d3.select("#color_by_trait").on("click", function() {
         return _this.open_trait_selection();
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
index 43a518b3..db398809 100644
--- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
@@ -30,6 +30,7 @@ trait_click = () ->
         url: this_trait_url,
         success: color_by_trait
       )
+    $.colorbox.close()
 
 color_by_trait =  (trait_sample_data, textStatus, jqXHR) ->
     #trait_sample_data = trait_sample_data
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
index 137a6ce8..fac543f8 100644
--- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
@@ -38,6 +38,8 @@
     });
   };
 
+  $.colorbox.close();
+
   color_by_trait = function(trait_sample_data, textStatus, jqXHR) {
     return root.bar_chart.color_by_trait(trait_sample_data);
   };
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index e658484e..6d6b1d24 100644
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -31,16 +31,22 @@
                         </select>
                     </div>
                 {% endif %}
-                    <div id="update_bar_chart" class="btn-group" data-toggle="buttons-radio">
-                      <button type="button" class="btn btn-default update_bar_chart active" value="name">Sort By Name</button>
-                      <button type="button" class="btn btn-default update_bar_chart" value="value">Sort By Value</button>
+                    <div id="update_bar_chart" class="btn-group">
+                      <button type="button" class="btn btn-default sort_by_name" value="name">
+                        <i class="icon-resize-horizontal"></i> Sort By Name
+                      </button>
+                      <button type="button" class="btn btn-default sort_by_value" value="value">
+                        <i class="icon-signal"></i> Sort By Value
+                      </button>
                     </div>
 <!--                    <button type="button" class="btn" id="update_bar_chart">
                         <i class="icon-resize-vertical"></i> Sort By Value
                     </button>-->
-                    <button type="button" class="btn" id="color_by_trait">
-                        <i class="icon-tint"></i> Color by Trait
-                    </button>
+                    <div class="btn-group">
+                        <button type="button" class="btn" id="color_by_trait">
+                            <i class="icon-tint"></i> Color by Trait
+                        </button>
+                    </div>
                     <div id="bar_chart_container">
                         <div id="bar_chart"></div>
                     </div>