Fixed issue where box plots initially appeared below the bar chart

instead of in the second tab

In the process of trying to fix the genofile to json parser so we
can map Amelie's rat data

In the process of having the color of bars in the bar chart "follow"
them when they are resorted.

5 files changed, 108 insertions, 90 deletions

diff --git a/wqflask/wqflask/my_pylmm/data/genofile_parser.py b/wqflask/wqflask/my_pylmm/data/genofile_parser.py
index 4a647959..af855fb4 100644
--- a/wqflask/wqflask/my_pylmm/data/genofile_parser.py
+++ b/wqflask/wqflask/my_pylmm/data/genofile_parser.py
@@ -93,12 +93,12 @@ class ConvertGenoFile(object):
             this_marker = Marker()
             this_marker.name = row_items[1]
             this_marker.chr = row_items[0]
-            this_marker.cM = row_items[2]
+            #this_marker.cM = row_items[2]
             if self.mb_exists:
-                this_marker.Mb = row_items[3]
-                genotypes = row_items[4:]
-            else:
+                this_marker.Mb = row_items[2]
                 genotypes = row_items[3:]
+            else:
+                genotypes = row_items[2:]
             for item_count, genotype in enumerate(genotypes):
                 if genotype.upper() in self.configurations:
                     this_marker.genotypes.append(self.configurations[genotype.upper()])
@@ -186,8 +186,10 @@ if __name__=="__main__":
     Old_Geno_Directory = """/home/zas1024/gene/web/genotypes/"""
     New_Geno_Directory = """/home/zas1024/gene/web/new_genotypes/"""
     #Input_File = """/home/zas1024/gene/web/genotypes/BXD.geno"""
-    #Output_File = """/home/zas1024/gene/wqflask/wqflask/pylmm/data/bxd.snps""" 
-    ConvertGenoFile.process_all(Old_Geno_Directory, New_Geno_Directory)
+    #Output_File = """/home/zas1024/gene/wqflask/wqflask/pylmm/data/bxd.snps"""
+    convertob = ConvertGenoFile("/home/zas1024/gene/web/genotypes/HSNIH.geno.gz", "/home/zas1024/gene/web/new_genotypes/HSNIH.json")
+    convertob.convert()
+    #ConvertGenoFile.process_all(Old_Geno_Directory, New_Geno_Directory)
     #ConvertGenoFiles(Geno_Directory)
     
     #process_csv(Input_File, Output_File)
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index e1bb36e1..27a8d284 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -129,83 +129,12 @@ class Bar_Chart
             #$('.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()
             
         )
 
-
     rebuild_bar_graph: (samples) ->
         console.log("samples:", samples)
         @svg.selectAll(".bar")
@@ -223,7 +152,11 @@ class Bar_Chart
                 return d[1]
             )
             .style("fill", (d) =>
-                if @attributes.length > 0 and @attribute != "None"
+                if @attributes.length == 0
+                    console.log("SAMPLE:", d[0])
+                    console.log("CHECKING:", @trait_color_dict[d[0]])
+                    return @trait_color_dict[d[0]]
+                else if @attributes.length > 0 and @attribute != "None"
                     console.log("@attribute:", @attribute)
                     console.log("d[2]", d[2])
                     console.log("the_color:", @attr_color_dict[@attribute][d[2][@attribute]])
@@ -231,6 +164,10 @@ class Bar_Chart
                 else
                     return "steelblue"
             )
+            #.style("fill", (d) =>
+            #    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()
@@ -268,6 +205,35 @@ 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
+            
+    get_trait_color_dict: (samples, vals) ->
+        @trait_color_dict = {}
+        console.log("vals:", vals)
+        for own key, distinct_vals of vals
+            this_color_dict = {}
+            if distinct_vals.length < 10
+                color = d3.scale.category10()
+                for value, i in distinct_vals
+                    this_color_dict[value] = color(i)
+            else
+                console.log("distinct_values:", distinct_vals)
+                #Check whether all values are numbers, and if they are get a corresponding
+                #color gradient
+                if _.every(distinct_vals, (d) =>
+                    if isNaN(d)
+                        return false
+                    else
+                        return true
+                )
+                    color_range = d3.scale.linear()
+                                    .domain([d3.min(distinct_vals),
+                                            d3.max(distinct_vals)])
+                                    .range([0,255])
+                    for value, i in distinct_vals
+                        console.log("color_range(value):", parseInt(color_range(value)))
+                        this_color_dict[value] = d3.rgb(parseInt(color_range(value)),0, 0)
+        for own sample, value of samples
+            @trait_color_dict[sample] = this_color_dict[value]
 
     convert_into_colors: (values) ->
         color_range = d3.scale.linear()
@@ -450,14 +416,17 @@ class Bar_Chart
         trimmed_samples = @trim_values(trait_sample_data)
         distinct_values = {}
         distinct_values["collection_trait"] = @get_distinct_values(trimmed_samples)
-        @get_attr_color_dict(distinct_values)
+        #@get_attr_color_dict(distinct_values)
+        @get_trait_color_dict(trimmed_samples, distinct_values)
+        console.log("TRAIT_COLOR_DICT:", @trait_color_dict)
         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]]]
+                    return @trait_color_dict[d[0]]
+                    #return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
                 )
                 .select("title")
                 .text((d) =>
@@ -469,10 +438,11 @@ class Bar_Chart
                 .transition()
                 .duration(1000)
                 .style("fill", (d) =>
-                    return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
+                    return @trait_color_dict[d[0]]
+                    #return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
                 )
-        
-    
+
+
     trim_values: (trait_sample_data) ->
         trimmed_samples = {}
         for sample in @sample_names
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index b02ee1da..faf66cd4 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -102,7 +102,11 @@
       }).select("title").text(function(d) {
         return d[1];
       }).style("fill", function(d) {
-        if (_this.attributes.length > 0 && _this.attribute !== "None") {
+        if (_this.attributes.length === 0) {
+          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]]);
@@ -164,6 +168,48 @@
       return _results;
     };
 
+    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 = this;
+      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 = {};
+        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(d) {
+            if (isNaN(d)) {
+              return false;
+            } else {
+              return true;
+            }
+          })) {
+            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):", 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;
+    };
+
     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]);
@@ -346,16 +392,17 @@
       trimmed_samples = this.trim_values(trait_sample_data);
       distinct_values = {};
       distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples);
-      this.get_attr_color_dict(distinct_values);
+      this.get_trait_color_dict(trimmed_samples, distinct_values);
+      console.log("TRAIT_COLOR_DICT:", this.trait_color_dict);
       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]]];
+          return _this.trait_color_dict[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]]];
+          return _this.trait_color_dict[d[0]];
         });
       }
     };
diff --git a/wqflask/wqflask/templates/interval_mapping.html b/wqflask/wqflask/templates/interval_mapping.html
index e4e08388..e4b93bf4 100644
--- a/wqflask/wqflask/templates/interval_mapping.html
+++ b/wqflask/wqflask/templates/interval_mapping.html
@@ -77,7 +77,6 @@
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>

     <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>

 

-    

     <script type="text/javascript" charset="utf-8">

         $(document).ready( function () {

             console.time("Creating table");

diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index 6d6b1d24..9393e9bd 100644
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -51,7 +51,7 @@
                         <div id="bar_chart"></div>
                     </div>
                 </div>
-                <div class="tab-pane active" id="box_plot_tab">
+                <div class="tab-pane" id="box_plot_tab">
                     {% if sample_groups|length > 1 %}
                     <select class="box_plot_samples_group">
                         {% for group, pretty_group in sample_group_types.items() %}