aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xwqflask/wqflask/static/new/javascript/bar_chart.coffee43
-rwxr-xr-xwqflask/wqflask/static/new/javascript/bar_chart.js62
-rwxr-xr-xwqflask/wqflask/static/new/javascript/show_trait.coffee27
-rwxr-xr-xwqflask/wqflask/static/new/javascript/show_trait.js23
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");
});