Edited marker_regression.coffee to make every sub-manhattan plot

for each chromosome display

Created css file for the marker_regression page

Currently has display issue where the permutation histogram is
overlapping with the manhattan plot

4 files changed, 35 insertions, 18 deletions

diff --git a/wqflask/wqflask/static/new/css/marker_regression.css b/wqflask/wqflask/static/new/css/marker_regression.css
new file mode 100644
index 00000000..a0bdc159
--- /dev/null
+++ b/wqflask/wqflask/static/new/css/marker_regression.css
@@ -0,0 +1,7 @@
+.manhattan_plot_segment
+{
+    height:400px;
+    width:150px;
+    float: right;
+    clear: none;
+}
\ 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 2f653f98..3483f7eb 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -83,13 +83,16 @@ $ ->
             @plot_points.push([mb, lrs])
             
         display_graph: ->
+            div_name = 'manhattan_plot_' + @name
+            console.log("div_name:", div_name)
+        
             x_axis_max = Math.ceil(@max_mb/25) * 25
             x_axis_ticks = []
             x_tick = 0
             while (x_tick <= x_axis_max)
                 x_axis_ticks.push(x_tick)
                 x_tick += 25
-            $.jqplot('manhattan_plot',  [@plot_points],
+            $.jqplot(div_name,  [@plot_points],
                 title: @name
                 seriesDefaults:
                     showLine: false
@@ -116,11 +119,7 @@ $ ->
                         tickOptions:
                             showGridline: false
             )
-            
-        
-            
-        
-    
+
     class Manhattan_Plot
         constructor: ->
             @chromosomes = {}   # Hash of chromosomes
@@ -141,7 +140,7 @@ $ ->
                  
                     #if mb > @max_mb
                     #    @max_mb = mb
-                    #@plot_points.push([mb, result.lrs])                    
+                    #@plot_points.push([mb, result.lrs])
         
         display_graphs: ->
             ### Call display_graph for each chromosome ###
@@ -157,11 +156,14 @@ $ ->
         
             numbered_keys.sort(sort_number)
             extra_keys.sort()
-            keys = numbered_keys + extra_keys
+            keys = numbered_keys.concat(extra_keys)
             console.log("keys are:", keys)
             
-            for chromosome in key
-                @chromosomes[chromosome].display_graph()
+            for key in keys
+                html = """<div id="manhattan_plot_#{ key }" class="manhattan_plot_segment"></div>"""
+                console.log("html is:", html)
+                $("#manhattan_plots").append(html)
+                @chromosomes[key].display_graph()
             
             
             
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index 7553721c..0844cc12 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -88,7 +88,9 @@
       };
 
       Chromosome.prototype.display_graph = function() {
-        var x_axis_max, x_axis_ticks, x_tick;
+        var div_name, x_axis_max, x_axis_ticks, x_tick;
+        div_name = 'manhattan_plot_' + this.name;
+        console.log("div_name:", div_name);
         x_axis_max = Math.ceil(this.max_mb / 25) * 25;
         x_axis_ticks = [];
         x_tick = 0;
@@ -96,7 +98,7 @@
           x_axis_ticks.push(x_tick);
           x_tick += 25;
         }
-        return $.jqplot('manhattan_plot', [this.plot_points], {
+        return $.jqplot(div_name, [this.plot_points], {
           title: this.name,
           seriesDefaults: {
             showLine: false,
@@ -164,7 +166,7 @@
         /* Call display_graph for each chromosome
         */
 
-        var chromosome, extra_keys, key, keys, numbered_keys, _i, _len, _results;
+        var extra_keys, html, key, keys, numbered_keys, _i, _len, _results;
         numbered_keys = [];
         extra_keys = [];
         for (key in this.chromosomes) {
@@ -176,12 +178,15 @@
         }
         numbered_keys.sort(sort_number);
         extra_keys.sort();
-        keys = numbered_keys + extra_keys;
+        keys = numbered_keys.concat(extra_keys);
         console.log("keys are:", keys);
         _results = [];
-        for (_i = 0, _len = key.length; _i < _len; _i++) {
-          chromosome = key[_i];
-          _results.push(this.chromosomes[chromosome].display_graph());
+        for (_i = 0, _len = keys.length; _i < _len; _i++) {
+          key = keys[_i];
+          html = "<div id=\"manhattan_plot_" + key + "\" class=\"manhattan_plot_segment\"></div>";
+          console.log("html is:", html);
+          $("#manhattan_plots").append(html);
+          _results.push(this.chromosomes[key].display_graph());
         }
         return _results;
       };
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index 68effbd5..b052d4a3 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -2,6 +2,7 @@
 {% block title %}Marker Regression{% endblock %}
 {% block css %}
     <link rel="stylesheet" type="text/css" href="/static/packages/jqplot/jquery.jqplot.min.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/marker_regression.css" />
 {% endblock %}
 {% block content %} <!-- Start of body -->
 
@@ -14,7 +15,9 @@
         </div>
     </header>
     
-    <div id="manhattan_plot" style="height:400px;width:150px; "></div>
+    <!--<div id="manhattan_plot_1" style="height:400px;width:150px; "></div>-->
+    <div id="manhattan_plots"></div>
+    
     <div id="permutation_histogram" style="height:400px;width:900px; "></div>