Made the extra attribute bar chart coloring continue to work

when the user sorts and gave the option to revert to no coloring

4 files changed, 93 insertions, 52 deletions

diff --git a/misc/gn_installation_notes.txt b/misc/gn_installation_notes.txt
index a73e7d4f..584080f7 100644
--- a/misc/gn_installation_notes.txt
+++ b/misc/gn_installation_notes.txt
@@ -304,6 +304,12 @@ sudo apt-get install colordiff
 
 ==========================================
 
+Install NTP (network time protocol)
+
+sudo apt-get install ntp
+
+==========================================
+
 To get server running:
 
 !If having seemingly inexplicable problems with imports, make sure I've started the environment!
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index d236b795..66110469 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -85,15 +85,16 @@ $ ->
             
             d3.select("#color_attribute").on("change", =>
                 attribute = $("#color_attribute").val()
-                console.log("attribute:", attribute)
                 if $("#update_bar_chart").html() == 'Sort By Name' 
                     @svg.selectAll(".bar")
                         .data(@sorted_samples())
                         .transition()
                         .duration(1000)
                         .style("fill", (d) =>
-                            attr_color_dict = @get_attr_color_dict()
-                            return attr_color_dict[attribute][d[2][attribute]]
+                            if attribute == "None"
+                                return "steelblue"
+                            else
+                                return @attr_color_dict[attribute][d[2][attribute]]
                         )
                         .select("title")
                         .text((d) =>
@@ -101,17 +102,21 @@ $ ->
                         )
                 else
                     @svg.selectAll(".bar")
-                        .data(@sample_attr_vals)
+                        .data(@samples)
                         .transition()
                         .duration(1000)
                         .style("fill", (d) =>
-                            attr_color_dict = @get_attr_color_dict()
-                            return attr_color_dict[attribute][d[attribute]]
+                            if attribute == "None"
+                                return "steelblue"
+                            else
+                                return @attr_color_dict[attribute][d[2][attribute]]
                         )
             )
         
         
             d3.select("#update_bar_chart").on("click", =>
+                if @attributes.length > 0
+                    attribute = $("#color_attribute").val()
                 if $("#update_bar_chart").html() == 'Sort By Value' 
                     $("#update_bar_chart").html('Sort By Name')
                     sortItems = (a, b) ->
@@ -127,7 +132,12 @@ $ ->
                         .attr("height", (d) =>
                             return @plot_height - @y_scale(d[1])
                         )
-                        .style("fill", "steelblue")
+                        .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]
@@ -141,19 +151,24 @@ $ ->
                 else
                     $("#update_bar_chart").html('Sort By Value')
                     @svg.selectAll(".bar")
-                        .data(@sample_vals)
+                        .data(@samples)
                         .transition()
                         .duration(1000)
                         .attr("y", (d) =>
-                            return @y_scale(d)
+                            return @y_scale(d[1])
                         )
                         .attr("height", (d) =>
-                            return @plot_height - @y_scale(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"
                         )
-                        .style("fill", "steelblue")
                         .select("title")
                         .text((d) =>
-                            return d
+                            return d[1]
                         )
                     x_scale = d3.scale.ordinal()
                         .domain(@sample_names)
@@ -164,14 +179,12 @@ $ ->
 
         get_attr_color_dict: () ->
             color = d3.scale.category20()
-            attr_color_dict = {}
+            @attr_color_dict = {}
             for own key, attribute_info of js_data.attribute_names
                 this_color_dict = {}
                 for value, i in attribute_info.distinct_values
                     this_color_dict[value] = color(i)
-                attr_color_dict[attribute_info.name] = this_color_dict
-                
-            return attr_color_dict
+                @attr_color_dict[attribute_info.name] = this_color_dict
             
             
             
@@ -188,7 +201,9 @@ $ ->
                     for attribute in @attributes
                         attr_vals[attribute] = sample["extra_attributes"][attribute]
                     @sample_attr_vals.push(attr_vals)
-            console.log("sample_attr_vals:", @sample_attr_vals)
+            @samples = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
+            @get_attr_color_dict()
+            console.log("samples:", @samples)
             
         create_svg: () ->
             svg = d3.select("#bar_chart")
@@ -253,7 +268,7 @@ $ ->
 
         add_bars: () ->
             @svg.selectAll(".bar")
-                .data(_.zip(@sample_names, @sample_vals))
+                .data(@samples)
               .enter().append("rect")
                 .style("fill", "steelblue")
                 .attr("class", "bar")
@@ -273,10 +288,10 @@ $ ->
                 )
 
         sorted_samples: () ->
-            if @sample_attr_vals.length > 0
-                sample_list = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
-            else
-                sample_list = _.zip(@sample_names, @sample_vals)
+            #if @sample_attr_vals.length > 0
+            sample_list = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
+            #else
+            #    sample_list = _.zip(@sample_names, @sample_vals)
             sorted = _.sortBy(sample_list, (sample) =>
                 return sample[1]
             )
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 22e20180..4e7fe8f8 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -95,25 +95,31 @@
         d3.select("#color_attribute").on("change", function() {
           var attribute;
           attribute = $("#color_attribute").val();
-          console.log("attribute:", attribute);
           if ($("#update_bar_chart").html() === 'Sort By Name') {
             return _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
-              var attr_color_dict;
-              attr_color_dict = _this.get_attr_color_dict();
-              return attr_color_dict[attribute][d[2][attribute]];
+              if (attribute === "None") {
+                return "steelblue";
+              } else {
+                return _this.attr_color_dict[attribute][d[2][attribute]];
+              }
             }).select("title").text(function(d) {
               return d[1];
             });
           } else {
-            return _this.svg.selectAll(".bar").data(_this.sample_attr_vals).transition().duration(1000).style("fill", function(d) {
-              var attr_color_dict;
-              attr_color_dict = _this.get_attr_color_dict();
-              return attr_color_dict[attribute][d[attribute]];
+            return _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).style("fill", function(d) {
+              if (attribute === "None") {
+                return "steelblue";
+              } else {
+                return _this.attr_color_dict[attribute][d[2][attribute]];
+              }
             });
           }
         });
         d3.select("#update_bar_chart").on("click", function() {
-          var sortItems, sorted_sample_names, x_scale;
+          var attribute, sortItems, sorted_sample_names, x_scale;
+          if (_this.attributes.length > 0) {
+            attribute = $("#color_attribute").val();
+          }
           if ($("#update_bar_chart").html() === 'Sort By Value') {
             $("#update_bar_chart").html('Sort By Name');
             sortItems = function(a, b) {
@@ -123,7 +129,13 @@
               return _this.y_scale(d[1]);
             }).attr("height", function(d) {
               return _this.plot_height - _this.y_scale(d[1]);
-            }).style("fill", "steelblue").select("title").text(function(d) {
+            }).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() {
@@ -141,12 +153,18 @@
             return _this.add_x_axis(x_scale);
           } else {
             $("#update_bar_chart").html('Sort By Value');
-            _this.svg.selectAll(".bar").data(_this.sample_vals).transition().duration(1000).attr("y", function(d) {
-              return _this.y_scale(d);
+            _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);
-            }).style("fill", "steelblue").select("title").text(function(d) {
-              return 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();
@@ -156,10 +174,11 @@
       }
 
       Histogram.prototype.get_attr_color_dict = function() {
-        var attr_color_dict, attribute_info, color, i, key, this_color_dict, value, _i, _len, _ref, _ref1;
+        var attribute_info, color, i, key, this_color_dict, value, _i, _len, _ref, _ref1, _results;
         color = d3.scale.category20();
-        attr_color_dict = {};
+        this.attr_color_dict = {};
         _ref = js_data.attribute_names;
+        _results = [];
         for (key in _ref) {
           if (!__hasProp.call(_ref, key)) continue;
           attribute_info = _ref[key];
@@ -169,9 +188,9 @@
             value = _ref1[i];
             this_color_dict[value] = color(i);
           }
-          attr_color_dict[attribute_info.name] = this_color_dict;
+          _results.push(this.attr_color_dict[attribute_info.name] = this_color_dict);
         }
-        return attr_color_dict;
+        return _results;
       };
 
       Histogram.prototype.get_samples = function() {
@@ -223,7 +242,9 @@
             this.sample_attr_vals.push(attr_vals);
           }
         }
-        return console.log("sample_attr_vals:", this.sample_attr_vals);
+        this.samples = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
+        this.get_attr_color_dict();
+        return console.log("samples:", this.samples);
       };
 
       Histogram.prototype.create_svg = function() {
@@ -260,7 +281,7 @@
 
       Histogram.prototype.add_bars = function() {
         var _this = this;
-        return this.svg.selectAll(".bar").data(_.zip(this.sample_names, this.sample_vals)).enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", function(d) {
+        return this.svg.selectAll(".bar").data(this.samples).enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", function(d) {
           return _this.x_scale(d[0]);
         }).attr("width", this.x_scale.rangeBand()).attr("y", function(d) {
           return _this.y_scale(d[1]);
@@ -274,11 +295,7 @@
       Histogram.prototype.sorted_samples = function() {
         var sample_list, sorted,
           _this = this;
-        if (this.sample_attr_vals.length > 0) {
-          sample_list = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
-        } else {
-          sample_list = _.zip(this.sample_names, this.sample_vals);
-        }
+        sample_list = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
         sorted = _.sortBy(sample_list, function(sample) {
           return sample[1];
         });
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index 58389ce4..105c4f95 100644
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -2,18 +2,21 @@
     <br>

     <h2>Charts and Figures</h2>

     <div class="well form-horizontal">

+        {% if sample_groups|length > 1 %}

         <select class="stats_samples_group">

             {% for group, pretty_group in sample_group_types.items() %}

                 <option value="{{ group }}">{{ pretty_group }}</option>

             {% endfor %}

         </select>

+        {% endif %}

         {% if sample_groups[0].attributes %}

         <div class="input-append">

             <select id="color_attribute" size=1>

-              {% for attribute in sample_groups[0].attributes %}

-              <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">

-                  {{ sample_groups[0].attributes[attribute].name }}</option>

-              {% endfor %}

+                <option value="None">None</option>

+                {% for attribute in sample_groups[0].attributes %}

+                <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">

+                    {{ sample_groups[0].attributes[attribute].name }}</option>

+                {% endfor %}

             </select>

         </div>

         {% endif %}