Added a dynamically resortable bar chart to the trait page

Improved the look/feel of the correlation page somewhat

11 files changed, 481 insertions, 67 deletions

diff --git a/wqflask/other_config/nginx_conf/penguin.conf b/wqflask/other_config/nginx_conf/penguin.conf
index 822556d3..5c380da8 100644
--- a/wqflask/other_config/nginx_conf/penguin.conf
+++ b/wqflask/other_config/nginx_conf/penguin.conf
@@ -2,7 +2,7 @@ server {
     # Modeled after http://flask.pocoo.org/docs/deploying/wsgi-standalone/
     listen 80;
 
-    server_name penguin.uthsc.edu;
+    server_name gn2python.genenetwork.org;
 
     access_log  /var/log/nginx/access.log;
     error_log  /var/log/nginx/error.log;
diff --git a/wqflask/wqflask/correlation/show_corr_results.py b/wqflask/wqflask/correlation/show_corr_results.py
index 8f23165c..0b66bc61 100644
--- a/wqflask/wqflask/correlation/show_corr_results.py
+++ b/wqflask/wqflask/correlation/show_corr_results.py
@@ -102,6 +102,7 @@ class CorrelationResults(object):
             self.sample_data = {}
             self.corr_type = start_vars['corr_type']
             self.corr_method = start_vars['corr_sample_method']
+            self.get_formatted_corr_type()
             self.return_number = 50
 
             #The two if statements below append samples to the sample list based upon whether the user
@@ -239,6 +240,20 @@ class CorrelationResults(object):
 
 ############################################################################################################################################
 
+    def get_formatted_corr_type(self):
+        self.formatted_corr_type = ""
+        if self.corr_type == "lit":
+            self.formatted_corr_type += "Literature Correlation "
+        elif self.corr_type == "tissue":
+            self.formatted_corr_type += "Tissue Correlation "
+        elif self.corr_type == "sample":
+            self.formatted_corr_type += "Genetic Correlation "
+        
+        if self.corr_method == "pearson":
+            self.formatted_corr_type += "(Pearson's r)"
+        elif self.corr_method == "spearman":
+            self.formatted_corr_type += "(Spearman's rho)"
+
     def do_tissue_correlation_for_trait_list(self, tissue_dataset_id=1):
         """Given a list of correlation results (self.correlation_results), gets the tissue correlation value for each"""
 
diff --git a/wqflask/wqflask/static/new/css/bar_chart.css b/wqflask/wqflask/static/new/css/bar_chart.css
new file mode 100644
index 00000000..ba14fe4e
--- /dev/null
+++ b/wqflask/wqflask/static/new/css/bar_chart.css
@@ -0,0 +1,14 @@
+.axis path,

+.axis line {

+  fill: none;

+  stroke: #000;

+  shape-rendering: crispEdges;

+}

+

+.bar {

+  fill: steelblue;

+}

+

+.x.axis path {

+  display: none;

+}
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index 0f16ac68..2e049e6a 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -56,16 +56,191 @@ Stat_Table_Rows = [
                     url: "/glossary.html#Interquartile"
                     digits: 2
                 }
-
         ]
 
 $ ->
+    class Histogram
+        constructor: (@sample_list, @sample_group) ->
+            @get_samples()
+            console.log("sample names:", @sample_names)
+            
+            #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)
+            
+            @margin = {top: 20, right: 20, bottom: longest_sample_name * 7, left: 40}
+            @plot_width = @sample_vals.length * 15 - @margin.left - @margin.right
+            @plot_height = 500 - @margin.top - @margin.bottom
+
+            @x_buffer = @plot_width/20
+            @y_buffer = @plot_height/20
+
+            @y_min = d3.min(@sample_vals)  
+            @y_max = d3.max(@sample_vals) * 1.1
+
+            @svg = @create_svg()
+
+            @plot_height -= @y_buffer
+            @create_scales()
+            @create_graph()
+            
+            d3.select("#update_bar_chart").on("click", =>
+                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])
+                        )
+                    sorted_sample_names = (sample[0] for sample in @sorted_samples())
+                    x_scale = d3.scale.ordinal()
+                        .domain(sorted_sample_names)
+                        .rangeRoundBands([0, @plot_width], .1)
+                    $('.x.axis').remove()
+                    @add_x_axis(x_scale)
+                else
+                    $("#update_bar_chart").html('Sort By Value')
+                    @svg.selectAll(".bar")
+                        .data(@sample_vals)
+                        .transition()
+                        .duration(1000)
+                        .attr("y", (d) =>
+                            return @y_scale(d)
+                        )
+                        .attr("height", (d) =>
+                            return @plot_height - @y_scale(d)
+                        )
+                    x_scale = d3.scale.ordinal()
+                        .domain(@sample_names)
+                        .rangeRoundBands([0, @plot_width], .1)
+                    $('.x.axis').remove()
+                    @add_x_axis(x_scale)
+                    
+            )
+
+        get_samples: () ->
+            @sample_names = (sample.name for sample in @sample_list when sample.value != null)
+            @sample_vals = (sample.value for sample in @sample_list when sample.value != null)
+            
+        create_svg: () ->
+            svg = d3.select("#bar_chart")
+                .append("svg")
+                .attr("class", "bar_chart")
+                .attr("width", @plot_width + @margin.left + @margin.right)
+                .attr("height", @plot_height + @margin.top + @margin.bottom)
+                .append("g")
+                .attr("transform", "translate(" + @margin.left + "," + @margin.top + ")")
+                
+            return svg
+            
+        create_scales: () ->
+            @x_scale = d3.scale.ordinal()
+                .domain(@sample_names)
+                .rangeRoundBands([0, @plot_width], .1)
+
+            @y_scale = d3.scale.linear()
+                .domain([@y_min * 0.75, @y_max])
+                .range([@plot_height, @y_buffer])
+                
+        create_graph: () ->
+            
+            #@add_border()
+            @add_x_axis(@x_scale)
+            @add_y_axis() 
+            
+            @add_bars()
+            
+        add_x_axis: (scale) ->
+            xAxis = d3.svg.axis()
+                .scale(scale)
+                .orient("bottom");
+            
+            @svg.append("g")
+                .attr("class", "x axis")
+                .attr("transform", "translate(0," + @plot_height + ")")
+                .call(xAxis)
+                .selectAll("text")  
+                    .style("text-anchor", "end")
+                    .style("font-size", "12px")
+                    .attr("dx", "-.8em")
+                    .attr("dy", "-.3em")
+                    .attr("transform", (d) =>
+                        return "rotate(-90)" 
+                    )
+
+        add_y_axis: () ->
+            yAxis = d3.svg.axis()
+                    .scale(@y_scale)
+                    .orient("left")
+                    .ticks(5)
+
+            @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")
+
+        add_bars: () ->
+            @svg.selectAll(".bar")
+                .data(_.zip(@sample_names, @sample_vals))
+              .enter().append("rect")
+                .attr("class", "bar")
+                .attr("x", (d) =>
+                    return @x_scale(d[0])
+                )
+                .attr("width", @x_scale.rangeBand())
+                .attr("y", (d) =>
+                    return @y_scale(d[1])
+                )
+                .attr("height", (d) =>
+                    return @plot_height - @y_scale(d[1])
+                )
+                .append("svg:title")
+                .text((d) =>
+                    return d[1]
+                )
+              
+        sorted_samples: () ->
+            sample_list = _.zip(@sample_names, @sample_vals)
+            sorted = _.sortBy(sample_list, (sample) =>
+                return sample[1]
+            )
+            console.log("sorted:", sorted)
+            return sorted
+
+    sample_lists = js_data.sample_lists
+    sample_group_types = js_data.sample_group_types
+
+    new Histogram(sample_lists[0])
+
+    $('.stats_samples_group').change ->
+        $('#bar_chart').remove()
+        $('#bar_chart_container').append('<div id="bar_chart"></div>')
+        group = $(this).val()
+        console.log("group:", group)
+        if group == "samples_primary"
+            new Histogram(sample_lists[0])
+        else if group == "samples_other"
+            new Histogram(sample_lists[1])
+        else if group == "samples_all"
+            all_samples = sample_lists[0].concat sample_lists[1]
+            new Histogram(all_samples)
+
+    
     hide_tabs = (start) ->
         for x in [start..10]
             $("#stats_tabs" + x).hide()
 
-    #hide_tabs(1)
-
     # Changes stats table between all, bxd only and non-bxd, etc.
     stats_mdp_change = ->
         selected = $(this).val()
@@ -81,7 +256,6 @@ $ ->
 
         current_value = parseFloat($(in_box)).toFixed(decimal_places)
 
-        console.log("urgh:", category, value_type)
         the_value = sample_sets[category][value_type]()
         console.log("After running sample_sets, the_value is:", the_value)
         if decimal_places > 0
@@ -121,7 +295,6 @@ $ ->
         tables = ['samples_primary', 'samples_other']
         for table in tables
             rows = $("#" + table).find('tr')
-            console.log("[fuji3] rows:", rows)
             for row in rows
                 name = $(row).find('.edit_sample_sample_name').html()
                 name = $.trim(name)
@@ -180,7 +353,6 @@ $ ->
         $("#stats_table").append(table)
 
 
-
     process_id = (values...) ->
         ### Make an id or a class valid javascript by, for example, eliminating spaces ###
         processed = ""
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index f554267f..e6fcbd7b 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -56,7 +56,186 @@
   ];
 
   $(function() {
-    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, show_hide_outliers, stats_mdp_change, update_stat_values;
+    var Histogram, 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;
+    Histogram = (function() {
+
+      function Histogram(sample_list, sample_group) {
+        var longest_sample_name, sample,
+          _this = this;
+        this.sample_list = sample_list;
+        this.sample_group = sample_group;
+        this.get_samples();
+        console.log("sample names:", this.sample_names);
+        longest_sample_name = d3.max((function() {
+          var _i, _len, _ref, _results;
+          _ref = this.sample_names;
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            sample = _ref[_i];
+            _results.push(sample.length);
+          }
+          return _results;
+        }).call(this));
+        this.margin = {
+          top: 20,
+          right: 20,
+          bottom: longest_sample_name * 7,
+          left: 40
+        };
+        this.plot_width = this.sample_vals.length * 15 - this.margin.left - this.margin.right;
+        this.plot_height = 500 - this.margin.top - this.margin.bottom;
+        this.x_buffer = this.plot_width / 20;
+        this.y_buffer = this.plot_height / 20;
+        this.y_min = d3.min(this.sample_vals);
+        this.y_max = d3.max(this.sample_vals) * 1.1;
+        this.svg = this.create_svg();
+        this.plot_height -= this.y_buffer;
+        this.create_scales();
+        this.create_graph();
+        d3.select("#update_bar_chart").on("click", function() {
+          var sortItems, sorted_sample_names, x_scale;
+          if ($("#update_bar_chart").html() === 'Sort By Value') {
+            $("#update_bar_chart").html('Sort By Name');
+            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]);
+            });
+            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).rangeRoundBands([0, _this.plot_width], .1);
+            $('.x.axis').remove();
+            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);
+            }).attr("height", function(d) {
+              return _this.plot_height - _this.y_scale(d);
+            });
+            x_scale = d3.scale.ordinal().domain(_this.sample_names).rangeRoundBands([0, _this.plot_width], .1);
+            $('.x.axis').remove();
+            return _this.add_x_axis(x_scale);
+          }
+        });
+      }
+
+      Histogram.prototype.get_samples = function() {
+        var sample;
+        this.sample_names = (function() {
+          var _i, _len, _ref, _results;
+          _ref = this.sample_list;
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            sample = _ref[_i];
+            if (sample.value !== null) {
+              _results.push(sample.name);
+            }
+          }
+          return _results;
+        }).call(this);
+        return this.sample_vals = (function() {
+          var _i, _len, _ref, _results;
+          _ref = this.sample_list;
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            sample = _ref[_i];
+            if (sample.value !== null) {
+              _results.push(sample.value);
+            }
+          }
+          return _results;
+        }).call(this);
+      };
+
+      Histogram.prototype.create_svg = function() {
+        var svg;
+        svg = d3.select("#bar_chart").append("svg").attr("class", "bar_chart").attr("width", this.plot_width + this.margin.left + this.margin.right).attr("height", this.plot_height + this.margin.top + this.margin.bottom).append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
+        return svg;
+      };
+
+      Histogram.prototype.create_scales = function() {
+        this.x_scale = d3.scale.ordinal().domain(this.sample_names).rangeRoundBands([0, this.plot_width], .1);
+        return this.y_scale = d3.scale.linear().domain([this.y_min * 0.75, this.y_max]).range([this.plot_height, this.y_buffer]);
+      };
+
+      Histogram.prototype.create_graph = function() {
+        this.add_x_axis(this.x_scale);
+        this.add_y_axis();
+        return this.add_bars();
+      };
+
+      Histogram.prototype.add_x_axis = function(scale) {
+        var xAxis,
+          _this = this;
+        xAxis = d3.svg.axis().scale(scale).orient("bottom");
+        return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").style("font-size", "12px").attr("dx", "-.8em").attr("dy", "-.3em").attr("transform", function(d) {
+          return "rotate(-90)";
+        });
+      };
+
+      Histogram.prototype.add_y_axis = function() {
+        var yAxis;
+        yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5);
+        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");
+      };
+
+      Histogram.prototype.add_bars = function() {
+        var _this = this;
+        return this.svg.selectAll(".bar").data(_.zip(this.sample_names, this.sample_vals)).enter().append("rect").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]);
+        }).attr("height", function(d) {
+          return _this.plot_height - _this.y_scale(d[1]);
+        }).append("svg:title").text(function(d) {
+          return d[1];
+        });
+      };
+
+      Histogram.prototype.sorted_samples = function() {
+        var sample_list, sorted,
+          _this = this;
+        sample_list = _.zip(this.sample_names, this.sample_vals);
+        sorted = _.sortBy(sample_list, function(sample) {
+          return sample[1];
+        });
+        console.log("sorted:", sorted);
+        return sorted;
+      };
+
+      return Histogram;
+
+    })();
+    sample_lists = js_data.sample_lists;
+    sample_group_types = js_data.sample_group_types;
+    new Histogram(sample_lists[0]);
+    $('.stats_samples_group').change(function() {
+      var all_samples, group;
+      $('#bar_chart').remove();
+      $('#bar_chart_container').append('<div id="bar_chart"></div>');
+      group = $(this).val();
+      console.log("group:", group);
+      if (group === "samples_primary") {
+        return new Histogram(sample_lists[0]);
+      } else if (group === "samples_other") {
+        return new Histogram(sample_lists[1]);
+      } else if (group === "samples_all") {
+        all_samples = sample_lists[0].concat(sample_lists[1]);
+        return new Histogram(all_samples);
+      }
+    });
     hide_tabs = function(start) {
       var x, _i, _results;
       _results = [];
@@ -77,7 +256,6 @@
       console.log("the_id:", id);
       in_box = $(id).html;
       current_value = parseFloat($(in_box)).toFixed(decimal_places);
-      console.log("urgh:", category, value_type);
       the_value = sample_sets[category][value_type]();
       console.log("After running sample_sets, the_value is:", the_value);
       if (decimal_places > 0) {
@@ -127,7 +305,6 @@
       for (_i = 0, _len = tables.length; _i < _len; _i++) {
         table = tables[_i];
         rows = $("#" + table).find('tr');
-        console.log("[fuji3] rows:", rows);
         for (_j = 0, _len1 = rows.length; _j < _len1; _j++) {
           row = rows[_j];
           name = $(row).find('.edit_sample_sample_name').html();
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index 7e149506..d675b801 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -9,55 +9,76 @@
     
     {{ header("Correlation", 'Trait: {} Dataset: {}'.format(this_trait.name, dataset.name)) }}
 
-    <table id="corr_results" class="table table-hover table-striped table-bordered">
-        <thead>
-            <tr>
-                <th>Trait</th>
-                <th>Symbol</th>
-                <th>Alias</th>
-                <th>Description</th>
-                <th>Location</th>
-                <th>Mean Expr</th>
-                <th>Max LRS</th>
-                <th>Max LRS Location</th>
-                {% if corr_method == 'pearson' %}
-                <th>Sample r</th>
-                <th>N Cases</th>
-                <th>Sample p(r)</th>
-                <th>Lit Corr</th>
-                <th>Tissue r</th>
-                <th>Tissue p(r)</th>
-                {% else %}
-                <th>Sample rho</th>
-                <th>Sample p(rho)</th>
-                <th>Lit Corr</th>
-                <th>Tissue rho</th>
-                <th>Tissue p(rho)</th>
-                {% endif %}
+    <div class="container">
+        <div class="page-header">
+            <h1>Correlation Table</h1>
+        </div>
+
+        <p>Values of record {{ this_trait.name }} in the <a href="/dbdoc/{{dataset.fullname}}">{{ dataset.fullname }}</a>
+        dataset were compared to all records in the <a href="/dbdoc/{{target_dataset.fullname}}">{{ target_dataset.fullname }}</a>
+        dataset. The top {{ return_number }} correlations ranked by the {{ formatted_corr_type }} are displayed.
+        You can resort this list by clicking the headers. Select the Record ID to open the trait data
+        and analysis page.
+        </p>    
+
+        <div>
+            <table id="corr_results" class="table table-hover table-striped table-bordered">
+                <thead>
+                    <tr>
+                        <th>Trait</th>
+                        <th>Symbol</th>
+                        <th>Description</th>
+                        <th>Location</th>
+                        <th>Mean Expr</th>
+                        <th>Max LRS</th>
+                        <th>Max LRS Location</th>
+                        {% if corr_method == 'pearson' %}
+                        <th>Sample r</th>
+                        <th>N Cases</th>
+                        <th>Sample p(r)</th>
+                        <th>Lit Corr</th>
+                        <th>Tissue r</th>
+                        <th>Tissue p(r)</th>
+                        {% else %}
+                        <th>Sample rho</th>
+                        <th>N Cases</th>
+                        <th>Sample p(rho)</th>
+                        <th>Lit Corr</th>
+                        <th>Tissue rho</th>
+                        <th>Tissue p(rho)</th>
+                        {% endif %}
+                    </tr>
+                </thead>
+                <tbody>
+                {% for trait in correlation_results %}
+                    <tr>
+                        <td><a href="/show_trait?trait_id={{trait.name}}&amp;dataset={{trait.dataset.name}}">{{ trait.name }}</a></td>
+                        <td>{{ trait.symbol }}</td>
+                        <td>{{ trait.description }} <br><br> <b>Aliases</b>: {{ trait.alias }}</td>
+                        <td>Chr{{ trait.chr }}: {{'%0.3f'|format(trait.mb) }}</td>
+                        <td>{{'%0.3f'|format(trait.mean)}}</td>
+                        <td>{{'%0.3f'|format(trait.lrs)}}</td>
+                        <td>Chr{{ trait.locus_chr }}: {{'%0.3f'|format(trait.locus_mb) }}</td>
+                        <td>{{'%0.3f'|format(trait.sample_r)}}</td>
+                        <td>{{ trait.num_overlap }}</td>
+                        <td>{{'%0.3e'|format(trait.sample_p)}}</td>
+                        <td>{{'%0.3f'|format(trait.lit_corr)}}</td>
+                        <td>{{'%0.3f'|format(trait.tissue_corr)}}</td>
+                        <td>{{'%0.3e'|format(trait.tissue_pvalue)}}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
             
-            </tr>
-        </thead>
-        <tbody>
-        {% for trait in correlation_results %}
-            <tr>
-                <td><a href="/show_trait?trait_id={{trait.name}}&amp;dataset={{trait.dataset.name}}">{{ trait.name }}</a></td>
-                <td>{{ trait.symbol }}</td>
-                <td>{{ trait.alias }}</td>
-                <td>{{ trait.description }}</td>
-                <td>Chr{{ trait.chr }}:{{trait.mb}}</td>
-                <td>{{'%0.3f'|format(trait.mean)}}</td>
-                <td>{{'%0.3f'|format(trait.lrs)}}</td>
-                <td>Chr{{ trait.locus_chr }}:{{'%0.6f'|format(trait.locus_mb)}}</td>
-                <td>{{'%0.3f'|format(trait.sample_r)}}</td>
-                <td>{{ trait.num_overlap }}</td>
-                <td>{{'%0.3e'|format(trait.sample_p)}}</td>
-                <td>{{'%0.3f'|format(trait.lit_corr)}}</td>
-                <td>{{'%0.3f'|format(trait.tissue_corr)}}</td>
-                <td>{{'%0.3e'|format(trait.tissue_pvalue)}}</td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
+            <br />
+
+<!--            <button class="btn"><i class="icon-ok"></i> Select</button>
+            <button class="btn"><i class="icon-remove"></i> Deselect</button>
+            <button class="btn"><i class="icon-resize-vertical"></i> Invert</button>
+            <button class="btn"><i class="icon-plus-sign"></i> Add</button>
+            <button class="btn btn-primary pull-right"><i class="icon-download icon-white"></i> Download Table</button>-->
+        </div>
+    </div>
 {% endblock %}
 
 {% block js %}  
@@ -92,4 +113,4 @@
             console.timeEnd("Creating table");
         });
     </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/wqflask/wqflask/templates/quick_search.html b/wqflask/wqflask/templates/quick_search.html
index 2f268c5a..fe6f3f65 100644
--- a/wqflask/wqflask/templates/quick_search.html
+++ b/wqflask/wqflask/templates/quick_search.html
@@ -3,15 +3,14 @@
 {% block content %}
 <!-- Start of body -->
 
-    {{ header("QuickSearch Results",
-        'GeneNetwork found {}.'.format(numify(results|count, "record", "records"))) }}
+    {{ header("QuickSearch Results") }}
 
     <div class="container">
         <div class="page-header">
             <h1>Your Search</h1>
         </div>
 
-        <p>We across all data sets to find all records that match:</p>
+        <p>We searched across all data sets to find all records that match:</p>
 
         <ul>
             {% if search_terms %}
@@ -276,7 +275,7 @@
             console.time("Creating table");
             $('#pheno_results, #mrna_assay_results, #geno_results').dataTable( {
                 //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>",
-                "sDom": "lTftipr",
+                //"sDom": "lTftipr",
                 "oTableTools": {
                     "aButtons": [
                         "copy",
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 1fe7cce9..64d8682e 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -10,7 +10,7 @@
             <h1>Your Search</h1>
         </div>
 
-        <p>We searched <a href="/dbdoc/{{dataset.fullname}}">{{ dataset.fullname }}</a><//>
+        <p>We searched <a href="/dbdoc/{{dataset.fullname}}">{{ dataset.fullname }}</a></p>
 
         <p>To find all records that match:</p>
         <ul>
@@ -85,7 +85,6 @@
             <button class="btn"><i class="icon-plus-sign"></i> Add</button>
             <button class="btn btn-primary pull-right"><i class="icon-download icon-white"></i> Download Table</button>
         </div>
-
     </div>
 
 <!-- End of body -->
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index e3c84de7..5d77750c 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -2,6 +2,7 @@
 {% block title %}Trait Data and Analysis{% endblock %}
 {% block css %}
     <link rel="stylesheet" type="text/css" href="/static/new/css/marker_regression.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/bar_chart.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
 {% endblock %}
@@ -28,7 +29,7 @@
             </div>
             
             {% include 'show_trait_details.html' %}
-        {#  {% include 'show_trait_statistics.html' %}    #}
+            {% include 'show_trait_statistics_new.html' %}
             {% include 'show_trait_calculate_correlations.html' %}
             {% include 'show_trait_mapping_tools.html' %}
             {% include 'show_trait_edit_data.html' %}
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
new file mode 100644
index 00000000..acd6cc62
--- /dev/null
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -0,0 +1,16 @@
+<div>

+    <br>

+    <h2>Charts and Figures</h2>

+    <div class="well form-horizontal">

+        <select class="stats_samples_group">

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

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

+            {% endfor %}

+        </select>

+        <button type="button" id="update_bar_chart">Sort By Value</button>

+        <div id="bar_chart_container">

+            <div id="bar_chart"></div>

+        </div>

+        

+    </div>

+</div>
\ No newline at end of file
diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py
index 29f7f150..2cfc1cf9 100644
--- a/wqflask/wqflask/views.py
+++ b/wqflask/wqflask/views.py
@@ -32,7 +32,7 @@ from base.data_set import create_datasets_list
 from wqflask.show_trait import show_trait
 from wqflask.show_trait import export_trait_data
 from wqflask.marker_regression import marker_regression
-from wqflask.interval_mapping import interval_mapping
+#from wqflask.interval_mapping import interval_mapping
 from wqflask.correlation import show_corr_results
 from utility import temp_data