Improve visualization performance (substantially) (#109)

* fix: moved image generation to avoid severe performance issues

* fix: moved button finding code before data handling

* fix: fixed leftover invalid variable naming

Author: alryaz

netbox_topology_views/static/netbox_topology_views/js/app.js

@@ -78,13 +78,24 @@ function iniPlotboxIndex() {
         csrftoken = getCookie('csrftoken');
         container = document.getElementById('visgraph');
         htmlElement = document.getElementsByTagName("html")[0];
-        handleLoadData();
         downloadButton = document.getElementById('btnDownloadImage');
+        handleLoadData();
         btnFullView = document.getElementById('btnFullView');
         coord_save_checkbox = document.getElementById('id_save_coords');
     }, false);
 }
 
+function performGraphDownload() {
+    var tempDownloadLink = document.createElement('a');
+    var generatedImageUrl = canvas.toDataURL(MIME_TYPE);
+
+    tempDownloadLink.href = generatedImageUrl;
+    tempDownloadLink.download = "topology";
+    document.body.appendChild(tempDownloadLink);
+    tempDownloadLink.click();
+    document.body.removeChild(tempDownloadLink);
+}
+
 function handleLoadData() {
     if (topology_data !== null) {
 
@@ -103,11 +114,7 @@ function handleLoadData() {
         graph.fit();
         canvas = document.getElementById('visgraph').getElementsByTagName('canvas')[0];
 
-        graph.on('afterDrawing', function () {
-            var image = canvas.toDataURL(MIME_TYPE);
-            downloadButton.href = image;
-            downloadButton.download = "topology";
-        });
+        downloadButton.onclick = function(e) { performGraphDownload(); return false; };
 
         graph.on("dragEnd", function (params) {
             dragged = this.getPositions(params.nodes);

netbox_topology_views/static_dev/js/home.js

@@ -16,7 +16,7 @@
   <div class="controls">
     	<div class="control-group">
 			{% block extra_controls %}{% endblock %}
-			<a id="btnDownloadImage" class="btn btn-sm btn-info">
+			<a id="btnDownloadImage" class="btn btn-sm btn-info" href="#">
 				<i class="mdi mdi-download"></i>
 				Download
 			</a>