Added form options for changing manhattan plot color scheme + added necessary imports and hidden inputs

1 files changed, 42 insertions, 5 deletions

diff --git a/wqflask/wqflask/templates/mapping_results.html b/wqflask/wqflask/templates/mapping_results.html
index 28d93542..9542c29d 100644
--- a/wqflask/wqflask/templates/mapping_results.html
+++ b/wqflask/wqflask/templates/mapping_results.html
@@ -40,6 +40,9 @@
         <input type="hidden" name="use_loco" value="{{ use_loco }}">
         <input type="hidden" name="selected_chr" value="{{ selectedChr }}">
         <input type="hidden" name="manhattan_plot" value="{{ manhattan_plot }}">
+        {% if manhattan_plot == True %}
+        <input type="hidden" name="color_scheme" value="alternating">
+        {% endif %}
         <input type="hidden" name="num_perm" value="{{ nperm }}">
         <input type="hidden" name="perm_info" value="">
         <input type="hidden" name="perm_strata" value="{{ perm_strata }}">
@@ -55,7 +58,7 @@
         <input type="hidden" name="wanted_inputs" value="">
         <input type="hidden" name="form_url" value="/run_mapping">
         
-        <div class="container">
+        <div class="container" style="min-width: 1400px;">
           <div class="col-xs-5">
               <h2>Map Viewer: Whole Genome</h2><br>
               <b>Population:</b> {{ dataset.group.species|capitalize }} {{ dataset.group.name }}<br>
@@ -77,7 +80,7 @@
               <table>
                 <tr>
                   <td><b>Chr:&nbsp;</b></td>
-                  <td>
+                  <td style="padding: 5px;">
                     <select name="chromosomes" size="1">
                         {% for chr in ChrList %}
                         <option value="{{ chr[1] }}" {% if (chr[1] + 1) == selectedChr %}selected{% endif %}>{{ chr[0] }}</option>
@@ -87,7 +90,7 @@
                   </td>
                 </tr>
                 <tr>
-                  <td><b>View:&nbsp;</b></td>
+                  <td ><b>View:&nbsp;</b></td>
                   <td style="padding: 5px;">
                     <input type="text" name="startMb" size="7" value="{% if startMb != -1 %}{{ startMb }}{% endif %}"> to <input type="text" name="endMb" size="7" value="{% if endMb != -1 %}{{ endMb }}{% endif %}">
                   </td>
@@ -114,11 +117,31 @@
                 </tr>
                 <tr>
                   <td><b>Width:&nbsp;</b></td>
-                  <td>
+                  <td style="padding: 5px;">
                     <input type="text" name="graphWidth" value="{% if graphWidth is defined %}{{ graphWidth }}{% else %}1600{% endif %}" size="5"><span style="font-size: 12px;"> pixels (minimum=900)</span>
                   </td>
                 </tr>
               </table>
+              {% if manhattan_plot == True and selectedChr == -1 %}
+              <table style="margin-top: 10px;">
+                <tr>
+                  <td>
+                    <b>Manhattan Plot Color Scheme:&nbsp;</b>
+                  </td>
+                  <td>
+                    <select id="color_scheme">
+                      <option value="alternating" {% if color_scheme == "alternating" %}selected{% endif %}>Alternating</option>
+                      <option value="varied" {% if color_scheme == "varied" %}selected{% endif %}>Varied by Chr</option>
+                      <option value="single" {% if color_scheme == "single" %}selected{% endif %}>Single Color</option>
+                    </select>
+                  </td>
+                  <td>
+                    <input name="manhattan_single_color" type="hidden" id="point_color" value={% if manhattan_single_color %}{{ manhattan_single_color }}{% else %}"#D9D9D9"{% endif %}>
+                    <button style="display: none; margin-left: 5px;" id="point_color_picker" class="jscolor {valueElement: 'point_color'}">Choose Color</button>
+                  </td>
+                </tr>
+              </table>
+              {% endif %}
             </div>
             <div class="col-xs-4" style="padding: 0px;">
                   {% if (mapping_method == "reaper" or mapping_method == "rqtl_geno") and nperm > 0 %}
@@ -328,6 +351,9 @@
     <script type="text/javascript" src="{{ url_for('js', filename='underscore-string/underscore.string.min.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('js', filename='d3-tip/d3-tip.js') }}"></script>
     <script type="text/javascript" src="/static/new/js_external/plotly-latest.min.js"></script>
+    {% if manhattan_plot == True and selectedChr == -1 %}
+    <script type="text/javascript" src="/static/new/js_external/jscolor.js"></script>
+    {% endif %}
 
     <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
     <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/dataTables.buttons.min.js"></script>
@@ -423,7 +449,7 @@
 
         var mapping_input_list = ['temp_uuid', 'trait_id', 'dataset', 'tool_used', 'form_url', 'method', 'transform', 'trimmed_markers', 'selected_chr', 'chromosomes', 'mapping_scale',
                             'score_type', 'suggestive', 'significant', 'num_perm', 'permCheck', 'perm_output', 'perm_strata', 'categorical_vars', 'num_bootstrap', 'bootCheck', 'bootstrap_results',
-                            'LRSCheck', 'covariates', 'maf', 'use_loco', 'manhattan_plot', 'control_marker', 'control_marker_db', 'do_control', 'genofile', 
+                            'LRSCheck', 'covariates', 'maf', 'use_loco', 'manhattan_plot', 'color_scheme', 'manhattan_single_color', 'control_marker', 'control_marker_db', 'do_control', 'genofile',
                             'pair_scan', 'startMb', 'endMb', 'graphWidth', 'lrsMax', 'additiveCheck', 'showSNP', 'showGenes', 'viewLegend', 'haplotypeAnalystCheck', 
                             'mapmethod_rqtl_geno', 'mapmodel_rqtl_geno', 'temp_trait', 'group', 'species', 'reaper_version', 'primary_samples', 'n_samples']
 
@@ -449,10 +475,21 @@
 
         remap = function() { 
             $('input[name=selected_chr]').val($('select[name=chromosomes]').val());
+            $('input[name=color_scheme]').val($('select#color_scheme').val());
             $('#marker_regression_form').attr('action', '/loading');
             return $('#marker_regression_form').submit(); 
         };
 
+        {% if manhattan_plot == True and selectedChr == -1 %}
+        $('#color_scheme').change(function(){
+          if ($(this).val() == "single"){
+            $('#point_color_picker').show();
+          } else {
+            $('#point_color_picker').hide();
+          }
+        });
+        {% endif %}
+
         {% if mapping_method != "gemma" and mapping_method != "plink" %}
         $('#download_perm').click(function(){
           perm_info_dict = {