From b5991a5f5007bbe16c1ccb271213490acf207feb Mon Sep 17 00:00:00 2001
From: Alexander Ryazanov <alryaz@xavux.com>
Date: Tue, 10 May 2022 10:21:22 +0300
Subject: [PATCH] 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
---
 .../static/netbox_topology_views/js/app.js    |  2 +-
 netbox_topology_views/static_dev/js/home.js   | 19 +++++++++++++------
 .../netbox_topology_views/index.html          |  2 +-
 package-lock.json                             |  2 +-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/netbox_topology_views/static/netbox_topology_views/js/app.js b/netbox_topology_views/static/netbox_topology_views/js/app.js
index 31670a9..c198311 100644
--- a/netbox_topology_views/static/netbox_topology_views/js/app.js
+++ b/netbox_topology_views/static/netbox_topology_views/js/app.js
@@ -1 +1 @@
-var graph=null,container=null,downloadButton=null,MIME_TYPE="image/png",canvas=null,csrftoken=null,nodes=new vis.DataSet,edges=new vis.DataSet,options={interaction:{hover:!0,hoverConnectedEdges:!0,multiselect:!1},nodes:{shape:"image",brokenImage:"../../static/netbox_topology_views/img/role-unknown.png",size:35,font:{multi:"md",face:"helvetica"}},edges:{length:100,width:2,font:{face:"helvetica"},shadow:{enabled:!0}},physics:{solver:"forceAtlas2Based"}},selected_regions=[],selected_sites=[],coord_save_checkbox=null,htmlElement=null;function getCookie(e){var t=null;if(document.cookie&&""!==document.cookie)for(var n=document.cookie.split(";"),o=0;o<n.length;o++){var a=n[o].trim();if(a.substring(0,e.length+1)===e+"="){t=decodeURIComponent(a.substring(e.length+1));break}}return t}function htmlTitle(e){return(container=document.createElement("div")).innerHTML=e,container}function addEdge(e){e.title=htmlTitle(e.title),edges.add(e)}function addNode(e){e.title=htmlTitle(e.title),nodes.add(e)}function iniPlotboxIndex(){document.addEventListener("DOMContentLoaded",function(){csrftoken=getCookie("csrftoken"),container=document.getElementById("visgraph"),htmlElement=document.getElementsByTagName("html")[0],handleLoadData(),downloadButton=document.getElementById("btnDownloadImage"),btnFullView=document.getElementById("btnFullView"),coord_save_checkbox=document.getElementById("id_save_coords")},!1)}function handleLoadData(){null!==topology_data&&("dark"==htmlElement.dataset.netboxColorMode&&(options.nodes.font.color="#fff"),graph=null,nodes=new vis.DataSet,edges=new vis.DataSet,graph=new vis.Network(container,{nodes:nodes,edges:edges},options),topology_data.edges.forEach(addEdge),topology_data.nodes.forEach(addNode),graph.fit(),canvas=document.getElementById("visgraph").getElementsByTagName("canvas")[0],graph.on("afterDrawing",function(){var e=canvas.toDataURL(MIME_TYPE);downloadButton.href=e,downloadButton.download="topology"}),graph.on("dragEnd",function(e){if(dragged=this.getPositions(e.nodes),coord_save_checkbox.checked&&0!==Object.keys(dragged).length)for(dragged_device in dragged){var t=dragged_device,n=new XMLHttpRequest;n.open("PATCH","/api/plugins/netbox_topology_views/save-coords/save_coords/"),n.setRequestHeader("X-CSRFToken",csrftoken),n.setRequestHeader("Accept","application/json"),n.setRequestHeader("Content-Type","application/json"),n.onreadystatechange=function(){4===n.readyState&&(console.log(n.status),console.log(n.responseText))};var o=JSON.stringify({node_id:t,x:dragged[t].x,y:dragged[t].y});n.send(o)}}))}
\ No newline at end of file
+var graph=null,container=null,downloadButton=null,MIME_TYPE="image/png",canvas=null,csrftoken=null,nodes=new vis.DataSet,edges=new vis.DataSet,options={interaction:{hover:!0,hoverConnectedEdges:!0,multiselect:!1},nodes:{shape:"image",brokenImage:"../../static/netbox_topology_views/img/role-unknown.png",size:35,font:{multi:"md",face:"helvetica"}},edges:{length:100,width:2,font:{face:"helvetica"},shadow:{enabled:!0}},physics:{solver:"forceAtlas2Based"}},selected_regions=[],selected_sites=[],coord_save_checkbox=null,htmlElement=null;function getCookie(e){var t=null;if(document.cookie&&""!==document.cookie)for(var o=document.cookie.split(";"),n=0;n<o.length;n++){var d=o[n].trim();if(d.substring(0,e.length+1)===e+"="){t=decodeURIComponent(d.substring(e.length+1));break}}return t}function htmlTitle(e){return(container=document.createElement("div")).innerHTML=e,container}function addEdge(e){e.title=htmlTitle(e.title),edges.add(e)}function addNode(e){e.title=htmlTitle(e.title),nodes.add(e)}function iniPlotboxIndex(){document.addEventListener("DOMContentLoaded",function(){csrftoken=getCookie("csrftoken"),container=document.getElementById("visgraph"),htmlElement=document.getElementsByTagName("html")[0],downloadButton=document.getElementById("btnDownloadImage"),handleLoadData(),btnFullView=document.getElementById("btnFullView"),coord_save_checkbox=document.getElementById("id_save_coords")},!1)}function performGraphDownload(){var e=document.createElement("a"),t=canvas.toDataURL(MIME_TYPE);e.href=t,e.download="topology",document.body.appendChild(e),e.click(),document.body.removeChild(e)}function handleLoadData(){null!==topology_data&&("dark"==htmlElement.dataset.netboxColorMode&&(options.nodes.font.color="#fff"),graph=null,nodes=new vis.DataSet,edges=new vis.DataSet,graph=new vis.Network(container,{nodes:nodes,edges:edges},options),topology_data.edges.forEach(addEdge),topology_data.nodes.forEach(addNode),graph.fit(),canvas=document.getElementById("visgraph").getElementsByTagName("canvas")[0],downloadButton.onclick=function(e){return performGraphDownload(),!1},graph.on("dragEnd",function(e){if(dragged=this.getPositions(e.nodes),coord_save_checkbox.checked&&0!==Object.keys(dragged).length)for(dragged_device in dragged){var t=dragged_device,o=new XMLHttpRequest;o.open("PATCH","/api/plugins/netbox_topology_views/save-coords/save_coords/"),o.setRequestHeader("X-CSRFToken",csrftoken),o.setRequestHeader("Accept","application/json"),o.setRequestHeader("Content-Type","application/json"),o.onreadystatechange=function(){4===o.readyState&&(console.log(o.status),console.log(o.responseText))};var n=JSON.stringify({node_id:t,x:dragged[t].x,y:dragged[t].y});o.send(n)}}))}
\ No newline at end of file
diff --git a/netbox_topology_views/static_dev/js/home.js b/netbox_topology_views/static_dev/js/home.js
index 22d3764..81f9e64 100644
--- a/netbox_topology_views/static_dev/js/home.js
+++ b/netbox_topology_views/static_dev/js/home.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);
diff --git a/netbox_topology_views/templates/netbox_topology_views/index.html b/netbox_topology_views/templates/netbox_topology_views/index.html
index 102a8de..f77e2cb 100644
--- a/netbox_topology_views/templates/netbox_topology_views/index.html
+++ b/netbox_topology_views/templates/netbox_topology_views/index.html
@@ -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>
diff --git a/package-lock.json b/package-lock.json
index b8c6f72..e925854 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "netbox_topology_views",
-      "version": "1.0.0-alpha.2",
+      "version": "1.1.0",
       "dependencies": {
         "vis-data": "^7.1.2",
         "vis-network": "^9.1.0",