diff options
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 |