Clear any existing image on subsequent clicks

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

* If the user clicks on the "Clustered Heatmap" button, the system
  should remove any previously existing clustered heatmap image and
  replace it with the new image.

1 files changed, 8 insertions, 0 deletions

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index a034f628..99ba3756 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -265,12 +265,20 @@
 		e.preventDefault();
 	    });
 
+	    function clear_heatmap_area() {
+		area = document.getElementById("clustered-heatmap-image-area");
+		area.querySelectorAll("svg").forEach(function(child) {
+		    child.remove();
+		});
+	    }
+
 	    function generate_clustered_heatmap(heatmap_data) {
 		image_area = document.getElementById("clustered-heatmap-image-area")
 		Plotly.newPlot(image_area, heatmap_data)
 	    }
 
 	    $("#clustered-heatmap").on("click", function() {
+		clear_heatmap_area();
 		heatmap_url = $(this).attr("data-url")
 		traits = $(".trait_checkbox:checked").map(function() {
 		    return this.value