From 4eb2c2244b083d6522db02dff5ddb036af496392 Mon Sep 17 00:00:00 2001 From: Zachary Sloan Date: Thu, 24 Oct 2013 17:59:11 -0500 Subject: Added a dynamically resortable bar chart to the trait page Improved the look/feel of the correlation page somewhat --- wqflask/other_config/nginx_conf/penguin.conf | 2 +- wqflask/wqflask/correlation/show_corr_results.py | 15 ++ wqflask/wqflask/static/new/css/bar_chart.css | 14 ++ .../static/new/javascript/show_trait.coffee | 184 ++++++++++++++++++++- .../wqflask/static/new/javascript/show_trait.js | 183 +++++++++++++++++++- wqflask/wqflask/templates/correlation_page.html | 119 +++++++------ wqflask/wqflask/templates/quick_search.html | 7 +- wqflask/wqflask/templates/search_result_page.html | 3 +- wqflask/wqflask/templates/show_trait.html | 3 +- .../templates/show_trait_statistics_new.html | 16 ++ wqflask/wqflask/views.py | 2 +- 11 files changed, 481 insertions(+), 67 deletions(-) create mode 100644 wqflask/wqflask/static/new/css/bar_chart.css create mode 100644 wqflask/wqflask/templates/show_trait_statistics_new.html 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('
') + 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('
'); + 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)) }} - - - - - - - - - - - - {% if corr_method == 'pearson' %} - - - - - - - {% else %} - - - - - - {% endif %} +
+
+

Correlation Table

+
+ +

Values of record {{ this_trait.name }} in the {{ dataset.fullname }} + dataset were compared to all records in the {{ target_dataset.fullname }} + 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. +

+ +
+
TraitSymbolAliasDescriptionLocationMean ExprMax LRSMax LRS LocationSample rN CasesSample p(r)Lit CorrTissue rTissue p(r)Sample rhoSample p(rho)Lit CorrTissue rhoTissue p(rho)
+ + + + + + + + + + {% if corr_method == 'pearson' %} + + + + + + + {% else %} + + + + + + + {% endif %} + + + + {% for trait in correlation_results %} + + + + + + + + + + + + + + + + {% endfor %} + +
TraitSymbolDescriptionLocationMean ExprMax LRSMax LRS LocationSample rN CasesSample p(r)Lit CorrTissue rTissue p(r)Sample rhoN CasesSample p(rho)Lit CorrTissue rhoTissue p(rho)
{{ trait.name }}{{ trait.symbol }}{{ trait.description }}

Aliases: {{ trait.alias }}		Chr{{ trait.chr }}: {{'%0.3f'|format(trait.mb) }}{{'%0.3f'|format(trait.mean)}}{{'%0.3f'|format(trait.lrs)}}Chr{{ trait.locus_chr }}: {{'%0.3f'|format(trait.locus_mb) }}{{'%0.3f'|format(trait.sample_r)}}{{ trait.num_overlap }}{{'%0.3e'|format(trait.sample_p)}}{{'%0.3f'|format(trait.lit_corr)}}{{'%0.3f'|format(trait.tissue_corr)}}{{'%0.3e'|format(trait.tissue_pvalue)}}
- - - - {% for trait in correlation_results %} - - {{ trait.name }} - {{ trait.symbol }} - {{ trait.alias }} - {{ trait.description }} - Chr{{ trait.chr }}:{{trait.mb}} - {{'%0.3f'|format(trait.mean)}} - {{'%0.3f'|format(trait.lrs)}} - Chr{{ trait.locus_chr }}:{{'%0.6f'|format(trait.locus_mb)}} - {{'%0.3f'|format(trait.sample_r)}} - {{ trait.num_overlap }} - {{'%0.3e'|format(trait.sample_p)}} - {{'%0.3f'|format(trait.lit_corr)}} - {{'%0.3f'|format(trait.tissue_corr)}} - {{'%0.3e'|format(trait.tissue_pvalue)}} - - {% endfor %} - - +
+ + + + {% endblock %} {% block js %} @@ -92,4 +113,4 @@ console.timeEnd("Creating table"); }); -{% 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 %} - {{ header("QuickSearch Results", - 'GeneNetwork found {}.'.format(numify(results|count, "record", "records"))) }} + {{ header("QuickSearch Results") }}

Your Search

-

We across all data sets to find all records that match:

+

We searched across all data sets to find all records that match:

-

We searched {{ dataset.fullname }} +

We searched {{ dataset.fullname }}

To find all records that match: