Merge pull request #76 from lomereiter/fix_mapping_results

fix mapping results loading

8 files changed, 137 insertions, 145 deletions

diff --git a/wqflask/wqflask/static/new/javascript/create_lodchart.coffee b/wqflask/wqflask/static/new/javascript/create_lodchart.coffee
index 76be5490..f1da65d7 100644
--- a/wqflask/wqflask/static/new/javascript/create_lodchart.coffee
+++ b/wqflask/wqflask/static/new/javascript/create_lodchart.coffee
@@ -44,8 +44,8 @@ create_manhattan_plot = ->
                     d3.select(this)
                       .transition().duration(500).attr("r", r*3)
                       .transition().duration(500).attr("r", r)
-                  
-create_manhattan_plot()
+
+root.create_manhattan_plot = create_manhattan_plot
 
 $("#export").click =>
     #Get d3 SVG element
diff --git a/wqflask/wqflask/static/new/javascript/create_lodchart.js b/wqflask/wqflask/static/new/javascript/create_lodchart.js
index f61f05bd..546d7c18 100644
--- a/wqflask/wqflask/static/new/javascript/create_lodchart.js
+++ b/wqflask/wqflask/static/new/javascript/create_lodchart.js
@@ -1,73 +1,76 @@
-// Generated by CoffeeScript 1.8.0
-var create_manhattan_plot;
+// Generated by CoffeeScript 1.9.2
+(function() {
+  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";
+  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);
     });
-  });
-  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();
+  root.create_manhattan_plot = 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").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));
+  $("#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));
+
+}).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 9e070c97..29a637ee 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
@@ -76,14 +76,13 @@ do_ajax_post = (url, form_data) ->
         return false
 
 open_mapping_results = (data) ->
-    results_window = window.open()
-    $(results_window.document.body).html(data)
-    #$.colorbox(
-    #    html: data
-    #    href: "#mapping_results_holder"
-    #    height: "90%"
-    #    width: "90%"
-    #)
+    $.colorbox(
+       html: data
+       href: "#mapping_results_holder"
+       height: "90%"
+       width: "90%"
+       onComplete: => root.create_manhattan_plot()
+    )
 
 showalert = (message,alerttype) ->
     $('#alert_placeholder').append('<div id="alertdiv" class="alert ' +  alerttype + '"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
@@ -119,7 +118,7 @@ $('input[name=display_all]').change(() =>
 )
 
 $("#pylmm_compute").on("click", =>
-        #$("#progress_bar_container").modal()
+        $("#progress_bar_container").modal()
         url = "/marker_regression"
         $('input[name=method]').val("pylmm")
         $('input[name=num_perm]').val($('input[name=num_perm_pylmm]').val())
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 cc1ddf37..03862cf8 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
@@ -1,4 +1,4 @@
-// Generated by CoffeeScript 1.8.0
+// Generated by CoffeeScript 1.9.2
 (function() {
   var block_outliers, composite_mapping_fields, do_ajax_post, get_progress, mapping_method_fields, open_mapping_results, showalert, submit_special, toggle_enable_disable, update_time_remaining;
 
@@ -97,9 +97,17 @@
   };
 
   open_mapping_results = function(data) {
-    var results_window;
-    results_window = window.open();
-    return $(results_window.document.body).html(data);
+    return $.colorbox({
+      html: data,
+      href: "#mapping_results_holder",
+      height: "90%",
+      width: "90%",
+      onComplete: (function(_this) {
+        return function() {
+          return root.create_manhattan_plot();
+        };
+      })(this)
+    });
   };
 
   showalert = function(message, alerttype) {
@@ -139,6 +147,7 @@
   $("#pylmm_compute").on("click", (function(_this) {
     return function() {
       var form_data, url;
+      $("#progress_bar_container").modal();
       url = "/marker_regression";
       $('input[name=method]').val("pylmm");
       $('input[name=num_perm]').val($('input[name=num_perm_pylmm]').val());
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index 30519e24..78682710 100755
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -1,3 +1,4 @@
+{% from "base_macro.html" import header, flash_me, timeago %}
 <!DOCTYPE HTML>
 <html lang="en">
 <html xmlns="http://www.w3.org/1999/xhtml">
@@ -19,37 +20,6 @@
 
 </head>
 
-{% macro header(main, second) %}
-    <header class="jumbotron subhead" id="overview" >
-        <div class="container">
-            <h1>{{ main }}</h1>
-            <p class="lead">
-               {{ second }}
-            </p>
-        </div>
-    </header>
-
-    {{ flash_me() }}
-{% endmacro %}
-
-
-{% macro flash_me() -%}
-    {% with messages = get_flashed_messages(with_categories=true) %}
-        {% if messages %}
-        <div class="container">
-            {% for category, message in messages %}
-                <div class="alert {{ category }}">{{ message }}</div>
-            {% endfor %}
-        </div>
-        {% endif %}
-    {% endwith %}
-{% endmacro %}
-
-{% macro timeago(timestamp) %}
-<time class="timeago" datetime="{{ timestamp }}">{{ timestamp }}</time>
-{% endmacro %}
-
-
 <body style="width: 1500px !important;">
     <!-- Navbar ================================================== -->
 
diff --git a/wqflask/wqflask/templates/base_macro.html b/wqflask/wqflask/templates/base_macro.html
new file mode 100644
index 00000000..c2905ebe
--- /dev/null
+++ b/wqflask/wqflask/templates/base_macro.html
@@ -0,0 +1,28 @@
+{% macro flash_me() -%}
+    {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="container">
+            {% for category, message in messages %}
+                <div class="alert {{ category }}">{{ message }}</div>
+            {% endfor %}
+        </div>
+        {% endif %}
+    {% endwith %}
+{% endmacro %}
+
+{% macro header(main, second) %}
+    <header class="jumbotron subhead" id="overview" >
+        <div class="container">
+            <h1>{{ main }}</h1>
+            <p class="lead">
+               {{ second }}
+            </p>
+        </div>
+    </header>
+
+    {{ flash_me() }}
+{% endmacro %}
+
+{% macro timeago(timestamp) %}
+<time class="timeago" datetime="{{ timestamp }}">{{ timestamp }}</time>
+{% endmacro %}
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index 62146662..0cd004cd 100755
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -1,16 +1,5 @@
-{% extends "base.html" %}
-{% block title %}Interval Mapping{% 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/css/show_trait.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" />
-    <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.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 %}
-{% block content %} <!-- Start of body -->
-
+{% from "base_macro.html" import header %}
+{% block content %}
     {{ header("Mapping",
         '{}: {}'.format(this_trait.name, this_trait.description_fmt)) }}
 
@@ -76,22 +65,6 @@
         js_data = {{ js_data | safe }}
     </script>
 
-    <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/js_external/d3-tip.min.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/libs/FileSaver.js/FileSaver.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/libs/Blob.js/BlobBuilder.js"></script>
-    <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_lod_chart.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_lodchart.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>
-    <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
-
     <script type="text/javascript" charset="utf-8">
         $(document).ready( function () {
             console.time("Creating table");
@@ -118,4 +91,4 @@
             console.timeEnd("Creating table");
         });
     </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index ca530162..cdde5d9d 100755
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -12,6 +12,8 @@
     <link rel="stylesheet" type="text/css" href="/static/new/packages/nvd3/nv.d3.min.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" />
+    <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
+
 {% endblock %}
 {% block content %} <!-- Start of body -->
 
@@ -133,8 +135,16 @@
     <script type="text/javascript" src="/static/new/javascript/show_trait.js"></script>
     <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>
     <script type="text/javascript" src="/static/new/javascript/validation.js"></script>
-    
+    <script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/libs/FileSaver.js/FileSaver.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/libs/Blob.js/BlobBuilder.js"></script>
+    <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/chr_lod_chart.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/javascript/lod_chart.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>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>