Merge pull request #81 from lomereiter/fix_exporting

Fix SVG/PDF exporting

8 files changed, 94 insertions, 115 deletions

diff --git a/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee b/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee
index 321957b3..e00694be 100644
--- a/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/chr_lod_chart.coffee
@@ -193,18 +193,7 @@ class Chr_Lod_Chart
             .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)

+        $("#return_to_full_view").show().click => @return_to_full_view()

 

     add_path: () ->

         line_function = d3.svg.line()

@@ -281,9 +270,10 @@ class Chr_Lod_Chart
                 )

 

     return_to_full_view: () ->

+        $("#return_to_full_view").hide()

         $('#topchart').remove()

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

-        create_manhattan_plot()

+        create_lod_chart()

 

     show_marker_in_table: (marker_info) ->

         console.log("in show_marker_in_table")

diff --git a/wqflask/wqflask/static/new/javascript/chr_lod_chart.js b/wqflask/wqflask/static/new/javascript/chr_lod_chart.js
index 95dbb4e2..c060d9d7 100644
--- a/wqflask/wqflask/static/new/javascript/chr_lod_chart.js
+++ b/wqflask/wqflask/static/new/javascript/chr_lod_chart.js
@@ -1,4 +1,4 @@
-// Generated by CoffeeScript 1.8.0
+// Generated by CoffeeScript 1.9.2
 var Chr_Lod_Chart;
 
 Chr_Lod_Chart = (function() {
@@ -38,28 +38,28 @@ Chr_Lod_Chart = (function() {
   }
 
   Chr_Lod_Chart.prototype.get_max_chr = function() {
-    var key, _results;
+    var key, results;
     this.max_chr = 0;
-    _results = [];
+    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));
+        results.push(this.max_chr = parseInt(key));
       } else {
-        _results.push(void 0);
+        results.push(void 0);
       }
     }
-    return _results;
+    return results;
   };
 
   Chr_Lod_Chart.prototype.filter_qtl_results = function() {
-    var result, this_chr, _i, _len, _ref, _results;
+    var i, len, ref, result, results, this_chr;
     this.these_results = [];
     this_chr = 100;
-    _ref = this.qtl_results;
-    _results = [];
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      result = _ref[_i];
+    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 {
@@ -71,20 +71,20 @@ Chr_Lod_Chart = (function() {
         break;
       }
       if (parseInt(this_chr) === parseInt(this.chr[0])) {
-        _results.push(this.these_results.push(result));
+        results.push(this.these_results.push(result));
       } else {
-        _results.push(void 0);
+        results.push(void 0);
       }
     }
-    return _results;
+    return results;
   };
 
   Chr_Lod_Chart.prototype.get_qtl_count = function() {
-    var high_qtl_count, result, _i, _len, _ref;
+    var high_qtl_count, i, len, ref, result;
     high_qtl_count = 0;
-    _ref = this.these_results;
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      result = _ref[_i];
+    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;
       }
@@ -94,16 +94,16 @@ Chr_Lod_Chart = (function() {
   };
 
   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];
+    var i, len, ref, result, 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));
+      results.push(this.marker_names.push(result.name));
     }
-    return _results;
+    return results;
   };
 
   Chr_Lod_Chart.prototype.create_svg = function() {
@@ -189,7 +189,11 @@ Chr_Lod_Chart = (function() {
   };
 
   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);
+    return $("#return_to_full_view").show().click((function(_this) {
+      return function() {
+        return _this.return_to_full_view();
+      };
+    })(this));
   };
 
   Chr_Lod_Chart.prototype.add_path = function() {
@@ -253,9 +257,10 @@ Chr_Lod_Chart = (function() {
   };
 
   Chr_Lod_Chart.prototype.return_to_full_view = function() {
+    $("#return_to_full_view").hide();
     $('#topchart').remove();
     $('#chart_container').append('<div class="qtlcharts" id="topchart"></div>');
-    return create_manhattan_plot();
+    return create_lod_chart();
   };
 
   Chr_Lod_Chart.prototype.show_marker_in_table = function(marker_info) {
diff --git a/wqflask/wqflask/static/new/javascript/create_lodchart.coffee b/wqflask/wqflask/static/new/javascript/create_lodchart.coffee
index df176f52..472ec12d 100644
--- a/wqflask/wqflask/static/new/javascript/create_lodchart.coffee
+++ b/wqflask/wqflask/static/new/javascript/create_lodchart.coffee
@@ -52,41 +52,3 @@ $ ->
     #window.setTimeout(create_lod_chart(), 1000)
     root.create_lod_chart = create_lod_chart
 
-$("#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
index a7cea8a5..2537e9e2 100644
--- a/wqflask/wqflask/static/new/javascript/create_lodchart.js
+++ b/wqflask/wqflask/static/new/javascript/create_lodchart.js
@@ -1,4 +1,4 @@
-// Generated by CoffeeScript 1.8.0
+// Generated by CoffeeScript 1.9.2
 (function() {
   var create_lod_chart;
 
@@ -43,34 +43,8 @@
     });
   };
 
-  root.create_lod_chart = create_lod_chart;
-
-  $("#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));
+  $(function() {
+    return root.create_lod_chart = create_lod_chart;
+  });
 
 }).call(this);
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 211fedae..16ca1886 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
@@ -87,8 +87,30 @@ open_mapping_results = (data) ->
        href: "#mapping_results_holder"
        height: "90%"
        width: "90%"
-       onComplete: => root.create_lod_chart()
-    )
+       onComplete: =>
+          root.create_lod_chart()
+
+          #Set filename
+          filename = "lod_chart_" + js_data.this_trait
+
+          getSvgXml = ->
+              svg = $("#topchart").find("svg")[0]
+              (new XMLSerializer).serializeToString(svg)
+
+          $("#exportform > #export").click =>
+              svg_xml = getSvgXml()
+              form = $("#exportform")
+              form.find("#data").val(svg_xml)
+              form.find("#filename").val(filename)
+              form.submit()
+
+          $("#exportpdfform > #export_pdf").click =>
+              svg_xml = getSvgXml()
+              form = $("#exportpdfform")
+              form.find("#data").val(svg_xml)
+              form.find("#filename").val(filename)
+              form.submit()
+     )
 
 showalert = (message,alerttype) ->
     $('#alert_placeholder').append('<div id="alertdiv" class="alert ' +  alerttype + '"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
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 259e4685..d6f4ba89 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
@@ -79,6 +79,7 @@ do_ajax_post = function(url, form_data) {
         console.log(xhr);
         clearInterval(_this.my_timer);
         $('#progress_bar_container').modal('hide');
+        $('#static_progress_bar_container').modal('hide');
         return $("body").html("We got an error.");
       };
     })(this),
@@ -86,6 +87,7 @@ do_ajax_post = function(url, form_data) {
       return function(data) {
         clearInterval(_this.my_timer);
         $('#progress_bar_container').modal('hide');
+        $('#static_progress_bar_container').modal('hide');
         return open_mapping_results(data);
       };
     })(this)
@@ -103,14 +105,37 @@ open_mapping_results = function(data) {
     width: "90%",
     onComplete: (function(_this) {
       return function() {
-        return root.create_lod_chart();
+        var filename, getSvgXml;
+        root.create_lod_chart();
+        filename = "lod_chart_" + js_data.this_trait;
+        getSvgXml = function() {
+          var svg;
+          svg = $("#topchart").find("svg")[0];
+          return (new XMLSerializer).serializeToString(svg);
+        };
+        $("#exportform > #export").click(function() {
+          var form, svg_xml;
+          svg_xml = getSvgXml();
+          form = $("#exportform");
+          form.find("#data").val(svg_xml);
+          form.find("#filename").val(filename);
+          return form.submit();
+        });
+        return $("#exportpdfform > #export_pdf").click(function() {
+          var form, svg_xml;
+          svg_xml = getSvgXml();
+          form = $("#exportpdfform");
+          form.find("#data").val(svg_xml);
+          form.find("#filename").val(filename);
+          return form.submit();
+        });
       };
     })(this)
   });
 };
 
 showalert = function(message, alerttype) {
-  return $('#alert_placeholder').append('<div id="alertdiv" class="alert ' + alerttype + '"><a class="close" data-dismiss="alert">×</a><span>' + message + '</span></div>');
+  return $('#alert_placeholder').append('<div id="alertdiv" class="alert ' + alerttype + '"><a class="close" data-dismiss="alert">�</a><span>' + message + '</span></div>');
 };
 
 $('#suggestive').hide();
@@ -221,4 +246,4 @@ $("#choose_closet_control").change(function() {
 
 $("#display_all_lrs").change(function() {
   return toggle_enable_disable("#suggestive_lrs");
-});
\ No newline at end of file
+});
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index 0cd004cd..d8f64c20 100755
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -19,6 +19,7 @@
               <input type="submit" id="export_pdf" value="Download PDF">
             </form>
 <!--            <button id="export_pdf" class="btn">Export PDF</button>-->
+            <button id="return_to_full_view" class="btn" style="display:none">Return to full view</button>
         </div>
         <div id="chart_container">
             <div class="qtlcharts" id="topchart">
diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py
index f9b27207..201d1452 100755
--- a/wqflask/wqflask/views.py
+++ b/wqflask/wqflask/views.py
@@ -377,7 +377,7 @@ def export():
     svg_xml = request.form.get("data", "Invalid data")
     filename = request.form.get("filename", "manhattan_plot_snp")
     response = Response(svg_xml, mimetype="image/svg+xml")
-    response.headers["Content-Disposition"] = "attchment; filename=%s"%filename
+    response.headers["Content-Disposition"] = "attachment; filename=%s"%filename
     return response
 
 @app.route("/export_pdf", methods = ('POST',))
@@ -390,7 +390,7 @@ def export_pdf():
     filepath = "/home/zas1024/gene/wqflask/output/"+filename
     pdf_file = cairosvg.svg2pdf(bytestring=svg_xml)
     response = Response(pdf_file, mimetype="application/pdf")
-    response.headers["Content-Disposition"] = "attchment; filename=%s"%filename
+    response.headers["Content-Disposition"] = "attachment; filename=%s"%filename
     return response
 
 @app.route("/interval_mapping", methods=('POST',))