diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 5bf0dc8..f84524e 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -9,7 +9,7 @@
   var instanceId = 0;
 
   angular.module('xos.serviceTopology')
-  .service('NodeDrawer', function(d3, serviceTopologyConfig, Node, RackHelper){
+  .service('NodeDrawer', function(d3, serviceTopologyConfig, RackHelper){
     this.addNetworks = (nodes) => {
       nodes.append('path')
       .attr({
@@ -27,39 +27,59 @@
 
     this.addRack = (nodes) => {
 
-      // NOTE is good to request data here? Probably not.
-
-      Node.queryWithInstances().$promise
-      .then((computeNodes) => {
-        let [w, h] = RackHelper.getRackSize(computeNodes);
+      // loop because of D3
+      // rack will be only one
+      nodes.each(d => {
+        let [w, h] = RackHelper.getRackSize(d.computeNodes);
 
         let rack = nodes
-        .append('g').
-        attr({
+        .append('g');
+
+        rack
+        .attr({
+          transform: `translate(0,0)`
+        })
+        .transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr({
           transform: d => `translate(${- (w / 2)}, ${- (h / 2)})`
         });
 
         rack
         .append('rect')
         .attr({
+          width: 0,
+          height: 0
+        })
+        .transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr({
           width: w,
           height: h
         });
 
-        nodes.append('text')
+        rack.append('text')
         .attr({
           'text-anchor': 'middle',
-          y: - (h / 2) - 10
+          y: - 10,
+          x: w / 2,
+          opacity: 0
         })
-        .text(d => d.name);
+        .text(d => d.name)
+        .transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr({
+          opacity: 1
+        })
 
-        this.drawComputeNodes(rack, computeNodes);
+        this.drawComputeNodes(rack, d.computeNodes);
+
       });
+
     };
 
     this.drawComputeNodes = (container, nodes) => {
       
-
       let elements = container.selectAll('.compute-nodes')
       .data(nodes, d => {
         if(!angular.isString(d.d3Id)){
@@ -68,14 +88,29 @@
         return d.d3Id;
       });
 
-      var nodeContainer = elements.enter().append('g')
+      let {width, height} = container.node().getBoundingClientRect();
+
+      var nodeContainer = elements.enter().append('g');
+
+      nodeContainer
       .attr({
+        transform: `translate(${width / 2}, ${ height / 2})`,
         class: 'compute-node',
+      })
+      .transition()
+      .duration(serviceTopologyConfig.duration)
+      .attr({
         transform: (d) => `translate(${RackHelper.getComputeNodePosition(nodes, d.d3Id.replace('compute-node-', '') - 1)})`
       });
 
       nodeContainer.append('rect')
       .attr({
+        width: 0,
+        height: 0
+      })
+      .transition()
+      .duration(serviceTopologyConfig.duration)
+      .attr({
         width: d => RackHelper.getComputeNodeSize(d.instances)[0],
         height: d => RackHelper.getComputeNodeSize(d.instances)[1],
       });
@@ -84,9 +119,15 @@
       .attr({
         'text-anchor': 'start',
         y: 15, //FIXME
-        x: 10 //FIXME
+        x: 10, //FIXME
+        opacity: 0
       })
-      .text(d => d.humanReadableName.split('.')[0]);
+      .text(d => d.humanReadableName.split('.')[0])
+      .transition()
+      .duration(serviceTopologyConfig.duration)
+      .attr({
+        opacity: 1
+      })
 
       // if there are Compute Nodes
       if(nodeContainer.length > 0){
@@ -110,17 +151,32 @@
 
     this.drawInstances = (container, instances) => {
 
+      let {width, height} = container.node().getBoundingClientRect();
+
       let elements = container.selectAll('.instances')
       .data(instances, d => angular.isString(d.d3Id) ? d.d3Id : d.d3Id = `instance-${++instanceId}`)
 
-      var instanceContainer = elements.enter().append('g')
+      var instanceContainer = elements.enter().append('g');
+
+      instanceContainer
       .attr({
+        transform: `translate(${width / 2}, ${ height / 2})`,
         class: 'instance',
+      })
+      .transition()
+      .duration(serviceTopologyConfig.duration)
+      .attr({
         transform: d => `translate(${RackHelper.getInstancePosition(d.d3Id.replace('instance-', '') - 1)})`
       });
 
       instanceContainer.append('rect')
       .attr({
+        width: 0,
+        height: 0
+      })
+      .transition()
+      .duration(serviceTopologyConfig.duration)
+      .attr({
         width: serviceTopologyConfig.instance.width,
         height: serviceTopologyConfig.instance.height
       });
@@ -129,9 +185,15 @@
       .attr({
         'text-anchor': 'middle',
         y: 23, //FIXME
-        x: 40 //FIXME
+        x: 40, //FIXME
+        opacity: 0
       })
-      .text(d => formatInstanceName(d.name));
+      .text(d => formatInstanceName(d.name))
+      .transition()
+      .duration(serviceTopologyConfig.duration)
+      .attr({
+        opacity: 1
+      });
 
       instanceContainer
       .on('click', d => {