From 5f1a06f531a2da78360bd121707d911b6e4abb88 Mon Sep 17 00:00:00 2001
From: christian
Date: Tue, 9 Aug 2016 16:55:35 +0200
Subject: Use JSON served as file for marker_regression data

---
 .../static/new/javascript/chr_lod_chart.coffee     | 34 +++++++++++-----------
 .../static/new/javascript/create_lodchart.coffee   | 16 ++++------
 .../static/new/javascript/create_lodchart.js       | 11 ++-----
 .../wqflask/templates/marker_regression_gn1.html   | 32 ++++++++++++++------
 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();
-- 
cgit v1.2.3