Adding and removing elements
diff --git a/views/ngXosViews/mcordTopology/mocks/data/instances.json b/views/ngXosViews/mcordTopology/mocks/data/instances.json
index 67029ac..572c775 100644
--- a/views/ngXosViews/mcordTopology/mocks/data/instances.json
+++ b/views/ngXosViews/mcordTopology/mocks/data/instances.json
@@ -18,24 +18,6 @@
     "ip": "130.127.133.92"
   },
   {
-    "id": 3,
-    "humanReadableName": "BBU_service_instance-3",
-    "instance_id": "instance-00000001", 
-    "instance_uuid": "42b75cb7-7205-4a68-9100-b2c1e3ea69b5", 
-    "name": "BBU_service_instance-3", 
-    "instance_name": "mysite_BBU-3", 
-    "ip": "130.127.133.93"
-  },
-  {
-    "id": 4,
-    "humanReadableName": "BBU_service_instance-4",
-    "instance_id": "instance-00000004", 
-    "instance_uuid": "44b75cb7-7405-4a68-9400-b4c4e3ea69b5", 
-    "name": "BBU_service_instance-4", 
-    "instance_name": "mysite_BBU-4", 
-    "ip": "130.127.133.94"
-  },
-  {
     "id": 5,
     "humanReadableName": "vsg_service_instance-4",
     "instance_id": "instance-00000004", 
diff --git a/views/ngXosViews/mcordTopology/mocks/mcord.conf.json b/views/ngXosViews/mcordTopology/mocks/mcord.conf.json
index 17f8d01..7246775 100644
--- a/views/ngXosViews/mcordTopology/mocks/mcord.conf.json
+++ b/views/ngXosViews/mcordTopology/mocks/mcord.conf.json
@@ -2,7 +2,7 @@
   {
     "url": "instances",
     "base": "xos/",
-    "methods": ["GET"],
+    "methods": ["GET", "POST"],
     "param": "id"
   }
 ]
\ No newline at end of file
diff --git a/views/ngXosViews/mcordTopology/src/css/mcord.css b/views/ngXosViews/mcordTopology/src/css/mcord.css
index 54854ef..7d3db3d 100644
--- a/views/ngXosViews/mcordTopology/src/css/mcord.css
+++ b/views/ngXosViews/mcordTopology/src/css/mcord.css
@@ -25,7 +25,7 @@
 }
 
 .bbu text {
-  font-size: 10px;
+  font-size: 9px;
 }
 
 .rru {
diff --git a/views/ngXosViews/mcordTopology/src/js/bbu.js b/views/ngXosViews/mcordTopology/src/js/bbu.js
index 1192c1d..07ad474 100644
--- a/views/ngXosViews/mcordTopology/src/js/bbu.js
+++ b/views/ngXosViews/mcordTopology/src/js/bbu.js
@@ -2,19 +2,37 @@
 
 angular.module('xos.mcordTopology')
 .service('NodeDrawer', function(){
+
+  const duration = 500;
+
   this.drawBbus = (nodes) => {
+
     nodes.append('circle')
       .attr({
         class: d => d.type,
-        r: 15
+        r: 0,
+        opacity: 0
+      })
+      .transition()
+      .duration(duration)
+      // .delay((d, i) => i * (duration / 2))
+      .attr({
+        r: 15,
+        opacity: 1
       });
 
     nodes.append('text')
     .attr({
       'text-anchor': 'middle',
-      y: 4
+      y: 4,
+      opacity: 0
     })
-    .text('BBU')
+    .text(d => `BBU ${d.name.substr(d.name.length - 1, 1)}`)
+    .transition()
+    .duration(duration * 2)
+    .attr({
+      opacity: 1
+    });
   };
 
   this.drawRrus = (nodes) => {
@@ -22,13 +40,29 @@
     nodes.append('circle')
       .attr({
         class: d => `${d.type}-shadow`,
-        r: 30
+        r: 0,
+        opacity: 0
+      })
+      .transition()
+      .duration(duration * 2)
+      // .delay((d, i) => i * (duration / 2))
+      .attr({
+        r: 30,
+        opacity: 1
       });
-    
+  
     nodes.append('circle')
       .attr({
         class: d => d.type,
-        r: 10
+        r: 0,
+        opacity: 0
+      })
+      .transition()
+      .duration(duration)
+      // .delay((d, i) => i * (duration / 2))
+      .attr({
+        r: 10,
+        opacity: 1
       });
   };
 
@@ -36,10 +70,19 @@
     nodes.append('rect')
       .attr({
         class: d => d.type,
+        width: 0,
+        height: 0,
+        x: -10,
+        y: -10,
+        opacity: 0
+      })
+      .transition()
+      .duration(duration)
+      // .delay((d, i) => i * (duration / 2))
+      .attr({
         width: 20,
         height: 20,
-        x: -10,
-        y: -10
+        opacity: 1
       });
   };
 
@@ -47,14 +90,39 @@
     nodes.append('circle')
       .attr({
         class: d => d.type,
-        r: 15
+        r: 0,
+        opacity: 0
+      })
+      .transition()
+      .duration(duration)
+      // .delay((d, i) => i * (duration / 2))
+      .attr({
+        r: 15,
+        opacity: 1
       });
 
     nodes.append('text')
     .attr({
       'text-anchor': 'middle',
-      y: 4
+      y: 4,
+      opacity: 0
     })
     .text(d => d.type)
+    .transition()
+    .duration(duration * 2)
+    .attr({
+      opacity: 1
+    });
+
+  };
+  
+  this.removeElements = (nodes) => {
+    nodes
+    .transition()
+    .duration(duration)
+    .attr({
+      opacity: 0
+    })
+    .remove();
   };
 });
\ No newline at end of file
diff --git a/views/ngXosViews/mcordTopology/src/js/main.js b/views/ngXosViews/mcordTopology/src/js/main.js
index f0605c3..82836a6 100644
--- a/views/ngXosViews/mcordTopology/src/js/main.js
+++ b/views/ngXosViews/mcordTopology/src/js/main.js
@@ -24,12 +24,12 @@
     bindToController: true,
     controllerAs: 'vm',
     template: '',
-    controller: function($element, $window, XosApi, lodash, TopologyElements, NodeDrawer){
+    controller: function($element, $interval, XosApi, lodash, TopologyElements, NodeDrawer){
 
       const el = $element[0];
 
-      let nodes = TopologyElements.nodes;
-      let links = TopologyElements.links;
+      let nodes = [];
+      let links = [];
 
       const filterBBU = (instances) => {
         return lodash.filter(instances, i => i.name.indexOf('BBU') >= 0);
@@ -44,15 +44,24 @@
       };
 
       // retrieving instances list
-      XosApi.Instance_List_GET()
-      .then((instances) => {
-        addBbuNodes(filterBBU(instances));
-        addOtherNodes(filterOthers(instances));
-        draw(svg, nodes, links);
-      })
-      .catch((e) => {
-        throw new Error(e);
-      });
+      const getData = () => {
+
+        nodes = TopologyElements.nodes;
+        links = TopologyElements.links;
+        console.log('-----------------------------');
+        console.log(`Fabric Links: ${links.length}`);
+
+        XosApi.Instance_List_GET()
+        .then((instances) => {
+          addBbuNodes(filterBBU(instances));
+          addOtherNodes(filterOthers(instances));
+
+          draw(svg, nodes, links);
+        })
+        .catch((e) => {
+          throw new Error(e);
+        });
+      };
 
       const force = d3.layout.force();
 
@@ -68,13 +77,15 @@
 
       // replace human readable ids with d3 ids
       const buildLinks = (links, nodes) => {
-        return links.map((l) => {
+        console.log(`links: ${links.length}`);
+        return links.map((l, i) => {
           let source = lodash.findIndex(nodes, {id: l.source});
           let target = lodash.findIndex(nodes, {id: l.target});
           return {
             source: source,
             target: target,
-            value: 1
+            value: 1,
+            id: `link-${i++}`
           };
 
         });
@@ -137,6 +148,9 @@
         })
 
         nodes = nodes.concat(bbuNodes);
+
+        console.log(`bbuLinks: ${bbuLinks.length}`);
+
         links = links.concat(bbuLinks);
       };
 
@@ -164,11 +178,13 @@
           };
         });
 
+        console.log(`otherLinks: ${otherLinks.length}`);
+
         nodes = nodes.concat(otherNodes);
         links = links.concat(otherLinks);
       }
 
-      // NOTE nodes get dublicated
+      // NOTE links get duplicated
       const draw = (svg, nodes, links) => {
 
         links = buildLinks(links, nodes);
@@ -188,12 +204,24 @@
 
         // draw links
         var link = svg.selectAll('.link')
-          .data(links)
-          .enter().append('line')
+          .data(links, d => d.id);
+        
+        link.enter().append('line')
           .attr({
             class: 'link',
+            id: d => d.id,
+            opacity: 0
+          })
+          .transition()
+          .duration(1000)
+          // .delay((d, i) => 50 * i)
+          .attr({
+            opacity: 1
           });
 
+        link.exit()
+        .remove();
+
         //draw nodes
         var node = svg.selectAll('.node')
           .data(nodes, d => {
@@ -204,15 +232,15 @@
         var enter = node.enter()
           .append('g', d => d.interfaceCfgIdentifier)
           .attr({
-            class: d => d.type,
+            class: d => `${d.type} node`,
             transform: d => `translate(${d.x}, ${d.y})`
           });
 
         // draw nodes
-        NodeDrawer.drawBbus(node.filter('.bbu'))
-        NodeDrawer.drawRrus(node.filter('.rru'))
-        NodeDrawer.drawFabric(node.filter('.fabric'))
-        NodeDrawer.drawOthers(node.filter(d => {
+        NodeDrawer.drawBbus(enter.filter('.bbu'))
+        NodeDrawer.drawRrus(enter.filter('.rru'))
+        NodeDrawer.drawFabric(enter.filter('.fabric'))
+        NodeDrawer.drawOthers(enter.filter(d => {
           return (
             d.type  === 'MME' ||
             d.type === 'SGW' ||
@@ -220,6 +248,11 @@
           )
         }));
 
+        // remove nodes
+        var exit = node.exit();
+
+        NodeDrawer.removeElements(exit);
+
         force.on('tick', function() {
           link
             .attr('x1', d => d.source.x )
@@ -231,7 +264,12 @@
         });
       };
       
-      // draw(svg, TopologyElements.nodes, TopologyElements.links);
+      $interval(() => {
+        getData();
+      }, 5000);
+      getData();
+
+      
     }
   };
 });
\ No newline at end of file