aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--wqflask/wqflask/search_results.py10
-rw-r--r--wqflask/wqflask/static/new/javascript/marker_regression.coffee190
-rw-r--r--wqflask/wqflask/static/new/javascript/marker_regression.js92
-rw-r--r--wqflask/wqflask/templates/marker_regression.html2
4 files changed, 168 insertions, 126 deletions
diff --git a/wqflask/wqflask/search_results.py b/wqflask/wqflask/search_results.py
index d20d7d89..fb8e0921 100644
--- a/wqflask/wqflask/search_results.py
+++ b/wqflask/wqflask/search_results.py
@@ -41,16 +41,6 @@ class SearchResultPage():
def __init__(self, kw):
- print("initing SearchResultPage")
- #import logging_tree
- #logging_tree.printout()
- #self.fd = fd
- #templatePage.__init__(self, fd)
- #assert self.openMysql(), "Couldn't open MySQL"
-
- # change back to self.dataset
- #if not self.dataset or self.dataset == 'spacer':
- # #Error, No dataset selected
###########################################
# Names and IDs of group / F2 set
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index b7d3c179..4c67c5a5 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -3,25 +3,28 @@ $ ->
constructor: (@plot_height, @plot_width) ->
@qtl_results = js_data.qtl_results
@chromosomes = js_data.chromosomes
-
- #@plot_height = 500
- #@plot_width = 100
+
@total_length = 0
@max_chr = @get_max_chr()
@scaled_chr_lengths = @get_chr_lengths()
- console.log("scaled_chr_lengths is", @scaled_chr_lengths)
@x_coords = []
@y_coords = []
- @marker_names = []
- @get_coordinates()
+ @marker_names = []
+ @create_coordinates()
+ # Buffer to allow for the ticks/labels to be drawn
+ @x_buffer = @plot_width/30
+ @y_buffer = @plot_height/20
+
@x_max = d3.max(@x_coords)
- console.log("x_max is:", @x_max)
- @y_max = d3.max(@y_coords)
+ @y_max = d3.max(@y_coords) * 1.2
+ @svg = @create_svg()
@plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names)
+ @plot_height = @plot_height - @y_buffer
+ @create_scales()
@create_graph()
@@ -41,7 +44,7 @@ $ ->
lines separating chromosomes (the position of one on the graph is its own length
plus the lengths of all preceding chromosomes)
- ###
+ ###
cumulative_chr_lengths = []
total_length = 0
@@ -49,15 +52,10 @@ $ ->
this_length = @chromosomes[key]
cumulative_chr_lengths.push(total_length + this_length)
total_length += this_length
-
- console.log("@plot_width:", @plot_width)
- console.log("lengths:", cumulative_chr_lengths)
- console.log("total_length:", total_length)
-
- #scaled_chr_lengths = (@plot_width * (x/total_length) for x in cumulative_chr_lengths)
+
return cumulative_chr_lengths
- get_coordinates: () ->
+ create_coordinates: () ->
chr_lengths = []
chr_seen = []
for result in js_data.qtl_results
@@ -74,44 +72,99 @@ $ ->
console.log("chr_lengths are:", chr_lengths)
+ show_marker_in_table: (marker_info) ->
+ ### Searches for the select marker in the results table below ###
+ if marker_info
+ marker_name = marker_info[2]
+ else
+ marker_name = ""
+ $("#qtl_results_filter").find("input:first").val(marker_name).keyup()
+
+ #unselect_marker: () ->
+ # $("#qtl_results_filter").find("input:first").val("").keyup()
- display_info: (d) ->
- $("#qtl_results_filter").find("input:first").val(d[2]).keyup()
+ create_svg: () ->
+ svg = d3.select("#manhattan_plots")
+ .append("svg")
+ .attr("width", @plot_width)
+ .attr("height", @plot_height)
- undisplay_info: () ->
- $("#qtl_results_filter").find("input:first").val("").keyup()
+ return svg
+
+ create_scales: () ->
+ @x_scale = d3.scale.linear()
+ .domain([0, @x_max])
+ .range([@x_buffer, @plot_width])
+
+ @y_scale = d3.scale.linear()
+ .domain([0, @y_max])
+ .range([@plot_height, @y_buffer])
create_graph: () ->
- svg = d3.select("#manhattan_plots")
- .append("svg")
- .style('border', '2px solid black')
- .attr("width", @plot_width)
- .attr("height", @plot_height)
-
- #svg.selectAll("text")
- # .data(@plot_coordinates);
- # .enter()
- # .append("text")
- # .attr("x", (d) =>
- # return (@plot_width * d[0]/@x_max)
- # )
- # .attr("y", (d) =>
- # return @plot_height - ((0.8*@plot_height) * d[1]/@y_max)
- # )
- # .text((d) => d[2])
- # .attr("font-family", "sans-serif")
- # .attr("font-size", "12px")
- # .attr("fill", "black");
+ @add_border()
+ @add_y_axis()
+ @add_chr_lines()
+ @add_plot_points()
+
+ add_border: () ->
+ border_coords = [[@y_buffer, @plot_height, @x_buffer, @x_buffer],
+ [@y_buffer, @plot_height, @plot_width, @plot_width],
+ [@y_buffer, @y_buffer, @x_buffer, @plot_width],
+ [@plot_height, @plot_height, @x_buffer, @plot_width]]
+
+ @svg.selectAll("line")
+ .data(border_coords)
+ .enter()
+ .append("line")
+ .attr("y1", (d) =>
+ return d[0]
+ )
+ .attr("y2", (d) =>
+ return d[1]
+ )
+ .attr("x1", (d) =>
+ return d[2]
+ )
+ .attr("x2", (d) =>
+ return d[3]
+ )
+ .style("stroke", "#000")
+
+ add_y_axis: () ->
+ yAxis = d3.svg.axis()
+ .scale(@y_scale)
+ .orient("left")
+ .ticks(5)
- svg.selectAll("circle")
+ @svg.append("g")
+ .attr("class", "axis")
+ .attr("transform", "translate(" + @x_buffer + ",0)")
+ .call(yAxis)
+
+ add_chr_lines: () ->
+ @svg.selectAll("line")
+ .data(@scaled_chr_lengths, (d) =>
+ return d
+ )
+ .enter()
+ .append("line")
+ .attr("x1", @x_scale)
+ .attr("x2", @x_scale)
+ .attr("y1", @y_buffer)
+ .attr("y2", @plot_height)
+ .style("stroke", "#ccc")
+
+
+ add_plot_points: () ->
+ @svg.selectAll("circle")
.data(@plot_coordinates)
.enter()
.append("circle")
.attr("cx", (d) =>
- return (@plot_width * d[0]/@x_max)
+ return @x_buffer + (@plot_width * d[0]/@x_max)
)
.attr("cy", (d) =>
- return @plot_height - ((0.8*@plot_height) * d[1]/@y_max)
+ return @plot_height - ((@plot_height) * d[1]/@y_max)
)
.attr("r", 2)
.classed("circle", true)
@@ -119,60 +172,13 @@ $ ->
d3.select(d3.event.target).classed("d3_highlight", true)
.attr("r", 5)
.attr("fill", "yellow")
- .call(@display_info(d))
+ .call(@show_marker_in_table(d))
)
.on("mouseout", () =>
d3.select(d3.event.target).classed("d3_highlight", false)
.attr("r", 2)
.attr("fill", "black")
- .call(@undisplay_info())
+ .call(@show_marker_in_table())
)
- .attr("title", "foobar")
-
- #.append("svg:text")
- #.text("test")
- #.attr("dx", 12)
- #.attr("dy", ".35em")
- #.attr("font-family", "sans-serif")
- #.attr("font-size", "11px")
- #.attr("fill", "red")
- #.attr("x", @plot_width * d[0]/@x_max)
- #.attr("y", @plot_height - ((0.8*@plot_height) * d[1]/@y_max))
-
-
- #d3.select(this).enter().append("svg:text")
- # .text("test")
- # .attr("x", function(d, i) { return i; } )
- # .attr("y", function(d) { return -1 * d; })
- # })
- #.attr("font-family", "sans-serif")
- #.attr("font-size", "11px")
- #.attr("fill", "red")
- #.text(d[1])
- #.attr("x", @plot_width * d[0]/@x_max)
- #.attr("y", @plot_height - ((0.8*@plot_height) * d[1]/@y_max))
- #.attr("font-family", "sans-serif")
- #.attr("font-size", "11px")
- #.attr("fill", "red")
-
-
-
- x = d3.scale.linear()
- .domain([0, @x_max])
- .range([0, @plot_width])
-
- y = d3.scale.linear()
- .domain([0, @y_max])
- .range([0, @plot_height])
-
- svg.selectAll("line")
- .data(@scaled_chr_lengths)
- .enter()
- .append("line")
- .attr("x1", x)
- .attr("x2", x)
- .attr("y1", 0)
- .attr("y2", @plot_height)
- .style("stroke", "#ccc")
new Manhattan_Plot(600, 1200)
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index 65aee69a..8b99b28f 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -14,15 +14,18 @@
this.total_length = 0;
this.max_chr = this.get_max_chr();
this.scaled_chr_lengths = this.get_chr_lengths();
- console.log("scaled_chr_lengths is", this.scaled_chr_lengths);
this.x_coords = [];
this.y_coords = [];
this.marker_names = [];
- this.get_coordinates();
+ this.create_coordinates();
+ this.x_buffer = this.plot_width / 30;
+ this.y_buffer = this.plot_height / 20;
this.x_max = d3.max(this.x_coords);
- console.log("x_max is:", this.x_max);
- this.y_max = d3.max(this.y_coords);
+ this.y_max = d3.max(this.y_coords) * 1.2;
+ this.svg = this.create_svg();
this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names);
+ this.plot_height = this.plot_height - this.y_buffer;
+ this.create_scales();
this.create_graph();
}
@@ -58,13 +61,10 @@
cumulative_chr_lengths.push(total_length + this_length);
total_length += this_length;
}
- console.log("@plot_width:", this.plot_width);
- console.log("lengths:", cumulative_chr_lengths);
- console.log("total_length:", total_length);
return cumulative_chr_lengths;
};
- Manhattan_Plot.prototype.get_coordinates = function() {
+ Manhattan_Plot.prototype.create_coordinates = function() {
var chr_length, chr_lengths, chr_seen, result, _i, _len, _ref, _ref1;
chr_lengths = [];
chr_seen = [];
@@ -87,30 +87,76 @@
return console.log("chr_lengths are:", chr_lengths);
};
- Manhattan_Plot.prototype.display_info = function(d) {
- return $("#qtl_results_filter").find("input:first").val(d[2]).keyup();
+ Manhattan_Plot.prototype.show_marker_in_table = function(marker_info) {
+ /* Searches for the select marker in the results table below
+ */
+
+ var marker_name;
+ if (marker_info) {
+ marker_name = marker_info[2];
+ } else {
+ marker_name = "";
+ }
+ return $("#qtl_results_filter").find("input:first").val(marker_name).keyup();
};
- Manhattan_Plot.prototype.undisplay_info = function() {
- return $("#qtl_results_filter").find("input:first").val("").keyup();
+ 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);
+ return svg;
+ };
+
+ Manhattan_Plot.prototype.create_scales = function() {
+ this.x_scale = d3.scale.linear().domain([0, this.x_max]).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_graph = function() {
- var svg, x, y,
+ this.add_border();
+ this.add_y_axis();
+ this.add_chr_lines();
+ return this.add_plot_points();
+ };
+
+ Manhattan_Plot.prototype.add_border = function() {
+ var border_coords,
_this = this;
- svg = d3.select("#manhattan_plots").append("svg").style('border', '2px solid black').attr("width", this.plot_width).attr("height", this.plot_height);
- svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) {
- return _this.plot_width * d[0] / _this.x_max;
+ border_coords = [[this.y_buffer, this.plot_height, this.x_buffer, this.x_buffer], [this.y_buffer, this.plot_height, this.plot_width, this.plot_width], [this.y_buffer, this.y_buffer, this.x_buffer, this.plot_width], [this.plot_height, this.plot_height, this.x_buffer, this.plot_width]];
+ return this.svg.selectAll("line").data(border_coords).enter().append("line").attr("y1", function(d) {
+ return d[0];
+ }).attr("y2", function(d) {
+ return d[1];
+ }).attr("x1", function(d) {
+ return d[2];
+ }).attr("x2", function(d) {
+ return d[3];
+ }).style("stroke", "#000");
+ };
+
+ 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);
+ };
+
+ Manhattan_Plot.prototype.add_chr_lines = function() {
+ var _this = this;
+ return this.svg.selectAll("line").data(this.scaled_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");
+ };
+
+ Manhattan_Plot.prototype.add_plot_points = function() {
+ var _this = this;
+ return this.svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) {
+ return _this.x_buffer + (_this.plot_width * d[0] / _this.x_max);
}).attr("cy", function(d) {
- return _this.plot_height - ((0.8 * _this.plot_height) * d[1] / _this.y_max);
+ return _this.plot_height - (_this.plot_height * d[1] / _this.y_max);
}).attr("r", 2).classed("circle", true).on("mouseover", function(d) {
- return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.display_info(d));
+ return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d));
}).on("mouseout", function() {
- return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black").call(_this.undisplay_info());
- }).attr("title", "foobar");
- x = d3.scale.linear().domain([0, this.x_max]).range([0, this.plot_width]);
- y = d3.scale.linear().domain([0, this.y_max]).range([0, this.plot_height]);
- return svg.selectAll("line").data(this.scaled_chr_lengths).enter().append("line").attr("x1", x).attr("x2", x).attr("y1", 0).attr("y2", this.plot_height).style("stroke", "#ccc");
+ return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black").call(_this.show_marker_in_table());
+ });
};
return Manhattan_Plot;
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index ffd1033e..fcc5aa52 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -35,7 +35,7 @@
<thead>
<tr>
<td>Index</td>
- <td>LRS</td>
+ <td>LOD Score</td>
<td>Chr</td>
<td>Mb</td>
<td>Locus</td>
generated by cgit v1.2.3 (git 2.44.0) at 2024-11-23 21:53:10 +0000