From 805b781e6eabfb42cbecb319fffc8ade855de914 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Mon, 16 Sep 2024 18:49:34 +0000
Subject: Handle Effect Size plots on the scatterplot page

Added a new parameter to the scatterplot page ('effect') that causes the figures to be drawn differently. For example:
- The plot width is different
- Spearman Rank plot isn't displayed/generated
- The number of X-axis ticks is explicitly set to 3, with no decimal places
---
 gn2/wqflask/templates/corr_scatterplot.html | 177 ++++++++++++++--------------
 1 file changed, 90 insertions(+), 87 deletions(-)

(limited to 'gn2/wqflask/templates/corr_scatterplot.html')

diff --git a/gn2/wqflask/templates/corr_scatterplot.html b/gn2/wqflask/templates/corr_scatterplot.html
index c2586bc0..9532726c 100644
--- a/gn2/wqflask/templates/corr_scatterplot.html
+++ b/gn2/wqflask/templates/corr_scatterplot.html
@@ -126,18 +126,20 @@
     <li {% if method == 'pearson' %}class="active"{% endif %}>
       <a href="#tp1" data-toggle="tab">Pearson</a>
     </li>
+    {% if effect_plot == false %}
     <li {% if method == 'spearman' %}class="active"{% endif %}>
       <a href="#tp2" data-toggle="tab">Spearman Rank</a>
     </li>
+    {% endif %}
   </ul>
 
-  <div class="tab-content" style="width: 800px;">
+  <div class="tab-content" style="width: {% if effect_plot %}500{% else %}800{% endif %}px;">
 
     <div class="tab-pane {% if method == 'pearson' %}active{% endif %}" id="tp1">
       <br>
       <div id="scatterplot2"></div>
       <br>
-      <div style="min-width: 700px; overflow: hidden;">
+      <div style="width: {% if effect_plot %}500{% else %}800{% endif %}px; overflow: hidden;">
       <div style="margin-left: 50px; min-width: 300px;">
         {% if trait_1.dataset.type == "ProbeSet" %}
         <div>
@@ -248,101 +250,102 @@
       </div>
     </div>
 
+    {% if effect_plot == false %}
     <div class="tab-pane {% if method == 'spearman' %}active{% endif %}" id="tp2">
       <br>
       <div id="srscatterplot2"></div>
       <br>
-      <div class="row" style="min-width: 700px; overflow: hidden;">
-      <div style="margin-left: 50px; min-width: 300px;">
-        {% if trait_1.dataset.type == "ProbeSet" %}
-        <div>
-          X axis:
-          <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">
-            {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.tissue + " "  + trait_1.dataset.name + ": " + trait_1.name|string}}
-          </a>
-        </div>
-        <div>
-          [{{trait_1.symbol}} on {{trait_1.location_repr}} Mb]
-          {{trait_1.description_display}}
-        </div>
-        {% elif trait_1.dataset.type == "Publish" %}
-        <div>
-          X axis:
-          <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">
-            {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}}
-          </a>
-        </div>
-        <div>
-          <a href="{{trait_1.pubmed_link}}">PubMed: {{trait_1.pubmed_text}}</a>
+      <div class="row" style="width: 800px; overflow: hidden;">
+        <div style="margin-left: 50px; min-width: 300px;">
+          {% if trait_1.dataset.type == "ProbeSet" %}
+          <div>
+            X axis:
+            <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">
+              {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.tissue + " "  + trait_1.dataset.name + ": " + trait_1.name|string}}
+            </a>
+          </div>
+          <div>
+            [{{trait_1.symbol}} on {{trait_1.location_repr}} Mb]
             {{trait_1.description_display}}
-        </div>
-        {% endif %}
+          </div>
+          {% elif trait_1.dataset.type == "Publish" %}
+          <div>
+            X axis:
+            <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">
+              {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}}
+            </a>
+          </div>
+          <div>
+            <a href="{{trait_1.pubmed_link}}">PubMed: {{trait_1.pubmed_text}}</a>
+              {{trait_1.description_display}}
+          </div>
+          {% endif %}
 
-        <br/>
+          <br/>
 
-        {% if trait_2.dataset.type == "ProbeSet" %}
-        <div>
-          Y axis:
-          <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">
-            {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.tissue + " "  + trait_2.dataset.name + ": " + trait_2.name|string}}
-          </a>
-        </div>
-        <div>
-          [{{trait_2.symbol}} on {{trait_2.location_repr}} Mb]
-          {{trait_2.description_display}}
-        </div>
-        {% elif trait_2.dataset.type == "Publish" %}
-        <div>
-          Y axis:
-          <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">
-            {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}}
-          </a>
-        </div>
-        <div>
-          <a href="{{trait_2.pubmed_link}}">PubMed: {{trait_2.pubmed_text}}</a>
+          {% if trait_2.dataset.type == "ProbeSet" %}
+          <div>
+            Y axis:
+            <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">
+              {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.tissue + " "  + trait_2.dataset.name + ": " + trait_2.name|string}}
+            </a>
+          </div>
+          <div>
+            [{{trait_2.symbol}} on {{trait_2.location_repr}} Mb]
             {{trait_2.description_display}}
+          </div>
+          {% elif trait_2.dataset.type == "Publish" %}
+          <div>
+            Y axis:
+            <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">
+              {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}}
+            </a>
+          </div>
+          <div>
+            <a href="{{trait_2.pubmed_link}}">PubMed: {{trait_2.pubmed_text}}</a>
+              {{trait_2.description_display}}
+          </div>
+          {% endif %}
+        </div>
+        <div style="float: left; margin-top: 30px;">
+          <table class="table table-hover table-striped table-bordered" style="width: 80%; margin-left: 60px; text-align: right;">
+            <thead>
+              <tr><th style="text-align: right;">Statistic</th><th style="text-align: right;">Value</th></tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Number</td>
+                <td>{{jsdata.num_overlap}}</td>
+              </tr>
+              <tr>
+                <td>Slope</td>
+                <td>{{ jsdata.srslope_string }}</td>
+              </tr>
+              <tr>
+                <td>Intercept</td>
+                <td>{{'%0.3f' % jsdata.srintercept}}</td>
+              </tr>
+              <tr>
+                <td>r value</td>
+                <td>{{'%0.3f' % jsdata.srr_value}}</td>
+              </tr>
+        <tr>
+                <td>P value</td>
+                <td>{% if jsdata.srp_value < 0.001 %}{{'%0.3e' % jsdata.srp_value}}{% else %}{{'%0.3f' % jsdata.srp_value}}{% endif %}</td>
+              </tr>
+              <tr>
+                <td style="text-align: left;" colspan="2">
+                  Regression Line
+                  <br>
+                  y = {{ jsdata.srslope_string }} * x {% if jsdata.srintercept < 0 %}- {{'%0.3f' % (jsdata.srintercept * -1)}}{% else %}+ {{'%0.3f' % jsdata.srintercept}}{% endif %}
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
-        {% endif %}
-      </div>
-      <div style="float: left; margin-top: 30px;">
-        <table class="table table-hover table-striped table-bordered" style="width: 80%; margin-left: 60px; text-align: right;">
-          <thead>
-            <tr><th style="text-align: right;">Statistic</th><th style="text-align: right;">Value</th></tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Number</td>
-              <td>{{jsdata.num_overlap}}</td>
-            </tr>
-            <tr>
-              <td>Slope</td>
-              <td>{{ jsdata.srslope_string }}</td>
-            </tr>
-            <tr>
-              <td>Intercept</td>
-              <td>{{'%0.3f' % jsdata.srintercept}}</td>
-            </tr>
-            <tr>
-              <td>r value</td>
-              <td>{{'%0.3f' % jsdata.srr_value}}</td>
-            </tr>
-	    <tr>
-              <td>P value</td>
-              <td>{% if jsdata.srp_value < 0.001 %}{{'%0.3e' % jsdata.srp_value}}{% else %}{{'%0.3f' % jsdata.srp_value}}{% endif %}</td>
-            </tr>
-            <tr>
-              <td style="text-align: left;" colspan="2">
-                Regression Line
-                <br>
-                y = {{ jsdata.srslope_string }} * x {% if jsdata.srintercept < 0 %}- {{'%0.3f' % (jsdata.srintercept * -1)}}{% else %}+ {{'%0.3f' % jsdata.srintercept}}{% endif %}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
       </div>
-  </div>
-
+    </div>
+    {% endif %}
 </div>
 
 {% endblock %}
-- 
cgit v1.2.3