From 53f5dfdb80c91d673b51d4c7dbd267b2d50ab3a7 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Fri, 24 May 2019 11:41:36 -0500
Subject: Made a few changes to trait page: - Changed y axis digits for some
 figures - Changed title for some figures to trait ID - Removed Min Expr
 filter when correlating with phenotypes - Changed some button colors - Made
 sample table rows highlightable

---
 .../new/javascript/plotly_probability_plot.js      | 11 +++++++++--
 .../wqflask/static/new/javascript/show_trait.js    | 23 +++++++++++++++++-----
 wqflask/wqflask/templates/show_trait.html          | 19 +++++++++++++++---
 .../show_trait_calculate_correlations.html         |  2 ++
 .../wqflask/templates/show_trait_edit_data.html    |  2 +-
 .../templates/show_trait_transform_and_filter.html |  8 +++++---
 6 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js b/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js
index 14b0e056..d52cb100 100644
--- a/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js
+++ b/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js
@@ -161,8 +161,14 @@
         intercept_line['samples_all'] = [[first_x, last_x], [first_value, last_value]]
     }
 
+    if (Math.max(y_values['samples_all']) - Math.min(y_values['samples_all']) < 6){
+      tick_digits = '.1f'
+    } else {
+      tick_digits = 'f'
+    }
+
     var layout = {
-        title: 'Quantile-Quantile Plot<a href="https://en.wikipedia.org/wiki/Q-Q_plot"><sup>?</sup></a>',
+        title: js_data.trait_id,
         margin: {
             l: 65,
             r: 30,
@@ -196,7 +202,8 @@
             ticklen: 4,
             tickfont: {
               size: 16
-            }
+            },
+            tickformat: tick_digits
         },
         hovermode: "closest"
     }
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 31f59a13..167fafcb 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -922,6 +922,11 @@ get_bar_range = function(sample_list){
 }
 
 root.chart_range = get_bar_range(sample_lists[0])
+if (root.chart_range[1] - root.chart_range[0] < 4){
+  tick_digits = '.1f'
+} else {
+  tick_digits = 'f'
+}
 
 if (js_data.num_values < 256) {
   bar_chart_width = 25 * get_sample_vals(sample_lists[0]).length
@@ -930,6 +935,7 @@ if (js_data.num_values < 256) {
   bottom_margin = get_bar_bottom_margin(sample_lists[0])
 
   root.bar_layout = {
+    title: js_data.trait_id,
     xaxis: {
         titlefont: {
           size: 16
@@ -941,6 +947,7 @@ if (js_data.num_values < 256) {
         }
     },
     yaxis: {
+        title: js_data.unit_type,
         range: root.chart_range,
         titlefont: {
           size: 16
@@ -949,12 +956,13 @@ if (js_data.num_values < 256) {
         ticklen: 4,
         tickfont: {
           size: 16
-        }
+        },
+        tickformat: tick_digits
     },
     width: bar_chart_width,
     height: 600,
     margin: {
-        l: 50,
+        l: 55,
         r: 30,
         t: 30,
         b: bottom_margin
@@ -979,7 +987,7 @@ var hist_trace = {
 root.histogram_data = [hist_trace];
 root.histogram_layout = {
   bargap: 0.05,
-  title: "Sample Values",
+  title: js_data.trait_id,
   xaxis: {
            autorange: true,
            title: "Value",
@@ -1025,6 +1033,7 @@ $('.histogram_samples_group').change(function() {
 });
 
 root.box_layout = {
+    title: js_data.trait_id,
     xaxis: {
         showline: true,
         tickfont: {
@@ -1032,12 +1041,14 @@ root.box_layout = {
         },
     },
     yaxis: {
+        title: js_data.unit_type,
         autorange: true,
         showline: true,
         ticklen: 4,
         tickfont: {
           size: 16
-        }
+        },
+        tickformat: tick_digits
     },
     margin: {
         l: 50,
@@ -1136,7 +1147,7 @@ $('.box_plot_tab').click(function() {
 // Violin Plot
 
 root.violin_layout = {
-  title: "Violin Plot",
+  title: js_data.trait_id,
   xaxis: {
       showline: true,
       tickfont: {
@@ -1144,12 +1155,14 @@ root.violin_layout = {
       }
   },
   yaxis: {
+      title: js_data.unit_type,
       autorange: true,
       showline: true,
       ticklen: 4,
       tickfont: {
         size: 16
       },
+      tickformat: tick_digits,
       zeroline: false
   },
   margin: {
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 6ab7d635..378f91b1 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -271,7 +271,7 @@
                       'data': null,
                       'orderDataType': "dom-checkbox",
                       'render': function(data, type, row, meta) {
-                        return '<input type="checkbox" name="searchResult" style="min-height: 20px;" class="checkbox edit_sample_checkbox" value="" checked="checked">'
+                        return '<input type="checkbox" name="searchResult" style="min-height: 20px;" class="checkbox edit_sample_checkbox" value="">'
                       }
                     },
                     {
@@ -403,7 +403,7 @@
                       'data': null,
                       'orderDataType': "dom-checkbox",
                       'render': function(data, type, row, meta) {
-                        return '<input type="checkbox" name="searchResult" style="min-height: 20px;" class="checkbox edit_sample_checkbox" value="" checked="checked">'
+                        return '<input type="checkbox" name="searchResult" style="min-height: 20px;" class="checkbox edit_sample_checkbox" value="">'
                       }
                     },
                     {
@@ -491,7 +491,20 @@
                 } );
                 {% endif %}
 
-                $('#samples_primary, #samples_other').find("tr.outlier").css('background-color', 'yellow')
+                $('#samples_primary, #samples_other').find("tr.outlier").css('background-color', 'orange')
+
+                $('.edit_sample_checkbox:checkbox').change(function() {
+                    if ($(this).is(":checked")) {
+                        if (!$(this).closest('tr').hasClass('selected')) {
+                            $(this).closest('tr').addClass('selected')
+                        }
+                    }
+                    else {
+                        if ($(this).closest('tr').hasClass('selected')) {
+                            $(this).closest('tr').removeClass('selected')
+                        }
+                    }
+                });
 
                 var slider = document.getElementById('p_range_slider');
                 noUiSlider.create(slider, {
diff --git a/wqflask/wqflask/templates/show_trait_calculate_correlations.html b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
index ef233333..8ceec4fa 100644
--- a/wqflask/wqflask/templates/show_trait_calculate_correlations.html
+++ b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
@@ -73,6 +73,7 @@
                 </select>
             </div>
         </div>
+        {% if dataset.type != "Publish" %}
         <div class="form-group">
             <label class="col-xs-2 control-label">Min Expr</label>
             <div class="col-xs-3 controls">
@@ -89,6 +90,7 @@
                 <br>
             </div>
         </div>
+        {% endif %}
         <div class="form-group">
             <label class="col-xs-2 control-label">Range</label>
             <div class="col-xs-5 controls">
diff --git a/wqflask/wqflask/templates/show_trait_edit_data.html b/wqflask/wqflask/templates/show_trait_edit_data.html
index 667d557c..fec141dc 100644
--- a/wqflask/wqflask/templates/show_trait_edit_data.html
+++ b/wqflask/wqflask/templates/show_trait_edit_data.html
@@ -1,6 +1,6 @@
 <div>
     <div style="padding-bottom: 10px;">
-      <input type="button" class="btn btn-primary reset" value="Reset">
+      <input type="button" class="btn btn-success reset" value="Reset">
       <span class="input-append">
         <input type="button" class="btn btn-default export" value="Export">
         <select class="select optional span2 export_format">
diff --git a/wqflask/wqflask/templates/show_trait_transform_and_filter.html b/wqflask/wqflask/templates/show_trait_transform_and_filter.html
index 94b3fda3..fbdebcd0 100644
--- a/wqflask/wqflask/templates/show_trait_transform_and_filter.html
+++ b/wqflask/wqflask/templates/show_trait_transform_and_filter.html
@@ -16,7 +16,7 @@
                     {{ sample_group_types['samples_other'] }}
                   </option>
                 </select>
-                <input type="button" id="block_by_index" class="btn" value="Block">
+                <input type="button" id="block_by_index" class="btn btn-danger" value="Block">
             </div>
             <div id="remove_samples_invalid" class="alert alert-error" style="display:none;">
                   Please check that your input is formatted correctly, e.g. <strong>3, 5-10, 12</strong>
@@ -38,7 +38,7 @@
             <div>
               <input type="button" id="hide_no_value" class="btn btn-default" value="Hide No Value">
               <input type="button" id="block_outliers" class="btn btn-default" value="Block Outliers">
-              <input type="button" class="btn btn-primary reset" value="Reset">
+              <input type="button" class="btn btn-success reset" value="Reset">
               <span class="input-append">
                 <input type="button" class="btn btn-default export" value="Export">
                 <select class="select optional span2 export_format">
@@ -48,9 +48,11 @@
               </span>
               <br>
               <div style="margin-top:10px;">
-              <input type="button" id="normalize" class="btn btn-default" value="Normalize">
+              <input type="button" id="normalize" class="btn btn-success" value="Normalize">
               <select id="norm_method" class="select optional span2">
+                {% if negative_vals_exist == "false" %}
                 <option value="log2">Log2</option>
+                {% endif %}
                 <option value="zscore">Z-score</option>
                 <option value="qnorm">Quantile</option>
                 <option value="sqrt">Square Root</option>
-- 
cgit v1.2.3