Chromosome labels on marker regression plot are centered

Tick marks are now correct and in intervals of 25 for each chromosome

6 files changed, 247 insertions, 46 deletions

diff --git a/wqflask/wqflask/static/new/css/marker_regression.css b/wqflask/wqflask/static/new/css/marker_regression.css
index 58da563c..82d7071c 100644
--- a/wqflask/wqflask/static/new/css/marker_regression.css
+++ b/wqflask/wqflask/static/new/css/marker_regression.css
@@ -1,19 +1,31 @@
-.manhattan_plot_segment {
-    position:relative;
-    display:inline;
-    height: 400px;
-    width: 150px;
-    float: left;
-    clear: none;
+.manhattan_plot .y_axis path,
+.manhattan_plot .y_axis line {
+    fill: none;
+    stroke: black;
+    shape-rendering: crispEdges;
+}
+.manhattan_plot .y_axis text {
+    font-family: sans-serif;
+    font-size: 14px;
 }
 
-.manhattan_plots {
-    clear: both;
+.manhattan_plot .x_axis path,
+.manhattan_plot .x_axis line {
+    fill: none;
+    stroke: black;
+    shape-rendering: crispEdges;
+}
+.manhattan_plot .x_axis text {
+    text-anchor: end;
+    font-family: sans-serif;
+    font-size: 8px;
 }
 
-.permutation_histogram {
-    display: block;
-    height: 400px;
-    width: 900px;
-    clear: both;
-}
\ No newline at end of file
+rect {
+    stroke: WhiteSmoke;
+    fill: grey;
+}
+/*rect {
+    stroke: WhiteSmoke;
+    fill: Azure;
+}*/
\ 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 4b0915c2..ef56dc99 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -13,6 +13,7 @@ $ ->
             @marker_names = []    
             @create_coordinates()
             [@chr_lengths, @cumulative_chr_lengths] = @get_chr_lengths()
+            console.log("cumulative_chr_len: ", @cumulative_chr_lengths)
 
             # Buffer to allow for the ticks/labels to be drawn
             @x_buffer = @plot_width/30
@@ -74,9 +75,6 @@ $ ->
                 @y_coords.push(result.lod_score)
                 @marker_names.push(result.name)
             @total_length += chr_lengths[chr_lengths.length-1]
-            console.log("total length is", @total_length)
-
-            console.log("chr_lengths are:", chr_lengths)
 
         show_marker_in_table: (marker_info) ->
             ### Searches for the select marker in the results table below ###
@@ -89,15 +87,19 @@ $ ->
         create_svg: () ->
             svg = d3.select("#manhattan_plots")
                 .append("svg")
-                .attr("width", @plot_width)
-                .attr("height", @plot_height)
+                .attr("class", "manhattan_plot")
+                .attr("width", @plot_width+@x_buffer)
+                .attr("height", @plot_height+@y_buffer)
             
             return svg
 
         create_graph: () ->
             @add_border()
+            @add_x_axis()
             @add_y_axis()
             @add_chr_lines()
+            @fill_chr_areas()
+            @add_chr_labels()
             @add_plot_points()
 
         add_border: () ->
@@ -125,7 +127,6 @@ $ ->
                 .style("stroke", "#000")
 
         create_scales: () ->
-            console.log("plot_width is: ", @plot_width)
             @x_scale = d3.scale.linear()
                 .domain([0, d3.max(@x_coords)])
                 .range([@x_buffer, @plot_width])
@@ -134,6 +135,64 @@ $ ->
                 .domain([0, @y_max])
                 .range([@plot_height, @y_buffer])
 
+        create_x_axis_tick_values: () ->
+            tick_vals = []
+            for val in [25..@cumulative_chr_lengths[0]] when val%25 == 0
+                tick_vals.push(val)
+                
+            for length, i in @cumulative_chr_lengths
+                if i == 0
+                    continue
+                chr_ticks = []
+                tick_count = Math.floor(@chr_lengths[i]/25)
+                tick_val = parseInt(@cumulative_chr_lengths[i-1])
+                for tick in [0..(tick_count-1)]
+                    tick_val += 25
+                    console.log("tick_val is:", tick_val)
+                    chr_ticks.push(tick_val)
+                Array::push.apply tick_vals, chr_ticks    
+                    
+            console.log("tick_vals:", tick_vals)
+            return tick_vals
+
+        add_x_axis: () ->
+            xAxis = d3.svg.axis()
+                    .scale(@x_scale)
+                    .orient("bottom")
+                    .tickValues(@create_x_axis_tick_values())
+
+            next_chr = 1
+            tmp_tick_val = 0
+            xAxis.tickFormat((d) =>
+                d3.format("d") #format as integer
+                if d < @cumulative_chr_lengths[0]
+                    tick_val = d
+                else
+                    next_chr_length = @cumulative_chr_lengths[next_chr]
+                    if d > next_chr_length
+                        next_chr += 1
+                        tmp_tick_val = 25
+                        tick_val = tmp_tick_val
+                    else
+                        tmp_tick_val += 25
+                        tick_val = tmp_tick_val
+                console.log("tick_val: ", tick_val)
+                return (tick_val)
+            )
+
+            @svg.append("g")
+                .attr("class", "x_axis")
+                .attr("transform", "translate(0," + @plot_height + ")")
+                .call(xAxis)
+                .selectAll("text")
+                    .attr("text-anchor", "right")
+                    .attr("dx", "-1.6em")
+                    .attr("transform", (d) =>
+                        return "translate(-12,0) rotate(-90)"
+                    )
+                    #.attr("dy", "-1.0em")                        
+                                    
+
         add_y_axis: () ->
             yAxis = d3.svg.axis()
                     .scale(@y_scale)
@@ -141,7 +200,7 @@ $ ->
                     .ticks(5)
             
             @svg.append("g")
-                .attr("class", "axis")
+                .attr("class", "y_axis")
                 .attr("transform", "translate(" + @x_buffer + ",0)")
                 .call(yAxis)
 
@@ -157,18 +216,53 @@ $ ->
                 .attr("y1", @y_buffer)
                 .attr("y2", @plot_height)
                 .style("stroke", "#ccc")
+                
+        fill_chr_areas: () ->
+            @svg.selectAll("rect.chr_fill_area_1")
+                .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) =>
+                    return d
+                )
+                .enter()
+                .append("rect")
+                .attr("class", "chr_fill_area_1")
+                .attr("x", (d, i) =>
+                    if i == 0
+                        return @x_scale(0)
+                    else
+                        return @x_scale(@cumulative_chr_lengths[i-1])
+                )
+                .attr("y", @y_buffer)
+                .attr("width", (d) =>
+                    return @x_scale(d[0])
+                )
+                .attr("height", @plot_height-@y_buffer)                
 
         add_chr_labels: () ->
+            chr_names = []
+            for key of @chromosomes
+                chr_names.push(key)
+            chr_info = _.zip(chr_names, @chr_lengths, @cumulative_chr_lengths)
+            console.log("chr_info is", chr_info)                     
             @svg.selectAll("text")
-                .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) =>
-                    label_positions = []
-                    for chr in d
-                        label_positions.push(chr[1] - chr[0]/2)
-                    return label_positions
+                .data(chr_info, (d) =>
+                    return d
                 )
                 .enter()
                 .append("text")
-                
+                .text((d) =>
+                    console.log("d[0] is ", d[0])
+                    return d[0]
+                )
+                .attr("x", (d) =>
+                    return @x_scale(d[2] - d[1]/2)
+                )
+                .attr("y", @plot_height * 0.1)
+                .attr("dx", "0em")
+                .attr("text-anchor", "middle")
+                .attr("font-family", "sans-serif")
+                .attr("font-size", "18px")
+                .attr("fill", "grey")
+
 
         add_plot_points: () ->
             console.log("x_max is:", @x_max)
@@ -197,4 +291,4 @@ $ ->
                         .call(@show_marker_in_table())
                 )
 
-    new Manhattan_Plot(600, 1200)
+    new Manhattan_Plot(600, 1200)
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index 064df143..efe6f508 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -19,6 +19,7 @@
         this.marker_names = [];
         this.create_coordinates();
         _ref = this.get_chr_lengths(), this.chr_lengths = _ref[0], this.cumulative_chr_lengths = _ref[1];
+        console.log("cumulative_chr_len: ", this.cumulative_chr_lengths);
         this.x_buffer = this.plot_width / 30;
         this.y_buffer = this.plot_height / 20;
         this.x_max = this.total_length;
@@ -88,9 +89,7 @@
           this.y_coords.push(result.lod_score);
           this.marker_names.push(result.name);
         }
-        this.total_length += chr_lengths[chr_lengths.length - 1];
-        console.log("total length is", this.total_length);
-        return console.log("chr_lengths are:", chr_lengths);
+        return this.total_length += chr_lengths[chr_lengths.length - 1];
       };
 
       Manhattan_Plot.prototype.show_marker_in_table = function(marker_info) {
@@ -108,14 +107,17 @@
 
       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);
+        svg = d3.select("#manhattan_plots").append("svg").attr("class", "manhattan_plot").attr("width", this.plot_width + this.x_buffer).attr("height", this.plot_height + this.y_buffer);
         return svg;
       };
 
       Manhattan_Plot.prototype.create_graph = function() {
         this.add_border();
+        this.add_x_axis();
         this.add_y_axis();
         this.add_chr_lines();
+        this.fill_chr_areas();
+        this.add_chr_labels();
         return this.add_plot_points();
       };
 
@@ -135,15 +137,72 @@
       };
 
       Manhattan_Plot.prototype.create_scales = function() {
-        console.log("plot_width is: ", this.plot_width);
         this.x_scale = d3.scale.linear().domain([0, d3.max(this.x_coords)]).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_x_axis_tick_values = function() {
+        var chr_ticks, i, length, tick, tick_count, tick_val, tick_vals, val, _i, _j, _k, _len, _ref, _ref1, _ref2;
+        tick_vals = [];
+        for (val = _i = 25, _ref = this.cumulative_chr_lengths[0]; 25 <= _ref ? _i <= _ref : _i >= _ref; val = 25 <= _ref ? ++_i : --_i) {
+          if (val % 25 === 0) {
+            tick_vals.push(val);
+          }
+        }
+        _ref1 = this.cumulative_chr_lengths;
+        for (i = _j = 0, _len = _ref1.length; _j < _len; i = ++_j) {
+          length = _ref1[i];
+          if (i === 0) {
+            continue;
+          }
+          chr_ticks = [];
+          tick_count = Math.floor(this.chr_lengths[i] / 25);
+          tick_val = parseInt(this.cumulative_chr_lengths[i - 1]);
+          for (tick = _k = 0, _ref2 = tick_count - 1; 0 <= _ref2 ? _k <= _ref2 : _k >= _ref2; tick = 0 <= _ref2 ? ++_k : --_k) {
+            tick_val += 25;
+            console.log("tick_val is:", tick_val);
+            chr_ticks.push(tick_val);
+          }
+          Array.prototype.push.apply(tick_vals, chr_ticks);
+        }
+        console.log("tick_vals:", tick_vals);
+        return tick_vals;
+      };
+
+      Manhattan_Plot.prototype.add_x_axis = function() {
+        var next_chr, tmp_tick_val, xAxis,
+          _this = this;
+        xAxis = d3.svg.axis().scale(this.x_scale).orient("bottom").tickValues(this.create_x_axis_tick_values());
+        next_chr = 1;
+        tmp_tick_val = 0;
+        xAxis.tickFormat(function(d) {
+          var next_chr_length, tick_val;
+          d3.format("d");
+          if (d < _this.cumulative_chr_lengths[0]) {
+            tick_val = d;
+          } else {
+            next_chr_length = _this.cumulative_chr_lengths[next_chr];
+            if (d > next_chr_length) {
+              next_chr += 1;
+              tmp_tick_val = 25;
+              tick_val = tmp_tick_val;
+            } else {
+              tmp_tick_val += 25;
+              tick_val = tmp_tick_val;
+            }
+          }
+          console.log("tick_val: ", tick_val);
+          return tick_val;
+        });
+        return this.svg.append("g").attr("class", "x_axis").attr("transform", "translate(0," + this.plot_height + ")").call(xAxis).selectAll("text").attr("text-anchor", "right").attr("dx", "-1.6em").attr("transform", function(d) {
+          return "translate(-12,0) rotate(-90)";
+        });
+      };
+
       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);
+        return this.svg.append("g").attr("class", "y_axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(yAxis);
       };
 
       Manhattan_Plot.prototype.add_chr_lines = function() {
@@ -153,17 +212,38 @@
         }).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_chr_labels = function() {
+      Manhattan_Plot.prototype.fill_chr_areas = function() {
         var _this = this;
-        return this.svg.selectAll("text").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) {
-          var chr, label_positions, _i, _len;
-          label_positions = [];
-          for (_i = 0, _len = d.length; _i < _len; _i++) {
-            chr = d[_i];
-            label_positions.push(chr[1] - chr[0] / 2);
+        return this.svg.selectAll("rect.chr_fill_area_1").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) {
+          return d;
+        }).enter().append("rect").attr("class", "chr_fill_area_1").attr("x", function(d, i) {
+          if (i === 0) {
+            return _this.x_scale(0);
+          } else {
+            return _this.x_scale(_this.cumulative_chr_lengths[i - 1]);
           }
-          return label_positions;
-        }).enter().append("text");
+        }).attr("y", this.y_buffer).attr("width", function(d) {
+          return _this.x_scale(d[0]);
+        }).attr("height", this.plot_height - this.y_buffer);
+      };
+
+      Manhattan_Plot.prototype.add_chr_labels = function() {
+        var chr_info, chr_names, key,
+          _this = this;
+        chr_names = [];
+        for (key in this.chromosomes) {
+          chr_names.push(key);
+        }
+        chr_info = _.zip(chr_names, this.chr_lengths, this.cumulative_chr_lengths);
+        console.log("chr_info is", chr_info);
+        return this.svg.selectAll("text").data(chr_info, function(d) {
+          return d;
+        }).enter().append("text").text(function(d) {
+          console.log("d[0] is ", d[0]);
+          return d[0];
+        }).attr("x", function(d) {
+          return _this.x_scale(d[2] - d[1] / 2);
+        }).attr("y", this.plot_height * 0.1).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("fill", "grey");
       };
 
       Manhattan_Plot.prototype.add_plot_points = function() {
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index fcc5aa52..bcf60abe 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -68,7 +68,7 @@
     <!--[if lt IE 9]>
         <script language="javascript" type="text/javascript" src="/static/packages/jqplot/excanvas.js"></script>
     <![endif]-->
-    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
+    <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/jqplot/jquery.jqplot.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.pointLabels.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
@@ -77,7 +77,6 @@
     <script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/marker_regression.js"></script>
-    
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 8d0dc586..87199e9f 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -1,5 +1,10 @@
 {% extends "base.html" %}
 {% block title %}Trait Data and Analysis{% endblock %}
+{% block css %}
+    <link rel="stylesheet" type="text/css" href="/static/new/css/marker_regression.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
+    <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
+{% endblock %}
 {% block content %} <!-- Start of body -->
 
     <header class="jumbotron subhead" id="overview">
@@ -44,6 +49,7 @@
         js_data = {{ js_data | safe }}
     </script>
 
+    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
     <script type="text/javascript" src="/static/new/js_external/underscore-min.js"></script>-->
     <script type="text/javascript" src="/static/new/js_external/underscore.string.min.js"></script>
     <script type="text/javascript" src="/static/new/packages/ValidationPlugin/dist/jquery.validate.min.js"></script>
diff --git a/wqflask/wqflask/templates/show_trait_progress_bar.html b/wqflask/wqflask/templates/show_trait_progress_bar.html
new file mode 100644
index 00000000..a7ee2195
--- /dev/null
+++ b/wqflask/wqflask/templates/show_trait_progress_bar.html
@@ -0,0 +1,10 @@
+<div id="progress_bar_container" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="progress_bar" aria-hidden="true">
+  <div class="modal-header">
+    <h3 id="progress_bar">Loading...</h3>
+  </div>
+    <div class="modal-body">
+        <div class="progress progress-striped active">
+            <div class="bar" style="width: 100%;"></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file