keep zoom and pan if count of procezzes did not change

addon/components/node-overview.js

@@ -2,11 +2,12 @@ import Component from '@ember/component';
 import layout from '../templates/components/node-overview';
 import { inject as service } from '@ember/service';
 import nameSelector from '../utils/helper/name-selector';
+import AlertifyHandler from 'explorviz-frontend/mixins/alertify-handler';
 
 // Declare globals
 /*global cytoscape*/
 
-export default Component.extend({
+export default Component.extend(AlertifyHandler, {
   layout,
 
   agentRepo: service("repos/agent-repository"),
@@ -15,6 +16,8 @@ export default Component.extend({
   cytoscapeGraph: null,
   cytoscapeLayout: null,
 
+  showCytoscape: false,
+
   initDone: false,
   showHiddenMessage: false,
 
@@ -26,6 +29,39 @@ export default Component.extend({
     }
   },
 
+  // @Override
+  /**
+   * This overridden Ember Component lifecycle hook enables calling
+   * custom addon-related setup code on initial component setup
+   * It is only called once per component lifecycle and differs
+   * from didRender
+   *
+   * @method init
+   */
+  init() {
+    this._super(...arguments);
+
+    const self = this;
+
+    console.log(this.get('initDone'));
+
+    this.get('agentRepo').on('updated', function(newAgentList) {
+      if(self.get('initDone')) {
+        self.updateCytoscapeGraph(newAgentList);
+      } else {
+        // force re-render on initial list
+        self.set('showCytoscape', true);
+      }
+      
+    });
+
+    // there already might be a list
+    // this occurs, when a user transitions 
+    // to another route and comes back
+    if(this.get('agentRepo.agentList.length') > 0) {
+      self.set('showCytoscape', true);
+    }
+  },
 
   // @Override
   /**
@@ -36,18 +72,16 @@ export default Component.extend({
    */
   didRender(){
     this._super(...arguments);
-    
-    if(this.get('agentRepo.agentList.length')) {
-
-      if(!this.get('initDone')) {
-        this.removeListener();
-        this.initCytoscape();
-        this.setupListener();
-        this.set('initDone', true);
-      }
 
+    if(this.get('agentRepo.agentList.length') > 0 && !this.get('initDone') && this.get('showCytoscape')) {
+      this.initCytoscape();
+      this.setupListener();
+      this.set('initDone', true);
+
+      // manually call once, so there won't be 
+      // a downtime until next update
       this.updateCytoscapeGraph(this.get('agentRepo.agentList'));
-    }
+    }  
   },
 
 
@@ -67,21 +101,18 @@ export default Component.extend({
   setupListener() {
     const self = this;
 
-    this.get('agentRepo').on('updated', function(newAgentList) {
-      self.updateCytoscapeGraph(newAgentList);
-    });
-
-    this.get('cytoscapeGraph').on('tap', 'node', function (evt) {
+    if(this.get('cytoscapeGraph')) {
+      this.get('cytoscapeGraph').on('tap', 'node', function (evt) {
 
-      const emberModel = evt.target.data().emberModel;
-
-      if(emberModel) {
-        // closure action of discovery controller        
-        self.showDetails(emberModel);
-      }
+        const emberModel = evt.target.data().emberModel;
 
+        if(emberModel) {
+          // closure action of discovery controller        
+          self.showDetails(emberModel);
+        }
 
-    });
+      });
+    }
   },
 
 
@@ -217,6 +248,16 @@ export default Component.extend({
 
     //cy.startBatch();
 
+    let cyOldPanPosition = null;
+    let cyOldZoomValue = null;
+    let cyOldProcezzCount = null;
+
+    if(cy.collection('.procezz').length > 0) {
+      cyOldPanPosition = cy.pan();
+      cyOldZoomValue = cy.zoom();
+      cyOldProcezzCount = cy.collection('.procezz').length;
+    }
+
     // remove all old elements
     cy.elements().remove();
 
@@ -343,12 +384,27 @@ export default Component.extend({
     });
     // END agentList loop
 
+    this.set('showCytoscape', isAtLeastOneSet);
     this.set('showHiddenMessage', !isAtLeastOneSet);
 
     //cy.endBatch();
     layout.options.eles = cy.elements();
     layout.run();
-    //cy.fit();
+
+    // Apply old manipulation
+    if(cyOldPanPosition) {
+      cy.pan(cyOldPanPosition);
+      cy.zoom(cyOldZoomValue);
+
+      const cyNewProcezzCount = cy.collection('.procezz').length;
+
+      // if there is a new procezz, reset manipulation.
+      // otherwise zoom act weird in cytoscape.js
+      if(cyOldProcezzCount !== cyNewProcezzCount) {
+        cy.fit();
+        this.showAlertifyMessageWithDuration("New Procezz(es) found.", 4);
+      }
+    }
   }
 
 });

addon/services/agent-reload.js

@@ -43,8 +43,7 @@ export default Reload.extend(AlertifyHandler, {
     //--------------inner functions--------------
     function success(agentList){
       self.debug("end agents-request");
-      self.set('agentRepo.agentList', agentList);
-      self.get('agentRepo').notify();
+      self.get('agentRepo').updateAgentList(agentList);
     }
 
     function failure(e){

addon/services/repos/agent-repository.js

@@ -12,12 +12,11 @@ export default Service.extend(Evented, {
 
   agentList: null,
 
-  observer: observer("agentList.processList", function(){
-    this.trigger("updated", this.get("agentList"));
-  }),
-
-  notify() {
-  	//this.trigger("updated", this.get("agentList"));
+  updateAgentList(agentList) {
+    if(!this.isDestroyed) {
+      this.set('agentList', agentList);
+      this.trigger("updated", this.get("agentList"));
+    }    
   }
 
 });
\ No newline at end of file

addon/templates/components/node-overview.hbs

@@ -13,7 +13,7 @@
 
 {{else}}
 
-  {{#if agentRepo.agentList}}
+  {{#if showCytoscape}}
     
     <div id="cy" class="container-fluid cytoscape-container"></div>