Mapping now also computes if you click the tab + some aesthetic changes

2 files changed, 83 insertions, 70 deletions

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 8db9522c..3d66a698 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
@@ -160,68 +160,80 @@
 
   $("#rqtl_geno_compute").on("click", (function(_this) {
     return function() {
-      var form_data, url;
-      url = "/loading";
-      $('input[name=method]').val("rqtl_geno");
-      $('input[name=selected_chr]').val($('#chr_rqtl_geno').val());
-      $('input[name=genofile]').val($('#genofile_rqtl_geno').val());
-      $('input[name=num_perm]').val($('input[name=num_perm_rqtl_geno]').val());
-      $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_rqtl]:checked').val());
-      $('input[name=control_marker]').val($('input[name=control_rqtl_geno]').val());
-      $('input[name=do_control]').val($('input[name=do_control_rqtl]:checked').val());
-      $('input[name=tool_used]').val("Mapping");
-      $('input[name=form_url]').val("/run_mapping");
-      $('input[name=wanted_inputs]').val(mapping_input_list.join(","));
-      if ($('input[name=pair_scan]:checked').val() == "true") {
-        run_pair_scan = confirm(runtime_warning_text)
-        if (run_pair_scan == true) {
-          submit_special(url);
+      if ($(this).hasClass('active') || $(this).attr('id') == "rqtl_compute"){
+        var form_data, url;
+        url = "/loading";
+        $('input[name=method]').val("rqtl_geno");
+        $('input[name=selected_chr]').val($('#chr_rqtl_geno').val());
+        $('input[name=genofile]').val($('#genofile_rqtl_geno').val());
+        $('input[name=num_perm]').val($('input[name=num_perm_rqtl_geno]').val());
+        $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_rqtl]:checked').val());
+        $('input[name=control_marker]').val($('input[name=control_rqtl_geno]').val());
+        $('input[name=do_control]').val($('input[name=do_control_rqtl]:checked').val());
+        $('input[name=tool_used]').val("Mapping");
+        $('input[name=form_url]').val("/run_mapping");
+        $('input[name=wanted_inputs]').val(mapping_input_list.join(","));
+        if ($('input[name=pair_scan]:checked').val() == "true") {
+          run_pair_scan = confirm(runtime_warning_text)
+          if (run_pair_scan == true) {
+            submit_special(url);
+          }
+          else {
+            return false
+          }
         }
         else {
-          return false
+          return submit_special(url);
         }
-      }
-      else {
-        return submit_special(url);
+      } else {
+        return true
       }
     };
   })(this));
-
-  $("#gemma_compute").on("click", (function(_this) {
+  
+  $(".gemma_tab, #gemma_compute").on("click", (function(_this) {
     return function() {
-      var form_data, url;
-      console.log("RUNNING GEMMA");
-      url = "/loading";
-      $('input[name=method]').val("gemma");
-      $('input[name=selected_chr]').val($('#chr_gemma').val());
-      $('input[name=num_perm]').val(0);
-      $('input[name=genofile]').val($('#genofile_gemma').val());
-      $('input[name=maf]').val($('input[name=maf_gemma]').val());
-      $('input[name=tool_used]').val("Mapping");
-      $('input[name=form_url]').val("/run_mapping");
-      $('input[name=wanted_inputs]').val(mapping_input_list.join(","));
-      return submit_special(url);
+      if ($(this).hasClass('active') || $(this).attr('id') == "gemma_compute"){
+        var form_data, url;
+        console.log("RUNNING GEMMA");
+        url = "/loading";
+        $('input[name=method]').val("gemma");
+        $('input[name=selected_chr]').val($('#chr_gemma').val());
+        $('input[name=num_perm]').val(0);
+        $('input[name=genofile]').val($('#genofile_gemma').val());
+        $('input[name=maf]').val($('input[name=maf_gemma]').val());
+        $('input[name=tool_used]').val("Mapping");
+        $('input[name=form_url]').val("/run_mapping");
+        $('input[name=wanted_inputs]').val(mapping_input_list.join(","));
+        return submit_special(url);
+      } else {
+        return true
+      }
     };
   })(this));
 
-  $("#interval_mapping_compute").on("click", (function(_this) {
+  $(".reaper_tab, #interval_mapping_compute").on("click", (function(_this) {
     return function() {
-      var form_data, url;
-      console.log("In interval mapping");
-      url = "/loading";
-      $('input[name=method]').val("reaper");
-      $('input[name=selected_chr]').val($('#chr_reaper').val());
-      $('input[name=genofile]').val($('#genofile_reaper').val());
-      $('input[name=num_perm]').val($('input[name=num_perm_reaper]').val());
-      $('input[name=control_marker]').val($('input[name=control_reaper]').val());
-      $('input[name=do_control]').val($('input[name=do_control_reaper]:checked').val());
-      $('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]'));
-      $('input[name=tool_used]').val("Mapping");
-      $('input[name=form_url]').val("/run_mapping");
-      $('input[name=wanted_inputs]').val(mapping_input_list.join(","));
-      return submit_special(url);
+      if ($(this).hasClass('active') || $(this).attr('id') == "interval_mapping_compute"){
+        var form_data, url;
+        console.log("In interval mapping");
+        url = "/loading";
+        $('input[name=method]').val("reaper");
+        $('input[name=selected_chr]').val($('#chr_reaper').val());
+        $('input[name=genofile]').val($('#genofile_reaper').val());
+        $('input[name=num_perm]').val($('input[name=num_perm_reaper]').val());
+        $('input[name=control_marker]').val($('input[name=control_reaper]').val());
+        $('input[name=do_control]').val($('input[name=do_control_reaper]:checked').val());
+        $('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]'));
+        $('input[name=tool_used]').val("Mapping");
+        $('input[name=form_url]').val("/run_mapping");
+        $('input[name=wanted_inputs]').val(mapping_input_list.join(","));
+        return submit_special(url);
+      } else {
+        return true
+      }
     };
   })(this));
 
diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html
index 1a67dce8..bc8b9743 100644
--- a/wqflask/wqflask/templates/show_trait_mapping_tools.html
+++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html
@@ -1,27 +1,27 @@
 <div>
     {% if dataset.group.mapping_names|length > 0 %}
-    <div class="col-xs-4" style="min-width: 600px;">
+    <div class="col-xs-3" style="min-width: 400px;">
         <div class="tabbable"> <!-- Only required for left/right tabs -->
 
             <ul class="nav nav-pills">
                 {% if dataset.group.mapping_id == "1" %}
-                <li class="mapping_tab active">
+                <li class="gemma_tab mapping_tab active">
                     <a href="#gemma" data-toggle="tab">GEMMA</a>
                 </li>
-                <li class="mapping_tab">
+                <li class="reaper_tab mapping_tab">
                     <a href="#interval_mapping" data-toggle="tab">Haley-Knott Regression</a>
                 </li>
-                <li class="mapping_tab rqtl">
+                <li class="rqtl_tab mapping_tab rqtl">
                     <a href="#rqtl_geno" data-toggle="tab">R/qtl</a>
                 </li>
                 {% endif %}
                 {% for mapping_method in dataset.group.mapping_names %}
                 {% if mapping_method == "GEMMA" %}
-                <li class="mapping_tab active">
+                <li class="gemma_plink_tab mapping_tab active">
                     <a href="#gemma_plink" data-toggle="tab">GEMMA</a>
                 </li>
                 {% elif mapping_method == "PLINK" %}
-                <li class="mapping_tab">
+                <li class="plink_tab mapping_tab">
                     <a href="#plink" data-toggle="tab">PLINK</a>
                 </li>
                 {% endif %}
@@ -37,7 +37,7 @@
                         <div class="mapping_method_fields form-group">
                             <label for="chr_select" style="text-align: right;" class="col-xs-3 control-label">Chromosome</label>
                             <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="chr_gemma" class="form-control">
+                                <select id="chr_gemma" class="form-control" style="width: 80px;">
                                     {% for item in chr_list %}
                                     <option value="{{ item[1] }}">{{ item[0] }}</option>
                                     {% endfor %}
@@ -59,7 +59,7 @@
                         <div class="mapping_method_fields form-group">
                             <label for="maf_gemma" style="text-align: right;" class="col-xs-3 control-label">MAF</label>
                             <div style="margin-left:20px;" class="col-xs-4 controls">
-                                <input name="maf_gemma" value="{{ maf }}" type="text" class="form-control">
+                                <input name="maf_gemma" value="{{ maf }}" type="text" class="form-control" style="width: 80px;">
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
@@ -85,11 +85,11 @@
                               {% if g.user_session.num_collections < 1 %}
                               No collections available. Please add traits to a collection to use them as covariates.
                               {% else %}
-                              <div style="margin-bottom: 10px;" class="btn-group" role="group">
-                                <button type="button" id="select_covariates" class="btn btn-default">Select</button>
-                                <button type="button" id="remove_covariates" class="btn btn-default">Remove</button>
+                              <div style="margin-bottom: 10px;">
+                                <button type="button" id="select_covariates" class="btn btn-default" style="width: 80px; padding-right: 10px;">Select</button>
+                                <button type="button" id="remove_covariates" class="btn btn-default" style="width: 80px;">Remove</button>
                               </div>
-                              <textarea rows="3" cols="50" readonly placeholder="No covariates selected" style="overflow-y: scroll; resize: none;" class="selected_covariates"></textarea>
+                              <textarea rows="3" cols="50" readonly placeholder="No covariates selected" style="overflow-y: scroll; resize: none; width: 200px;" class="selected_covariates"></textarea>
                               {% endif %}
                               {% elif g.cookie_session.display_num_collections() == "" %}
                               No collections available. Please add traits to a collection to use them as covariates.
@@ -98,7 +98,8 @@
                                 <button type="button" id="select_covariates" class="btn btn-default">Select</button>
                                 <button type="button" id="remove_covariates" class="btn btn-default">Remove</button>
                               </div>
-                              <textarea rows="3" cols="20" readonly placeholder="No covariates selected" style="overflow-y: scroll; resize: none;" class="selected_covariates"></textarea>
+                              <br>
+                              <textarea rows="3" cols="30" readonly placeholder="No covariates selected" style="overflow-y: scroll; resize: none;" class="selected_covariates"></textarea>
                               {% endif %}
                             </div>
                         </div>
@@ -118,7 +119,7 @@
                         <div class="mapping_method_fields form-group">
                             <label for="reaper_version" style="text-align: right;" class="col-xs-3 control-label">Version<sup><a title="'New' is the new qtlreaper implementation written in RUST by Christian Fischer. 'Original' corresponds to the original version written in C.">?</a></sup></label>
                             <div style="margin-left:20px;" class="col-xs-3 controls">
-                                <select name="reaper_version" class="form-control">
+                                <select name="reaper_version" class="form-control" style="width: 80px;">
                                     <option value="new">New</option>
                                     <option value="original">Original</option>
                                 </select>
@@ -127,7 +128,7 @@
                         <div class="mapping_method_fields form-group">
                             <label for="chr_select" style="text-align: right;" class="col-xs-3 control-label">Chromosome</label>
                             <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="chr_reaper" class="form-control">
+                                    <select id="chr_reaper" class="form-control" style="width: 80px;">
                                     {% for item in chr_list %}
                                     <option value="{{ item[1] }}">{{ item[0] }}</option>
                                     {% endfor %}
@@ -232,7 +233,7 @@
                         <div class="mapping_method_fields form-group">
                             <label for="chr_select" style="text-align: right;" class="col-xs-3 control-label">Chromosome</label>
                             <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="chr_rqtl_geno" class="form-control">
+                                    <select id="chr_rqtl_geno" class="form-control" style="width: 80px;">
                                     {% for item in chr_list %}
                                     <option value="{{ item[1] }}">{{ item[0] }}</option>
                                     {% endfor %}
@@ -354,9 +355,9 @@
             </div>
         </div>
     </div>
-    <div class="col-xs-6">
-        <dl>
-             <dt>GEMMA</dt>
+    <div class="col-xs-7">
+        <dl style="width: 400px;">
+             <dt style="padding-top: 20px;">GEMMA</dt>
              <dd>GEMMA is software implementing the Genome-wide Efficient Mixed Model Association algorithm for a standard linear mixed model for genome-wide association studies (GWAS).</dd>
              {% if dataset.group.mapping_id == "1" %}
              <dt style="margin-top: 20px;">Haley-Knott Regression</dt>