Added the option to display mapping results as either an interval mapping

or manhattan plot

Fixed a few minor bugs

17 files changed, 878 insertions, 74 deletions

diff --git a/wqflask/base/data_set.py b/wqflask/base/data_set.py
index 2ffa8767..c2a05c90 100755
--- a/wqflask/base/data_set.py
+++ b/wqflask/base/data_set.py
@@ -697,8 +697,6 @@ class PhenotypeDataSet(DataSet):
             else:
                 this_trait.description_display = ""
 
-            print("this_trait.description_display is:", this_trait.description_display)
-
             if not this_trait.year.isdigit():
                 this_trait.pubmed_text = "N/A"
 
diff --git a/wqflask/wqflask/interval_mapping/interval_mapping.py b/wqflask/wqflask/interval_mapping/interval_mapping.py
index 1b651411..5eb901f7 100755
--- a/wqflask/wqflask/interval_mapping/interval_mapping.py
+++ b/wqflask/wqflask/interval_mapping/interval_mapping.py
@@ -82,6 +82,8 @@ class IntervalMapping(object):
         json.dumps(self.json_data, webqtlConfig.TMPDIR + json_filename)
         
         self.js_data = dict(
+            manhattan_plot = self.manhattan_plot,
+            additive = self.additive,
             chromosomes = chromosome_mb_lengths,
             qtl_results = self.qtl_results,
             json_data = self.json_data
@@ -98,6 +100,10 @@ class IntervalMapping(object):
         self.num_permutations = int(start_vars['num_perm'])
         #self.do_bootstrap = start_vars['do_bootstrap']
         #self.selected_chr = start_vars['chromosome']
+        if start_vars['manhattan_plot'] == "true":
+            self.manhattan_plot = True
+        else:
+            self.manhattan_plot = False
         if start_vars['display_additive'] == "yes":
             self.additive = True
         else:
diff --git a/wqflask/wqflask/marker_regression/marker_regression.py b/wqflask/wqflask/marker_regression/marker_regression.py
index 539bc995..bb67a3ba 100755
--- a/wqflask/wqflask/marker_regression/marker_regression.py
+++ b/wqflask/wqflask/marker_regression/marker_regression.py
@@ -60,6 +60,10 @@ class MarkerRegression(object):
             self.vals.append(value)

  

         self.mapping_method = start_vars['method']

+        if start_vars['manhattan_plot'] == "true":

+            self.manhattan_plot = True

+        else:

+            self.manhattan_plot = False

         self.maf = start_vars['maf'] # Minor allele frequency

         self.suggestive = ""

         self.significant = ""

@@ -73,10 +77,7 @@ class MarkerRegression(object):
         elif self.mapping_method == "rqtl_geno":

             self.num_perm = start_vars['num_perm']

             self.control = start_vars['control_marker']

-            if start_vars['manhattan_plot'] == "true":

-                self.manhattan_plot = True

-            else:

-                self.manhattan_plot = False

+

             print("doing rqtl_geno")

             qtl_results = self.run_rqtl_geno()

             print("qtl_results:", qtl_results)

@@ -227,8 +228,10 @@ class MarkerRegression(object):
     def run_rqtl_geno(self):

         robjects.packages.importr("qtl")

         robjects.r('the_cross <- read.cross(format="csvr", dir="/home/zas1024/PLINK2RQTL/test", file="BXD.csvr")')

-        robjects.r('the_cross <- calc.genoprob(the_cross)')

-        

+        if self.manhattan_plot:

+            robjects.r('the_cross <- calc.genoprob(the_cross)')

+        else:

+            robjects.r('the_cross <- calc.genoprob(the_cross, step=1, stepwidth="max")')

         pheno_as_string = "c("

         #for i, val in enumerate(self.vals):

         #    if val == "x":

@@ -295,23 +298,23 @@ class MarkerRegression(object):
                     

             robjects.r('covariates <- cbind( '+ control_string +')')

             

-            r_string = 'scanone(the_cross, pheno.col="the_pheno", n.perm='+self.num_perm+', addcovar=covariates, intcovar=covariates[,'+ str(len(control_markers)) +'])'

+            r_string = 'scanone(the_cross, pheno.col="the_pheno", n.cluster=16, n.perm='+self.num_perm+', addcovar=covariates, intcovar=covariates[,'+ str(len(control_markers)) +'])'

             print("r_string:", r_string)

             

             if int(self.num_perm) > 0:

                 thresholds = robjects.r(r_string)

                 self.suggestive, self.significant = self.process_rqtl_perm_results(results)

-                r_string = 'scanone(the_cross, pheno.col="the_pheno", addcovar=covariates, intcovar=covariates[,'+ str(len(control_markers)) +'])'

+                r_string = 'scanone(the_cross, pheno.col="the_pheno", n.cluster=16, addcovar=covariates, intcovar=covariates[,'+ str(len(control_markers)) +'])'

                 

             #r_string = 'scanone(the_cross, pheno.col='+pheno_as_string+', addcovar='+control_as_string+')'

             

         else:

         #r_string = 'scanone(the_cross, pheno.col='+pheno_as_string+', n.perm='+self.num_perm+')'

-            r_string = 'scanone(the_cross, pheno.col="the_pheno", n.perm='+self.num_perm+')'

-            if int(self.num_perm) > 0:

+            r_string = 'scanone(the_cross, pheno.col="the_pheno", n.cluster=16, n.perm='+self.num_perm+')'

+            if self.num_perm.isdigit() and int(self.num_perm) > 0:

                 results = robjects.r(r_string)

                 self.suggestive, self.significant = self.process_rqtl_perm_results(results)

-                r_string = 'scanone(the_cross, pheno.col="the_pheno")'

+                r_string = 'scanone(the_cross, pheno.col="the_pheno", n.cluster=16)'

             

         print("r_string:", r_string)

         result_data_frame = robjects.r(r_string)

diff --git a/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee b/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee
new file mode 100644
index 00000000..321957b3
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee
@@ -0,0 +1,296 @@
+class Chr_Lod_Chart

+

+    constructor: (@plot_height, @plot_width, @chr, manhattanPlot) ->

+        @manhattanPlot = manhattanPlot

+        @qtl_results = js_data.qtl_results

+        console.log("qtl_results are:", @qtl_results)

+        console.log("chr is:", @chr)

+        

+        @get_max_chr()

+

+        @filter_qtl_results()

+        console.log("filtered results:", @these_results)

+        @get_qtl_count()

+

+        @x_coords = []

+        @y_coords = []

+        @marker_names = []

+

+        console.time('Create coordinates')

+        @create_coordinates()

+        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)

+        console.log("coordinates:", @plot_coordinates)

+

+        @plot_height -= @y_buffer

+

+        @create_scales()

+

+        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

+        for result in @qtl_results

+            if result.chr == "X"

+                this_chr = @max_chr

+            else

+                this_chr = result.chr

+            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])

+                @these_results.push(result)

+

+    get_qtl_count: () ->

+        high_qtl_count = 0

+        for result in @these_results

+            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

+        #    @y_axis_filter = 1

+        #else

+        #    @y_axis_filter = 0

+

+    create_coordinates: () ->

+        for result in @these_results

+            @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")

+            .attr("class", "chr_manhattan_plot")

+            .attr("width", @plot_width+@x_buffer)

+            .attr("height", @plot_height+@y_buffer)

+            .append("g")

+        return svg

+

+    create_scales: () ->

+        @x_scale = d3.scale.linear()

+            .domain([0, @chr[1]])

+            .range([@x_buffer, @plot_width])

+        @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

+        else

+            return 2

+

+    create_graph: () ->

+        @add_border()

+        @add_x_axis()

+        @add_y_axis()

+        @add_title()

+        @add_back_button()

+        if @manhattanPlot

+            @add_plot_points()

+        else

+            @add_path()

+

+    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_x_axis: () ->

+        @xAxis = d3.svg.axis()

+                .scale(@x_scale)

+                .orient("bottom")

+                .ticks(20)

+

+        @xAxis.tickFormat((d) =>

+            d3.format("d") #format as integer

+            return (d)

+        )

+

+        @svg.append("g")

+            .attr("class", "x_axis")

+            .attr("transform", "translate(0," + @plot_height + ")")

+            .call(@xAxis)

+            .selectAll("text")

+                .attr("text-anchor", "right")

+                .attr("font-size", "12px")

+                .attr("dx", "-1.6em")

+                .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)")

+            .call(@yAxis)

+

+    add_title: () ->

+        @svg.append("text")

+            .attr("class", "title")

+            .text("Chr " + @chr[0])

+            .attr("x", (d) =>

+                return (@plot_width + @x_buffer)/2

+            )

+            .attr("y", @y_buffer + 20)

+            .attr("dx", "0em")

+            .attr("text-anchor", "middle")

+            .attr("font-family", "sans-serif")

+            .attr("font-size", "18px")

+            .attr("fill", "black")

+

+    add_back_button: () ->

+        @svg.append("text")

+            .attr("class", "back")

+            .text("Return to full view")

+            .attr("x", @x_buffer*2)

+            .attr("y", @y_buffer/2)

+            .attr("dx", "0em")

+            .attr("text-anchor", "middle")

+            .attr("font-family", "sans-serif")

+            .attr("font-size", "18px")

+            .attr("cursor", "pointer")

+            .attr("fill", "black")

+            .on("click", @return_to_full_view)

+

+    add_path: () ->

+        line_function = d3.svg.line()

+                            .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")

+                        .attr("stroke-width", 1)

+                        .attr("fill", "none")

+

+    add_plot_points: () ->

+        @plot_point = @svg.selectAll("circle")

+            .data(@plot_coordinates)

+            .enter()

+            .append("circle")

+            .attr("cx", (d) =>

+                return @x_scale(d[0])

+            )

+            .attr("cy", (d) =>

+                return @y_scale(d[1])

+            )

+            .attr("r", (d) =>

+                #if d[1] > 2

+                #    return 3

+                #else

+                return 2

+            )

+            .attr("fill", (d) =>

+                #if d[1] > 2

+                #    return "white"

+                #else

+                return "black"

+            )

+            .attr("stroke", "black")

+            .attr("stroke-width", "1")

+            .attr("id", (d) =>

+                return "point_" + String(d[2])

+            )

+            .classed("circle", true)

+            .on("mouseover", (d) =>

+                console.log("d3.event is:", d3.event)

+                console.log("d is:", d)

+                this_id = "point_" + String(d[2])

+                d3.select("#" + this_id).classed("d3_highlight", true)

+                    .attr("r", 5)

+                    .attr("stroke", "none")

+                    .attr("fill", "blue")

+                    .call(@show_marker_in_table(d))

+            )

+            .on("mouseout", (d) =>

+                this_id = "point_" + String(d[2])

+                d3.select("#" + this_id).classed("d3_highlight", false)

+                    .attr("r", (d) =>

+                        #if d[1] > 2

+                        #    return 3

+                        #else

+                        return 2

+                    )

+                    .attr("fill", (d) =>

+                        #if d[1] > 2

+                        #    return "white"

+                        #else

+                        return "black"

+                    )

+                    .attr("stroke", "black")

+                    .attr("stroke-width", "1")

+            )

+            .append("svg:title")

+                .text((d) =>

+                    return d[2]

+                )

+

+    return_to_full_view: () ->

+        $('#topchart').remove()

+        $('#chart_container').append('<div class="qtlcharts" id="topchart"></div>')

+        create_manhattan_plot()

+

+    show_marker_in_table: (marker_info) ->

+        console.log("in show_marker_in_table")

+        ### Searches for the select marker in the results table below ###

+        if marker_info

+            marker_name = marker_info[2]

+            $("#qtl_results_filter").find("input:first").val(marker_name).change()

+        #else

+        #    marker_name = ""

+        #$("#qtl_results_filter").find("input:first").val(marker_name).change()

diff --git a/wqflask/wqflask/static/new/javascript/chr_lod_chart.js b/wqflask/wqflask/static/new/javascript/chr_lod_chart.js
new file mode 100644
index 00000000..deeb03d3
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/chr_lod_chart.js
@@ -0,0 +1,274 @@
+// Generated by CoffeeScript 1.7.1
+var Chr_Lod_Chart;
+
+Chr_Lod_Chart = (function() {
+  function Chr_Lod_Chart(plot_height, plot_width, chr, manhattanPlot) {
+    this.plot_height = plot_height;
+    this.plot_width = plot_width;
+    this.chr = chr;
+    this.manhattanPlot = manhattanPlot;
+    this.qtl_results = js_data.qtl_results;
+    console.log("qtl_results are:", this.qtl_results);
+    console.log("chr is:", this.chr);
+    this.get_max_chr();
+    this.filter_qtl_results();
+    console.log("filtered results:", this.these_results);
+    this.get_qtl_count();
+    this.x_coords = [];
+    this.y_coords = [];
+    this.marker_names = [];
+    console.time('Create coordinates');
+    this.create_coordinates();
+    console.log("@x_coords: ", this.x_coords);
+    console.log("@y_coords: ", this.y_coords);
+    console.timeEnd('Create coordinates');
+    this.x_buffer = this.plot_width / 30;
+    this.y_buffer = this.plot_height / 20;
+    this.x_max = d3.max(this.x_coords);
+    this.y_max = d3.max(this.y_coords) * 1.2;
+    this.y_threshold = this.get_lod_threshold();
+    this.svg = this.create_svg();
+    this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names);
+    console.log("coordinates:", this.plot_coordinates);
+    this.plot_height -= this.y_buffer;
+    this.create_scales();
+    console.time('Create graph');
+    this.create_graph();
+    console.timeEnd('Create graph');
+  }
+
+  Chr_Lod_Chart.prototype.get_max_chr = function() {
+    var key, _results;
+    this.max_chr = 0;
+    _results = [];
+    for (key in js_data.chromosomes) {
+      console.log("key is:", key);
+      if (parseInt(key) > this.max_chr) {
+        _results.push(this.max_chr = parseInt(key));
+      } else {
+        _results.push(void 0);
+      }
+    }
+    return _results;
+  };
+
+  Chr_Lod_Chart.prototype.filter_qtl_results = function() {
+    var result, this_chr, _i, _len, _ref, _results;
+    this.these_results = [];
+    this_chr = 100;
+    _ref = this.qtl_results;
+    _results = [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      result = _ref[_i];
+      if (result.chr === "X") {
+        this_chr = this.max_chr;
+      } else {
+        this_chr = result.chr;
+      }
+      console.log("this_chr is:", this_chr);
+      console.log("@chr[0] is:", parseInt(this.chr[0]));
+      if (this_chr > parseInt(this.chr[0])) {
+        break;
+      }
+      if (parseInt(this_chr) === parseInt(this.chr[0])) {
+        _results.push(this.these_results.push(result));
+      } else {
+        _results.push(void 0);
+      }
+    }
+    return _results;
+  };
+
+  Chr_Lod_Chart.prototype.get_qtl_count = function() {
+    var high_qtl_count, result, _i, _len, _ref;
+    high_qtl_count = 0;
+    _ref = this.these_results;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      result = _ref[_i];
+      if (result.lod_score > 1) {
+        high_qtl_count += 1;
+      }
+    }
+    console.log("high_qtl_count:", high_qtl_count);
+    return this.y_axis_filter = 2;
+  };
+
+  Chr_Lod_Chart.prototype.create_coordinates = function() {
+    var result, _i, _len, _ref, _results;
+    _ref = this.these_results;
+    _results = [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      result = _ref[_i];
+      this.x_coords.push(parseFloat(result.Mb));
+      this.y_coords.push(result.lod_score);
+      _results.push(this.marker_names.push(result.name));
+    }
+    return _results;
+  };
+
+  Chr_Lod_Chart.prototype.create_svg = function() {
+    var svg;
+    svg = d3.select("#topchart").append("svg").attr("class", "chr_manhattan_plot").attr("width", this.plot_width + this.x_buffer).attr("height", this.plot_height + this.y_buffer).append("g");
+    return svg;
+  };
+
+  Chr_Lod_Chart.prototype.create_scales = function() {
+    this.x_scale = d3.scale.linear().domain([0, this.chr[1]]).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]);
+  };
+
+  Chr_Lod_Chart.prototype.get_lod_threshold = function() {
+    if (this.y_max / 2 > 2) {
+      return this.y_max / 2;
+    } else {
+      return 2;
+    }
+  };
+
+  Chr_Lod_Chart.prototype.create_graph = function() {
+    this.add_border();
+    this.add_x_axis();
+    this.add_y_axis();
+    this.add_title();
+    this.add_back_button();
+    if (this.manhattanPlot) {
+      return this.add_plot_points();
+    } else {
+      return this.add_path();
+    }
+  };
+
+  Chr_Lod_Chart.prototype.add_border = function() {
+    var border_coords;
+    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(_this) {
+      return function(d) {
+        return d[0];
+      };
+    })(this)).attr("y2", (function(_this) {
+      return function(d) {
+        return d[1];
+      };
+    })(this)).attr("x1", (function(_this) {
+      return function(d) {
+        return d[2];
+      };
+    })(this)).attr("x2", (function(_this) {
+      return function(d) {
+        return d[3];
+      };
+    })(this)).style("stroke", "#000");
+  };
+
+  Chr_Lod_Chart.prototype.add_x_axis = function() {
+    this.xAxis = d3.svg.axis().scale(this.x_scale).orient("bottom").ticks(20);
+    this.xAxis.tickFormat((function(_this) {
+      return function(d) {
+        d3.format("d");
+        return d;
+      };
+    })(this));
+    return this.svg.append("g").attr("class", "x_axis").attr("transform", "translate(0," + this.plot_height + ")").call(this.xAxis).selectAll("text").attr("text-anchor", "right").attr("font-size", "12px").attr("dx", "-1.6em").attr("transform", (function(_this) {
+      return function(d) {
+        return "translate(-12,0) rotate(-90)";
+      };
+    })(this));
+  };
+
+  Chr_Lod_Chart.prototype.add_y_axis = function() {
+    this.yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5);
+    return this.svg.append("g").attr("class", "y_axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(this.yAxis);
+  };
+
+  Chr_Lod_Chart.prototype.add_title = function() {
+    return this.svg.append("text").attr("class", "title").text("Chr " + this.chr[0]).attr("x", (function(_this) {
+      return function(d) {
+        return (_this.plot_width + _this.x_buffer) / 2;
+      };
+    })(this)).attr("y", this.y_buffer + 20).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("fill", "black");
+  };
+
+  Chr_Lod_Chart.prototype.add_back_button = function() {
+    return this.svg.append("text").attr("class", "back").text("Return to full view").attr("x", this.x_buffer * 2).attr("y", this.y_buffer / 2).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("cursor", "pointer").attr("fill", "black").on("click", this.return_to_full_view);
+  };
+
+  Chr_Lod_Chart.prototype.add_path = function() {
+    var line_function, line_graph;
+    line_function = d3.svg.line().x((function(_this) {
+      return function(d) {
+        return _this.x_scale(d[0]);
+      };
+    })(this)).y((function(_this) {
+      return function(d) {
+        return _this.y_scale(d[1]);
+      };
+    })(this)).interpolate("linear");
+    return line_graph = this.svg.append("path").attr("d", line_function(this.plot_coordinates)).attr("stroke", "blue").attr("stroke-width", 1).attr("fill", "none");
+  };
+
+  Chr_Lod_Chart.prototype.add_plot_points = function() {
+    return this.plot_point = this.svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", (function(_this) {
+      return function(d) {
+        return _this.x_scale(d[0]);
+      };
+    })(this)).attr("cy", (function(_this) {
+      return function(d) {
+        return _this.y_scale(d[1]);
+      };
+    })(this)).attr("r", (function(_this) {
+      return function(d) {
+        return 2;
+      };
+    })(this)).attr("fill", (function(_this) {
+      return function(d) {
+        return "black";
+      };
+    })(this)).attr("stroke", "black").attr("stroke-width", "1").attr("id", (function(_this) {
+      return function(d) {
+        return "point_" + String(d[2]);
+      };
+    })(this)).classed("circle", true).on("mouseover", (function(_this) {
+      return function(d) {
+        var this_id;
+        console.log("d3.event is:", d3.event);
+        console.log("d is:", d);
+        this_id = "point_" + String(d[2]);
+        return d3.select("#" + this_id).classed("d3_highlight", true).attr("r", 5).attr("stroke", "none").attr("fill", "blue").call(_this.show_marker_in_table(d));
+      };
+    })(this)).on("mouseout", (function(_this) {
+      return function(d) {
+        var this_id;
+        this_id = "point_" + String(d[2]);
+        return d3.select("#" + this_id).classed("d3_highlight", false).attr("r", function(d) {
+          return 2;
+        }).attr("fill", function(d) {
+          return "black";
+        }).attr("stroke", "black").attr("stroke-width", "1");
+      };
+    })(this)).append("svg:title").text((function(_this) {
+      return function(d) {
+        return d[2];
+      };
+    })(this));
+  };
+
+  Chr_Lod_Chart.prototype.return_to_full_view = function() {
+    $('#topchart').remove();
+    $('#chart_container').append('<div class="qtlcharts" id="topchart"></div>');
+    return create_manhattan_plot();
+  };
+
+  Chr_Lod_Chart.prototype.show_marker_in_table = function(marker_info) {
+    var marker_name;
+    console.log("in show_marker_in_table");
+
+    /* Searches for the select marker in the results table below */
+    if (marker_info) {
+      marker_name = marker_info[2];
+      return $("#qtl_results_filter").find("input:first").val(marker_name).change();
+    }
+  };
+
+  return Chr_Lod_Chart;
+
+})();
diff --git a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee
index 8b62d58a..b1d2305e 100755
--- a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee
+++ b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee
@@ -1,5 +1,6 @@
 class Chr_Manhattan_Plot

-    constructor: (@plot_height, @plot_width, @chr) ->

+

+    constructor: (@plot_height, @plot_width, @chr, manhattanPlot) ->

         @qtl_results = js_data.qtl_results

         console.log("qtl_results are:", @qtl_results)

         console.log("chr is:", @chr)

@@ -113,7 +114,10 @@ class Chr_Manhattan_Plot
         @add_y_axis()

         @add_title()

         @add_back_button()

-        @add_plot_points()

+        if manhattanPlot

+            @add_plot_points()

+        else

+            @add_path()

 

     add_border: () ->

         border_coords = [[@y_buffer, @plot_height, @x_buffer, @x_buffer],

@@ -201,6 +205,17 @@ class Chr_Manhattan_Plot
             .attr("fill", "black")

             .on("click", @return_to_full_view)

 

+    add_path: () ->

+        line_function = d3.svg.line()

+                            .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")

+                        .attr("stroke-width", 1)

+                        .attr("fill", "none")

 

     add_plot_points: () ->

         @plot_point = @svg.selectAll("circle")

diff --git a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js
index 24d8b962..001d0593 100755
--- a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js
+++ b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js
@@ -2,7 +2,7 @@
 var Chr_Manhattan_Plot;
 
 Chr_Manhattan_Plot = (function() {
-  function Chr_Manhattan_Plot(plot_height, plot_width, chr) {
+  function Chr_Manhattan_Plot(plot_height, plot_width, chr, manhattanPlot) {
     this.plot_height = plot_height;
     this.plot_width = plot_width;
     this.chr = chr;
@@ -130,7 +130,11 @@ Chr_Manhattan_Plot = (function() {
     this.add_y_axis();
     this.add_title();
     this.add_back_button();
-    return this.add_plot_points();
+    if (manhattanPlot) {
+      return this.add_plot_points();
+    } else {
+      return this.add_path();
+    }
   };
 
   Chr_Manhattan_Plot.prototype.add_border = function() {
@@ -187,6 +191,20 @@ Chr_Manhattan_Plot = (function() {
     return this.svg.append("text").attr("class", "back").text("Return to full view").attr("x", this.x_buffer * 2).attr("y", this.y_buffer / 2).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("cursor", "pointer").attr("fill", "black").on("click", this.return_to_full_view);
   };
 
+  Chr_Manhattan_Plot.prototype.add_path = function() {
+    var line_function, line_graph;
+    line_function = d3.svg.line().x((function(_this) {
+      return function(d) {
+        return _this.x_scale(d[0]);
+      };
+    })(this)).y((function(_this) {
+      return function(d) {
+        return _this.y_scale(d[1]);
+      };
+    })(this)).interpolate("linear");
+    return line_graph = this.svg.append("path").attr("d", line_function(this.plot_coordinates)).attr("stroke", "blue").attr("stroke-width", 1).attr("fill", "none");
+  };
+
   Chr_Manhattan_Plot.prototype.add_plot_points = function() {
     return this.plot_point = this.svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", (function(_this) {
       return function(d) {
diff --git a/wqflask/wqflask/static/new/javascript/create_lodchart.coffee b/wqflask/wqflask/static/new/javascript/create_lodchart.coffee
new file mode 100644
index 00000000..2d5e3acb
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/create_lodchart.coffee
@@ -0,0 +1,87 @@
+create_manhattan_plot = ->

+    h = 500

+    w = 1200

+    margin = {left:60, top:40, right:40, bottom: 40, inner:5}

+    halfh = (h+margin.top+margin.bottom)

+    totalh = halfh*2

+    totalw = (w+margin.left+margin.right)

+    if 'additive' of js_data

+        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")

+                        .height(h)

+                        .width(w)

+                        .margin(margin)

+                        .ylab("LOD 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", ->

+                d3.select(this).attr("fill", "#E9CFEC")

+           .on "mouseout", (d,i) ->

+                d3.select(this).attr("fill", ->

+                      return "#F1F1F9"  if i % 2

+                      "#FBFBFF")

+    

+    # animate points at markers on click

+    mychart.markerSelect()

+              .on "click", (d) ->

+                    r = d3.select(this).attr("r")

+                    d3.select(this)

+                      .transition().duration(500).attr("r", r*3)

+                      .transition().duration(500).attr("r", r)

+                  

+create_manhattan_plot()

+

+$("#export").click =>

+    #Get d3 SVG element

+    svg = $("#topchart").find("svg")[0]

+    

+    #Extract SVG text string

+    svg_xml = (new XMLSerializer).serializeToString(svg)

+    console.log("svg_xml:", svg_xml)

+        

+    #Set filename

+    filename = "manhattan_plot_" + js_data.this_trait

+

+    #Make a form with the SVG data

+    form = $("#exportform")

+    form.find("#data").val(svg_xml)

+    form.find("#filename").val(filename)

+    form.submit()

+

+$("#export_pdf").click =>

+    

+    #$('#topchart').remove()

+    #$('#chart_container').append('<div class="qtlcharts" id="topchart"></div>')

+    #create_interval_map()

+    

+    #Get d3 SVG element

+    svg = $("#topchart").find("svg")[0]

+    

+    #Extract SVG text string

+    svg_xml = (new XMLSerializer).serializeToString(svg)

+    console.log("svg_xml:", svg_xml)

+        

+    #Set filename

+    filename = "manhattan_plot_" + js_data.this_trait

+

+    #Make a form with the SVG data

+    form = $("#exportpdfform")

+    form.find("#data").val(svg_xml)

+    form.find("#filename").val(filename)

+    form.submit()

diff --git a/wqflask/wqflask/static/new/javascript/create_lodchart.js b/wqflask/wqflask/static/new/javascript/create_lodchart.js
new file mode 100644
index 00000000..f8aafee7
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/create_lodchart.js
@@ -0,0 +1,73 @@
+// Generated by CoffeeScript 1.7.1
+var create_manhattan_plot;
+
+create_manhattan_plot = function() {
+  var additive, chrrect, data, h, halfh, margin, mychart, totalh, totalw, w;
+  h = 500;
+  w = 1200;
+  margin = {
+    left: 60,
+    top: 40,
+    right: 40,
+    bottom: 40,
+    inner: 5
+  };
+  halfh = h + margin.top + margin.bottom;
+  totalh = halfh * 2;
+  totalw = w + margin.left + margin.right;
+  if ('additive' in js_data) {
+    additive = js_data.additive;
+  } else {
+    additive = false;
+  }
+  console.log("js_data:", js_data);
+  mychart = lodchart().lodvarname("lod.hk").height(h).width(w).margin(margin).ylab("LOD score").manhattanPlot(js_data.manhattan_plot);
+  data = js_data.json_data;
+  d3.select("div#topchart").datum(data).call(mychart);
+  chrrect = mychart.chrSelect();
+  chrrect.on("mouseover", function() {
+    return d3.select(this).attr("fill", "#E9CFEC");
+  }).on("mouseout", function(d, i) {
+    return d3.select(this).attr("fill", function() {
+      if (i % 2) {
+        return "#F1F1F9";
+      }
+      return "#FBFBFF";
+    });
+  });
+  return mychart.markerSelect().on("click", function(d) {
+    var r;
+    r = d3.select(this).attr("r");
+    return d3.select(this).transition().duration(500).attr("r", r * 3).transition().duration(500).attr("r", r);
+  });
+};
+
+create_manhattan_plot();
+
+$("#export").click((function(_this) {
+  return function() {
+    var filename, form, svg, svg_xml;
+    svg = $("#topchart").find("svg")[0];
+    svg_xml = (new XMLSerializer).serializeToString(svg);
+    console.log("svg_xml:", svg_xml);
+    filename = "manhattan_plot_" + js_data.this_trait;
+    form = $("#exportform");
+    form.find("#data").val(svg_xml);
+    form.find("#filename").val(filename);
+    return form.submit();
+  };
+})(this));
+
+$("#export_pdf").click((function(_this) {
+  return function() {
+    var filename, form, svg, svg_xml;
+    svg = $("#topchart").find("svg")[0];
+    svg_xml = (new XMLSerializer).serializeToString(svg);
+    console.log("svg_xml:", svg_xml);
+    filename = "manhattan_plot_" + js_data.this_trait;
+    form = $("#exportpdfform");
+    form.find("#data").val(svg_xml);
+    form.find("#filename").val(filename);
+    return form.submit();
+  };
+})(this));
diff --git a/wqflask/wqflask/static/new/javascript/lod_chart.coffee b/wqflask/wqflask/static/new/javascript/lod_chart.coffee
index 309cec9e..b0f4b2f5 100644
--- a/wqflask/wqflask/static/new/javascript/lod_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/lod_chart.coffee
@@ -5,6 +5,7 @@ lodchart = () ->
     axispos = {xtitle:25, ytitle:30, xlabel:5, ylabel:5}

     titlepos = 20

     manhattanPlot = false

+    additive = false

     ylim = null

     additive_ylim = null

     nyticks = 5

@@ -49,27 +50,26 @@ lodchart = () ->
         

         lodvarname = lodvarname ? data.lodnames[0]

         data[lodvarname] = (Math.abs(x) for x in data[lodvarname]) # take absolute values

-        if 'additive' of data

+        ylim = ylim ? [0, d3.max(data[lodvarname])]    

+        if additive

             data['additive'] = (Math.abs(x) for x in data['additive'])

-        ylim = ylim ? [0, d3.max(data[lodvarname])]

-        if 'additive' of data

-        #if data['additive'].length > 0

-            additive_ylim = additive_ylim ? [0, d3.max(data['additive'])]

+            additive_ylim = additive_ylim ? [0, d3.max(data['additive'])]   

+

         lodvarnum = data.lodnames.indexOf(lodvarname)

-  

+

         # Select the svg element, if it exists.

         svg = d3.select(this).selectAll("svg").data([data])

-  

+

         # Otherwise, create the skeletal chart.

         gEnter = svg.enter().append("svg").append("g")

-  

+

         # Update the outer dimensions.

         svg.attr("width", width+margin.left+margin.right)

            .attr("height", height+margin.top+margin.bottom)

-  

+

         # Update the inner dimensions.

         g = svg.select("g")

-  

+

         # box

         g.append("rect")

          .attr("x", margin.left)

@@ -78,23 +78,22 @@ lodchart = () ->
          .attr("width", width)

          .attr("fill", darkrect)

          .attr("stroke", "none")

-  

+

         yscale.domain(ylim)

               .range([height+margin.top, margin.top+margin.inner])

-        

-        #if data['additive'].length > 0

-        if 'additive' of data

-            additive_yscale.domain(additive_ylim)

-                  .range([height+margin.top, margin.top+margin.inner + height/2])

-  

+

         # if yticks not provided, use nyticks to choose pretty ones

         yticks = yticks ? yscale.ticks(nyticks)

+

         #if data['additive'].length > 0

-        if 'additive' of data

+        if additive

+            additive_yscale.domain(additive_ylim)

+                  .range([height+margin.top, margin.top+margin.inner + height/2])

+                  

             additive_yticks = additive_yticks ? additive_yscale.ticks(nyticks)

   

         # reorganize lod,pos by chromosomes

-        data = reorgLodData(data, lodvarname)

+        reorgLodData(data, lodvarname)

   

         # add chromosome scales (for x-axis)

         data = chrscales(data, width, chrGap, margin.left, pad4heatmap)

@@ -153,7 +152,7 @@ lodchart = () ->
              #console.log("chr_length is:", chr_ob[1])

              $('#topchart').remove()

              $('#chart_container').append('<div class="qtlcharts" id="topchart"></div>')

-             chr_plot = new Chr_Manhattan_Plot(600, 1200, chr_ob)

+             chr_plot = new Chr_Lod_Chart(600, 1200, chr_ob, manhattanPlot)

   

         # y-axis

         rotate_ylab = rotate_ylab ? (ylab.length > 1)

@@ -191,7 +190,7 @@ lodchart = () ->
              .attr("fill", "slateblue")

   

         #if data['additive'].length > 0

-        if 'additive' of data

+        if additive

             rotate_additive_ylab = rotate_additive_ylab ? (additive_ylab.length > 1)

             additive_yaxis = g.append("g").attr("class", "y axis")

             additive_yaxis.selectAll("empty")

@@ -262,11 +261,11 @@ lodchart = () ->
                   .x((d) -> xscale[chr](d))

                   .y((d,i) -> yscale(data.lodByChr[chr][i][lodcolumn]))

                   

-            #if 'additive' of data

-            #    additivecurve = (chr, lodcolumn) ->

-            #        d3.svg.line()

-            #          .x((d) -> xscale[chr](d))

-            #          .y((d,i) -> additive_yscale(data.additiveByChr[chr][i][lodcolumn]))

+            if additive

+                additivecurve = (chr, lodcolumn) ->

+                    d3.svg.line()

+                      .x((d) -> xscale[chr](d))

+                      .y((d,i) -> additive_yscale(data.additiveByChr[chr][i][lodcolumn]))

       

             curves = g.append("g").attr("id", "curves")

       

@@ -279,16 +278,15 @@ lodchart = () ->
                     .attr("stroke-width", linewidth)

                     .style("pointer-events", "none")

             

-            ##if data['additive'].length > 0

-            #if 'additive' of data

-            #    for chr in data.chrnames

-            #        curves.append("path")

-            #              .datum(data.posByChr[chr[0]])

-            #              .attr("d", additivecurve(chr[0], lodvarnum))

-            #              .attr("stroke", additivelinecolor)

-            #              .attr("fill", "none")

-            #              .attr("stroke-width", 1)

-            #              .style("pointer-events", "none")

+            if additive

+                for chr in data.chrnames

+                    curves.append("path")

+                          .datum(data.posByChr[chr[0]])

+                          .attr("d", additivecurve(chr[0], lodvarnum))

+                          .attr("stroke", additivelinecolor)

+                          .attr("fill", "none")

+                          .attr("stroke-width", 1)

+                          .style("pointer-events", "none")

         

         # points at markers

         console.log("before pointsize")

@@ -487,6 +485,9 @@ lodchart = () ->
     chart.yscale = () ->

       return yscale

     

+    chart.additive = () ->

+      return additive

+    

     #if data['additive'].length > 0

     chart.additive_yscale = () ->

       return additive_yscale

diff --git a/wqflask/wqflask/static/new/javascript/lod_chart.js b/wqflask/wqflask/static/new/javascript/lod_chart.js
index e6f34854..2d00d3a5 100644
--- a/wqflask/wqflask/static/new/javascript/lod_chart.js
+++ b/wqflask/wqflask/static/new/javascript/lod_chart.js
@@ -2,7 +2,7 @@
 var lodchart;
 
 lodchart = function() {
-  var additive_ylab, additive_ylim, additive_yscale, additive_yticks, additivelinecolor, axispos, chart, chrGap, chrSelect, darkrect, height, lightrect, linewidth, lodcurve, lodlinecolor, lodvarname, manhattanPlot, margin, markerSelect, nyticks, pad4heatmap, pointcolor, pointsAtMarkers, pointsize, pointstroke, rotate_ylab, significantcolor, suggestivecolor, title, titlepos, width, xlab, xscale, ylab, ylim, yscale, yticks;
+  var additive, additive_ylab, additive_ylim, additive_yscale, additive_yticks, additivelinecolor, axispos, chart, chrGap, chrSelect, darkrect, height, lightrect, linewidth, lodcurve, lodlinecolor, lodvarname, manhattanPlot, margin, markerSelect, nyticks, pad4heatmap, pointcolor, pointsAtMarkers, pointsize, pointstroke, rotate_ylab, significantcolor, suggestivecolor, title, titlepos, width, xlab, xscale, ylab, ylim, yscale, yticks;
   width = 800;
   height = 500;
   margin = {
@@ -20,6 +20,7 @@ lodchart = function() {
   };
   titlepos = 20;
   manhattanPlot = false;
+  additive = false;
   ylim = null;
   additive_ylim = null;
   nyticks = 5;
@@ -52,7 +53,7 @@ lodchart = function() {
   pointsAtMarkers = true;
   chart = function(selection) {
     return selection.each(function(data) {
-      var additive_yaxis, chr, curves, g, gEnter, hiddenpoints, lodvarnum, markerpoints, markertip, redraw_plot, rotate_additive_ylab, suggestive_bar, svg, titlegrp, x, xaxis, yaxis, _i, _len, _ref;
+      var additive_yaxis, additivecurve, chr, curves, g, gEnter, hiddenpoints, lodvarnum, markerpoints, markertip, redraw_plot, rotate_additive_ylab, suggestive_bar, svg, titlegrp, x, xaxis, yaxis, _i, _j, _len, _len1, _ref, _ref1;
       if (manhattanPlot === true) {
         pointcolor = "darkslateblue";
         pointsize = 2;
@@ -68,7 +69,8 @@ lodchart = function() {
         }
         return _results;
       })();
-      if ('additive' in data) {
+      ylim = ylim != null ? ylim : [0, d3.max(data[lodvarname])];
+      if (additive) {
         data['additive'] = (function() {
           var _i, _len, _ref, _results;
           _ref = data['additive'];
@@ -79,9 +81,6 @@ lodchart = function() {
           }
           return _results;
         })();
-      }
-      ylim = ylim != null ? ylim : [0, d3.max(data[lodvarname])];
-      if ('additive' in data) {
         additive_ylim = additive_ylim != null ? additive_ylim : [0, d3.max(data['additive'])];
       }
       lodvarnum = data.lodnames.indexOf(lodvarname);
@@ -91,14 +90,12 @@ lodchart = function() {
       g = svg.select("g");
       g.append("rect").attr("x", margin.left).attr("y", margin.top).attr("height", height).attr("width", width).attr("fill", darkrect).attr("stroke", "none");
       yscale.domain(ylim).range([height + margin.top, margin.top + margin.inner]);
-      if ('additive' in data) {
-        additive_yscale.domain(additive_ylim).range([height + margin.top, margin.top + margin.inner + height / 2]);
-      }
       yticks = yticks != null ? yticks : yscale.ticks(nyticks);
-      if ('additive' in data) {
+      if (additive) {
+        additive_yscale.domain(additive_ylim).range([height + margin.top, margin.top + margin.inner + height / 2]);
         additive_yticks = additive_yticks != null ? additive_yticks : additive_yscale.ticks(nyticks);
       }
-      data = reorgLodData(data, lodvarname);
+      reorgLodData(data, lodvarname);
       data = chrscales(data, width, chrGap, margin.left, pad4heatmap);
       xscale = data.xscale;
       chrSelect = g.append("g").attr("class", "chrRect").selectAll("empty").data(data.chrnames).enter().append("rect").attr("id", function(d) {
@@ -135,7 +132,7 @@ lodchart = function() {
         var chr_plot;
         $('#topchart').remove();
         $('#chart_container').append('<div class="qtlcharts" id="topchart"></div>');
-        return chr_plot = new Chr_Manhattan_Plot(600, 1200, chr_ob);
+        return chr_plot = new Chr_Lod_Chart(600, 1200, chr_ob, manhattanPlot);
       };
       rotate_ylab = rotate_ylab != null ? rotate_ylab : ylab.length > 1;
       yaxis = g.append("g").attr("class", "y axis");
@@ -150,7 +147,7 @@ lodchart = function() {
         return formatAxis(yticks)(d);
       });
       yaxis.append("text").attr("class", "title").attr("y", margin.top + height / 2).attr("x", margin.left - axispos.ytitle).text(ylab).attr("transform", rotate_ylab ? "rotate(270," + (margin.left - axispos.ytitle) + "," + (margin.top + height / 2) + ")" : "").attr("text-anchor", "middle").attr("fill", "slateblue");
-      if ('additive' in data) {
+      if (additive) {
         rotate_additive_ylab = rotate_additive_ylab != null ? rotate_additive_ylab : additive_ylab.length > 1;
         additive_yaxis = g.append("g").attr("class", "y axis");
         additive_yaxis.selectAll("empty").data(additive_yticks).enter().append("line").attr("y1", function(d) {
@@ -189,12 +186,28 @@ lodchart = function() {
             return yscale(data.lodByChr[chr][i][lodcolumn]);
           });
         };
+        if (additive) {
+          additivecurve = function(chr, lodcolumn) {
+            return d3.svg.line().x(function(d) {
+              return xscale[chr](d);
+            }).y(function(d, i) {
+              return additive_yscale(data.additiveByChr[chr][i][lodcolumn]);
+            });
+          };
+        }
         curves = g.append("g").attr("id", "curves");
         _ref = data.chrnames;
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
           chr = _ref[_i];
           curves.append("path").datum(data.posByChr[chr[0]]).attr("d", lodcurve(chr[0], lodvarnum)).attr("stroke", lodlinecolor).attr("fill", "none").attr("stroke-width", linewidth).style("pointer-events", "none");
         }
+        if (additive) {
+          _ref1 = data.chrnames;
+          for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
+            chr = _ref1[_j];
+            curves.append("path").datum(data.posByChr[chr[0]]).attr("d", additivecurve(chr[0], lodvarnum)).attr("stroke", additivelinecolor).attr("fill", "none").attr("stroke-width", 1).style("pointer-events", "none");
+          }
+        }
       }
       console.log("before pointsize");
       if (pointsize > 0) {
@@ -413,6 +426,9 @@ lodchart = function() {
   chart.yscale = function() {
     return yscale;
   };
+  chart.additive = function() {
+    return additive;
+  };
   chart.additive_yscale = function() {
     return additive_yscale;
   };
diff --git a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
index d25c1d3a..b0eea3b6 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
@@ -93,7 +93,7 @@ $ ->
         url = "/interval_mapping"
         
         $('input[name=method]').val("reaper")
-        
+        $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_reaper]:checked').val())
         $('input[name=mapping_display_all]').val($('input[name=display_all_reaper]'))
         $('input[name=suggestive]').val($('input[name=suggestive_reaper]'))
         form_data = $('#trait_data_form').serialize()
@@ -142,6 +142,7 @@ $ ->
         $("#progress_bar_container").modal()
         url = "/marker_regression"
         $('input[name=method]').val("pylmm")
+        $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_pylmm]:checked').val())
         form_data = $('#trait_data_form').serialize()
         console.log("form_data is:", form_data)
         
diff --git a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
index d178879c..0b056442 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
@@ -101,6 +101,7 @@ $(function() {
       $("#progress_bar_container").modal();
       url = "/interval_mapping";
       $('input[name=method]').val("reaper");
+      $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_reaper]:checked').val());
       $('input[name=mapping_display_all]').val($('input[name=display_all_reaper]'));
       $('input[name=suggestive]').val($('input[name=suggestive_reaper]'));
       form_data = $('#trait_data_form').serialize();
@@ -125,6 +126,7 @@ $(function() {
       $("#progress_bar_container").modal();
       url = "/marker_regression";
       $('input[name=method]').val("pylmm");
+      $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_pylmm]:checked').val());
       form_data = $('#trait_data_form').serialize();
       console.log("form_data is:", form_data);
       return do_ajax_post(url, form_data);
diff --git a/wqflask/wqflask/templates/interval_mapping.html b/wqflask/wqflask/templates/interval_mapping.html
index 4fe5d0f8..7a03ce34 100755
--- a/wqflask/wqflask/templates/interval_mapping.html
+++ b/wqflask/wqflask/templates/interval_mapping.html
@@ -5,7 +5,6 @@
     <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" />

     <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />

-    <link rel="stylesheet" type="text/css" href="/static/new/css/interval_mapping.css" />

     <link rel="stylesheet" type="text/css" href="/static/new/css/d3-tip.min.css" />

     <link rel="stylesheet" type="text/css" href="/static/new/css/panelutil.css" />

 {% endblock %}

@@ -84,7 +83,7 @@
     <script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.js"></script>

     <script language="javascript" type="text/javascript" src="/static/new/javascript/chr_interval_map.js"></script>

     <script language="javascript" type="text/javascript" src="/static/new/javascript/lod_chart.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_interval_map.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_lodchart.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/new/packages/DataTables/js/dataTables.scientific.js"></script>

diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index 51aab95c..2c8f42a1 100755
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -87,10 +87,10 @@
     <script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/jspdf.plugin.standard_fonts_metrics.js"></script>

     <script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/jspdf.plugin.from_html.js"></script>-->

     <script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/new/javascript/chr_manhattan_plot.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/new/javascript/chr_lod_chart.js"></script>

 <!--    <script language="javascript" type="text/javascript" src="/static/new/javascript/manhattan_plot.js"></script>-->

     <script language="javascript" type="text/javascript" src="/static/new/javascript/lod_chart.js"></script>

-    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_manhattan_plot.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_lodchart.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/new/packages/DataTables/js/dataTables.scientific.js"></script>

diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html
index e5d96490..3fd98df3 100755
--- a/wqflask/wqflask/templates/show_trait_mapping_tools.html
+++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html
@@ -80,6 +80,20 @@
                         </div>
                     </div>
 
+                    <div class="control-group mapping_method_fields">
+                        <label class="control-label">Manhattan Plot</label>
+                        <div class="controls">                      
+                            <label class="radio inline">
+                                <input type="radio" name="manhattan_plot_reaper" value=true>
+                                Yes
+                            </label>
+                            <label class="radio inline">
+                                <input type="radio" name="manhattan_plot_reaper" value=false checked>
+                                No
+                            </label>
+                        </div>
+                    </div>
+                    
 <!--                    <div class="control-group mapping_method_fields">
                         <label class="control-label"><b>Composite Mapping</b></label>
                         <div class="controls" id="use_composite_choice">                      
@@ -179,11 +193,11 @@
                     <div class="control-group">
                         <label for="num_perm_rqtl_geno" class="control-label">Permutations (n)</label>
                         <div class="controls">
-                            <input name="num_perm_rqtl_geno" value="0" type="text" />
+                            <input name="num_perm_rqtl_geno" value="500" type="text" />
                         </div>
                     </div>
                     <div class="control-group">
-                        <label for="control_rqtl_geno" class="control-label">Control Marker</label>
+                        <label for="control_rqtl_geno" class="control-label">Control Marker(s)</label>
                         <div class="controls">
                             {% if dataset.type == 'ProbeSet' %}
                             <input name="control_rqtl_geno" value="{{ nearest_marker1+","+nearest_marker2 }}" type="text" />
diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py
index 869bd621..51b9cb0c 100755
--- a/wqflask/wqflask/views.py
+++ b/wqflask/wqflask/views.py
@@ -339,6 +339,7 @@ def interval_mapping_page():
         'mapping_method',
         'chromosome',
         'num_perm',
+        'manhattan_plot',
         'do_bootstraps',
         'display_additive',
         'default_control_locus',
@@ -350,7 +351,7 @@ def interval_mapping_page():
         if key in wanted or key.startswith(('value:')):
             start_vars[key] = value
 
-    version = "v4"
+    version = "v1"
     key = "interval_mapping:{}:".format(version) + json.dumps(start_vars, sort_keys=True)
     print("key is:", pf(key))
     with Bench("Loading cache"):