diff options
4 files changed, 95 insertions, 60 deletions
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee index c91918b2..7a2b38f3 100755 --- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee +++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee @@ -10,11 +10,10 @@ class Bar_Chart @get_attr_color_dict(@distinct_attr_vals) #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) + longest_sample_name = d3.max(sample.name.length for sample in @sample_list) @margin = {top: 20, right: 20, bottom: longest_sample_name * 7, left: 40} - @plot_width = @sample_vals.length * 20 - @margin.left - @margin.right - @range = @sample_vals.length * 20 + @plot_width = @sample_vals.length * 20 @plot_height = 500 - @margin.top - @margin.bottom @x_buffer = @plot_width/20 @@ -152,13 +151,24 @@ class Bar_Chart console.log("samples:", samples) @attribute = $("#color_attribute").val() + # recompute sizes vals = (x[1] for x in samples) @y_min = d3.min(vals) @y_max = d3.max(vals) * 1.1 + @plot_width = samples.length * 20 - @svg.selectAll(".bar") - .data(samples) - .transition() + $("svg.bar_chart").attr("width", @plot_width + @margin.left + @margin.right) + + names = (x[0] for x in samples) + @create_scales(names) + $('.bar_chart').find('.x.axis').remove() + $('.bar_chart').find('.y.axis').remove() + @add_x_axis() + @add_y_axis() + + bars = @update_bars(samples) + + bars.transition() .duration(1000) .style("fill", (d) => if @attributes.length == 0 and @trait_color_dict? @@ -174,6 +184,7 @@ class Bar_Chart else return "steelblue" ) + .attr("x", (d) => return @x_scale(d[0])) .attr("y", (d) => return @y_scale(d[1]) ) @@ -188,12 +199,6 @@ class Bar_Chart # return @trait_color_dict[d[0]] # #return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]] #) - names = (x[0] for x in samples) - @create_scales(names) - $('.bar_chart').find('.x.axis').remove() - $('.bar_chart').find('.y.axis').remove() - @add_x_axis() - @add_y_axis() get_attr_color_dict: (vals) -> @attr_color_dict = {} @@ -323,7 +328,7 @@ class Bar_Chart create_scales: (sample_names) -> @x_scale = d3.scale.ordinal() .domain(sample_names) - .rangeRoundBands([0, @range], 0.1, 0) + .rangeRoundBands([0, @plot_width], 0.1, 0) @y_scale = d3.scale.linear() .domain([@y_min * 0.75, @y_max]) @@ -335,7 +340,7 @@ class Bar_Chart @add_x_axis() @add_y_axis() - @add_bars() + @update_bars(@samples) add_x_axis: (scale) -> xAxis = d3.svg.axis() @@ -370,10 +375,9 @@ class Bar_Chart .attr("dy", ".71em") .style("text-anchor", "end") - add_bars: () -> - @svg.selectAll(".bar") - .data(@samples) - .enter().append("rect") + update_bars: (samples) -> + bars = @svg.selectAll(".bar").data(samples, (d) => return d[0]) + bars.enter().append("rect") .style("fill", "steelblue") .attr("class", "bar") .attr("x", (d) => @@ -390,7 +394,8 @@ class Bar_Chart .text((d) => return d[1] ) - + bars.exit().remove() + return bars sorted_samples: () -> #if @sample_attr_vals.length > 0 diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js index d20a8615..cc21550e 100755 --- a/wqflask/wqflask/static/new/javascript/bar_chart.js +++ b/wqflask/wqflask/static/new/javascript/bar_chart.js @@ -19,11 +19,11 @@ } longest_sample_name = d3.max((function() { var j, len, ref, results; - ref = this.sample_names; + ref = this.sample_list; results = []; for (j = 0, len = ref.length; j < len; j++) { sample = ref[j]; - results.push(sample.length); + results.push(sample.name.length); } return results; }).call(this)); @@ -33,8 +33,7 @@ bottom: longest_sample_name * 7, left: 40 }; - this.plot_width = this.sample_vals.length * 20 - this.margin.left - this.margin.right; - this.range = this.sample_vals.length * 20; + this.plot_width = this.sample_vals.length * 20; this.plot_height = 500 - this.margin.top - this.margin.bottom; this.x_buffer = this.plot_width / 20; this.y_buffer = this.plot_height / 20; @@ -152,7 +151,7 @@ }; Bar_Chart.prototype.rebuild_bar_graph = function(samples) { - var names, vals, x; + var bars, names, vals, x; console.log("samples:", samples); this.attribute = $("#color_attribute").val(); vals = (function() { @@ -166,7 +165,24 @@ })(); this.y_min = d3.min(vals); this.y_max = d3.max(vals) * 1.1; - this.svg.selectAll(".bar").data(samples).transition().duration(1000).style("fill", (function(_this) { + this.plot_width = samples.length * 20; + $("svg.bar_chart").attr("width", this.plot_width + this.margin.left + this.margin.right); + names = (function() { + var j, len, results; + results = []; + for (j = 0, len = samples.length; j < len; j++) { + x = samples[j]; + results.push(x[0]); + } + return results; + })(); + this.create_scales(names); + $('.bar_chart').find('.x.axis').remove(); + $('.bar_chart').find('.y.axis').remove(); + this.add_x_axis(); + this.add_y_axis(); + bars = this.update_bars(samples); + return bars.transition().duration(1000).style("fill", (function(_this) { return function(d) { if (_this.attributes.length === 0 && (_this.trait_color_dict != null)) { console.log("SAMPLE:", d[0]); @@ -181,6 +197,10 @@ return "steelblue"; } }; + })(this)).attr("x", (function(_this) { + return function(d) { + return _this.x_scale(d[0]); + }; })(this)).attr("y", (function(_this) { return function(d) { return _this.y_scale(d[1]); @@ -194,20 +214,6 @@ return d[1]; }; })(this)); - names = (function() { - var j, len, results; - results = []; - for (j = 0, len = samples.length; j < len; j++) { - x = samples[j]; - results.push(x[0]); - } - return results; - })(); - this.create_scales(names); - $('.bar_chart').find('.x.axis').remove(); - $('.bar_chart').find('.y.axis').remove(); - this.add_x_axis(); - return this.add_y_axis(); }; Bar_Chart.prototype.get_attr_color_dict = function(vals) { @@ -407,14 +413,14 @@ }; Bar_Chart.prototype.create_scales = function(sample_names) { - this.x_scale = d3.scale.ordinal().domain(sample_names).rangeRoundBands([0, this.range], 0.1, 0); + this.x_scale = d3.scale.ordinal().domain(sample_names).rangeRoundBands([0, this.plot_width], 0.1, 0); return this.y_scale = d3.scale.linear().domain([this.y_min * 0.75, this.y_max]).range([this.plot_height, this.y_buffer]); }; Bar_Chart.prototype.create_graph = function() { this.add_x_axis(); this.add_y_axis(); - return this.add_bars(); + return this.update_bars(this.samples); }; Bar_Chart.prototype.add_x_axis = function(scale) { @@ -433,8 +439,14 @@ 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"); }; - Bar_Chart.prototype.add_bars = function() { - return this.svg.selectAll(".bar").data(this.samples).enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", (function(_this) { + Bar_Chart.prototype.update_bars = function(samples) { + var bars; + bars = this.svg.selectAll(".bar").data(samples, (function(_this) { + return function(d) { + return d[0]; + }; + })(this)); + bars.enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", (function(_this) { return function(d) { return _this.x_scale(d[0]); }; @@ -451,6 +463,8 @@ return d[1]; }; })(this)); + bars.exit().remove(); + return bars; }; Bar_Chart.prototype.sorted_samples = function() { diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee index 4bfc8690..d548b253 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait.coffee +++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee @@ -96,7 +96,7 @@ $ -> $("#stats_tabs" + selected).show() - change_stats_value = (sample_sets, category, value_type, decimal_places)-> + change_stats_value = (sample_sets, category, value_type, decimal_places, effects) -> id = "#" + process_id(category, value_type) console.log("the_id:", id) in_box = $(id).html @@ -115,7 +115,10 @@ $ -> console.log("*-* current_value:", current_value) if the_value != current_value console.log("object:", $(id).html(the_value)) - $(id).html(the_value).effect("highlight") + if effects + $(id).html(the_value).effect("highlight") + else + $(id).html(the_value) # We go ahead and always change the title value if we have it if title_value @@ -123,10 +126,11 @@ $ -> update_stat_values = (sample_sets)-> + show_effects = $(".tab-pane.active").attr("id") == "stats_tab" for category in ['samples_primary', 'samples_other', 'samples_all'] for row in Stat_Table_Rows console.log("Calling change_stats_value") - change_stats_value(sample_sets, category, row.vn, row.digits) + change_stats_value(sample_sets, category, row.vn, row.digits, show_effects) redraw_histogram = -> root.histogram.redraw(_.values(root.selected_samples[root.histogram_group])) @@ -202,20 +206,20 @@ $ -> name = $(row).find('.edit_sample_sample_name').html() name = $.trim(name) real_value = $(row).find('.edit_sample_value').val() - console.log("real_value:", real_value) + #console.log("real_value:", real_value) checkbox = $(row).find(".edit_sample_checkbox") - checked = $(checkbox).attr('checked') + checked = $(checkbox).prop('checked') if checked and is_number(real_value) and real_value != "" - console.log("in the iffy if") + #console.log("in the iffy if") real_value = parseFloat(real_value) sample_sets[table].add_value(real_value) root.selected_samples[table][name] = real_value - console.log("checking name of:", name) + #console.log("checking name of:", name) if not (name of already_seen) - console.log("haven't seen") + #console.log("haven't seen") sample_sets['samples_all'].add_value(real_value) root.selected_samples['samples_all'][name] = real_value already_seen[name] = true @@ -445,5 +449,12 @@ $ -> edit_data_change() # Set the values at the beginning $('#edit_sample_lists').change(edit_data_change) + + # bind additional handlers for pushing data updates + $('#block_by_index').click(edit_data_change) + $('#exclude_group').click(edit_data_change) + $('#block_outliers').click(edit_data_change) + $('#reset').click(edit_data_change) + #$("#all-mean").html('foobar8') console.log("end") diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js index 26c0a275..d1b43677 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait.js +++ b/wqflask/wqflask/static/new/javascript/show_trait.js @@ -95,7 +95,7 @@ hide_tabs(0); return $("#stats_tabs" + selected).show(); }; - change_stats_value = function(sample_sets, category, value_type, decimal_places) { + change_stats_value = function(sample_sets, category, value_type, decimal_places, effects) { var current_value, id, in_box, the_value, title_value; id = "#" + process_id(category, value_type); console.log("the_id:", id); @@ -113,14 +113,19 @@ console.log("*-* current_value:", current_value); if (the_value !== current_value) { console.log("object:", $(id).html(the_value)); - $(id).html(the_value).effect("highlight"); + if (effects) { + $(id).html(the_value).effect("highlight"); + } else { + $(id).html(the_value); + } } if (title_value) { return $(id).attr('title', title_value); } }; update_stat_values = function(sample_sets) { - var category, i, len, ref, results, row; + var category, i, len, ref, results, row, show_effects; + show_effects = $(".tab-pane.active").attr("id") === "stats_tab"; ref = ['samples_primary', 'samples_other', 'samples_all']; results = []; for (i = 0, len = ref.length; i < len; i++) { @@ -131,7 +136,7 @@ for (j = 0, len1 = Stat_Table_Rows.length; j < len1; j++) { row = Stat_Table_Rows[j]; console.log("Calling change_stats_value"); - results1.push(change_stats_value(sample_sets, category, row.vn, row.digits)); + results1.push(change_stats_value(sample_sets, category, row.vn, row.digits, show_effects)); } return results1; })()); @@ -228,17 +233,13 @@ name = $(row).find('.edit_sample_sample_name').html(); name = $.trim(name); real_value = $(row).find('.edit_sample_value').val(); - console.log("real_value:", real_value); checkbox = $(row).find(".edit_sample_checkbox"); - checked = $(checkbox).attr('checked'); + checked = $(checkbox).prop('checked'); if (checked && is_number(real_value) && real_value !== "") { - console.log("in the iffy if"); real_value = parseFloat(real_value); sample_sets[table].add_value(real_value); root.selected_samples[table][name] = real_value; - console.log("checking name of:", name); if (!(name in already_seen)) { - console.log("haven't seen"); sample_sets['samples_all'].add_value(real_value); root.selected_samples['samples_all'][name] = real_value; already_seen[name] = true; @@ -475,6 +476,10 @@ make_table(); edit_data_change(); $('#edit_sample_lists').change(edit_data_change); + $('#block_by_index').click(edit_data_change); + $('#exclude_group').click(edit_data_change); + $('#block_outliers').click(edit_data_change); + $('#reset').click(edit_data_change); return console.log("end"); }); |