Add elements to display results. Provide PoC JS

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

* Add some html elements to be used to display the results of running
  the partial correlations
* Provide some initial proof-of-concept javascript code to animate the
  various elements and to use for displaying both successful and error
  results.

3 files changed, 141 insertions, 2 deletions

diff --git a/wqflask/wqflask/partial_correlations_views.py b/wqflask/wqflask/partial_correlations_views.py
index 0b7ffd37..82287312 100644
--- a/wqflask/wqflask/partial_correlations_views.py
+++ b/wqflask/wqflask/partial_correlations_views.py
@@ -6,6 +6,7 @@ from flask import flash, request, current_app, render_template
 from gn3.computations.partial_correlations import partial_correlations_entry
 
 from wqflask import app
+from utility.tools import GN_SERVER_URL
 
 def parse_trait(trait_str: str) -> Union[dict, None]:
     keys = ("name", "dataset", "symbol", "description", "data_hmac")
@@ -260,4 +261,4 @@ def partial_correlations():
 
     return render_template(
         "partial_correlations.html", **args_dict, target_dbs=target_dbs,
-        corr_results=corr_results)
+        corr_results=corr_results, part_corr_url=f"{GN_SERVER_URL}correlation/partial")
diff --git a/wqflask/wqflask/static/new/javascript/partial_correlations.js b/wqflask/wqflask/static/new/javascript/partial_correlations.js
new file mode 100644
index 00000000..71fac21d
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/partial_correlations.js
@@ -0,0 +1,117 @@
+/**
+ * This is, hopefully, a short-term stop-gap measure to get the system working
+ * and to get some feedback, even as better optimisation is done in the
+ * background to get better response/performance for the partial correlation
+ * computations
+ */
+
+function key_value(keys, values) {
+    if(!(keys.length == values.length)) {
+	Error("The 'keys' and 'values' objects MUST be the same length");
+	return null;
+    }
+    return values.reduce(function(accumulator, item, index) {
+	accumulator[keys[index]] = item;
+	return accumulator;
+    }, {});
+}
+
+function trait(trait_str) {
+    return key_value(
+	["name", "dataset", "symbol", "description", "data_hmac"],
+	trait_str.split(":::"));
+}
+
+function primary_trait() {
+    trait_string = document.querySelector(
+	"#partial-correlations-form input[name=primary_trait]").value;
+    return trait(trait_string);
+}
+
+function control_traits() {
+    return document.querySelector(
+	"#partial-correlations-form input[name=control_traits]").value.split(
+	    "|||").map(trait).filter(trait => !(trait === null));
+}
+
+function correlation_method() {
+    return document.querySelector(
+	"#partial-correlations-form select[name=method]").value;
+}
+
+function criteria() {
+    return document.querySelector(
+	"#partial-correlations-form select[name=criteria]").value;
+}
+
+function target_db() {
+    return document.querySelector(
+	"#partial-correlations-form select[name=target_db]").value;
+}
+
+function partial_corr_request_data() {
+    return {
+	"primary_trait": primary_trait(),
+	"control_traits": control_traits(),
+	"method": correlation_method(),
+	"criteria": criteria(),
+	"target_db": target_db()
+    }
+}
+
+function display_partial_corr_results(data, status, xhr) {
+    progress_indicator = document.getElementById(
+	"partial-correlations-progress-indicator").style.display = "none";
+    parent = document.getElementById("part-corr-success");
+    child = document.createElement("p");
+    child.textContent = data;
+    parent.appendChild(child);
+}
+
+function display_partial_corr_error(xhr, status, error) {
+    document.getElementById(
+	"partial-correlations-progress-indicator").style.display = "none";
+    error_element = document.getElementById("part-corr-error");
+    panel = document.createElement("div");
+    panel.setAttribute("class", "panel panel-danger");
+    error_element.appendChild(panel);
+
+    panel_header = document.createElement("div");
+    panel_header.setAttribute("class", "panel-heading");
+    panel_header.textContent = "Error: " + xhr.status;
+    panel.appendChild(panel_header);
+
+    panel_body = document.createElement("div");
+    panel_body.setAttribute("class", "panel-body");
+    panel_body.textContent = xhr.statusText;
+    panel.appendChild(panel_body);
+    console.log(xhr)
+}
+
+function send_data_and_process_results(
+    remote_url, request_data, success_fn, error_fn, indicator_id) {
+    document.getElementById(indicator_id).style.display = "block";
+    $.ajax({
+	type: "POST",
+	url: remote_url,
+	contentType: "application/json",
+	data: JSON.stringify(request_data),
+	dataType: "JSON",
+	success: success_fn,
+	error: error_fn
+    });
+}
+
+$("#partial-correlations-form").submit(function(e) {
+    e.preventDefault();
+});
+
+$("#run-partial-corr-button").click(function(evt) {
+    send_data_and_process_results(
+	document.getElementById(
+	    "run-partial-corr-button").getAttribute("data-url"),
+	partial_corr_request_data(),
+	display_partial_corr_results,
+	display_partial_corr_error,
+	"partial-correlations-progress-indicator");
+})
diff --git a/wqflask/wqflask/templates/partial_correlations.html b/wqflask/wqflask/templates/partial_correlations.html
index ddf6fb4e..08d6fc2a 100644
--- a/wqflask/wqflask/templates/partial_correlations.html
+++ b/wqflask/wqflask/templates/partial_correlations.html
@@ -139,7 +139,10 @@
       </select>
     </div>
 
-    <button type="submit" class="btn btn-primary">
+    <button id="run-partial-corr-button"
+	    type="submit"
+	    class="btn btn-primary"
+	    data-url="{{part_corr_url}}">
       Run Partial Correlation
     </button>
     {%endif%}
@@ -212,4 +215,22 @@
   </div>
 
 </form>
+
+<div id="partial-correlation-results">
+  <span id="partial-correlations-progress-indicator"
+	style="display: {%if step == 'run-correlation':%}block{%else:%}none{%endif%};">
+    <img src="/static/gif/waitAnima2.gif">
+  </span>
+  <div id="part-corr-success">
+  </div>
+  <div id="part-corr-error">
+  </div>
+</div>
+{%endblock%}
+
+{%block js%}
+{%if step == "select-corr-method":%}
+<script type="text/javascript"
+	src="/static/new/javascript/partial_correlations.js"></script>
+{%endif%}
 {%endblock%}