diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
index 481b96b..bbd7f8d 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
@@ -60,62 +60,17 @@
         linkLabel,
         node;
 
-    var $log, wss, t2is, t2rs;
+    var $log, wss, t2is, t2rs, t2ls, t2vs;
+    var svg, forceG, uplink, dim, opts;
 
     // ========================== Helper Functions
 
-    function init(_svg_, forceG, _uplink_, _dim_, opts) {
-
-        $log.debug('Initialize topo force layout');
-
-        nodeG = forceG.append('g').attr('id', 'topo-nodes');
-        node = nodeG.selectAll('.node');
-
-        linkG = forceG.append('g').attr('id', 'topo-links');
-        linkLabelG = forceG.append('g').attr('id', 'topo-linkLabels');
-        numLinkLblsG = forceG.append('g').attr('id', 'topo-numLinkLabels');
-        nodeG = forceG.append('g').attr('id', 'topo-nodes');
-        portLabelG = forceG.append('g').attr('id', 'topo-portLabels');
-
-        link = linkG.selectAll('.link');
-        linkLabel = linkLabelG.selectAll('.linkLabel');
-        node = nodeG.selectAll('.node');
-
-        var width = 640,
-            height = 480;
-
-        var nodes = [
-            { x: width/3, y: height/2 },
-            { x: 2*width/3, y: height/2 }
-        ];
-
-        var links = [
-            { source: 0, target: 1 }
-        ];
-
-        var svg = d3.select('body').append('svg')
-            .attr('width', width)
-            .attr('height', height);
-
-        var force = d3.layout.force()
-            .size([width, height])
-            .nodes(nodes)
-            .links(links);
-
-        force.linkDistance(width/2);
-
-
-        var link = svg.selectAll('.link')
-            .data(links)
-            .enter().append('line')
-            .attr('class', 'link');
-
-        var node = svg.selectAll('.node')
-            .data(nodes)
-            .enter().append('circle')
-            .attr('class', 'node');
-
-        force.start();
+    function init(_svg_, _forceG_, _uplink_, _dim_, _opts_) {
+        svg = _svg_;
+        forceG = _forceG_;
+        uplink = _uplink_;
+        dim = _dim_;
+        opts = _opts_
     }
 
     function destroy() {
@@ -206,6 +161,9 @@
         $log.debug('>> topo2CurrentRegion event:', data);
         doTmpCurrentRegion(data);
         t2rs.addRegion(data);
+        t2ls.init(svg, forceG, uplink, dim, opts);
+        t2ls.update();
+        t2ls.start();
     }
 
     function topo2PeerRegions(data) {
@@ -257,20 +215,37 @@
         // link.classed(cls, b);
     }
 
+    function newDim(_dim_) {
+        dim = _dim_;
+        t2vs.newDim(dim);
+        // force.size(dim);
+        // tms.newDim(dim);
+        t2ls.setDimensions();
+    }
+
+    function getDim() {
+        return dim;
+    }
+
     // ========================== Main Service Definition
 
     angular.module('ovTopo2')
     .factory('Topo2ForceService',
         ['$log', 'WebSocketService', 'Topo2InstanceService', 'Topo2RegionService',
-        function (_$log_, _wss_, _t2is_, _t2rs_) {
+        'Topo2LayoutService', 'Topo2ViewService',
+        function (_$log_, _wss_, _t2is_, _t2rs_, _t2ls_, _t2vs_) {
+
             $log = _$log_;
             wss = _wss_;
             t2is = _t2is_;
             t2rs = _t2rs_;
+            t2ls = _t2ls_;
+            t2vs = _t2vs_;
 
             return {
 
                 init: init,
+                newDim: newDim,
 
                 destroy: destroy,
                 topo2AllInstances: allInstances,