diff options
4 files changed, 48 insertions, 45 deletions
diff --git a/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee b/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee index 173f8186..7fec4836 100644 --- a/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee +++ b/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee @@ -5,7 +5,7 @@ class Chr_Lod_Chart @qtl_results = js_data.qtl_results
console.log("qtl_results are:", @qtl_results)
console.log("chr is:", @chr)
-
+
@get_max_chr()
@filter_qtl_results()
@@ -21,16 +21,16 @@ class Chr_Lod_Chart console.log("@x_coords: ", @x_coords)
console.log("@y_coords: ", @y_coords)
console.timeEnd('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)
@y_max = d3.max(@y_coords) * 1.2
-
+
@y_threshold = @get_lod_threshold()
-
+
@svg = @create_svg()
@plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names)
@@ -43,14 +43,14 @@ class Chr_Lod_Chart console.time('Create graph')
@create_graph()
console.timeEnd('Create graph')
-
+
get_max_chr: () ->
@max_chr = 0
for key of js_data.chromosomes
console.log("key is:", key)
if parseInt(key) > @max_chr
@max_chr = parseInt(key)
-
+
filter_qtl_results: () ->
@these_results = []
this_chr = 100
@@ -59,8 +59,8 @@ class Chr_Lod_Chart this_chr = @max_chr
else
this_chr = result.chr
- console.log("this_chr is:", this_chr)
- console.log("@chr[0] is:", parseInt(@chr[0]))
+ # console.log("this_chr is:", this_chr)
+ # console.log("@chr[0] is:", parseInt(@chr[0]))
if this_chr > parseInt(@chr[0])
break
if parseInt(this_chr) == parseInt(@chr[0])
@@ -72,7 +72,7 @@ class Chr_Lod_Chart if result.lod_score > 1
high_qtl_count += 1
console.log("high_qtl_count:", high_qtl_count)
-
+
#if high_qtl_count > 10000
@y_axis_filter = 2
#else if high_qtl_count > 1000
@@ -85,7 +85,7 @@ class Chr_Lod_Chart @x_coords.push(parseFloat(result.Mb))
@y_coords.push(result.lod_score)
@marker_names.push(result.name)
-
+
create_svg: () ->
svg = d3.select("#topchart")
.append("svg")
@@ -102,7 +102,7 @@ class Chr_Lod_Chart @y_scale = d3.scale.linear()
.domain([0, @y_max])
.range([@plot_height, @y_buffer])
-
+
get_lod_threshold: () ->
if @y_max/2 > 2
return @y_max/2
@@ -125,7 +125,7 @@ class Chr_Lod_Chart [@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()
@@ -141,7 +141,7 @@ class Chr_Lod_Chart )
.attr("x2", (d) =>
return d[3]
- )
+ )
.style("stroke", "#000")
add_x_axis: () ->
@@ -166,13 +166,13 @@ class Chr_Lod_Chart .attr("transform", (d) =>
return "translate(-12,0) rotate(-90)"
)
-
+
add_y_axis: () ->
@yAxis = d3.svg.axis()
.scale(@y_scale)
.orient("left")
.ticks(5)
-
+
@svg.append("g")
.attr("class", "y_axis")
.attr("transform", "translate(" + @x_buffer + ",0)")
@@ -200,7 +200,7 @@ class Chr_Lod_Chart .x( (d) => return @x_scale(d[0]))
.y( (d) => return @y_scale(d[1]))
.interpolate("linear")
-
+
line_graph = @svg.append("path")
.attr("d", line_function(@plot_coordinates))
.attr("stroke", "blue")
diff --git a/wqflask/wqflask/static/new/javascript/create_lodchart.coffee b/wqflask/wqflask/static/new/javascript/create_lodchart.coffee index 88003f4e..f6dfd7a3 100644 --- a/wqflask/wqflask/static/new/javascript/create_lodchart.coffee +++ b/wqflask/wqflask/static/new/javascript/create_lodchart.coffee @@ -9,9 +9,9 @@ create_lod_chart = -> additive = js_data.additive else additive = false - + console.log("js_data:", js_data) - + # simplest use #d3.json "data.json", (data) -> mychart = lodchart().lodvarname("lod.hk") @@ -21,13 +21,13 @@ create_lod_chart = -> .ylab(js_data.result_score_type + " score") .manhattanPlot(js_data.manhattan_plot) #.additive(additive) - + data = js_data.json_data - + d3.select("div#topchart") .datum(data) .call(mychart) - + # grab chromosome rectangles; color pink on hover chrrect = mychart.chrSelect() chrrect.on "mouseover", -> @@ -36,7 +36,7 @@ create_lod_chart = -> d3.select(this).attr("fill", -> return "#F1F1F9" if i % 2 "#FBFBFF") - + # animate points at markers on click mychart.markerSelect() .on "click", (d) -> @@ -44,7 +44,3 @@ create_lod_chart = -> d3.select(this) .transition().duration(500).attr("r", r*3) .transition().duration(500).attr("r", r) - -$ -> - root.create_lod_chart = create_lod_chart - diff --git a/wqflask/wqflask/static/new/javascript/create_lodchart.js b/wqflask/wqflask/static/new/javascript/create_lodchart.js index 778eed3a..d2c531f9 100644 --- a/wqflask/wqflask/static/new/javascript/create_lodchart.js +++ b/wqflask/wqflask/static/new/javascript/create_lodchart.js @@ -1,4 +1,5 @@ -//var create_lod_chart; +// Generated by CoffeeScript 1.10.0 +var create_lod_chart; create_lod_chart = function() { var additive, chrrect, data, h, halfh, margin, mychart, totalh, totalw, w; @@ -40,11 +41,3 @@ create_lod_chart = function() { return d3.select(this).transition().duration(500).attr("r", r * 3).transition().duration(500).attr("r", r); }); }; - -create_lod_chart() - -/* -$(function() { - return root.create_lod_chart = create_lod_chart; -}); -*/
\ No newline at end of file diff --git a/wqflask/wqflask/templates/marker_regression_gn1.html b/wqflask/wqflask/templates/marker_regression_gn1.html index a1cf6623..e83a8cec 100644 --- a/wqflask/wqflask/templates/marker_regression_gn1.html +++ b/wqflask/wqflask/templates/marker_regression_gn1.html @@ -262,8 +262,8 @@ {% block js %} <script> - <!-- This section checks for paths to JS libraries by - checking the headers --> + /* This section checks for paths to JS libraries by + checking the headers */ list = [ "/static/new/javascript/biodalliance.js", "http://d3js.org/d3.v3.min.js", @@ -300,9 +300,6 @@ <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script> - <script> - js_data = {{ js_data | safe }} - </script> {% if mapping_method != "gemma" %} <script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.js"></script> @@ -314,10 +311,8 @@ <script language="javascript" type="text/javascript" src="/static/new/javascript/biodalliance.js"></script> {% endif %} - <script type="text/javascript" charset="utf-8"> - $(document).ready( function () { - BD.putData({species: "{{ dataset.group.species }}" }); - + <script> + createTable = function() { console.time("Creating table"); $('#qtl_results').dataTable( { "columns": [ @@ -355,6 +350,25 @@ "bSortClasses": false, "paging": false } ); + }; + + filename = "{{json_filename}}"; + js_data = null; + $.ajax("/generated_text/{{json_filename}}", + {success: + function(data) { + js_data = data; + create_lod_chart(); + createTable(); + } + }); + </script> + + + <script type="text/javascript" charset="utf-8"> + $(document).ready( function () { + BD.putData({species: "{{ dataset.group.species }}" }); + $('#vector_map_tab').click(function(){ $('div#gn1_map_options').hide(); |