Created y-axis

Split create_graph into many functions

Added a buffer to the x and y dimensions in order to add
tick labels for the x and y axis

4 files changed, 168 insertions, 126 deletions

diff --git a/wqflask/wqflask/search_results.py b/wqflask/wqflask/search_results.py
index d20d7d89..fb8e0921 100644
--- a/wqflask/wqflask/search_results.py
+++ b/wqflask/wqflask/search_results.py
@@ -41,16 +41,6 @@ class SearchResultPage():
 
 
     def __init__(self, kw):
-        print("initing SearchResultPage")
-        #import logging_tree
-        #logging_tree.printout()
-        #self.fd = fd
-        #templatePage.__init__(self, fd)
-        #assert self.openMysql(), "Couldn't open MySQL"
-
-        # change back to self.dataset
-        #if not self.dataset or self.dataset == 'spacer':
-        #    #Error, No dataset selected
 
         ###########################################
         #   Names and IDs of group / F2 set
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index b7d3c179..4c67c5a5 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -3,25 +3,28 @@ $ ->
         constructor: (@plot_height, @plot_width) ->
             @qtl_results = js_data.qtl_results
             @chromosomes = js_data.chromosomes
-            
-            #@plot_height = 500
-            #@plot_width = 100 
+
             @total_length = 0
             
             @max_chr = @get_max_chr()
             @scaled_chr_lengths = @get_chr_lengths()
-            console.log("scaled_chr_lengths is", @scaled_chr_lengths)
 
             @x_coords = []
             @y_coords = []
-            @marker_names = []
-            @get_coordinates()
+            @marker_names = []    
+            @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)
-            console.log("x_max is:", @x_max)
-            @y_max = d3.max(@y_coords) 
+            @y_max = d3.max(@y_coords) * 1.2
 
+            @svg = @create_svg()
             @plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names)
+            @plot_height = @plot_height - @y_buffer
+            @create_scales()
             @create_graph()
 
 
@@ -41,7 +44,7 @@ $ ->
             lines separating chromosomes (the position of one on the graph is its own length
             plus the lengths of all preceding chromosomes)
             
-            ### 
+            ###
             
             cumulative_chr_lengths = []
             total_length = 0
@@ -49,15 +52,10 @@ $ ->
                 this_length = @chromosomes[key]
                 cumulative_chr_lengths.push(total_length + this_length)
                 total_length += this_length
-                
-            console.log("@plot_width:", @plot_width)
-            console.log("lengths:", cumulative_chr_lengths)
-            console.log("total_length:", total_length)
-            
-            #scaled_chr_lengths = (@plot_width * (x/total_length) for x in cumulative_chr_lengths)
+
             return cumulative_chr_lengths
 
-        get_coordinates: () -> 
+        create_coordinates: () -> 
             chr_lengths = []
             chr_seen = []
             for result in js_data.qtl_results
@@ -74,44 +72,99 @@ $ ->
 
             console.log("chr_lengths are:", chr_lengths)
 
+        show_marker_in_table: (marker_info) ->
+            ### Searches for the select marker in the results table below ###
+            if marker_info
+                marker_name = marker_info[2]
+            else
+                marker_name = ""
+            $("#qtl_results_filter").find("input:first").val(marker_name).keyup()
+            
+        #unselect_marker: () ->
+        #    $("#qtl_results_filter").find("input:first").val("").keyup()
 
-        display_info: (d) -> 
-            $("#qtl_results_filter").find("input:first").val(d[2]).keyup()
+        create_svg: () ->
+            svg = d3.select("#manhattan_plots")
+                .append("svg")
+                .attr("width", @plot_width)
+                .attr("height", @plot_height)
             
-        undisplay_info: () ->
-            $("#qtl_results_filter").find("input:first").val("").keyup()
+            return svg
+
+        create_scales: () ->
+            @x_scale = d3.scale.linear()
+                .domain([0, @x_max])
+                .range([@x_buffer, @plot_width])
+
+            @y_scale = d3.scale.linear()
+                .domain([0, @y_max])
+                .range([@plot_height, @y_buffer])
 
         create_graph: () ->
-            svg = d3.select("#manhattan_plots")
-                        .append("svg")
-                        .style('border', '2px solid black')
-                        .attr("width", @plot_width)
-                        .attr("height", @plot_height)
-        
-            #svg.selectAll("text")
-            #    .data(@plot_coordinates);
-            #    .enter()
-            #    .append("text")
-            #    .attr("x", (d) =>
-            #        return (@plot_width * d[0]/@x_max)
-            #    )
-            #    .attr("y", (d) =>
-            #        return @plot_height - ((0.8*@plot_height) * d[1]/@y_max)
-            #    )
-            #    .text((d) => d[2])
-            #    .attr("font-family", "sans-serif")
-            #    .attr("font-size", "12px")
-            #    .attr("fill", "black");
+            @add_border()
+            @add_y_axis()
+            @add_chr_lines()
+            @add_plot_points()
+
+        add_border: () ->
+            border_coords = [[@y_buffer, @plot_height, @x_buffer, @x_buffer],
+                             [@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()
+                .append("line")
+                .attr("y1", (d) =>
+                    return d[0]
+                )
+                .attr("y2", (d) =>
+                    return d[1]
+                )
+                .attr("x1", (d) =>
+                    return d[2]
+                )
+                .attr("x2", (d) =>
+                    return d[3]
+                )             
+                .style("stroke", "#000")
+
+        add_y_axis: () ->
+            yAxis = d3.svg.axis()
+                    .scale(@y_scale)
+                    .orient("left")
+                    .ticks(5)
             
-            svg.selectAll("circle")
+            @svg.append("g")
+                .attr("class", "axis")
+                .attr("transform", "translate(" + @x_buffer + ",0)")
+                .call(yAxis)
+
+        add_chr_lines: () ->
+            @svg.selectAll("line")
+                .data(@scaled_chr_lengths, (d) =>
+                    return d
+                )
+                .enter()
+                .append("line")
+                .attr("x1", @x_scale)
+                .attr("x2", @x_scale)
+                .attr("y1", @y_buffer)
+                .attr("y2", @plot_height)
+                .style("stroke", "#ccc")
+                
+
+        add_plot_points: () ->
+            @svg.selectAll("circle")
                 .data(@plot_coordinates)
                 .enter()
                 .append("circle")
                 .attr("cx", (d) =>
-                    return (@plot_width * d[0]/@x_max)
+                    return @x_buffer + (@plot_width * d[0]/@x_max)
                 )
                 .attr("cy", (d) =>
-                    return @plot_height - ((0.8*@plot_height) * d[1]/@y_max)
+                    return @plot_height - ((@plot_height) * d[1]/@y_max)
                 )
                 .attr("r", 2)
                 .classed("circle", true)
@@ -119,60 +172,13 @@ $ ->
                     d3.select(d3.event.target).classed("d3_highlight", true)
                         .attr("r", 5)
                         .attr("fill", "yellow")
-                        .call(@display_info(d))
+                        .call(@show_marker_in_table(d))
                 )
                 .on("mouseout", () =>
                     d3.select(d3.event.target).classed("d3_highlight", false)
                         .attr("r", 2)
                         .attr("fill", "black")
-                        .call(@undisplay_info())
+                        .call(@show_marker_in_table())
                 )
-                .attr("title", "foobar")
-                
-                        #.append("svg:text")
-                        #.text("test")
-                        #.attr("dx", 12)
-                        #.attr("dy", ".35em")
-                        #.attr("font-family", "sans-serif")
-                        #.attr("font-size", "11px")
-                        #.attr("fill", "red")
-                        #.attr("x", @plot_width * d[0]/@x_max)
-                        #.attr("y", @plot_height - ((0.8*@plot_height) * d[1]/@y_max))                 
-
-                        
-                    #d3.select(this).enter().append("svg:text") 
-                    #                .text("test") 
-                    #                .attr("x", function(d, i) { return i; } ) 
-                    #                .attr("y", function(d) { return -1 * d; }) 
-                    #                          }) 
-                        #.attr("font-family", "sans-serif")
-                        #.attr("font-size", "11px")
-                        #.attr("fill", "red")
-                        #.text(d[1])
-                        #.attr("x", @plot_width * d[0]/@x_max)
-                        #.attr("y", @plot_height - ((0.8*@plot_height) * d[1]/@y_max))
-                        #.attr("font-family", "sans-serif")
-                        #.attr("font-size", "11px")
-                        #.attr("fill", "red")              
-                
-
-
-            x = d3.scale.linear()
-                .domain([0, @x_max])
-                .range([0, @plot_width])
-                
-            y = d3.scale.linear()
-                .domain([0, @y_max])
-                .range([0, @plot_height])
-                
-            svg.selectAll("line")
-                .data(@scaled_chr_lengths)
-                .enter()
-                .append("line")
-                .attr("x1", x)
-                .attr("x2", x)
-                .attr("y1", 0)
-                .attr("y2", @plot_height)
-                .style("stroke", "#ccc")
 
     new Manhattan_Plot(600, 1200)
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index 65aee69a..8b99b28f 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -14,15 +14,18 @@
         this.total_length = 0;
         this.max_chr = this.get_max_chr();
         this.scaled_chr_lengths = this.get_chr_lengths();
-        console.log("scaled_chr_lengths is", this.scaled_chr_lengths);
         this.x_coords = [];
         this.y_coords = [];
         this.marker_names = [];
-        this.get_coordinates();
+        this.create_coordinates();
+        this.x_buffer = this.plot_width / 30;
+        this.y_buffer = this.plot_height / 20;
         this.x_max = d3.max(this.x_coords);
-        console.log("x_max is:", this.x_max);
-        this.y_max = d3.max(this.y_coords);
+        this.y_max = d3.max(this.y_coords) * 1.2;
+        this.svg = this.create_svg();
         this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names);
+        this.plot_height = this.plot_height - this.y_buffer;
+        this.create_scales();
         this.create_graph();
       }
 
@@ -58,13 +61,10 @@
           cumulative_chr_lengths.push(total_length + this_length);
           total_length += this_length;
         }
-        console.log("@plot_width:", this.plot_width);
-        console.log("lengths:", cumulative_chr_lengths);
-        console.log("total_length:", total_length);
         return cumulative_chr_lengths;
       };
 
-      Manhattan_Plot.prototype.get_coordinates = function() {
+      Manhattan_Plot.prototype.create_coordinates = function() {
         var chr_length, chr_lengths, chr_seen, result, _i, _len, _ref, _ref1;
         chr_lengths = [];
         chr_seen = [];
@@ -87,30 +87,76 @@
         return console.log("chr_lengths are:", chr_lengths);
       };
 
-      Manhattan_Plot.prototype.display_info = function(d) {
-        return $("#qtl_results_filter").find("input:first").val(d[2]).keyup();
+      Manhattan_Plot.prototype.show_marker_in_table = function(marker_info) {
+        /* Searches for the select marker in the results table below
+        */
+
+        var marker_name;
+        if (marker_info) {
+          marker_name = marker_info[2];
+        } else {
+          marker_name = "";
+        }
+        return $("#qtl_results_filter").find("input:first").val(marker_name).keyup();
       };
 
-      Manhattan_Plot.prototype.undisplay_info = function() {
-        return $("#qtl_results_filter").find("input:first").val("").keyup();
+      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);
+        return svg;
+      };
+
+      Manhattan_Plot.prototype.create_scales = function() {
+        this.x_scale = d3.scale.linear().domain([0, this.x_max]).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_graph = function() {
-        var svg, x, y,
+        this.add_border();
+        this.add_y_axis();
+        this.add_chr_lines();
+        return this.add_plot_points();
+      };
+
+      Manhattan_Plot.prototype.add_border = function() {
+        var border_coords,
           _this = this;
-        svg = d3.select("#manhattan_plots").append("svg").style('border', '2px solid black').attr("width", this.plot_width).attr("height", this.plot_height);
-        svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) {
-          return _this.plot_width * d[0] / _this.x_max;
+        border_coords = [[this.y_buffer, this.plot_height, this.x_buffer, this.x_buffer], [this.y_buffer, this.plot_height, this.plot_width, this.plot_width], [this.y_buffer, this.y_buffer, this.x_buffer, this.plot_width], [this.plot_height, this.plot_height, this.x_buffer, this.plot_width]];
+        return this.svg.selectAll("line").data(border_coords).enter().append("line").attr("y1", function(d) {
+          return d[0];
+        }).attr("y2", function(d) {
+          return d[1];
+        }).attr("x1", function(d) {
+          return d[2];
+        }).attr("x2", function(d) {
+          return d[3];
+        }).style("stroke", "#000");
+      };
+
+      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);
+      };
+
+      Manhattan_Plot.prototype.add_chr_lines = function() {
+        var _this = this;
+        return this.svg.selectAll("line").data(this.scaled_chr_lengths, function(d) {
+          return d;
+        }).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_plot_points = function() {
+        var _this = this;
+        return this.svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) {
+          return _this.x_buffer + (_this.plot_width * d[0] / _this.x_max);
         }).attr("cy", function(d) {
-          return _this.plot_height - ((0.8 * _this.plot_height) * d[1] / _this.y_max);
+          return _this.plot_height - (_this.plot_height * d[1] / _this.y_max);
         }).attr("r", 2).classed("circle", true).on("mouseover", function(d) {
-          return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.display_info(d));
+          return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d));
         }).on("mouseout", function() {
-          return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black").call(_this.undisplay_info());
-        }).attr("title", "foobar");
-        x = d3.scale.linear().domain([0, this.x_max]).range([0, this.plot_width]);
-        y = d3.scale.linear().domain([0, this.y_max]).range([0, this.plot_height]);
-        return svg.selectAll("line").data(this.scaled_chr_lengths).enter().append("line").attr("x1", x).attr("x2", x).attr("y1", 0).attr("y2", this.plot_height).style("stroke", "#ccc");
+          return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black").call(_this.show_marker_in_table());
+        });
       };
 
       return Manhattan_Plot;
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index ffd1033e..fcc5aa52 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -35,7 +35,7 @@
             <thead>
                 <tr>
                     <td>Index</td>
-                    <td>LRS</td>
+                    <td>LOD Score</td>
                     <td>Chr</td>
                     <td>Mb</td>
                     <td>Locus</td>