Added horizontal scroll for mapping figure when window isn't wide enough

Changed the way some mapping options are displayed on trait page

Changed the header for the stats table and bar graph to increase the trait description

4 files changed, 22 insertions, 20 deletions

diff --git a/wqflask/wqflask/static/new/javascript/init_genome_browser.js b/wqflask/wqflask/static/new/javascript/init_genome_browser.js
index 6a19fe08..c4f91023 100644
--- a/wqflask/wqflask/static/new/javascript/init_genome_browser.js
+++ b/wqflask/wqflask/static/new/javascript/init_genome_browser.js
@@ -12,7 +12,7 @@ localUrls =
 var coordinateSystem = js_data.chr_lengths
 
 var vscaleWidth = 90.0;
-var legendWidth = 140.0;
+var legendWidth = 150.0;
 
 if ('significant' in js_data) {
   var significant_score = parseFloat(js_data.significant)
@@ -24,7 +24,7 @@ var gwasPadding = { top: 35.0,
                     bottom: 35.0,
                     left: vscaleWidth,
                     right: legendWidth };
-var gwasHeight = 320.0;
+var gwasHeight = 500.0;
 var config =
 {   score: score,
     urls: localUrls,
@@ -51,7 +51,7 @@ var config =
             score: score,
             legend: {
                 fontSize: 14,
-                hPad: 0.2,
+                hPad: 0.1,
                 vPad: 0.2
             },
             vscale: {
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 53158885..830dbf7f 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -336,7 +336,7 @@ make_table = function() {
   if (js_data.trait_symbol != null) {
     header = "<thead><tr><th style=\"color: white; background-color: #369; text-align: center;\" colspan=\"100%\">Trait " + js_data.trait_id + " - " + js_data.trait_symbol + "</th></tr><tr><th style=\"text-align: right; padding-left: 5px;\">Statistic</th>";
   } else {
-    header = "<thead><tr><th style=\"color: white; background-color: #369; text-align: center;\" colspan=\"100%\">Trait " + js_data.trait_id + "</th></tr><tr><th style=\"text-align: right; padding-left: 5px;\">Statistic</th>";
+    header = "<thead><tr><th style=\"color: white; background-color: #369; text-align: center;\" colspan=\"100%\">Trait " + js_data.trait_id + ": " + js_data.short_description + "</th></tr><tr><th style=\"text-align: right; padding-left: 5px;\">Statistic</th>";
   }
   _ref = js_data.sample_group_types;
   for (key in _ref) {
@@ -938,7 +938,7 @@ if (js_data.num_values < 256) {
   bottom_margin = get_bar_bottom_margin(sample_lists[0])
 
   root.bar_layout = {
-    title: js_data.trait_id,
+    title: "<b>Trait " + js_data.trait_id + ": " + js_data.short_description + "</b>",
     xaxis: {
         type: 'category',
         titlefont: {
diff --git a/wqflask/wqflask/templates/mapping_results.html b/wqflask/wqflask/templates/mapping_results.html
index 7b99fd35..becb139a 100644
--- a/wqflask/wqflask/templates/mapping_results.html
+++ b/wqflask/wqflask/templates/mapping_results.html
@@ -160,7 +160,7 @@
                 <a href="#browser_holder" data-toggle="tab" aria-expanded="true">Genome Browser</a>
             </li>
           </ul>
-          <div class="tab-content">
+          <div class="tab-content" style="overflow-x: auto;">
             <div class="tab-pane active" id="gn1_map">
               <div class="qtlcharts">
                   {{ gifmap|safe }}
@@ -169,17 +169,10 @@
                   <br>
                   <span style="white-space: nowrap;">A positive additive coefficient (green line) indicates that {{ dataset.group.parlist[1] }} alleles increase trait values. In contrast, a negative additive coefficient (orange line) indicates that {{ dataset.group.parlist[0] }} alleles increase trait values.</span>
                   {% endif %}
-                  {% if nperm > 0 and permChecked == "ON" %}
-                  <br><br>
-                  <img src="/generated/{{ perm_filename }}.gif">
-                  <br><br>
-                  Total of {{ nperm }} permutations&nbsp;&nbsp;<a href="javascript:export_perm_data();" target="_blank" >Download Permutation Results</a>
-                  <br>
-                  {% endif %}
               </div>
             </div>
             <div class="tab-pane" id="browser_holder" style="height: 500px;">
-                <div id="browser">
+                <div id="browser" style="margin-right: 20px; width: 90%;">
                     <div id="controls">
                         <button id="scrollLeft"  type="button" >
                           <i class="fas fa-arrow-left"></i>
@@ -200,6 +193,15 @@
             </div>
           </div>
         </div>
+        <div>
+            {% if nperm > 0 and permChecked == "ON" %}
+            <br><br>
+            <img src="/generated/{{ perm_filename }}.gif">
+            <br><br>
+            Total of {{ nperm }} permutations&nbsp;&nbsp;<a href="javascript:export_perm_data();" target="_blank" >Download Permutation Results</a>
+            <br>
+            {% endif %}
+        </div>
 
         </form>
         {% if selectedChr == -1 %}
diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html
index 04480e69..1a67dce8 100644
--- a/wqflask/wqflask/templates/show_trait_mapping_tools.html
+++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html
@@ -1,6 +1,6 @@
 <div>
     {% if dataset.group.mapping_names|length > 0 %}
-    <div class="col-xs-4" style="min-width: 560px;">
+    <div class="col-xs-4" style="min-width: 600px;">
         <div class="tabbable"> <!-- Only required for left/right tabs -->
 
             <ul class="nav nav-pills">
@@ -159,14 +159,14 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" for="control_for" class="col-xs-3 control-label">Control&nbsp;for</label>
+                            <label style="text-align: right;" for="control_for" class="col-xs-3 control-label">Control&nbsp;for<br>Cofactors</label>
                             <div style="margin-left:20px;" class="col-xs-6 controls">
                                 {% if dataset.type == 'ProbeSet' and this_trait.locus_chr != "" %}
                                 <input name="control_reaper" value="{{ nearest_marker }}" type="text" style="width: 160px; display: inline-block;" class="form-control" />
                                 {% else %}
                                 <input name="control_reaper" value="" type="text" style="display: inline-block; padding-right: 10px;" class="form-control" />
                                 {% endif %}
-                                <input type="radio" name="do_control_reaper" value="true"> Yes&nbsp;&nbsp;<input type="radio" name="do_control_reaper" value="false" checked=""> No</span>
+                                <input type="radio" name="do_control_reaper" value="true"> Yes&nbsp;&nbsp;<input type="radio" name="do_control_reaper" value="false" checked="" style="margin-left: 10px;"> No</span>
                                 <!--
                                 <label class="radio-inline">
                                     <input type="radio" name="do_control_reaper" value="true">
@@ -205,14 +205,14 @@
                         </div>
 -->
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" class="col-xs-3 control-label">Interval<br>Mapping</label>
+                            <label style="text-align: right;" class="col-xs-3 control-label">Interval Map</label>
                             <div style="margin-left:20px;" class="col-xs-6 controls">
                                 <label class="radio-inline">
-                                    <input type="radio" name="manhattan_plot_reaper" value="False">
+                                    <input type="radio" name="manhattan_plot_reaper" value="False" checked="">
                                     Yes
                                 </label>
                                 <label class="radio-inline">
-                                    <input type="radio" name="manhattan_plot_reaper" value="True" checked="">
+                                    <input type="radio" name="manhattan_plot_reaper" value="True">
                                     No
                                </label>
                             </div>