Got color by trait working, but still need to add a legend and make

some other small changes (like removing samples that don't overlap with
the selected trait)

Tentatively removed jquery-ui from base.html; I'm not sure if we're still
using this anywhere, but removing it doesn't seem to have had an impact
on the trait page

6 files changed, 93 insertions, 39 deletions

diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index 05955188..6af14687 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -6,7 +6,7 @@ class Bar_Chart
         console.log("sample names:", @sample_names)
         if @sample_attr_vals.length > 0
             @get_distinct_attr_vals()
-            @get_attr_color_dict()
+            @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)
@@ -29,6 +29,7 @@ class Bar_Chart
         
         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' 
                 @svg.selectAll(".bar")
                     .data(@sorted_samples())
@@ -57,13 +58,17 @@ class Bar_Chart
                     )
             @add_legend(attribute, @distinct_attr_vals[attribute])
         )
-    
-    
-        d3.select("#update_bar_chart").on("click", =>
+        
+        
+        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 $("#update_bar_chart").html() == 'Sort By Value' 
-                $("#update_bar_chart").html('Sort By Name')
+            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]
 
@@ -72,6 +77,7 @@ class Bar_Chart
                     .transition()
                     .duration(1000)
                     .attr("y", (d) =>
+
                         return @y_scale(d[1])
                     )
                     .attr("height", (d) =>
@@ -94,7 +100,8 @@ class Bar_Chart
                 $('.x.axis').remove()
                 @add_x_axis(x_scale)
             else
-                $("#update_bar_chart").html('Sort By Value')
+                console.log("sorting by name")
+                #$("#update_bar_chart").html('Sort By Value')
                 @svg.selectAll(".bar")
                     .data(@samples)
                     .transition()
@@ -127,10 +134,10 @@ class Bar_Chart
             
         )
 
-    get_attr_color_dict: () ->
+    get_attr_color_dict: (vals) ->
         @attr_color_dict = {}
-        console.log("distinct_attr_vals:", @distinct_attr_vals)
-        for own key, distinct_vals of @distinct_attr_vals
+        console.log("vals:", vals)
+        for own key, distinct_vals of vals
             this_color_dict = {}
             if distinct_vals.length < 10
                 color = d3.scale.category10()
@@ -151,8 +158,8 @@ class Bar_Chart
                                             d3.max(distinct_vals)])
                                     .range([0,255])
                     for value, i in distinct_vals
-                        console.log("color_range(value):", color_range(parseInt(value)))
-                        this_color_dict[value] = d3.rgb(color_range(parseInt(value)),0, 0)
+                        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] = 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
@@ -336,7 +343,31 @@ class Bar_Chart
         console.log("BXD1:", trait_sample_data["BXD1"])
         console.log("trait_sample_data:", trait_sample_data)
         trimmed_samples = @trim_values(trait_sample_data)
-        @get_distinct_values(trimmed_samples)
+        distinct_values = {}
+        distinct_values["collection_trait"] = @get_distinct_values(trimmed_samples)
+        @get_attr_color_dict(distinct_values)
+        if $("#update_bar_chart").html() == 'Sort By Name' 
+            @svg.selectAll(".bar")
+                .data(@sorted_samples())
+                .transition()
+                .duration(1000)
+                .style("fill", (d) =>
+                    return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
+                )
+                .select("title")
+                .text((d) =>
+                    return d[1]
+                )
+        else
+            @svg.selectAll(".bar")
+                .data(@samples)
+                .transition()
+                .duration(1000)
+                .style("fill", (d) =>
+                    return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
+                )
+        
+        
     
     trim_values: (trait_sample_data) ->
         trimmed_samples = {}
@@ -348,9 +379,10 @@ class Bar_Chart
 
     get_distinct_values: (samples) ->
         distinct_values = _.uniq(_.values(samples))
+        console.log("distinct_values:", distinct_values)
+        return distinct_values
         #distinct_values = []
         #for sample in samples
         #    if samples[sample] in distinct_values
-        console.log("distinct_values:", distinct_values)
 
 root.Bar_Chart = Bar_Chart
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index 05625dc9..17bada7e 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -17,7 +17,7 @@
       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.get_attr_color_dict(this.distinct_attr_vals);
       }
       longest_sample_name = d3.max((function() {
         var _i, _len, _ref, _results;
@@ -48,6 +48,7 @@
       d3.select("#color_attribute").on("change", function() {
         var attribute;
         attribute = $("#color_attribute").val();
+        console.log("attr_color_dict:", _this.attr_color_dict);
         if ($("#update_bar_chart").html() === 'Sort By Name') {
           _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
             if (attribute === "None") {
@@ -69,13 +70,15 @@
         }
         return _this.add_legend(attribute, _this.distinct_attr_vals[attribute]);
       });
-      d3.select("#update_bar_chart").on("click", function() {
-        var attribute, sortItems, sorted_sample_names, x_scale;
+      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 ($("#update_bar_chart").html() === 'Sort By Value') {
-          $("#update_bar_chart").html('Sort By Name');
+        if (sort_by = "value") {
+          console.log("sorting by value");
           sortItems = function(a, b) {
             return a[1] - b[1];
           };
@@ -106,7 +109,7 @@
           $('.x.axis').remove();
           return _this.add_x_axis(x_scale);
         } else {
-          $("#update_bar_chart").html('Sort By Value');
+          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) {
@@ -130,16 +133,15 @@
       });
     }
 
-    Bar_Chart.prototype.get_attr_color_dict = function() {
-      var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _ref, _results,
+    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 = this;
       this.attr_color_dict = {};
-      console.log("distinct_attr_vals:", this.distinct_attr_vals);
-      _ref = this.distinct_attr_vals;
+      console.log("vals:", vals);
       _results = [];
-      for (key in _ref) {
-        if (!__hasProp.call(_ref, key)) continue;
-        distinct_vals = _ref[key];
+      for (key in vals) {
+        if (!__hasProp.call(vals, key)) continue;
+        distinct_vals = vals[key];
         this_color_dict = {};
         if (distinct_vals.length < 10) {
           color = d3.scale.category10();
@@ -159,8 +161,8 @@
             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) {
               value = distinct_vals[i];
-              console.log("color_range(value):", color_range(parseInt(value)));
-              this_color_dict[value] = d3.rgb(color_range(parseInt(value)), 0, 0);
+              console.log("color_range(value):", parseInt(color_range(value)));
+              this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0);
             }
           }
         }
@@ -344,11 +346,25 @@
     };
 
     Bar_Chart.prototype.color_by_trait = function(trait_sample_data) {
-      var trimmed_samples;
+      var distinct_values, trimmed_samples,
+        _this = this;
       console.log("BXD1:", trait_sample_data["BXD1"]);
       console.log("trait_sample_data:", trait_sample_data);
       trimmed_samples = this.trim_values(trait_sample_data);
-      return this.get_distinct_values(trimmed_samples);
+      distinct_values = {};
+      distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples);
+      this.get_attr_color_dict(distinct_values);
+      if ($("#update_bar_chart").html() === 'Sort By Name') {
+        return this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
+          return _this.attr_color_dict["collection_trait"][trimmed_samples[d[0]]];
+        }).select("title").text(function(d) {
+          return d[1];
+        });
+      } else {
+        return this.svg.selectAll(".bar").data(this.samples).transition().duration(1000).style("fill", function(d) {
+          return _this.attr_color_dict["collection_trait"][trimmed_samples[d[0]]];
+        });
+      }
     };
 
     Bar_Chart.prototype.trim_values = function(trait_sample_data) {
@@ -368,7 +384,8 @@
     Bar_Chart.prototype.get_distinct_values = function(samples) {
       var distinct_values;
       distinct_values = _.uniq(_.values(samples));
-      return console.log("distinct_values:", distinct_values);
+      console.log("distinct_values:", distinct_values);
+      return distinct_values;
     };
 
     return Bar_Chart;
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index 82b85436..1df033d6 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -64,11 +64,10 @@ $ ->
     sample_lists = js_data.sample_lists
     sample_group_types = js_data.sample_group_types
 
+    $("#update_bar_chart.btn-group").button()
     root.bar_chart = new Bar_Chart(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>')
@@ -80,7 +79,8 @@ $ ->
         else if group == "samples_all"
             all_samples = sample_lists[0].concat sample_lists[1]
             new Bar_Chart(all_samples)
-            
+        #$(".btn-group").button()
+
     $('.box_plot_samples_group').change ->
         $('#box_plot').remove()
         $('#box_plot_container').append('<div id="box_plot"></div>')
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 320f705b..90fa8228 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -61,6 +61,7 @@
     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, populate_sample_attributes_values_dropdown, process_id, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values;
     sample_lists = js_data.sample_lists;
     sample_group_types = js_data.sample_group_types;
+    $("#update_bar_chart.btn-group").button();
     root.bar_chart = new Bar_Chart(sample_lists[0]);
     new Box_Plot(sample_lists[0]);
     $('.bar_chart_samples_group').change(function() {
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index 9b98c955..0360f619 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -212,7 +212,7 @@
     </script>
     <script src="/static/new/js_external/jquery.cookie.js"></script>
     <script type="text/javascript" src="/static/new/js_external/json2.js"></script>
-    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
+<!--    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>-->
 
     <script language="javascript" type="text/javascript" src="/static/packages/colorbox/jquery.colorbox.js"></script>
     <!--<script type="text/javascript" src="/static/new/javascript/login.js"></script>-->
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index 33538626..e658484e 100644
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -30,10 +30,14 @@
                             {% endfor %}
                         </select>
                     </div>
-                    {% endif %}
-                    <button type="button" class="btn" id="update_bar_chart">
+                {% 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>
+<!--                    <button type="button" class="btn" id="update_bar_chart">
                         <i class="icon-resize-vertical"></i> Sort By Value
-                    </button>
+                    </button>-->
                     <button type="button" class="btn" id="color_by_trait">
                         <i class="icon-tint"></i> Color by Trait
                     </button>