Implement better styling

Issue:
https://github.com/genenetwork/gn-gemtext-threads/blob/main/topics/gn1-migration-to-gn2/partial-correlations.gmi

* Separate the form elements that allow selection from the elements
  that display previous selections.

  This allows styling of the "active" area of the form in a different
  way from the "display" area of the form, allowing the user to see
  information on their previous choices, even while making further
  selections for the partial correlations.

2 files changed, 108 insertions, 62 deletions

diff --git a/wqflask/wqflask/static/new/css/partial_correlations.css b/wqflask/wqflask/static/new/css/partial_correlations.css
new file mode 100644
index 00000000..ebc00302
--- /dev/null
+++ b/wqflask/wqflask/static/new/css/partial_correlations.css
@@ -0,0 +1,30 @@
+#partial-correlations-form {
+    width: 100%;
+    display: grid;
+    grid-column-gap: 1em;
+}
+
+#main-form {
+    grid-column-start: 1;
+    grid-column-end: 2;
+}
+
+#form-display-area {
+    grid-column-start: 2;
+    grid-column-end: 3;
+}
+
+.label-element-combo {
+    width: 100%;
+    display: grid;
+}
+
+.with-trait > label {
+    width: 80%;
+    grid-column-start: 2;
+}
+
+.with-trait > input {
+    width: 20%;
+    grid-column-start: 2;
+}
diff --git a/wqflask/wqflask/templates/partial_correlations.html b/wqflask/wqflask/templates/partial_correlations.html
index b61f7fc4..ddf6fb4e 100644
--- a/wqflask/wqflask/templates/partial_correlations.html
+++ b/wqflask/wqflask/templates/partial_correlations.html
@@ -1,10 +1,17 @@
 {%extends "base.html"%}
 
+{%block title%}Partial Correlations:{%endblock%}
+
+{%block css%}
+<link rel="stylesheet" type="text/css" href="/static/new/css/partial_correlations.css" />
+{%endblock%}
+
 {%block content%}
-<div class="container">
-  <form id="partial-correlations-form"
-	method="POST"
-	action="{{url_for('partial_correlations')}}">
+<form id="partial-correlations-form"
+      method="POST"
+      action="{{url_for('partial_correlations')}}">
+
+  <div id="main-form">
     {%with messages = get_flashed_messages(with_categories=true)%}
     {%if messages:%}
     <ul class=flashes>
@@ -15,60 +22,10 @@
     {%endif%}
     {%endwith%}
 
-    <input type="hidden" name="step" id="step-indicator" value="{{step}}" />
-    <input type="hidden"
-	   name="traits_list"
-	   value="{% for trait in traits_list %}{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}}|||{% endfor %}">
-
-    {%if primary_trait:%}
-    <input type="hidden"
-	   name="primary_trait"
-	   value="{{primary_trait['name']}}:::{{primary_trait['dataset']}}:::{{primary_trait['symbol']}}:::{{primary_trait['description']}}:::{{primary_trait['data_hmac']}}"
-	   id="trait_{{primary_trait['data_hmac']}}" />
-    <p>
-      Primary Trait: {{primary_trait["name"]}}&nbsp;-&nbsp;
-      {{primary_trait["symbol"]}}&nbsp;-&nbsp;{{primary_trait["description"]}}
-    </p>
-    {%endif%}
-
-    {%if control_traits:%}
-    <input type="hidden"
-	   name="control_traits"
-	   value="{%for trait in control_traits:%}{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}}|||{%endfor%}" />
-    <p>
-      Control Traits:
-      <ul>
-	{%for trait in control_traits:%}
-	<li>
-	  {{trait["name"]}}&nbsp;-&nbsp;{{trait["symbol"]}}&nbsp;-&nbsp;
-	  {{trait["description"]}}</li>
-	{%endfor%}
-      </ul>
-    </p>
-    {%endif%}
-
-    {%if target_traits:%}
-    <input type="hidden"
-	   name="target_traits"
-	   value="{%for trait in target_traits:%}{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}},{%endfor%}" />
-        <p>
-      Target Traits:
-      <ul>
-	{%for trait in target_traits:%}
-	<li>
-	  {{trait["name"]}}&nbsp;-&nbsp;{{trait["symbol"]}}&nbsp;-&nbsp;
-	  {{trait["description"]}}</li>
-	{%endfor%}
-      </ul>
-    </p>
-    {%endif%}
-
-
-
     {%if step == "select-primary":%}
     <p>Please select the primary trait (X)</p>
     {%for trait in traits_list:%}
-    <div class="form-group">
+    <div class="label-element-combo with-trait">
       <input type="radio"
 	     name="primary_trait"
 	     value="{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}}"
@@ -89,7 +46,7 @@
 
     <p>Select a maximum of three (3) control traits (Z)</p>
     {%for trait in traits_list:%}
-    <div class="form-group">
+    <div class="label-element-combo">
       <input type="checkbox"
 	     name="control_traits[]"
 	     value="{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}}"
@@ -109,7 +66,7 @@
     {%if step == "select-targets":%}
     <p>Select at least one target trait (Y)</p>
     {%for trait in traits_list:%}
-    <div class="form-group">
+    <div class="label-element-combo">
       <input type="checkbox"
 	     name="target_traits[]"
 	     value="{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}}"
@@ -128,7 +85,7 @@
 
 
     {%if step == "select-corr-method":%}
-    <div class="form-group">
+    <div class="label-element-combo">
       <label for="target-db-input">Choose Database</label>
       <select id="target-db-input" required="required" name="target_db">
 	{%if target_dbs:%}
@@ -151,7 +108,7 @@
       </select>
     </div>
 
-    <div class="form-group">
+    <div class="label-element-combo">
       <label for="corr-method-input">Compute</label>
       <select id="corr-method-input" required="required" name="method">
 	<option value="Genetic Correlation, Pearson's r">
@@ -167,7 +124,7 @@
       </select>
     </div>
 
-    <div class="form-group">
+    <div class="label-element-combo">
       <label for="criteria-input">Return</label>
       <select id="criteria-input" required="required" name="criteria" size="1">
 	<option value="100">top 100</option>
@@ -194,6 +151,65 @@
 
     {{corr_results}}
     {%endif%}
-  </form>
-</div>
+  </div>
+
+  <div id="form-display-area">
+    <input type="hidden" name="step" id="step-indicator" value="{{step}}" />
+    <input type="hidden"
+	   name="traits_list"
+	   value="{% for trait in traits_list %}{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}}|||{% endfor %}">
+
+    {%if primary_trait:%}
+    <input type="hidden"
+	   name="primary_trait"
+	   value="{{primary_trait['name']}}:::{{primary_trait['dataset']}}:::{{primary_trait['symbol']}}:::{{primary_trait['description']}}:::{{primary_trait['data_hmac']}}"
+	   id="trait_{{primary_trait['data_hmac']}}" />
+
+    <div class="panel panel-info">
+      <div class="panel-heading">Primary Trait (X)</div>
+      <div class="panel-body">
+	{{primary_trait["name"]}}&nbsp;-&nbsp;
+	{{primary_trait["symbol"]}}&nbsp;-&nbsp;{{primary_trait["description"]}}
+      </div>
+    </div>
+    {%endif%}
+
+    {%if target_traits:%}
+    <input type="hidden"
+	   name="target_traits"
+	   value="{%for trait in target_traits:%}{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}},{%endfor%}" />
+    <div class="panel panel-info">
+      <div class="panel-heading">Target Traits (Y)</div>
+      <div class="panel-body">
+	<ul>
+	  {%for trait in target_traits:%}
+	  <li>
+	    {{trait["name"]}}&nbsp;-&nbsp;{{trait["symbol"]}}&nbsp;-&nbsp;
+	    {{trait["description"]}}</li>
+	  {%endfor%}
+	</ul>
+      </div>
+    </div>
+    {%endif%}
+
+    {%if control_traits:%}
+    <input type="hidden"
+	   name="control_traits"
+	   value="{%for trait in control_traits:%}{{trait['name']}}:::{{trait['dataset']}}:::{{trait['symbol']}}:::{{trait['description']}}:::{{trait['data_hmac']}}|||{%endfor%}" />
+    <div class="panel panel-info">
+      <div class="panel-heading">Control Traits (Z)</div>
+      <div class="panel-body">
+	<ul>
+	  {%for trait in control_traits:%}
+	  <li>
+	    {{trait["name"]}}&nbsp;-&nbsp;{{trait["symbol"]}}&nbsp;-&nbsp;
+	    {{trait["description"]}}</li>
+	  {%endfor%}
+	</ul>
+      </div>
+    </div>
+    {%endif%}
+  </div>
+
+</form>
 {%endblock%}