aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/static/new/javascript/bar_chart.coffee60
-rw-r--r--wqflask/wqflask/static/new/javascript/bar_chart.js53
-rw-r--r--wqflask/wqflask/static/new/javascript/show_trait.coffee6
-rw-r--r--wqflask/wqflask/static/new/javascript/show_trait.js1
-rw-r--r--wqflask/wqflask/templates/base.html2
-rw-r--r--wqflask/wqflask/templates/show_trait_statistics_new.html10
6 files changed, 93 insertions, 39 deletions
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index 05955188..6af14687 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -6,7 +6,7 @@ class Bar_Chart
console.log("sample names:", @sample_names)
if @sample_attr_vals.length > 0
@get_distinct_attr_vals()
- @get_attr_color_dict()
+ @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)
@@ -29,6 +29,7 @@ class Bar_Chart
d3.select("#color_attribute").on("change", =>
attribute = $("#color_attribute").val()
+ console.log("attr_color_dict:", @attr_color_dict)
if $("#update_bar_chart").html() == 'Sort By Name'
@svg.selectAll(".bar")
.data(@sorted_samples())
@@ -57,13 +58,17 @@ class Bar_Chart
)
@add_legend(attribute, @distinct_attr_vals[attribute])
)
-
-
- d3.select("#update_bar_chart").on("click", =>
+
+
+ d3.select(".update_bar_chart").on("click", =>
+ sort_by = $('.update_bar_chart.active').val()
+ console.log("sort_by: ", sort_by)
if @attributes.length > 0
attribute = $("#color_attribute").val()
- if $("#update_bar_chart").html() == 'Sort By Value'
- $("#update_bar_chart").html('Sort By Name')
+ if sort_by = "value"
+ console.log("sorting by value")
+ #if $("#update_bar_chart").html() == 'Sort By Value'
+ #$("#update_bar_chart").html('Sort By Name')
sortItems = (a, b) ->
return a[1] - b[1]
@@ -72,6 +77,7 @@ class Bar_Chart
.transition()
.duration(1000)
.attr("y", (d) =>
+
return @y_scale(d[1])
)
.attr("height", (d) =>
@@ -94,7 +100,8 @@ class Bar_Chart
$('.x.axis').remove()
@add_x_axis(x_scale)
else
- $("#update_bar_chart").html('Sort By Value')
+ console.log("sorting by name")
+ #$("#update_bar_chart").html('Sort By Value')
@svg.selectAll(".bar")
.data(@samples)
.transition()
@@ -127,10 +134,10 @@ class Bar_Chart
)
- get_attr_color_dict: () ->
+ get_attr_color_dict: (vals) ->
@attr_color_dict = {}
- console.log("distinct_attr_vals:", @distinct_attr_vals)
- for own key, distinct_vals of @distinct_attr_vals
+ console.log("vals:", vals)
+ for own key, distinct_vals of vals
this_color_dict = {}
if distinct_vals.length < 10
color = d3.scale.category10()
@@ -151,8 +158,8 @@ class Bar_Chart
d3.max(distinct_vals)])
.range([0,255])
for value, i in distinct_vals
- console.log("color_range(value):", color_range(parseInt(value)))
- this_color_dict[value] = d3.rgb(color_range(parseInt(value)),0, 0)
+ console.log("color_range(value):", parseInt(color_range(value)))
+ this_color_dict[value] = d3.rgb(parseInt(color_range(value)),0, 0)
#this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)))
#this_color_dict[value] = "rgb(0, 0, " + color_range(parseInt(value)) + ")"
@attr_color_dict[key] = this_color_dict
@@ -336,7 +343,31 @@ class Bar_Chart
console.log("BXD1:", trait_sample_data["BXD1"])
console.log("trait_sample_data:", trait_sample_data)
trimmed_samples = @trim_values(trait_sample_data)
- @get_distinct_values(trimmed_samples)
+ distinct_values = {}
+ distinct_values["collection_trait"] = @get_distinct_values(trimmed_samples)
+ @get_attr_color_dict(distinct_values)
+ if $("#update_bar_chart").html() == 'Sort By Name'
+ @svg.selectAll(".bar")
+ .data(@sorted_samples())
+ .transition()
+ .duration(1000)
+ .style("fill", (d) =>
+ return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
+ )
+ .select("title")
+ .text((d) =>
+ return d[1]
+ )
+ else
+ @svg.selectAll(".bar")
+ .data(@samples)
+ .transition()
+ .duration(1000)
+ .style("fill", (d) =>
+ return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
+ )
+
+
trim_values: (trait_sample_data) ->
trimmed_samples = {}
@@ -348,9 +379,10 @@ class Bar_Chart
get_distinct_values: (samples) ->
distinct_values = _.uniq(_.values(samples))
+ console.log("distinct_values:", distinct_values)
+ return distinct_values
#distinct_values = []
#for sample in samples
# if samples[sample] in distinct_values
- console.log("distinct_values:", distinct_values)
root.Bar_Chart = Bar_Chart \ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index 05625dc9..17bada7e 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -17,7 +17,7 @@
console.log("sample names:", this.sample_names);
if (this.sample_attr_vals.length > 0) {
this.get_distinct_attr_vals();
- this.get_attr_color_dict();
+ this.get_attr_color_dict(this.distinct_attr_vals);
}
longest_sample_name = d3.max((function() {
var _i, _len, _ref, _results;
@@ -48,6 +48,7 @@
d3.select("#color_attribute").on("change", function() {
var attribute;
attribute = $("#color_attribute").val();
+ console.log("attr_color_dict:", _this.attr_color_dict);
if ($("#update_bar_chart").html() === 'Sort By Name') {
_this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
if (attribute === "None") {
@@ -69,13 +70,15 @@
}
return _this.add_legend(attribute, _this.distinct_attr_vals[attribute]);
});
- d3.select("#update_bar_chart").on("click", function() {
- var attribute, sortItems, sorted_sample_names, x_scale;
+ d3.select(".update_bar_chart").on("click", function() {
+ var attribute, sortItems, sort_by, sorted_sample_names, x_scale;
+ sort_by = $('.update_bar_chart.active').val();
+ console.log("sort_by: ", sort_by);
if (_this.attributes.length > 0) {
attribute = $("#color_attribute").val();
}
- if ($("#update_bar_chart").html() === 'Sort By Value') {
- $("#update_bar_chart").html('Sort By Name');
+ if (sort_by = "value") {
+ console.log("sorting by value");
sortItems = function(a, b) {
return a[1] - b[1];
};
@@ -106,7 +109,7 @@
$('.x.axis').remove();
return _this.add_x_axis(x_scale);
} else {
- $("#update_bar_chart").html('Sort By Value');
+ console.log("sorting by name");
_this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).attr("y", function(d) {
return _this.y_scale(d[1]);
}).attr("height", function(d) {
@@ -130,16 +133,15 @@
});
}
- Bar_Chart.prototype.get_attr_color_dict = function() {
- var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _ref, _results,
+ Bar_Chart.prototype.get_attr_color_dict = function(vals) {
+ var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _results,
_this = this;
this.attr_color_dict = {};
- console.log("distinct_attr_vals:", this.distinct_attr_vals);
- _ref = this.distinct_attr_vals;
+ console.log("vals:", vals);
_results = [];
- for (key in _ref) {
- if (!__hasProp.call(_ref, key)) continue;
- distinct_vals = _ref[key];
+ for (key in vals) {
+ if (!__hasProp.call(vals, key)) continue;
+ distinct_vals = vals[key];
this_color_dict = {};
if (distinct_vals.length < 10) {
color = d3.scale.category10();
@@ -159,8 +161,8 @@
color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 255]);
for (i = _j = 0, _len1 = distinct_vals.length; _j < _len1; i = ++_j) {
value = distinct_vals[i];
- console.log("color_range(value):", color_range(parseInt(value)));
- this_color_dict[value] = d3.rgb(color_range(parseInt(value)), 0, 0);
+ console.log("color_range(value):", parseInt(color_range(value)));
+ this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0);
}
}
}
@@ -344,11 +346,25 @@
};
Bar_Chart.prototype.color_by_trait = function(trait_sample_data) {
- var trimmed_samples;
+ var distinct_values, trimmed_samples,
+ _this = this;
console.log("BXD1:", trait_sample_data["BXD1"]);
console.log("trait_sample_data:", trait_sample_data);
trimmed_samples = this.trim_values(trait_sample_data);
- return this.get_distinct_values(trimmed_samples);
+ distinct_values = {};
+ distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples);
+ this.get_attr_color_dict(distinct_values);
+ if ($("#update_bar_chart").html() === 'Sort By Name') {
+ return this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
+ return _this.attr_color_dict["collection_trait"][trimmed_samples[d[0]]];
+ }).select("title").text(function(d) {
+ return d[1];
+ });
+ } else {
+ return this.svg.selectAll(".bar").data(this.samples).transition().duration(1000).style("fill", function(d) {
+ return _this.attr_color_dict["collection_trait"][trimmed_samples[d[0]]];
+ });
+ }
};
Bar_Chart.prototype.trim_values = function(trait_sample_data) {
@@ -368,7 +384,8 @@
Bar_Chart.prototype.get_distinct_values = function(samples) {
var distinct_values;
distinct_values = _.uniq(_.values(samples));
- return console.log("distinct_values:", distinct_values);
+ console.log("distinct_values:", distinct_values);
+ return distinct_values;
};
return Bar_Chart;
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index 82b85436..1df033d6 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -64,11 +64,10 @@ $ ->
sample_lists = js_data.sample_lists
sample_group_types = js_data.sample_group_types
+ $("#update_bar_chart.btn-group").button()
root.bar_chart = new Bar_Chart(sample_lists[0])
-
new Box_Plot(sample_lists[0])
-
$('.bar_chart_samples_group').change ->
$('#bar_chart').remove()
$('#bar_chart_container').append('<div id="bar_chart"></div>')
@@ -80,7 +79,8 @@ $ ->
else if group == "samples_all"
all_samples = sample_lists[0].concat sample_lists[1]
new Bar_Chart(all_samples)
-
+ #$(".btn-group").button()
+
$('.box_plot_samples_group').change ->
$('#box_plot').remove()
$('#box_plot_container').append('<div id="box_plot"></div>')
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 320f705b..90fa8228 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -61,6 +61,7 @@
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, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values;
sample_lists = js_data.sample_lists;
sample_group_types = js_data.sample_group_types;
+ $("#update_bar_chart.btn-group").button();
root.bar_chart = new Bar_Chart(sample_lists[0]);
new Box_Plot(sample_lists[0]);
$('.bar_chart_samples_group').change(function() {
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index 9b98c955..0360f619 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -212,7 +212,7 @@
</script>
<script src="/static/new/js_external/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/new/js_external/json2.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
+<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>-->
<script language="javascript" type="text/javascript" src="/static/packages/colorbox/jquery.colorbox.js"></script>
<!--<script type="text/javascript" src="/static/new/javascript/login.js"></script>-->
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index 33538626..e658484e 100644
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -30,10 +30,14 @@
{% endfor %}
</select>
</div>
- {% endif %}
- <button type="button" class="btn" id="update_bar_chart">
+ {% endif %}
+ <div id="update_bar_chart" class="btn-group" data-toggle="buttons-radio">
+ <button type="button" class="btn btn-default update_bar_chart active" value="name">Sort By Name</button>
+ <button type="button" class="btn btn-default update_bar_chart" value="value">Sort By Value</button>
+ </div>
+<!-- <button type="button" class="btn" id="update_bar_chart">
<i class="icon-resize-vertical"></i> Sort By Value
- </button>
+ </button>-->
<button type="button" class="btn" id="color_by_trait">
<i class="icon-tint"></i> Color by Trait
</button>