draw agents and their processes with edges

addon/components/node-overview.js

@@ -10,6 +10,7 @@ export default Component.extend({
 
   agentRepo: service("repos/agent-repository"),
   cytoscapeGraph: null,
+  cytoscapeLayout: null,
 
 
   // @Override
@@ -23,6 +24,7 @@ export default Component.extend({
     this._super(...arguments);
     this.setupListener();
     this.initCytoscape();
+    this.updateCytoscapeGraph(this.get('agentRepo.agentList'));
   },
 
 
@@ -100,17 +102,19 @@ export default Component.extend({
             { data: { id: 'explorVizBackend' } }
           ],
           edges: []
-        },
+        }
+    });
 
-      layout: {
-        name: 'breadthfirst',
-        directed: true,
-        roots: '#explorVizBackend',
-        padding: 10
-      }
+    const layout = cy.layout({
+      name: 'breadthfirst',
+      directed: true,
+      padding: 10
     });
 
     this.set('cytoscapeGraph', cy);
+    this.set('cytoscapeLayout', layout);
+
+    layout.run();
 
     /*var bfs = cy.elements().bfs('#a', function(){}, true);
 
@@ -131,40 +135,60 @@ export default Component.extend({
 
   updateCytoscapeGraph(newAgentList) {
 
-    this.debug('updating cytoscapeGraph');
-
     const cy = this.get('cytoscapeGraph');
+    const layout = this.get('cytoscapeLayout');
 
-    if(!cy) {
+    if(!(cy && layout) || !newAgentList) {
       return;
     }
 
+    this.debug('updating cytoscapeGraph');
+
+    //cy.startBatch();
+
     newAgentList.forEach((agentRecord) => {
+      
+      const ip = agentRecord.get('ip');
+      const edgeIDAgent = ip + "ToexplorVizBackend";
+
+      cy.add([
+        {
+          group: "nodes",
+          data: { id: ip }
+        },
+        {
+          group: "edges",
+          data: { id: edgeIDAgent, source: ip, target: 'explorVizBackend' }             
+        }
+      ]);
+
       const processes = agentRecord.get('processes');
-      cy.startBatch();
 
       processes.forEach((process) => {
 
         const pid = process.get('pid');
         console.log(pid);
 
-        cy.add(
+        const edgeID = pid + "To" + ip;
+
+        cy.add([
           {
             group: "nodes",
             data: { id: pid }
           },
           {
             group: "edges",
-            data: { id: pid, source: pid, target: 'explorVizBackend' }             
+            data: { id: edgeID, source: pid, target: ip }             
           }
-        );
+        ]);
           
       });
 
     });
+    // END agentList loop
 
-    cy.endBatch();
-    //cy.layout();
+    //cy.endBatch();    
+    layout.run();
     cy.fit();
   }