diff options
| -rwxr-xr-x | wqflask/base/trait.py | 28 | ||||
| -rwxr-xr-x | wqflask/wqflask/static/new/javascript/histogram.coffee | 27 | ||||
| -rwxr-xr-x | wqflask/wqflask/static/new/javascript/histogram.js | 245 | ||||
| -rwxr-xr-x | wqflask/wqflask/static/new/javascript/show_trait.coffee | 1 | ||||
| -rwxr-xr-x | wqflask/wqflask/static/new/javascript/show_trait.js | 1 | ||||
| -rwxr-xr-x | wqflask/wqflask/templates/show_trait.html | 10 | ||||
| -rwxr-xr-x | wqflask/wqflask/templates/show_trait_details.html | 6 |
7 files changed, 181 insertions, 137 deletions
diff --git a/wqflask/base/trait.py b/wqflask/base/trait.py index f3648b80..8930c917 100755 --- a/wqflask/base/trait.py +++ b/wqflask/base/trait.py @@ -53,7 +53,8 @@ class GeneralTrait(object): self.pvalue = None self.mean = None self.num_overlap = None - + self.strand_probe = None + self.symbol = None if kw.get('fullname'): name2 = value.split("::") @@ -533,12 +534,27 @@ class GeneralTrait(object): return setDescription @property + def name_header_fmt(self): + '''Return a human-readable name for use in page header''' + if self.dataset.type == 'ProbeSet': + return self.symbol + elif self.dataset.type == 'Geno': + return self.name + elif self.dataset.type == 'Publish': + return self.post_publication_abbreviation + else: + return "unnamed" + + @property def description_fmt(self): '''Return a text formated description''' - if self.description: - formatted = self.description - if self.probe_target_description: - formatted += "; " + self.probe_target_description + if self.dataset.type == 'ProbeSet': + if self.description: + formatted = self.description + if self.probe_target_description: + formatted += "; " + self.probe_target_description + elif self.dataset.type == 'Publish': + formatted = self.post_publication_description else: formatted = "Not available" return formatted.capitalize() @@ -652,4 +668,4 @@ def get_sample_data(): # jsonable_sample_data[sample] = trait_ob.data[sample].value # #return jsonable_sample_data - \ No newline at end of file + diff --git a/wqflask/wqflask/static/new/javascript/histogram.coffee b/wqflask/wqflask/static/new/javascript/histogram.coffee index 98f89ac6..68d9b5a2 100755 --- a/wqflask/wqflask/static/new/javascript/histogram.coffee +++ b/wqflask/wqflask/static/new/javascript/histogram.coffee @@ -4,7 +4,6 @@ class Histogram constructor: (@sample_list, @sample_group) -> @sort_by = "name" @format_count = d3.format(",.0f") #a formatter for counts - @get_sample_vals() @margin = {top: 10, right: 30, bottom: 30, left: 30} @plot_width = 960 - @margin.left - @margin.right @@ -12,21 +11,25 @@ class Histogram @x_buffer = @plot_width/20 @y_buffer = @plot_height/20 + @plot_height -= @y_buffer + + @get_sample_vals(@sample_list) + @redraw(@sample_vals) + redraw: (@sample_vals) -> @y_min = d3.min(@sample_vals) @y_max = d3.max(@sample_vals) * 1.1 - - @plot_height -= @y_buffer + @create_x_scale() @get_histogram_data() @create_y_scale() + $("#histogram").empty() @svg = @create_svg() - @create_graph() - get_sample_vals: () -> - @sample_vals = (sample.value for sample in @sample_list when sample.value != null) + get_sample_vals: (sample_list) -> + @sample_vals = (sample.value for sample in sample_list when sample.value != null) create_svg: () -> svg = d3.select("#histogram") @@ -53,8 +56,9 @@ class Histogram get_histogram_data: () -> console.log("sample_vals:", @sample_vals) + n_bins = Math.sqrt(@sample_vals.length) @histogram_data = d3.layout.histogram() - .bins(@x_scale.ticks(20))(@sample_vals) + .bins(@x_scale.ticks(n_bins))(@sample_vals) console.log("histogram_data:", @histogram_data[0]) create_y_scale: () -> @@ -112,17 +116,20 @@ class Histogram .attr("class", "bar") .attr("transform", (d) => return "translate(" + @x_scale(d.x) + "," + @y_scale(d.y) + ")") + + rect_width = @x_scale(@histogram_data[0].x + @histogram_data[0].dx) - + @x_scale(@histogram_data[0].x) bar.append("rect") .attr("x", 1) - .attr("width", @x_scale(@histogram_data[0].x + @histogram_data[0].dx) - 1) + .attr("width", rect_width - 1) .attr("height", (d) => return @plot_height - @y_scale(d.y) ) bar.append("text") .attr("dy", ".75em") .attr("y", 6) - .attr("x", @x_scale(@histogram_data[0].dx)/2) + .attr("x", rect_width / 2) .attr("text-anchor", "middle") .style("fill", "#fff") .text((d) => @@ -131,4 +138,4 @@ class Histogram return @format_count(d.y) ) -root.Histogram = Histogram \ No newline at end of file +root.Histogram = Histogram diff --git a/wqflask/wqflask/static/new/javascript/histogram.js b/wqflask/wqflask/static/new/javascript/histogram.js index 561a3068..d872a3ba 100755 --- a/wqflask/wqflask/static/new/javascript/histogram.js +++ b/wqflask/wqflask/static/new/javascript/histogram.js @@ -1,124 +1,135 @@ -// Generated by CoffeeScript 1.8.0 -var Histogram, root; - -root = typeof exports !== "undefined" && exports !== null ? exports : this; - -Histogram = (function() { - function Histogram(sample_list, sample_group) { - this.sample_list = sample_list; - this.sample_group = sample_group; - this.sort_by = "name"; - this.format_count = d3.format(",.0f"); - this.get_sample_vals(); - this.margin = { - top: 10, - right: 30, - bottom: 30, - left: 30 +// Generated by CoffeeScript 1.9.2 +(function() { + var Histogram, root; + + root = typeof exports !== "undefined" && exports !== null ? exports : this; + + Histogram = (function() { + function Histogram(sample_list1, sample_group) { + this.sample_list = sample_list1; + this.sample_group = sample_group; + this.sort_by = "name"; + this.format_count = d3.format(",.0f"); + this.margin = { + top: 10, + right: 30, + bottom: 30, + left: 30 + }; + this.plot_width = 960 - 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.plot_height -= this.y_buffer; + this.get_sample_vals(this.sample_list); + this.redraw(this.sample_vals); + } + + Histogram.prototype.redraw = function(sample_vals) { + this.sample_vals = sample_vals; + this.y_min = d3.min(this.sample_vals); + this.y_max = d3.max(this.sample_vals) * 1.1; + this.create_x_scale(); + this.get_histogram_data(); + this.create_y_scale(); + $("#histogram").empty(); + this.svg = this.create_svg(); + return this.create_graph(); }; - this.plot_width = 960 - 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.plot_height -= this.y_buffer; - this.create_x_scale(); - this.get_histogram_data(); - this.create_y_scale(); - this.svg = this.create_svg(); - this.create_graph(); - } - - Histogram.prototype.get_sample_vals = function() { - var sample; - 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); + + Histogram.prototype.get_sample_vals = function(sample_list) { + var sample; + return this.sample_vals = (function() { + var i, len, results; + results = []; + for (i = 0, len = sample_list.length; i < len; i++) { + sample = sample_list[i]; + if (sample.value !== null) { + results.push(sample.value); + } } - } - return _results; - }).call(this); - }; - - Histogram.prototype.create_svg = function() { - var svg; - svg = d3.select("#histogram").append("svg").attr("class", "histogram").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_x_scale = function() { - var x0; - console.log("min/max:", d3.min(this.sample_vals) + "," + d3.max(this.sample_vals)); - x0 = Math.max(-d3.min(this.sample_vals), d3.max(this.sample_vals)); - return this.x_scale = d3.scale.linear().domain([d3.min(this.sample_vals), d3.max(this.sample_vals)]).range([0, this.plot_width]).nice(); - }; - - Histogram.prototype.get_histogram_data = function() { - console.log("sample_vals:", this.sample_vals); - this.histogram_data = d3.layout.histogram().bins(this.x_scale.ticks(20))(this.sample_vals); - return console.log("histogram_data:", this.histogram_data[0]); - }; - - Histogram.prototype.create_y_scale = function() { - return this.y_scale = d3.scale.linear().domain([ - 0, d3.max(this.histogram_data, (function(_this) { + return results; + })(); + }; + + Histogram.prototype.create_svg = function() { + var svg; + svg = d3.select("#histogram").append("svg").attr("class", "histogram").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_x_scale = function() { + var x0; + console.log("min/max:", d3.min(this.sample_vals) + "," + d3.max(this.sample_vals)); + x0 = Math.max(-d3.min(this.sample_vals), d3.max(this.sample_vals)); + return this.x_scale = d3.scale.linear().domain([d3.min(this.sample_vals), d3.max(this.sample_vals)]).range([0, this.plot_width]).nice(); + }; + + Histogram.prototype.get_histogram_data = function() { + var n_bins; + console.log("sample_vals:", this.sample_vals); + n_bins = Math.sqrt(this.sample_vals.length); + this.histogram_data = d3.layout.histogram().bins(this.x_scale.ticks(n_bins))(this.sample_vals); + return console.log("histogram_data:", this.histogram_data[0]); + }; + + Histogram.prototype.create_y_scale = function() { + return this.y_scale = d3.scale.linear().domain([ + 0, d3.max(this.histogram_data, (function(_this) { + return function(d) { + return d.y; + }; + })(this)) + ]).range([this.plot_height, 0]); + }; + + Histogram.prototype.create_graph = function() { + this.add_x_axis(); + this.add_y_axis(); + return this.add_bars(); + }; + + Histogram.prototype.add_x_axis = function() { + var x_axis; + x_axis = d3.svg.axis().scale(this.x_scale).orient("bottom"); + return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(x_axis); + }; + + 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 bar, rect_width; + console.log("bar_width:", this.x_scale(this.histogram_data[0].dx)); + bar = this.svg.selectAll(".bar").data(this.histogram_data).enter().append("g").attr("class", "bar").attr("transform", (function(_this) { return function(d) { - return d.y; + return "translate(" + _this.x_scale(d.x) + "," + _this.y_scale(d.y) + ")"; }; - })(this)) - ]).range([this.plot_height, 0]); - }; - - Histogram.prototype.create_graph = function() { - this.add_x_axis(); - this.add_y_axis(); - return this.add_bars(); - }; - - Histogram.prototype.add_x_axis = function() { - var x_axis; - x_axis = d3.svg.axis().scale(this.x_scale).orient("bottom"); - return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(x_axis); - }; - - 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 bar; - console.log("bar_width:", this.x_scale(this.histogram_data[0].dx)); - bar = this.svg.selectAll(".bar").data(this.histogram_data).enter().append("g").attr("class", "bar").attr("transform", (function(_this) { - return function(d) { - return "translate(" + _this.x_scale(d.x) + "," + _this.y_scale(d.y) + ")"; - }; - })(this)); - bar.append("rect").attr("x", 1).attr("width", this.x_scale(this.histogram_data[0].x + this.histogram_data[0].dx) - 1).attr("height", (function(_this) { - return function(d) { - return _this.plot_height - _this.y_scale(d.y); - }; - })(this)); - return bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", this.x_scale(this.histogram_data[0].dx) / 2).attr("text-anchor", "middle").style("fill", "#fff").text((function(_this) { - return function(d) { - var bar_height; - bar_height = _this.plot_height - _this.y_scale(d.y); - if (bar_height > 20) { - return _this.format_count(d.y); - } - }; - })(this)); - }; + })(this)); + rect_width = this.x_scale(this.histogram_data[0].x + this.histogram_data[0].dx) - this.x_scale(this.histogram_data[0].x); + bar.append("rect").attr("x", 1).attr("width", rect_width - 1).attr("height", (function(_this) { + return function(d) { + return _this.plot_height - _this.y_scale(d.y); + }; + })(this)); + return bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", rect_width / 2).attr("text-anchor", "middle").style("fill", "#fff").text((function(_this) { + return function(d) { + var bar_height; + bar_height = _this.plot_height - _this.y_scale(d.y); + if (bar_height > 20) { + return _this.format_count(d.y); + } + }; + })(this)); + }; + + return Histogram; - return Histogram; + })(); -})(); + root.Histogram = Histogram; -root.Histogram = Histogram; +}).call(this); diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee index ee57831f..1d3123ba 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait.coffee +++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee @@ -238,6 +238,7 @@ $ -> sample_sets['samples_all'].add_value(real_value) already_seen[name] = true console.log("towards end:", sample_sets) + root.histogram.redraw(sample_sets['samples_primary'].the_values) update_stat_values(sample_sets) show_hide_outliers = -> diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js index c2dc07ee..9323862a 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait.js +++ b/wqflask/wqflask/static/new/javascript/show_trait.js @@ -265,6 +265,7 @@ } } console.log("towards end:", sample_sets); + root.histogram.redraw(sample_sets['samples_primary'].the_values); return update_stat_values(sample_sets); }; show_hide_outliers = function() { diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html index a1723ef8..d6f22f41 100755 --- a/wqflask/wqflask/templates/show_trait.html +++ b/wqflask/wqflask/templates/show_trait.html @@ -13,8 +13,12 @@ {% endblock %} {% block content %} <!-- Start of body --> - {{ header("{}".format(this_trait.symbol), - '{}: {}'.format(this_trait.name, this_trait.description_fmt)) }} + {% if this_trait.dataset.type != 'Geno' %} + {{ header("{}".format(this_trait.name_header_fmt), + '{}: {}'.format(this_trait.name, this_trait.description_fmt)) }} + {% else %} + {{ header("{}".format(this_trait.name_header_fmt)) }} + {% endif %} <form method="post" action="/corr_compute" name="trait_page" id="trait_data_form" @@ -31,7 +35,7 @@ <div class="page-header"> <h1>{{ dataset.group.species.capitalize() }} - {{ dataset.group.name }} - - {{ this_trait.symbol }} + {{ this_trait.name_header_fmt }} </h1> </div> diff --git a/wqflask/wqflask/templates/show_trait_details.html b/wqflask/wqflask/templates/show_trait_details.html index 0afac1f7..e1780e42 100755 --- a/wqflask/wqflask/templates/show_trait_details.html +++ b/wqflask/wqflask/templates/show_trait_details.html @@ -1,9 +1,13 @@ <dl class="dl-horizontal"> + {% if this_trait.dataset.type == 'ProbeSet' %} <dt>Aliases</dt> <dd>{{ this_trait.alias_fmt }}</dd> + {% endif %} + {% if this_trait.dataset.type != 'Publish' %} <dt>Location</dt> <dd>{{ this_trait.location_fmt }}</dd> + {% endif %} <dt>Database</dt> <dd> @@ -16,7 +20,7 @@ <dt> <a href="/blatInfo.html" target="_blank" title="Values higher than 2 for the specificity are good"> - BLAT Specifity + BLAT Specificity </a> </dt> <dd>{{ "%0.3f" | format(this_trait.probe_set_specificity|float) }}</dd> |