aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
authorBonfaceKilz2021-10-14 11:26:49 +0300
committerGitHub2021-10-14 11:26:49 +0300
commit631301a0888a16123283b382483e2b229a64e804 (patch)
treee820576fec3dddd5b7555eb67b54359a3b135e6b /wqflask
parent1022f9e75fc7f50a4f10a0607ad77ba85f906aa7 (diff)
parentba98ef026544d4437e65a7bd248ff9591296b48e (diff)
downloadgenenetwork2-631301a0888a16123283b382483e2b229a64e804.tar.gz
Merge pull request #605 from genenetwork/clustered_heatmaps
Clustered heatmaps
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/collect.py7
-rw-r--r--wqflask/wqflask/templates/collections/view.html101
2 files changed, 106 insertions, 2 deletions
diff --git a/wqflask/wqflask/collect.py b/wqflask/wqflask/collect.py
index 01274ba9..3475ae5d 100644
--- a/wqflask/wqflask/collect.py
+++ b/wqflask/wqflask/collect.py
@@ -12,6 +12,7 @@ from flask import flash
from wqflask import app
from utility import hmac
from utility.formatting import numify
+from utility.tools import GN_SERVER_URL
from utility.redis_tools import get_redis_conn
from base.trait import create_trait
@@ -218,8 +219,10 @@ def view_collection():
json_version.append(jsonable(trait_ob))
- collection_info = dict(trait_obs=trait_obs,
- uc=uc)
+ collection_info = dict(
+ trait_obs=trait_obs,
+ uc=uc,
+ heatmap_data_url=f"{GN_SERVER_URL}api/heatmaps/clustered")
if "json" in params:
return json.dumps(json_version)
diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index a3090bcf..0ded66a6 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -36,6 +36,28 @@
<div>
<br />
+ <form id="heatmaps_form">
+ <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>
+ <button id="clustered-heatmap"
+ class="btn btn-primary"
+ data-url="{{heatmap_data_url}}"
+ title="Generate heatmap from this collection">
+ Generate Heatmap
+ </button>
+ </form>
+
<div class="collection-table-options">
<form id="export_form" method="POST" action="/export_traits_csv">
<button class="btn btn-default" id="select_all" type="button"><span class="glyphicon glyphicon-ok"></span> Select All</button>
@@ -52,6 +74,8 @@
<button id="delete" class="btn btn-danger submit_special" data-url="/collections/delete" type="button" title="Delete this collection" > Delete Collection</button>
</form>
</div>
+ <div id="clustered-heatmap-image-area">
+ </div>
<div style="margin-top: 10px; margin-bottom: 5px;">
<b>Show/Hide Columns:</b>
</div>
@@ -139,6 +163,8 @@
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.colVis.min.js') }}"></script>
<script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+ <script type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script>
+
<script language="javascript" type="text/javascript">
$(document).ready( function () {
@@ -247,6 +273,81 @@
$("#make_default").on("click", function(){
make_default();
});
+
+ $("#heatmaps_form").submit(function(e) {
+ e.preventDefault();
+ });
+
+ function clear_heatmap_area() {
+ area = document.getElementById("clustered-heatmap-image-area");
+ area.querySelectorAll("*").forEach(function(child) {
+ child.remove();
+ });
+ }
+
+ function generate_progress_indicator() {
+ count = 0;
+ default_message = "Computing"
+ return function() {
+ message = default_message;
+ if(count >= 10) {
+ count = 0;
+ }
+ for(i = 0; i < count; i++) {
+ message = message + " .";
+ }
+ clear_heatmap_area();
+ $("#clustered-heatmap-image-area").append(
+ '<div class="alert alert-info"' +
+ ' style="font-weigh: bold; font-size: 150%;">' +
+ message + '</div>');
+ count = count + 1;
+ };
+ }
+
+ function display_clustered_heatmap(heatmap_data) {
+ clear_heatmap_area();
+ image_area = document.getElementById("clustered-heatmap-image-area")
+ Plotly.newPlot(image_area, heatmap_data)
+ }
+
+ function process_clustered_heatmap_error(xhr, status, error) {
+ clear_heatmap_area()
+ $("#clustered-heatmap-image-area").append(
+ $(
+ '<div class="alert alert-danger">ERROR: ' +
+ xhr.responseJSON.message +
+ '</div>'));
+ }
+
+ $("#clustered-heatmap").on("click", function() {
+ clear_heatmap_area();
+ intv = window.setInterval(generate_progress_indicator(), 300);
+ vert_element = document.getElementById("heatmap-orient-vertical");
+ vert_true = vert_element == null ? false : vert_element.checked;
+ heatmap_url = $(this).attr("data-url")
+ traits = $(".trait_checkbox:checked").map(function() {
+ return this.value
+ }).get();
+ $.ajax({
+ type: "POST",
+ url: heatmap_url,
+ contentType: "application/json",
+ data: JSON.stringify({
+ "traits_names": traits,
+ "vertical": vert_true
+ }),
+ dataType: "JSON",
+ success: function(data, status, xhr) {
+ window.clearInterval(intv);
+ display_clustered_heatmap(data);
+ },
+ error: function(xhr, status, error) {
+ window.clearInterval(intv);
+ process_clustered_heatmap_error(xhr, status, error);
+ }
+ });
+ });
});
</script>