call detail component when clicking a cytoscape node

addon/components/node-overview.js

@@ -21,10 +21,10 @@ export default Component.extend({
    * @method didRender
    */
   didRender(){
-    this._super(...arguments);
-    this.setupListener();
+    this._super(...arguments);    
     this.initCytoscape();
     this.updateCytoscapeGraph(this.get('agentRepo.agentList'));
+    this.setupListener();
   },
 
 
@@ -47,11 +47,24 @@ export default Component.extend({
     this.get('agentRepo').on('updated', function(newAgentList) {
       self.updateCytoscapeGraph(newAgentList);
     });
+
+    this.get('cytoscapeGraph').on('tap', 'node', function (evt) {
+
+      const emberModel = evt.target.data().emberModel;
+
+      if(emberModel) {
+        // closure action of discovery controller
+        self.showDetails(emberModel);
+      }
+
+
+    });
   },
 
 
   removeListener() {
     this.get('agentRepo').off('updated');
+    this.get('cytoscapeGraph').off('tap');
   },
 
 
@@ -77,7 +90,7 @@ export default Component.extend({
           .css({
             'content': 'data(id)'
           })
-        .selector('#explorVizBackend')
+        .selector('#expLogo')
               .css({
                 'content': '',
                 'background-fit': 'cover',
@@ -102,7 +115,7 @@ export default Component.extend({
 
       elements: {
           nodes: [
-            { data: { id: 'explorVizBackend' } }
+            { data: { id: 'expLogo' } }
           ],
           edges: []
         }
@@ -152,24 +165,24 @@ export default Component.extend({
     newAgentList.forEach((agentRecord) => {
       
       const ip = agentRecord.get('ip');
-      const edgeIDAgent = ip + "ToexplorVizBackend";
+      const edgeIDAgent = ip + "ToexpLogo";
 
       cy.add([
         {
           group: "nodes",
-          data: { id: ip }
+          data: { id: ip, emberModel: agentRecord}
         },
         {
           group: "edges",
-          data: { id: edgeIDAgent, source: ip, target: 'explorVizBackend' }             
+          data: { id: edgeIDAgent, source: ip, target: 'expLogo' }             
         }
       ]);
 
       const processes = agentRecord.get('processes');
 
-      processes.forEach((process) => {
+      processes.forEach((processRecord) => {
 
-        const pid = process.get('pid');
+        const pid = processRecord.get('pid');
         console.log(pid);
 
         const edgeID = pid + "To" + ip;
@@ -177,7 +190,7 @@ export default Component.extend({
         cy.add([
           {
             group: "nodes",
-            data: { id: pid }
+            data: { id: pid, emberModel: processRecord }
           },
           {
             group: "edges",

addon/controllers/discovery.js

@@ -5,16 +5,39 @@ import AlertifyHandler from 'explorviz-frontend/mixins/alertify-handler';
 export default Controller.extend(AlertifyHandler, {
 
   processList: [],
+  processForDetailView: null,
+  agentForDetailView: null,
 
   renderingService: service("rendering-service"),
 
+  // closure action for node-overview component
+  showDetailsComponent(emberRecord) {
 
-  setupProcessView() {
+    const modelName = emberRecord.constructor.modelName;
+
+    const possibleModels = ["process", "agent"];
+
+    if(possibleModels.includes(modelName)) {
+      this.set(modelName + 'ForDetailView', emberRecord);
+    }
+
+    
+  },
+
+  setup() {
     this.set('renderingService.showTimeline', false);
+    this.resetState();
     this.fetchProcessList();
   },
 
 
+  resetState() {
+    this.set('processList', null);
+    this.set('processForDetailView', null);
+    this.set('agentForDetailView', null);
+  },
+
+
   fetchProcessList() {
     const self = this;
     

addon/routes/discovery.js

@@ -7,7 +7,7 @@ import AuthenticatedRouteMixin from
 export default Route.extend(AuthenticatedRouteMixin, {
 
   setupProcessView: on('activate', function(){
-    this.controllerFor('discovery').setupProcessView();
+    this.controllerFor('discovery').setup();
   })
 
 });

addon/templates/discovery.hbs

-{{node-overview}}
+{{#if processForDetailView}}
+	{{process-details process=processForDetailView}}
+{{else if agentForDetailView}}
+	TODO
+{{else}}
+	{{node-overview showDetails=(action showDetailsComponent)}}
+{{/if}}
+
 
 <!-- <div class="container-fluid pre-scrollable" style="min-height: 100%;">
   <!-- {{#each processList as |processPair|}}