Test heatmap creation from serialized figure

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

* Attempt using the figure, serialized as JSON, to display the
  clustered heatmap.

1 files changed, 11 insertions, 3 deletions

diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 51b96e10..bca629a9 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -128,6 +128,9 @@
                     </tbody>
 
                 </table>
+		<div id="plotly-testing-area"
+		     style="width:4000px;height:800px;">
+		</div>
             </div>
             <br />
         </div>
@@ -148,6 +151,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 () {
@@ -261,6 +266,11 @@
 		e.preventDefault();
 	    });
 
+	    function generate_clustered_heatmap(heatmap_data) {
+		image_area = document.getElementById("plotly-testing-area")
+		Plotly.newPlot(image_area, heatmap_data)
+	    }
+
 	    $("#clustered-heatmap").on("click", function() {
 		heatmap_url = $(this).attr("data-url")
 		console.log("heatmap url:", heatmap_url)
@@ -276,9 +286,7 @@
 			"traits_names": traits
 		    }),
 		    dataType: "JSON",
-		    success: function(res) {
-			console.log("results:", res)
-		    }
+		    success: generate_clustered_heatmap
 		});
 	    });
         });