Use JSON served as file for marker_regression data

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();