From 151c4614afe8c291b3154851aea9f5d670fe4efa Mon Sep 17 00:00:00 2001
From: Zachary Sloan
Date: Thu, 5 Dec 2013 22:54:18 +0000
Subject: Interval map graph now works properly
Tried to export trait data for "color by trait" function
---
wqflask/wqflask/my_pylmm/pyLMM/lmm.py | 2 --
wqflask/wqflask/static/new/css/interval_mapping.css | 21 +++++++++++++--------
.../wqflask/static/new/css/marker_regression.css | 4 ++--
.../wqflask/static/new/javascript/bar_chart.coffee | 1 +
.../javascript/get_traits_from_collection.coffee | 9 +++++++--
.../new/javascript/get_traits_from_collection.js | 8 ++++++--
.../static/new/javascript/interval_mapping.coffee | 13 ++++++++-----
.../static/new/javascript/interval_mapping.js | 10 +++++-----
wqflask/wqflask/templates/collections/list.html | 2 +-
wqflask/wqflask/templates/show_trait.html | 4 +++-
10 files changed, 46 insertions(+), 28 deletions(-)
diff --git a/wqflask/wqflask/my_pylmm/pyLMM/lmm.py b/wqflask/wqflask/my_pylmm/pyLMM/lmm.py
index 6ef1669b..60d36b8d 100644
--- a/wqflask/wqflask/my_pylmm/pyLMM/lmm.py
+++ b/wqflask/wqflask/my_pylmm/pyLMM/lmm.py
@@ -107,8 +107,6 @@ def run_human(pheno_vector,
with Bench("Create list of inputs"):
inputs = list(plink_input)
-
- print("len(genotypes): ", len(inputs))
with Bench("Divide into chunks"):
results = chunks.divide_into_chunks(inputs, 64)
diff --git a/wqflask/wqflask/static/new/css/interval_mapping.css b/wqflask/wqflask/static/new/css/interval_mapping.css
index 9d23ba25..5ebf7742 100644
--- a/wqflask/wqflask/static/new/css/interval_mapping.css
+++ b/wqflask/wqflask/static/new/css/interval_mapping.css
@@ -1,27 +1,32 @@
-.manhattan_plot .y_axis path,
-.manhattan_plot .y_axis line {
+.interval_map .y_axis path,
+.interval_map .y_axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
-.manhattan_plot .y_axis text {
+.interval_map .y_axis text {
font-family: sans-serif;
font-size: 14px;
}
-.manhattan_plot .x_axis path,
-.manhattan_plot .x_axis line {
+.interval_map .x_axis path,
+.interval_map .x_axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
-.manhattan_plot .x_axis text {
+.interval_map .x_axis text {
text-anchor: end;
font-family: sans-serif;
font-size: 8px;
}
-rect {
+interval_map rect {
stroke: WhiteSmoke;
- fill: lightgrey;
+ fill: white;
+}
+
+interval_map path {
+ stroke: steelblue;
+ stroke-width: 1;
}
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/css/marker_regression.css b/wqflask/wqflask/static/new/css/marker_regression.css
index 054ef93e..a737c97e 100644
--- a/wqflask/wqflask/static/new/css/marker_regression.css
+++ b/wqflask/wqflask/static/new/css/marker_regression.css
@@ -21,10 +21,10 @@
font-size: 8px;
}
-rect {
+/*rect {
stroke: WhiteSmoke;
fill: lightgrey;
-}
+}*/
/*rect {
stroke: WhiteSmoke;
fill: Azure;
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index 412185d8..d18cadd2 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -124,6 +124,7 @@ class Bar_Chart
d3.select("#color_by_trait").on("click", =>
@color_by_trait()
+
)
get_attr_color_dict: () ->
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
index f1d41cbe..23499ac5 100644
--- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
@@ -1,9 +1,11 @@
+root = exports ? this
console.log("before get_traits_from_collection")
# Going to be used to hold collection list
# So we can repopulate it when the back button is clicked
collection_list = null
+this_trait_data = null
collection_click = () ->
console.log("Clicking on:", $(this))
@@ -16,7 +18,7 @@ collection_click = () ->
url: this_collection_url,
success: process_traits
)
-
+
trait_click = () ->
console.log("Clicking on:", $(this))
trait = $(this).find('.trait').text()
@@ -30,7 +32,9 @@ trait_click = () ->
)
color_by_trait = (trait_sample_data, textStatus, jqXHR) ->
- console.log('in color_by_trait:', trait_sample_data)
+ root.trait_sample_data = trait_sample_data
+ #console.log('in color_by_trait:', trait_sample_data)
+
process_traits = (trait_data, textStatus, jqXHR) ->
console.log('in process_traits with trait_data:', trait_data)
@@ -65,3 +69,4 @@ $ ->
$(document).on("click", ".collection_line", collection_click)
$(document).on("click", ".trait_line", trait_click)
$(document).on("click", "#back_to_collections", back_to_collections)
+
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
index 104c411d..b4c2c200 100644
--- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
@@ -1,11 +1,15 @@
// Generated by CoffeeScript 1.6.1
(function() {
- var back_to_collections, collection_click, collection_list, color_by_trait, process_traits, trait_click;
+ var back_to_collections, collection_click, collection_list, color_by_trait, process_traits, root, this_trait_data, trait_click;
+
+ root = typeof exports !== "undefined" && exports !== null ? exports : this;
console.log("before get_traits_from_collection");
collection_list = null;
+ this_trait_data = null;
+
collection_click = function() {
var this_collection_url;
console.log("Clicking on:", $(this));
@@ -35,7 +39,7 @@
};
color_by_trait = function(trait_sample_data, textStatus, jqXHR) {
- return console.log('in color_by_trait:', trait_sample_data);
+ return root.trait_sample_data = trait_sample_data;
};
process_traits = function(trait_data, textStatus, jqXHR) {
diff --git a/wqflask/wqflask/static/new/javascript/interval_mapping.coffee b/wqflask/wqflask/static/new/javascript/interval_mapping.coffee
index 78265f27..0aa21d97 100644
--- a/wqflask/wqflask/static/new/javascript/interval_mapping.coffee
+++ b/wqflask/wqflask/static/new/javascript/interval_mapping.coffee
@@ -215,10 +215,10 @@ $ ->
)
.enter()
.append("line")
- .attr("x1", @x_scale)
- .attr("x2", @x_scale)
.attr("y1", @y_buffer)
.attr("y2", @plot_height)
+ .attr("x1", @x_scale)
+ .attr("x2", @x_scale)
.style("stroke", "#ccc")
fill_chr_areas: () ->
@@ -239,7 +239,8 @@ $ ->
.attr("width", (d) =>
return @x_scale(d[0])
)
- .attr("height", @plot_height-@y_buffer)
+ .attr("height", @plot_height-@y_buffer)
+ .attr("fill", "white")
add_chr_labels: () ->
chr_names = []
@@ -263,12 +264,13 @@ $ ->
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "18px")
- .attr("fill", "grey")
+ #.attr("fill", "grey")
connect_markers: () ->
- @svg.selectAll("path")
+ @svg.selectAll("line")
.data(@plot_coordinates)
.enter()
+ .append("line")
.attr("x1", (d, i) =>
if i == 0
return @x_buffer
@@ -287,6 +289,7 @@ $ ->
.attr("y2", (d) =>
return @plot_height - ((@plot_height-@y_buffer) * d[1]/@y_max)
)
+ .style("stroke", "black")
console.time('Create manhattan plot')
new Interval_Map(600, 1200)
diff --git a/wqflask/wqflask/static/new/javascript/interval_mapping.js b/wqflask/wqflask/static/new/javascript/interval_mapping.js
index 5ae8ffab..521a1c7a 100644
--- a/wqflask/wqflask/static/new/javascript/interval_mapping.js
+++ b/wqflask/wqflask/static/new/javascript/interval_mapping.js
@@ -205,7 +205,7 @@
var _this = this;
return this.svg.selectAll("line").data(this.cumulative_chr_lengths, function(d) {
return d;
- }).enter().append("line").attr("x1", this.x_scale).attr("x2", this.x_scale).attr("y1", this.y_buffer).attr("y2", this.plot_height).style("stroke", "#ccc");
+ }).enter().append("line").attr("y1", this.y_buffer).attr("y2", this.plot_height).attr("x1", this.x_scale).attr("x2", this.x_scale).style("stroke", "#ccc");
};
Interval_Map.prototype.fill_chr_areas = function() {
@@ -220,7 +220,7 @@
}
}).attr("y", this.y_buffer).attr("width", function(d) {
return _this.x_scale(d[0]);
- }).attr("height", this.plot_height - this.y_buffer);
+ }).attr("height", this.plot_height - this.y_buffer).attr("fill", "white");
};
Interval_Map.prototype.add_chr_labels = function() {
@@ -237,12 +237,12 @@
return d[0];
}).attr("x", function(d) {
return _this.x_scale(d[2] - d[1] / 2);
- }).attr("y", this.plot_height * 0.1).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("fill", "grey");
+ }).attr("y", this.plot_height * 0.1).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px");
};
Interval_Map.prototype.connect_markers = function() {
var _this = this;
- return this.svg.selectAll("path").data(this.plot_coordinates).enter().attr("x1", function(d, i) {
+ return this.svg.selectAll("line").data(this.plot_coordinates).enter().append("line").attr("x1", function(d, i) {
if (i === 0) {
return _this.x_buffer;
} else {
@@ -258,7 +258,7 @@
return parseFloat(_this.x_buffer) + ((parseFloat(_this.plot_width) - parseFloat(_this.x_buffer)) * d[0] / parseFloat(_this.x_max));
}).attr("y2", function(d) {
return _this.plot_height - ((_this.plot_height - _this.y_buffer) * d[1] / _this.y_max);
- });
+ }).style("stroke", "black");
};
return Interval_Map;
diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index ac621a61..354723d0 100644
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -35,7 +35,7 @@
{# if "color_by_trait" in params #}
-
+
{# endif #}
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index ec729e1c..0ad6eedb 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -2,6 +2,7 @@
{% block title %}Trait Data and Analysis{% endblock %}
{% block css %}
+
@@ -55,9 +56,10 @@
+
-
+
--
cgit v1.2.3
From 33b10be4e506083e906ac1ef102db3a132aeb4e2 Mon Sep 17 00:00:00 2001
From: Zachary Sloan
Date: Thu, 5 Dec 2013 23:56:48 +0000
Subject: Now trims selected trait's values by the samples of the primary trait
and gets their distinct values
Created function that creates a dictionary of distinct values
and their corresponding colors
---
.../wqflask/static/new/javascript/bar_chart.coffee | 41 ++++++++++++++++--
wqflask/wqflask/static/new/javascript/bar_chart.js | 48 ++++++++++++++++++++--
.../javascript/get_traits_from_collection.coffee | 4 +-
.../new/javascript/get_traits_from_collection.js | 2 +-
.../static/new/javascript/show_trait.coffee | 5 ++-
.../wqflask/static/new/javascript/show_trait.js | 6 ++-
6 files changed, 92 insertions(+), 14 deletions(-)
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index d18cadd2..05955188 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -123,7 +123,7 @@ class Bar_Chart
)
d3.select("#color_by_trait").on("click", =>
- @color_by_trait()
+ @open_trait_selection()
)
@@ -138,6 +138,8 @@ class Bar_Chart
this_color_dict[value] = color(i)
else
console.log("distinct_values:", distinct_vals)
+ #Check whether all values are numbers, and if they are get a corresponding
+ #color gradient
if _.every(distinct_vals, (d) =>
if isNaN(d)
return false
@@ -147,13 +149,24 @@ class Bar_Chart
color_range = d3.scale.linear()
.domain([d3.min(distinct_vals),
d3.max(distinct_vals)])
- .range([0,4])
+ .range([0,255])
for value, i in distinct_vals
console.log("color_range(value):", color_range(parseInt(value)))
- this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)))
+ this_color_dict[value] = d3.rgb(color_range(parseInt(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
+ convert_into_colors: (values) ->
+ color_range = d3.scale.linear()
+ .domain([d3.min(values),
+ d3.max(values)])
+ .range([0,255])
+ for value, i in values
+ console.log("color_range(value):", color_range(parseInt(value)))
+ this_color_dict[value] = d3.rgb(color_range(parseInt(value)),0, 0)
+ #this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)))
+
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)
@@ -305,7 +318,7 @@ class Bar_Chart
return d
)
- color_by_trait: () ->
+ open_trait_selection: () ->
$('#collections_holder').load('/collections/list?color_by_trait #collections_list', =>
$.colorbox(
inline: true
@@ -318,6 +331,26 @@ class Bar_Chart
# console.log("contents:", $(element).contents())
# $(element).contents().unwrap()
)
+
+ color_by_trait: (trait_sample_data) ->
+ 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)
+
+ trim_values: (trait_sample_data) ->
+ trimmed_samples = {}
+ for sample in @sample_names
+ if sample of trait_sample_data
+ trimmed_samples[sample] = trait_sample_data[sample]
+ console.log("trimmed_samples:", trimmed_samples)
+ return trimmed_samples
+ get_distinct_values: (samples) ->
+ distinct_values = _.uniq(_.values(samples))
+ #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 e4279d41..05625dc9 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -126,7 +126,7 @@
}
});
d3.select("#color_by_trait").on("click", function() {
- return _this.color_by_trait();
+ return _this.open_trait_selection();
});
}
@@ -156,11 +156,11 @@
return true;
}
})) {
- color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 4]);
+ 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("lightblue").darker(color_range(parseInt(value)));
+ this_color_dict[value] = d3.rgb(color_range(parseInt(value)), 0, 0);
}
}
}
@@ -169,6 +169,18 @@
return _results;
};
+ Bar_Chart.prototype.convert_into_colors = function(values) {
+ var color_range, i, value, _i, _len, _results;
+ color_range = d3.scale.linear().domain([d3.min(values), d3.max(values)]).range([0, 255]);
+ _results = [];
+ for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {
+ value = values[i];
+ console.log("color_range(value):", color_range(parseInt(value)));
+ _results.push(this_color_dict[value] = d3.rgb(color_range(parseInt(value)), 0, 0));
+ }
+ return _results;
+ };
+
Bar_Chart.prototype.get_samples = function() {
var attr_vals, attribute, key, sample, _i, _j, _len, _len1, _ref, _ref1;
this.sample_names = (function() {
@@ -320,7 +332,7 @@
});
};
- Bar_Chart.prototype.color_by_trait = function() {
+ Bar_Chart.prototype.open_trait_selection = function() {
var _this = this;
return $('#collections_holder').load('/collections/list?color_by_trait #collections_list', function() {
$.colorbox({
@@ -331,6 +343,34 @@
});
};
+ Bar_Chart.prototype.color_by_trait = function(trait_sample_data) {
+ var trimmed_samples;
+ 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);
+ };
+
+ Bar_Chart.prototype.trim_values = function(trait_sample_data) {
+ var sample, trimmed_samples, _i, _len, _ref;
+ trimmed_samples = {};
+ _ref = this.sample_names;
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ sample = _ref[_i];
+ if (sample in trait_sample_data) {
+ trimmed_samples[sample] = trait_sample_data[sample];
+ }
+ }
+ console.log("trimmed_samples:", trimmed_samples);
+ return trimmed_samples;
+ };
+
+ Bar_Chart.prototype.get_distinct_values = function(samples) {
+ var distinct_values;
+ distinct_values = _.uniq(_.values(samples));
+ return console.log("distinct_values:", distinct_values);
+ };
+
return Bar_Chart;
})();
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
index 23499ac5..43a518b3 100644
--- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
@@ -32,9 +32,9 @@ trait_click = () ->
)
color_by_trait = (trait_sample_data, textStatus, jqXHR) ->
- root.trait_sample_data = trait_sample_data
+ #trait_sample_data = trait_sample_data
#console.log('in color_by_trait:', trait_sample_data)
-
+ root.bar_chart.color_by_trait(trait_sample_data)
process_traits = (trait_data, textStatus, jqXHR) ->
console.log('in process_traits with trait_data:', trait_data)
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
index b4c2c200..137a6ce8 100644
--- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
@@ -39,7 +39,7 @@
};
color_by_trait = function(trait_sample_data, textStatus, jqXHR) {
- return root.trait_sample_data = trait_sample_data;
+ return root.bar_chart.color_by_trait(trait_sample_data);
};
process_traits = function(trait_data, textStatus, jqXHR) {
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index 7d23345f..82b85436 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -1,3 +1,5 @@
+root = exports ? this
+
console.log("start_b")
# this is our isNumber, do not confuse with the underscore.js one
@@ -62,7 +64,8 @@ $ ->
sample_lists = js_data.sample_lists
sample_group_types = js_data.sample_group_types
- new Bar_Chart(sample_lists[0])
+ root.bar_chart = new Bar_Chart(sample_lists[0])
+
new Box_Plot(sample_lists[0])
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 718e365a..320f705b 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -1,9 +1,11 @@
// Generated by CoffeeScript 1.6.1
(function() {
- var Stat_Table_Rows, is_number,
+ var Stat_Table_Rows, is_number, root,
__hasProp = {}.hasOwnProperty,
__slice = [].slice;
+ root = typeof exports !== "undefined" && exports !== null ? exports : this;
+
console.log("start_b");
is_number = function(o) {
@@ -59,7 +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;
- new Bar_Chart(sample_lists[0]);
+ root.bar_chart = new Bar_Chart(sample_lists[0]);
new Box_Plot(sample_lists[0]);
$('.bar_chart_samples_group').change(function() {
var all_samples, group;
--
cgit v1.2.3
From dacbe604011514d7db2d3827e74c47cd7913dd40 Mon Sep 17 00:00:00 2001
From: Zachary Sloan
Date: Wed, 11 Dec 2013 20:13:45 +0000
Subject: Got color by trait working, but still need to add a legend and make
some other small changes (like removing samples that don't overlap with the
selected trait)
Tentatively removed jquery-ui from base.html; I'm not sure if we're still
using this anywhere, but removing it doesn't seem to have had an impact
on the trait page
---
.../wqflask/static/new/javascript/bar_chart.coffee | 60 +++++++++++++++++-----
wqflask/wqflask/static/new/javascript/bar_chart.js | 53 ++++++++++++-------
.../static/new/javascript/show_trait.coffee | 6 +--
.../wqflask/static/new/javascript/show_trait.js | 1 +
wqflask/wqflask/templates/base.html | 2 +-
.../templates/show_trait_statistics_new.html | 10 ++--
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('
')
@@ -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('')
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 @@
-
+
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 %}
- {% endif %}
-