aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/static/new/css/marker_regression.css42
-rw-r--r--wqflask/wqflask/static/new/javascript/marker_regression.coffee122
-rw-r--r--wqflask/wqflask/static/new/javascript/marker_regression.js110
-rw-r--r--wqflask/wqflask/templates/marker_regression.html3
-rw-r--r--wqflask/wqflask/templates/show_trait.html6
-rw-r--r--wqflask/wqflask/templates/show_trait_progress_bar.html10
6 files changed, 247 insertions, 46 deletions
diff --git a/wqflask/wqflask/static/new/css/marker_regression.css b/wqflask/wqflask/static/new/css/marker_regression.css
index 58da563c..82d7071c 100644
--- a/wqflask/wqflask/static/new/css/marker_regression.css
+++ b/wqflask/wqflask/static/new/css/marker_regression.css
@@ -1,19 +1,31 @@
-.manhattan_plot_segment {
- position:relative;
- display:inline;
- height: 400px;
- width: 150px;
- float: left;
- clear: none;
+.manhattan_plot .y_axis path,
+.manhattan_plot .y_axis line {
+ fill: none;
+ stroke: black;
+ shape-rendering: crispEdges;
+}
+.manhattan_plot .y_axis text {
+ font-family: sans-serif;
+ font-size: 14px;
}
-.manhattan_plots {
- clear: both;
+.manhattan_plot .x_axis path,
+.manhattan_plot .x_axis line {
+ fill: none;
+ stroke: black;
+ shape-rendering: crispEdges;
+}
+.manhattan_plot .x_axis text {
+ text-anchor: end;
+ font-family: sans-serif;
+ font-size: 8px;
}
-.permutation_histogram {
- display: block;
- height: 400px;
- width: 900px;
- clear: both;
-} \ No newline at end of file
+rect {
+ stroke: WhiteSmoke;
+ fill: grey;
+}
+/*rect {
+ stroke: WhiteSmoke;
+ fill: Azure;
+}*/ \ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index 4b0915c2..ef56dc99 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -13,6 +13,7 @@ $ ->
@marker_names = []
@create_coordinates()
[@chr_lengths, @cumulative_chr_lengths] = @get_chr_lengths()
+ console.log("cumulative_chr_len: ", @cumulative_chr_lengths)
# Buffer to allow for the ticks/labels to be drawn
@x_buffer = @plot_width/30
@@ -74,9 +75,6 @@ $ ->
@y_coords.push(result.lod_score)
@marker_names.push(result.name)
@total_length += chr_lengths[chr_lengths.length-1]
- console.log("total length is", @total_length)
-
- console.log("chr_lengths are:", chr_lengths)
show_marker_in_table: (marker_info) ->
### Searches for the select marker in the results table below ###
@@ -89,15 +87,19 @@ $ ->
create_svg: () ->
svg = d3.select("#manhattan_plots")
.append("svg")
- .attr("width", @plot_width)
- .attr("height", @plot_height)
+ .attr("class", "manhattan_plot")
+ .attr("width", @plot_width+@x_buffer)
+ .attr("height", @plot_height+@y_buffer)
return svg
create_graph: () ->
@add_border()
+ @add_x_axis()
@add_y_axis()
@add_chr_lines()
+ @fill_chr_areas()
+ @add_chr_labels()
@add_plot_points()
add_border: () ->
@@ -125,7 +127,6 @@ $ ->
.style("stroke", "#000")
create_scales: () ->
- console.log("plot_width is: ", @plot_width)
@x_scale = d3.scale.linear()
.domain([0, d3.max(@x_coords)])
.range([@x_buffer, @plot_width])
@@ -134,6 +135,64 @@ $ ->
.domain([0, @y_max])
.range([@plot_height, @y_buffer])
+ create_x_axis_tick_values: () ->
+ tick_vals = []
+ for val in [25..@cumulative_chr_lengths[0]] when val%25 == 0
+ tick_vals.push(val)
+
+ for length, i in @cumulative_chr_lengths
+ if i == 0
+ continue
+ chr_ticks = []
+ tick_count = Math.floor(@chr_lengths[i]/25)
+ tick_val = parseInt(@cumulative_chr_lengths[i-1])
+ for tick in [0..(tick_count-1)]
+ tick_val += 25
+ console.log("tick_val is:", tick_val)
+ chr_ticks.push(tick_val)
+ Array::push.apply tick_vals, chr_ticks
+
+ console.log("tick_vals:", tick_vals)
+ return tick_vals
+
+ add_x_axis: () ->
+ xAxis = d3.svg.axis()
+ .scale(@x_scale)
+ .orient("bottom")
+ .tickValues(@create_x_axis_tick_values())
+
+ next_chr = 1
+ tmp_tick_val = 0
+ xAxis.tickFormat((d) =>
+ d3.format("d") #format as integer
+ if d < @cumulative_chr_lengths[0]
+ tick_val = d
+ else
+ next_chr_length = @cumulative_chr_lengths[next_chr]
+ if d > next_chr_length
+ next_chr += 1
+ tmp_tick_val = 25
+ tick_val = tmp_tick_val
+ else
+ tmp_tick_val += 25
+ tick_val = tmp_tick_val
+ console.log("tick_val: ", tick_val)
+ return (tick_val)
+ )
+
+ @svg.append("g")
+ .attr("class", "x_axis")
+ .attr("transform", "translate(0," + @plot_height + ")")
+ .call(xAxis)
+ .selectAll("text")
+ .attr("text-anchor", "right")
+ .attr("dx", "-1.6em")
+ .attr("transform", (d) =>
+ return "translate(-12,0) rotate(-90)"
+ )
+ #.attr("dy", "-1.0em")
+
+
add_y_axis: () ->
yAxis = d3.svg.axis()
.scale(@y_scale)
@@ -141,7 +200,7 @@ $ ->
.ticks(5)
@svg.append("g")
- .attr("class", "axis")
+ .attr("class", "y_axis")
.attr("transform", "translate(" + @x_buffer + ",0)")
.call(yAxis)
@@ -157,18 +216,53 @@ $ ->
.attr("y1", @y_buffer)
.attr("y2", @plot_height)
.style("stroke", "#ccc")
+
+ fill_chr_areas: () ->
+ @svg.selectAll("rect.chr_fill_area_1")
+ .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) =>
+ return d
+ )
+ .enter()
+ .append("rect")
+ .attr("class", "chr_fill_area_1")
+ .attr("x", (d, i) =>
+ if i == 0
+ return @x_scale(0)
+ else
+ return @x_scale(@cumulative_chr_lengths[i-1])
+ )
+ .attr("y", @y_buffer)
+ .attr("width", (d) =>
+ return @x_scale(d[0])
+ )
+ .attr("height", @plot_height-@y_buffer)
add_chr_labels: () ->
+ chr_names = []
+ for key of @chromosomes
+ chr_names.push(key)
+ chr_info = _.zip(chr_names, @chr_lengths, @cumulative_chr_lengths)
+ console.log("chr_info is", chr_info)
@svg.selectAll("text")
- .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) =>
- label_positions = []
- for chr in d
- label_positions.push(chr[1] - chr[0]/2)
- return label_positions
+ .data(chr_info, (d) =>
+ return d
)
.enter()
.append("text")
-
+ .text((d) =>
+ console.log("d[0] is ", d[0])
+ return d[0]
+ )
+ .attr("x", (d) =>
+ return @x_scale(d[2] - d[1]/2)
+ )
+ .attr("y", @plot_height * 0.1)
+ .attr("dx", "0em")
+ .attr("text-anchor", "middle")
+ .attr("font-family", "sans-serif")
+ .attr("font-size", "18px")
+ .attr("fill", "grey")
+
add_plot_points: () ->
console.log("x_max is:", @x_max)
@@ -197,4 +291,4 @@ $ ->
.call(@show_marker_in_table())
)
- new Manhattan_Plot(600, 1200)
+ new Manhattan_Plot(600, 1200) \ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index 064df143..efe6f508 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -19,6 +19,7 @@
this.marker_names = [];
this.create_coordinates();
_ref = this.get_chr_lengths(), this.chr_lengths = _ref[0], this.cumulative_chr_lengths = _ref[1];
+ console.log("cumulative_chr_len: ", this.cumulative_chr_lengths);
this.x_buffer = this.plot_width / 30;
this.y_buffer = this.plot_height / 20;
this.x_max = this.total_length;
@@ -88,9 +89,7 @@
this.y_coords.push(result.lod_score);
this.marker_names.push(result.name);
}
- this.total_length += chr_lengths[chr_lengths.length - 1];
- console.log("total length is", this.total_length);
- return console.log("chr_lengths are:", chr_lengths);
+ return this.total_length += chr_lengths[chr_lengths.length - 1];
};
Manhattan_Plot.prototype.show_marker_in_table = function(marker_info) {
@@ -108,14 +107,17 @@
Manhattan_Plot.prototype.create_svg = function() {
var svg;
- svg = d3.select("#manhattan_plots").append("svg").attr("width", this.plot_width).attr("height", this.plot_height);
+ svg = d3.select("#manhattan_plots").append("svg").attr("class", "manhattan_plot").attr("width", this.plot_width + this.x_buffer).attr("height", this.plot_height + this.y_buffer);
return svg;
};
Manhattan_Plot.prototype.create_graph = function() {
this.add_border();
+ this.add_x_axis();
this.add_y_axis();
this.add_chr_lines();
+ this.fill_chr_areas();
+ this.add_chr_labels();
return this.add_plot_points();
};
@@ -135,15 +137,72 @@
};
Manhattan_Plot.prototype.create_scales = function() {
- console.log("plot_width is: ", this.plot_width);
this.x_scale = d3.scale.linear().domain([0, d3.max(this.x_coords)]).range([this.x_buffer, this.plot_width]);
return this.y_scale = d3.scale.linear().domain([0, this.y_max]).range([this.plot_height, this.y_buffer]);
};
+ Manhattan_Plot.prototype.create_x_axis_tick_values = function() {
+ var chr_ticks, i, length, tick, tick_count, tick_val, tick_vals, val, _i, _j, _k, _len, _ref, _ref1, _ref2;
+ tick_vals = [];
+ for (val = _i = 25, _ref = this.cumulative_chr_lengths[0]; 25 <= _ref ? _i <= _ref : _i >= _ref; val = 25 <= _ref ? ++_i : --_i) {
+ if (val % 25 === 0) {
+ tick_vals.push(val);
+ }
+ }
+ _ref1 = this.cumulative_chr_lengths;
+ for (i = _j = 0, _len = _ref1.length; _j < _len; i = ++_j) {
+ length = _ref1[i];
+ if (i === 0) {
+ continue;
+ }
+ chr_ticks = [];
+ tick_count = Math.floor(this.chr_lengths[i] / 25);
+ tick_val = parseInt(this.cumulative_chr_lengths[i - 1]);
+ for (tick = _k = 0, _ref2 = tick_count - 1; 0 <= _ref2 ? _k <= _ref2 : _k >= _ref2; tick = 0 <= _ref2 ? ++_k : --_k) {
+ tick_val += 25;
+ console.log("tick_val is:", tick_val);
+ chr_ticks.push(tick_val);
+ }
+ Array.prototype.push.apply(tick_vals, chr_ticks);
+ }
+ console.log("tick_vals:", tick_vals);
+ return tick_vals;
+ };
+
+ Manhattan_Plot.prototype.add_x_axis = function() {
+ var next_chr, tmp_tick_val, xAxis,
+ _this = this;
+ xAxis = d3.svg.axis().scale(this.x_scale).orient("bottom").tickValues(this.create_x_axis_tick_values());
+ next_chr = 1;
+ tmp_tick_val = 0;
+ xAxis.tickFormat(function(d) {
+ var next_chr_length, tick_val;
+ d3.format("d");
+ if (d < _this.cumulative_chr_lengths[0]) {
+ tick_val = d;
+ } else {
+ next_chr_length = _this.cumulative_chr_lengths[next_chr];
+ if (d > next_chr_length) {
+ next_chr += 1;
+ tmp_tick_val = 25;
+ tick_val = tmp_tick_val;
+ } else {
+ tmp_tick_val += 25;
+ tick_val = tmp_tick_val;
+ }
+ }
+ console.log("tick_val: ", tick_val);
+ return tick_val;
+ });
+ return this.svg.append("g").attr("class", "x_axis").attr("transform", "translate(0," + this.plot_height + ")").call(xAxis).selectAll("text").attr("text-anchor", "right").attr("dx", "-1.6em").attr("transform", function(d) {
+ return "translate(-12,0) rotate(-90)";
+ });
+ };
+
Manhattan_Plot.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", "axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(yAxis);
+ return this.svg.append("g").attr("class", "y_axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(yAxis);
};
Manhattan_Plot.prototype.add_chr_lines = function() {
@@ -153,17 +212,38 @@
}).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");
};
- Manhattan_Plot.prototype.add_chr_labels = function() {
+ Manhattan_Plot.prototype.fill_chr_areas = function() {
var _this = this;
- return this.svg.selectAll("text").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) {
- var chr, label_positions, _i, _len;
- label_positions = [];
- for (_i = 0, _len = d.length; _i < _len; _i++) {
- chr = d[_i];
- label_positions.push(chr[1] - chr[0] / 2);
+ return this.svg.selectAll("rect.chr_fill_area_1").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) {
+ return d;
+ }).enter().append("rect").attr("class", "chr_fill_area_1").attr("x", function(d, i) {
+ if (i === 0) {
+ return _this.x_scale(0);
+ } else {
+ return _this.x_scale(_this.cumulative_chr_lengths[i - 1]);
}
- return label_positions;
- }).enter().append("text");
+ }).attr("y", this.y_buffer).attr("width", function(d) {
+ return _this.x_scale(d[0]);
+ }).attr("height", this.plot_height - this.y_buffer);
+ };
+
+ Manhattan_Plot.prototype.add_chr_labels = function() {
+ var chr_info, chr_names, key,
+ _this = this;
+ chr_names = [];
+ for (key in this.chromosomes) {
+ chr_names.push(key);
+ }
+ chr_info = _.zip(chr_names, this.chr_lengths, this.cumulative_chr_lengths);
+ console.log("chr_info is", chr_info);
+ return this.svg.selectAll("text").data(chr_info, function(d) {
+ return d;
+ }).enter().append("text").text(function(d) {
+ console.log("d[0] is ", d[0]);
+ 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");
};
Manhattan_Plot.prototype.add_plot_points = function() {
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index fcc5aa52..bcf60abe 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -68,7 +68,7 @@
<!--[if lt IE 9]>
<script language="javascript" type="text/javascript" src="/static/packages/jqplot/excanvas.js"></script>
<![endif]-->
- <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
+ <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/jqplot/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
@@ -77,7 +77,6 @@
<script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/javascript/marker_regression.js"></script>
-
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 8d0dc586..87199e9f 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -1,5 +1,10 @@
{% extends "base.html" %}
{% block title %}Trait Data and Analysis{% endblock %}
+{% block css %}
+ <link rel="stylesheet" type="text/css" href="/static/new/css/marker_regression.css" />
+ <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
+ <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
+{% endblock %}
{% block content %} <!-- Start of body -->
<header class="jumbotron subhead" id="overview">
@@ -44,6 +49,7 @@
js_data = {{ js_data | safe }}
</script>
+ <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="/static/new/js_external/underscore-min.js"></script>-->
<script type="text/javascript" src="/static/new/js_external/underscore.string.min.js"></script>
<script type="text/javascript" src="/static/new/packages/ValidationPlugin/dist/jquery.validate.min.js"></script>
diff --git a/wqflask/wqflask/templates/show_trait_progress_bar.html b/wqflask/wqflask/templates/show_trait_progress_bar.html
new file mode 100644
index 00000000..a7ee2195
--- /dev/null
+++ b/wqflask/wqflask/templates/show_trait_progress_bar.html
@@ -0,0 +1,10 @@
+<div id="progress_bar_container" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="progress_bar" aria-hidden="true">
+ <div class="modal-header">
+ <h3 id="progress_bar">Loading...</h3>
+ </div>
+ <div class="modal-body">
+ <div class="progress progress-striped active">
+ <div class="bar" style="width: 100%;"></div>
+ </div>
+ </div>
+</div> \ No newline at end of file