Added subscriber S/C tags
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index c9787ba..d65194c 100644
--- a/views/ngXosViews/diagnostic/src/js/diagnostic.js
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -30,6 +30,10 @@
           ServiceRelation.getBySubscriber(subscriber)
           .then((serviceChain) => {
             this.serviceChain = serviceChain;
+            return Subscribers.getWithDevices({id: subscriber.id}).$promise;
+          })
+          .then((subscriber) => {
+            this.selectedSubscriber = subscriber;
           });
         });
       }
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index a3501dd..5ca0b30 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -11,7 +11,7 @@
       bindToController: true,
       controllerAs: 'vm',
       templateUrl: 'templates/logicTopology.tpl.html',
-      controller: function($element, $log, $scope, $rootScope, $timeout, d3, LogicTopologyHelper, Node, Tenant, Ceilometer){
+      controller: function($element, $log, $scope, $rootScope, $timeout, d3, LogicTopologyHelper, Node, Tenant, Ceilometer, serviceTopologyConfig){
         $log.info('Logic Plane');
 
         var svg;
@@ -29,8 +29,6 @@
         $scope.$watch(() => this.subscribers, (subscribers) => {
           if(subscribers){
 
-            // LogicTopologyHelper.addSubscribers(angular.copy(subscribers));
-
             Node.queryWithInstances().$promise
             .then((computeNodes) => {
               LogicTopologyHelper.addComputeNodes(computeNodes);
@@ -43,6 +41,17 @@
         $scope.$watch(() => this.selected, (selected) => {
           if(selected){
             $log.info(`Update logic layer for subscriber ${selected.humanReadableName}`);
+            
+            // append the device with to config settings
+            serviceTopologyConfig.elWidths.push(160);
+
+            LogicTopologyHelper.addSubscriber(angular.copy(selected));
+
+            Tenant.getSubscriberTag({subscriber_root: selected.id}).$promise
+            .then((tags) => {
+              LogicTopologyHelper.addSubscriberTag(tags);
+              LogicTopologyHelper.updateTree(svg);
+            })
           }
         });
 
@@ -57,6 +66,10 @@
 
         $rootScope.$on('instance.detail', (evt, service) => {
 
+          // NOTE consider if subscriber is selected or not,
+          // if not select instances
+          // else select containers (and follow subscriber chain to find the correct instance)
+
           let param = {
             'service_vsg': {kind: 'vCPE'},
             'service_vbng': {kind: 'vBNG'},
@@ -69,6 +82,7 @@
             return Ceilometer.getInstancesStats(instances);
           })
           .then((instances) => {
+            console.log(instances);
             this.hideInstanceStats = false;
             // HACK if array is empty wait for animation
             if(instances.length === 0){
@@ -97,7 +111,6 @@
           $scope.$apply();
         };
 
-
         // listen for subscriber modal event
         $rootScope.$on('subscriber.modal.open', () => {
           this.openSubscriberModal();
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index f860d9e..f17b103 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -136,6 +136,7 @@
         });
 
       // TODO handle node remove
+      var nodeExit = node.exit().remove();
     };
 
     /**
@@ -164,6 +165,8 @@
       link.transition()
         .duration(serviceTopologyConfig.duration)
         .attr('d', diagonal);
+
+      link.exit().remove();
     };
 
     /**
@@ -190,6 +193,7 @@
       // Compute the new tree layout.
       [nodes, links] = computeLayout(baseData);
 
+      // console.log(baseData);
       drawNodes(svg, nodes);
       drawLinks(svg, links);
     }
@@ -197,19 +201,28 @@
     /**
     * Add Subscribers to the tree
     */
-    this.addSubscribers = (subscribers) => {
+    this.addSubscriber = (subscriber) => {
 
-      subscribers.map((subscriber) => {
-        subscriber.children = subscriber.devices;
-      });
+
+      subscriber.children = subscriber.devices;
 
       // add subscriber to data tree
-      baseData.children[0].children[0].children[0].children = subscribers;
-      
+      baseData.children[0].children[0].children[0].children = [subscriber];
       return baseData;
     };
 
     /**
+    * Add Subscriber tag to LAN Network
+    */
+   
+    this.addSubscriberTag = (tags) => {
+      baseData.children[0].children[0].children[0].subscriberTag = {
+        cTag: tags.c_tag,
+        sTag: tags.s_tag
+      }
+    };
+
+    /**
     * Add compute nodes to the rack element
     */
    
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 62e2cdf..94ff406 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -26,6 +26,26 @@
         'text-anchor': 'middle'
       })
       .text(d => d.name)
+
+      nodes.each(function(n){
+        let currentNode = d3.select(this);
+        // cicle trouch node to add Tags and Public IP
+        if(n.name === 'LAN' && angular.isDefined(n.subscriberTag)){
+          currentNode.append('text')
+          .attr({
+            'text-anchor': 'middle',
+            y: 40
+          })
+          .text(() => `C-Tag: ${n.subscriberTag.cTag}`);
+
+          currentNode.append('text')
+          .attr({
+            'text-anchor': 'middle',
+            y: 60
+          })
+          .text(() => `S-Tag: ${n.subscriberTag.sTag}`);
+        }
+      });
     }
 
     this.addRack = (nodes) => {
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index 885b3de..877b485 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -28,6 +28,16 @@
             return instances;
           }
         }
+      },
+      getSubscriberTag: {
+        method: 'GET',
+        isArray: true,
+        interceptor: {
+          response: (res) => {
+            // NOTE we should receive only one vOLT tenant here
+            return JSON.parse(res.data[0].service_specific_attribute);
+          }
+        }
       }
     });
   })
@@ -127,7 +137,7 @@
     });
   })
   .service('Subscribers', function($resource, $q, SubscriberDevice){
-    return $resource('/xos/subscribers', {id: '@id'}, {
+    return $resource('/xos/subscribers/:id', {id: '@id'}, {
       queryWithDevices: {
         method: 'GET',
         isArray: true,
@@ -138,7 +148,7 @@
             * For each subscriber retrieve devices and append them
             */
 
-            const deferred = $q.defer();
+            let deferred = $q.defer();
 
             let requests = [];
 
@@ -169,6 +179,29 @@
             return deferred.promise;
           }
         }
+      },
+      getWithDevices: {
+        method: 'GET',
+        isArray: false,
+        interceptor: {
+          response: (res) => {
+            let d = $q.defer();
+
+            SubscriberDevice.query({id: res.data.id}).$promise
+            .then(devices => {
+              devices.map(d => d.type = 'device');
+              res.data.devices = devices;
+              res.data.type = 'subscriber';
+              console.log(res.data);
+              d.resolve(res.data);
+            })
+            .catch(err => {
+              d.reject(err);
+            });
+
+            return d.promise;
+          }
+        }
       }
     });
   })
@@ -289,13 +322,20 @@
 
       // TODO refactor
       const buildChild = (services, tenants, currentService) => {
+
+        const response = {
+          type: 'service',
+          name: currentService.humanReadableName,
+          service: currentService
+        };
+
         let tenant = lodash.find(tenants, {subscriber_service: currentService.id});
         if(tenant){
           let next = lodash.find(services, {id: tenant.provider_service});
-          currentService.children = [buildChild(services, tenants, next)];
+          response.children = [buildChild(services, tenants, next)];
         }
         else {
-          currentService.children = [
+          response.children = [
             {
               name: 'Router',
               type: 'router',
@@ -303,9 +343,8 @@
             }
           ]
         }
-        currentService.type = 'service';
         delete currentService.id; // conflict with d3
-        return currentService;
+        return response;
       }
       let baseService = lodash.find(services, {id: 3});
 
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index 3d602fe..b358abf 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -32,8 +32,6 @@
           const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
           const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
 
-          console.log(el.clientWidth, el.clientHeight);
-
           const treeLayout = d3.layout.tree()
             .size([height, width]);
 
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
index 817e79e..47fc5eb 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -225,8 +225,8 @@
         $rootScope.$emit('instance.detail.hide', {});
         return updateTree(_svg, _layout, _source);
       }
-
-      $rootScope.$emit('instance.detail', {name: d.humanReadableName});
+      
+      $rootScope.$emit('instance.detail', {name: d.name});
 
       // unselect all
       _svg.selectAll('circle')