Add progress indicator. Handle errors.

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

* Add a progress indicator to show the user that there is some
  progress happening, so that they can wait.

  Add a function to handle any errors that arise.

1 files changed, 41 insertions, 3 deletions

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 99ba3756..05186560 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -267,18 +267,49 @@
 
 	    function clear_heatmap_area() {
 		area = document.getElementById("clustered-heatmap-image-area");
-		area.querySelectorAll("svg").forEach(function(child) {
+		area.querySelectorAll("*").forEach(function(child) {
 		    child.remove();
 		});
 	    }
 
-	    function generate_clustered_heatmap(heatmap_data) {
+	    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);
 		heatmap_url = $(this).attr("data-url")
 		traits = $(".trait_checkbox:checked").map(function() {
 		    return this.value
@@ -291,7 +322,14 @@
 			"traits_names": traits
 		    }),
 		    dataType: "JSON",
-		    success: generate_clustered_heatmap
+		    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);
+		    }
 		});
 	    });
         });