diff options
| -rw-r--r-- | wqflask/wqflask/partial_correlations_views.py | 3 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/partial_correlations.js | 117 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/partial_correlations.html | 23 |
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%} |