better cleanup in gv

js/apps/system/_admin/aardvark/APP/frontend/js/arango/arango.js

@@ -1,5 +1,5 @@
 /* jshint unused: false */
-/* global Blob, window, $, document, _, arangoHelper, frontendConfig, arangoHelper, localStorage */
+/* global Blob, window, sigma, $, document, _, arangoHelper, frontendConfig, arangoHelper, localStorage */
 
 (function () {
   'use strict';
@@ -810,6 +810,42 @@
       }
     },
 
+    initSigma: function () {
+      // init sigma
+      try {
+        sigma.classes.graph.addMethod('neighbors', function (nodeId) {
+          var k;
+          var neighbors = {};
+          var index = this.allNeighborsIndex[nodeId] || {};
+
+          for (k in index) {
+            neighbors[k] = this.nodesIndex[k];
+          }
+          return neighbors;
+        });
+
+        sigma.classes.graph.addMethod('getNodeEdges', function (nodeId) {
+          var edges = this.edges();
+          var edgesToReturn = [];
+
+          _.each(edges, function (edge) {
+            if (edge.source === nodeId || edge.target === nodeId) {
+              edgesToReturn.push(edge.id);
+            }
+          });
+          return edgesToReturn;
+        });
+
+        sigma.classes.graph.addMethod('getNodeEdgesCount', function (id) {
+          return this.allNeighborsCount[id];
+        });
+
+        sigma.classes.graph.addMethod('getNodesCount', function () {
+          return this.nodesArray.length;
+        });
+      } catch (ignore) {}
+    },
+
     download: function (url, callback) {
       $.ajax(url)
         .success(function (result, dummy, request) {

js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js

@@ -9,6 +9,7 @@
     toUpdate: [],
     dbServers: [],
     isCluster: undefined,
+    lastRoute: undefined,
 
     routes: {
       '': 'cluster',
@@ -46,6 +47,12 @@
     },
 
     execute: function (callback, args) {
+      if (this.lastRoute === '#queries') {
+        // cleanup old canvas elements
+        this.queryView.cleanupGraphs();
+      }
+
+      this.lastRoute = window.location.hash;
       // this function executes before every route call
       $('#subNavigationBar .breadcrumb').html('');
       $('#subNavigationBar .bottom').html('');
@@ -242,6 +249,8 @@
           documentStore: this.arangoDocumentStore,
           collectionsStore: this.arangoCollectionsStore
         });
+
+        arangoHelper.initSigma();
       }.bind(this);
 
       $(window).resize(function () {
@@ -703,6 +712,8 @@
         if (this.graphViewer.graphSettingsView) {
           this.graphViewer.graphSettingsView.remove();
         }
+        this.graphViewer.killCurrentGraph();
+        this.graphViewer.unbind();
         this.graphViewer.remove();
       }
 

js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer.js

@@ -10,6 +10,8 @@
     remove: function () {
       this.$el.empty().off(); /* off to unbind the events */
       this.stopListening();
+      this.unbind();
+      delete this.el;
       return this;
     },
 
@@ -35,7 +37,6 @@
       this.name = options.name;
       this.userConfig = options.userConfig;
       this.documentStore = options.documentStore;
-      this.initSigma();
 
       if (this.name !== undefined) {
         this.collection.fetch({
@@ -89,42 +90,6 @@
     graphConfig: null,
     graphSettings: null,
 
-    initSigma: function () {
-      // init sigma
-      try {
-        sigma.classes.graph.addMethod('neighbors', function (nodeId) {
-          var k;
-          var neighbors = {};
-          var index = this.allNeighborsIndex[nodeId] || {};
-
-          for (k in index) {
-            neighbors[k] = this.nodesIndex[k];
-          }
-          return neighbors;
-        });
-
-        sigma.classes.graph.addMethod('getNodeEdges', function (nodeId) {
-          var edges = this.edges();
-          var edgesToReturn = [];
-
-          _.each(edges, function (edge) {
-            if (edge.source === nodeId || edge.target === nodeId) {
-              edgesToReturn.push(edge.id);
-            }
-          });
-          return edgesToReturn;
-        });
-
-        sigma.classes.graph.addMethod('getNodeEdgesCount', function (id) {
-          return this.allNeighborsCount[id];
-        });
-
-        sigma.classes.graph.addMethod('getNodesCount', function () {
-          return this.nodesArray.length;
-        });
-      } catch (ignore) {}
-    },
-
     downloadPNG: function () {
       var size = parseInt($('#graph-container').width(), 10);
       sigma.plugins.image(this.currentGraph, this.currentGraph.renderers[0], {
@@ -687,6 +652,7 @@
 
           // Override default settings:
           sigma.settings.drawEdgeLabels = true;
+          sigma.settings.clone = true;
         }
       }
     },
@@ -1846,6 +1812,7 @@
         autoRescale: true,
         mouseEnabled: true,
         touchEnabled: true,
+        approximateLabelWidth: true,
         font: 'Roboto'
       };
 

js/apps/system/_admin/aardvark/APP/frontend/js/views/queryView.js

@@ -21,6 +21,7 @@
 
     customQueries: [],
     cachedQueries: {},
+    graphViewers: [],
     queries: [],
 
     state: {
@@ -695,6 +696,18 @@
 
       this.initDone = true;
       this.renderBindParamTable(true);
+      this.restoreCachedQueries();
+    },
+
+    cleanupGraphs: function () {
+      _.each(this.graphViewers, function (graphView) {
+        graphView.killCurrentGraph();
+        graphView.remove();
+      });
+      $('canvas').remove();
+
+      this.graphViewers = null;
+      this.graphViewers = [];
     },
 
     afterRender: function () {
@@ -711,8 +724,6 @@
         self.resize();
       }, 10);
       self.deselect(self.aqlEditor);
-
-      this.restoreCachedQueries();
     },
 
     restoreCachedQueries: function () {
@@ -2325,7 +2336,7 @@
     },
 
     renderOutputGraph: function (data, counter) {
-      this.graphViewer = new window.GraphViewer({
+      this.graphViewers[counter] = new window.GraphViewer({
         name: undefined,
         documentStore: window.App.arangoDocumentStore,
         collection: new window.GraphCollection(),
@@ -2333,7 +2344,7 @@
         id: '#outputGraph' + counter,
         data: data
       });
-      var success = this.graphViewer.renderAQLPreview();
+      var success = this.graphViewers[counter].renderAQLPreview();
 
       return success;
     },