From 42cb64c8d89766cd28276c03b37674a227d39aad Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 23 Feb 2022 22:04:34 +0000
Subject: Show heatmap options when heatmap is run

Heatmap options are now shown after the user clicks the button

I also reordered the Heatmap and Partial Correlation buttons, since it's
awkward to get the Heatmap options to display well if its button is
second. We'll probably completely rework this later, but for now this
looks a little less ugly.
---
 wqflask/wqflask/templates/collections/view.html | 49 +++++++++++++------------
 1 file changed, 25 insertions(+), 24 deletions(-)

(limited to 'wqflask')

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 447a821a..804c52e9 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -34,6 +34,30 @@
           </form>
         </div>
         <div style="display: flex;">
+            <form id="heatmaps_form">
+                <button id="clustered-heatmap"
+                    class="btn btn-primary"
+                    data-url="{{heatmap_data_url}}"
+                    title="Generate heatmap from this collection" style="margin-top: 10px; margin-bottom: 10px;">
+                        Generate Heatmap
+                </button>
+                <br>
+                <div id="heatmap-options" style="display: none;">
+                    <b>Heatmap Orientation: </b>
+                    <br>
+                    Vertical
+                    <input id="heatmap-orient-vertical"
+                            type="radio"
+                            name="vertical"
+                            value="true" checked="checked"/>
+                    Horizontal
+                    <input id="heatmap-orient-horizontal"
+                            type="radio"
+                            name="vertical"
+                            value="false" />
+                </div>
+            </form>
+            &nbsp;
             <form id="partial-correlations-form"
                 method="POST"
                 action="{{url_for('partial_correlations')}}">
@@ -50,30 +74,6 @@
                 Partial Correlations
             </button>
             </form>
-            &nbsp;
-            <form id="heatmaps_form">
-                <div style="display: none;">
-                    <fieldset>
-                        <legend>Heatmap Orientation</legend>
-                        <label for="heatmap-orient-vertical">Vertical</label>
-                        <input id="heatmap-orient-vertical"
-                                type="radio"
-                                name="vertical"
-                                value="true" />
-                        <label for="heatmap-orient-horizontal">Horizontal</label>
-                        <input id="heatmap-orient-horizontal"
-                                type="radio"
-                                name="vertical"
-                                value="false" />
-                    </fieldset>
-                </div>
-                <button id="clustered-heatmap"
-                    class="btn btn-primary"
-                    data-url="{{heatmap_data_url}}"
-                    title="Generate heatmap from this collection" style="margin-top: 10px;">
-                        Generate Heatmap
-                </button>
-            </form>
         </div>
 
         <div>
@@ -342,6 +342,7 @@
 
 	    $("#clustered-heatmap").on("click", function() {
 		clear_heatmap_area();
+        $("#heatmap-options").show();
 		intv = window.setInterval(generate_progress_indicator(), 300);
 		vert_element = document.getElementById("heatmap-orient-vertical");
 		vert_true = vert_element == null ? false : vert_element.checked;
-- 
cgit v1.2.3