Revert "GUI: Added ESLint to gulp tasks GUI: Linted files Fixed an error in the build script"

This reverts commit 46c5f1087d76d93497a1e8e5593564991ccb6682.

Change-Id: I1464fdd1df075e93f885e3c1fbd02f0cc563fd4f
diff --git a/web/gui/src/main/webapp/app/view/app/app.js b/web/gui/src/main/webapp/app/view/app/app.js
index a35fc64..5fb55df 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -50,10 +50,10 @@
         dialogId = 'app-dialog',
         dialogOpts = {
             edge: 'right',
-            width: 400,
+            width: 400
         },
         strongWarning = {
-            'org.onosproject.drivers': true,
+            'org.onosproject.drivers': true
         },
         propOrder = ['id', 'state', 'category', 'version', 'origin', 'role'];
         // note: url is handled separately
@@ -72,7 +72,7 @@
 
         friendlyProps = [
             lion('app_id'), lion('state'), lion('category'), lion('version'),
-            lion('origin'), lion('role'),
+            lion('origin'), lion('role')
         ];
     }
 
@@ -80,11 +80,11 @@
         detailsPanel = ps.createPanel(pName, {
             width: wSize.width,
             margin: 0,
-            hideMargin: 0,
+            hideMargin: 0
         });
         detailsPanel.el().style({
             position: 'absolute',
-            top: pStartY + 'px',
+            top: pStartY + 'px'
         });
         $scope.hidePanel = function () { detailsPanel.hide(); };
         detailsPanel.hide();
@@ -119,7 +119,7 @@
         div = top.append('div').classed('top-content', true);
 
         function ndiv(cls, tcls) {
-            var d = div.append('div').classed(cls, true);
+            var  d = div.append('div').classed(cls, true);
             if (tcls) {
                 d.append('table').classed(tcls, true);
             }
@@ -262,7 +262,7 @@
             // $scope.selId is set by code in tableBuilder
             $scope.ctrlBtnState.selection = !!$scope.selId;
             refreshCtrls();
-            ds.closeDialog(); // don't want dialog from previous selection
+            ds.closeDialog();  // don't want dialog from previous selection
 
             if ($scope.selId) {
                 wss.sendEvent(detailsReq, { id: row.id });
@@ -295,18 +295,18 @@
                 firstCol: 'state',
                 firstDir: 'desc',
                 secondCol: 'title',
-                secondDir: 'asc',
+                secondDir: 'asc'
             },
-            lion_toggle_auto_refresh: lion('tt_ctl_auto_refresh'),
+            lion_toggle_auto_refresh: lion('tt_ctl_auto_refresh')
         });
 
         ks.keyBindings({
             esc: [$scope.selectCallback, lion('qh_hint_esc')],
-            _helpFormat: ['esc'],
+            _helpFormat: ['esc']
         });
         ks.gestureNotes([
             [lion('click_row'), lion('qh_hint_click_row')],
-            [lion('scroll_down'), lion('qh_hint_scroll_down')],
+            [lion('scroll_down'), lion('qh_hint_scroll_down')]
         ]);
 
         function createConfirmationText(action, itemId) {
@@ -332,12 +332,12 @@
                     action: action,
                     name: itemId,
                     sortCol: spar.sortCol,
-                    sortDir: spar.sortDir,
+                    sortDir: spar.sortDir
                 });
                 if (action === 'uninstall') {
                     detailsPanel.hide();
                 } else {
-                    wss.sendEvent(detailsReq, { id: itemId });
+                    wss.sendEvent(detailsReq, {id: itemId});
                 }
             }
 
@@ -370,8 +370,8 @@
                 $http.post(ufs.rsUrl(url), formData, {
                     transformRequest: angular.identity,
                     headers: {
-                        'Content-Type': undefined,
-                    },
+                        'Content-Type': undefined
+                    }
                 })
                 .finally(function () {
                     activateImmediately = '';
@@ -382,7 +382,7 @@
             }
         });
 
-        $scope.appDropped = function () {
+        $scope.appDropped = function() {
             activateImmediately = activateOption;
             $scope.$emit('FileChanged');
             $scope.appFile = null;
@@ -406,7 +406,7 @@
                     document.getElementById('uploadFile')
                         .dispatchEvent(new MouseEvent('click'));
                 });
-            },
+            }
         };
     })
 
@@ -426,13 +426,13 @@
                         });
                         scope.$emit('FileChanged');
                     });
-                },
+                }
             };
         }])
 
-    .directive('filedrop', ['$parse', '$document', function ($parse, $document) {
+    .directive("filedrop", ['$parse', '$document', function ($parse, $document) {
         return {
-            restrict: 'A',
+            restrict: "A",
             link: function (scope, element, attrs) {
                 var onAppDrop = $parse(attrs.onFileDrop);
 
@@ -455,16 +455,16 @@
                 };
 
                 // Dragging begins on the document
-                $document.bind('dragover', onDragOver);
+                $document.bind("dragover", onDragOver);
 
                 // Dragging ends on the overlay, which takes the whole window
-                element.bind('dragleave', onDragEnd)
-                    .bind('drop', function (e) {
+                element.bind("dragleave", onDragEnd)
+                    .bind("drop", function (e) {
                         $log.info('Drag leave', e);
                         loadFile(e.dataTransfer.files[0]);
                         onDragEnd(e);
                     });
-            },
+            }
         };
     }])
 
@@ -497,13 +497,13 @@
                 // create key bindings to handle panel
                 ks.keyBindings({
                     esc: [closePanel, lion('qh_hint_close_detail')],
-                    _helpFormat: ['esc'],
+                    _helpFormat: ['esc']
                 });
 
                 // TODO: Review - why are we doing this in the detail panel...?
                 ks.gestureNotes([
                     [lion('click_row'), lion('qh_hint_click_row')],
-                    [lion('scroll_down'), lion('qh_hint_scroll_down')],
+                    [lion('scroll_down'), lion('qh_hint_scroll_down')]
                 ]);
 
                 // if the panelData changes
@@ -519,7 +519,7 @@
                     function () {
                         return {
                             h: $window.innerHeight,
-                            w: $window.innerWidth,
+                            w: $window.innerWidth
                         };
                     }, function () {
                         if (!fs.isEmptyObject(scope.panelData)) {
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.js b/web/gui/src/main/webapp/app/view/cluster/cluster.js
index 31a4f05..89cb8a2 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.js
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.js
@@ -22,7 +22,7 @@
     'use strict';
 
     // injected references
-    var $log, $scope, fs, mast, ps, is, wss;
+    var $log, $scope, fs, ns, mast, ps, is, wss;
 
     // internal state
     var detailsPanel,
@@ -44,11 +44,11 @@
         detailsReq = 'clusterDetailsRequest',
         detailsResp = 'clusterDetailsResponse',
         propOrder = [
-            'id', 'ip',
+            'id', 'ip'
         ],
         deviceCols = [
             'id', 'type', 'chassisid', 'mfr',
-            'hw', 'sw', 'protocol', 'serial',
+            'hw', 'sw', 'protocol', 'serial'
         ];
 
     // deferred fetching of user-visible strings, so that lion context is set
@@ -56,7 +56,7 @@
         var l = $scope.lion;
         return [
             l('node_id'),
-            l('ip_address'),
+            l('ip_address')
         ];
     }
 
@@ -70,7 +70,7 @@
             l('hw_version'),
             l('sw_version'),
             l('protocol'),
-            l('serial_number'),
+            l('serial_number')
         ];
     }
 
@@ -110,7 +110,7 @@
         bottom = container.append('div').classed('bottom', true);
         bottom.append('h2').classed('devices-title', true).text('Devices');
         bottom.append('table');
-        // TODO: add more details
+        //TODO: add more details
     }
 
     function addProp(tbody, label, value) {
@@ -169,7 +169,7 @@
             height: tbHeight + 'px',
             width: tbWidth + 'px',
             overflow: 'auto',
-            display: 'block',
+            display: 'block'
         });
 
         detailsPanel.width(tbWidth + ctnrPdg);
@@ -179,11 +179,11 @@
         detailsPanel = ps.createPanel(pName, {
             width: wSize.width,
             margin: 0,
-            hideMargin: 0,
+            hideMargin: 0
         });
         detailsPanel.el().style({
             position: 'absolute',
-            top: pStartY + 'px',
+            top: pStartY + 'px'
         });
         $scope.hidePanel = function () { detailsPanel.hide(); };
         detailsPanel.hide();
@@ -205,16 +205,17 @@
 
     angular.module('ovCluster', [])
         .controller('OvClusterCtrl',
-        ['$log', '$scope', 'FnService', 'MastService',
-        'PanelService', 'IconService', 'WebSocketService',
+        ['$log', '$scope', 'FnService', 'NavService', 'MastService',
+        'PanelService', 'IconService','WebSocketService',
         'LionService', 'TableBuilderService',
 
-    function (_$log_, _$scope_, _fs_, _mast_, _ps_, _is_, _wss_, lion, tbs) {
+    function (_$log_, _$scope_, _fs_, _ns_, _mast_, _ps_, _is_, _wss_, lion, tbs) {
             var handlers = {};
 
             $log = _$log_;
             $scope = _$scope_;
             fs = _fs_;
+            ns = _ns_;
             mast = _mast_;
             ps = _ps_;
             is = _is_;
@@ -226,7 +227,7 @@
             tbs.buildTable({
                 scope: $scope,
                 selCb: selCb,
-                tag: 'cluster',
+                tag: 'cluster'
             });
 
         // details panel handlers
@@ -235,7 +236,7 @@
 
         function selCb($event, row) {
             if ($scope.selId) {
-                wss.sendEvent(detailsReq, { id: row.id });
+                wss.sendEvent(detailsReq, {id: row.id});
             } else {
                 $scope.hidePanel();
             }
@@ -278,11 +279,11 @@
             // create key bindings to handle panel
             ks.keyBindings({
                 esc: [handleEscape, lion('qh_hint_close_detail')],
-                _helpFormat: ['esc'],
+                _helpFormat: ['esc']
             });
             ks.gestureNotes([
                 [lion('click'), lion('qh_hint_click')],
-                [lion('scroll_down'), lion('qh_hint_scroll_down')],
+                [lion('scroll_down'), lion('qh_hint_scroll_down')]
             ]);
             // if the panelData changes
             scope.$watch('panelData', function () {
@@ -297,7 +298,7 @@
                 function () {
                     return {
                         h: $window.innerHeight,
-                        w: $window.innerWidth,
+                        w: $window.innerWidth
                     };
                 }, function () {
                     if (!fs.isEmptyObject(scope.panelData)) {
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index 5e28158..f7ec45b 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -46,15 +46,21 @@
         detailsResp = 'deviceDetailsResponse',
         nameChangeReq = 'deviceNameChangeRequest',
         nameChangeResp = 'deviceNameChangeResponse',
+
+        propSplit = 4,
+        propOrder = [
+            'id', 'type', 'masterid', 'chassisid',
+            'mfr', 'hw', 'sw', 'protocol', 'serial'
+        ],
         friendlyProps = [
             'URI', 'Type', 'Master ID', 'Chassis ID',
-            'Vendor', 'H/W Version', 'S/W Version', 'Protocol', 'Serial #',
+            'Vendor', 'H/W Version', 'S/W Version', 'Protocol', 'Serial #'
         ],
         portCols = [
-            'enabled', 'id', 'speed', 'type', 'elinks_dest', 'name',
+            'enabled', 'id', 'speed', 'type', 'elinks_dest', 'name'
         ],
         friendlyPortCols = [
-            'Enabled', 'ID', 'Speed', 'Type', 'Egress Links', 'Name',
+            'Enabled', 'ID', 'Speed', 'Type', 'Egress Links', 'Name'
         ];
 
     function closePanel() {
@@ -169,15 +175,20 @@
         top.select('h2').text(details.name);
 
         // === demonstrate use of JsonCodec object see ONOS-5976
-        addProp(leftTbl, 0, device.id);
-        addProp(leftTbl, 1, device.type);
-        addProp(leftTbl, 2, details['masterid']);
-        addProp(leftTbl, 3, details['chassid']);
+        addProp(leftTbl,  0, device.id);
+        addProp(leftTbl,  1, device.type);
+        addProp(leftTbl,  2, details['masterid']);
+        addProp(leftTbl,  3, details['chassid']);
         addProp(rightTbl, 4, device.mfr);
         addProp(rightTbl, 5, device.hw);
         addProp(rightTbl, 6, device.sw);
         addProp(rightTbl, 7, details['protocol']);
         addProp(rightTbl, 8, device.serial);
+
+        // propOrder.forEach(function (prop, i) {
+        //     // properties are split into two tables
+        //     addProp(i < propSplit ? leftTbl : rightTbl, i, details[prop]);
+        // });
     }
 
     function addPortRow(tbody, port) {
@@ -212,7 +223,7 @@
             height: tbHeight + 'px',
             width: tbWidth + 'px',
             overflow: 'auto',
-            display: 'block',
+            display: 'block'
         });
 
         detailsPanel.width(tbWidth + ctnrPdg);
@@ -250,11 +261,11 @@
         detailsPanel = ps.createPanel(pName, {
             width: wSize.width,
             margin: 0,
-            hideMargin: 0,
+            hideMargin: 0
         });
         detailsPanel.el().style({
             position: 'absolute',
-            top: pStartY + 'px',
+            top: pStartY + 'px'
         });
         $scope.hidePanel = function () { detailsPanel.hide(); };
         detailsPanel.hide();
@@ -328,7 +339,7 @@
             tbs.buildTable({
                 scope: $scope,
                 tag: 'device',
-                selCb: selCb,
+                selCb: selCb
             });
 
 
@@ -336,7 +347,7 @@
             // TODO: more than just an example
             tds.buildBasePanel({
                 popTop: popTop,
-                popMid: popMid,
+                popMid: popMid
             });
             // ==================== for testing for now ===============
 
@@ -383,11 +394,11 @@
             ks.keyBindings({
                 enter: editNameSave,
                 esc: [handleEscape, 'Close the details panel'],
-                _helpFormat: ['esc'],
+                _helpFormat: ['esc']
             });
             ks.gestureNotes([
                 ['click', 'Select a row to show device details'],
-                ['scroll down', 'See more devices'],
+                ['scroll down', 'See more devices']
             ]);
 
             // if the panelData changes
@@ -403,7 +414,7 @@
                 function () {
                     return {
                         h: $window.innerHeight,
-                        w: $window.innerWidth,
+                        w: $window.innerWidth
                     };
                 }, function () {
                     if (!fs.isEmptyObject(scope.panelData)) {
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.js b/web/gui/src/main/webapp/app/view/flow/flow.js
index 1dd6a72..0e1cdd5 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.js
+++ b/web/gui/src/main/webapp/app/view/flow/flow.js
@@ -67,7 +67,7 @@
 
             'groupId',
             'timeout',
-            'permanent',
+            'permanent'
         ],
         friendlyProps = [
             'Flow ID',
@@ -84,7 +84,7 @@
 
             'Group ID',
             'Timeout',
-            'Permanent',
+            'Permanent'
         ];
 
     function closePanel() {
@@ -202,11 +202,11 @@
         detailsPanel = ps.createPanel(pName, {
             width: wSize.width,
             margin: 0,
-            hideMargin: 0,
+            hideMargin: 0
         });
         detailsPanel.el().style({
             position: 'absolute',
-            top: pStartY + 'px',
+            top: pStartY + 'px'
         });
         $scope.hidePanel = function () { detailsPanel.hide(); };
         detailsPanel.hide();
@@ -216,157 +216,157 @@
         setUpPanel();
         populateTop(details);
 
-        // ToDo add more details
+        //ToDo add more details
         detailsPanel.height(pHeight);
         detailsPanel.width(wtPdg);
     }
 
     function respDetailsCb(data) {
-        $log.debug('Got response from server :', data);
+        $log.debug("Got response from server :", data);
         $scope.panelData = data.details;
         $scope.$apply();
     }
 
     angular.module('ovFlow', [])
-        .controller('OvFlowCtrl',
-            ['$log', '$scope', '$location',
-                'FnService', 'TableBuilderService', 'NavService',
-                'MastService', 'PanelService', 'KeyService', 'IconService',
-                'WebSocketService',
+    .controller('OvFlowCtrl',
+        ['$log', '$scope', '$location',
+            'FnService', 'TableBuilderService', 'NavService',
+            'MastService', 'PanelService', 'KeyService', 'IconService',
+            'WebSocketService',
 
-                function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _ns_,
-                          _mast_, _ps_, _ks_, _is_, _wss_) {
-                    var params,
-                        handlers = {};
+        function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _ns_,
+                    _mast_, _ps_, _ks_, _is_, _wss_) {
+            var params,
+                handlers = {};
 
-                    $log = _$log_;
-                    $scope = _$scope_;
-                    $location = _$location_;
-                    fs = _fs_;
-                    tbs = _tbs_;
-                    ns = _ns_;
-                    is = _is_;
-                    wss = _wss_;
-                    mast = _mast_;
-                    ps = _ps_;
-                    $scope.deviceTip = 'Show device table';
-                    $scope.portTip = 'Show port view for this device';
-                    $scope.groupTip = 'Show group view for this device';
-                    $scope.meterTip = 'Show meter view for selected device';
-                    $scope.briefTip = 'Switch to brief view';
-                    $scope.detailTip = 'Switch to detailed view';
-                    $scope.brief = true;
-                    params = $location.search();
-                    if (params.hasOwnProperty('devId')) {
-                        $scope.devId = params['devId'];
+            $log = _$log_;
+            $scope = _$scope_;
+            $location = _$location_;
+            fs = _fs_;
+            tbs = _tbs_;
+            ns = _ns_;
+            is = _is_;
+            wss = _wss_;
+            mast = _mast_;
+            ps = _ps_;
+            $scope.deviceTip = 'Show device table';
+            $scope.portTip = 'Show port view for this device';
+            $scope.groupTip = 'Show group view for this device';
+            $scope.meterTip = 'Show meter view for selected device';
+            $scope.briefTip = 'Switch to brief view';
+            $scope.detailTip = 'Switch to detailed view';
+            $scope.brief = true;
+            params = $location.search();
+            if (params.hasOwnProperty('devId')) {
+                $scope.devId = params['devId'];
+            }
+
+            tbs.buildTable({
+                scope: $scope,
+                tag: 'flow',
+                selCb: selCb,
+                query: params
+            });
+
+            $scope.nav = function (path) {
+                if ($scope.devId) {
+                    ns.navTo(path, { devId: $scope.devId });
+                }
+            };
+
+            // details panel handlers
+            handlers[detailsResp] = respDetailsCb;
+            wss.bindHandlers(handlers);
+
+            function selCb($event, row) {
+                if ($scope.selId) {
+                    wss.sendEvent(detailsReq, {flowId: row.id, appId: row.appId});
+                } else {
+                    $scope.hidePanel();
+                }
+                $log.debug('Got a click on:', row);
+            }
+
+             $scope.$on('$destroy', function () {
+                 wss.unbindHandlers(handlers);
+             });
+
+            $scope.briefToggle = function () {
+                $scope.brief = !$scope.brief;
+            };
+
+            Object.defineProperty($scope, "queryFilter", {
+               get: function() {
+                   var out = {};
+                   out[$scope.queryBy || "$"] = $scope.queryTxt;
+                   return out;
+               }
+            });
+
+            $log.log('OvFlowCtrl has been created');
+        }])
+
+    .directive('flowDetailsPanel',
+    ['$rootScope', '$window', '$timeout', 'KeyService',
+    function ($rootScope, $window, $timeout, ks) {
+        return function (scope) {
+            var unbindWatch;
+
+            function heightCalc() {
+                pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
+                                        + mast.mastHeight() + topPdg;
+                wSize = fs.windowSize(pStartY);
+                pHeight = wSize.height;
+            }
+
+            function initPanel() {
+                heightCalc();
+                createDetailsPane();
+            }
+
+            // Safari has a bug where it renders the fixed-layout table wrong
+            // if you ask for the window's size too early
+            if (scope.onos.browser === 'safari') {
+                $timeout(initPanel);
+            } else {
+                initPanel();
+            }
+            // create key bindings to handle panel
+            ks.keyBindings({
+                esc: [handleEscape, 'Close the details panel'],
+                _helpFormat: ['esc']
+            });
+            ks.gestureNotes([
+                ['click', 'Select a row to show cluster node details'],
+                ['scroll down', 'See available cluster nodes']
+            ]);
+            // if the panelData changes
+            scope.$watch('panelData', function () {
+                if (!fs.isEmptyObject(scope.panelData)) {
+                    populateDetails(scope.panelData);
+                    detailsPanel.show();
+                }
+            });
+            // if the window size changes
+            unbindWatch = $rootScope.$watchCollection(
+                function () {
+                    return {
+                        h: $window.innerHeight,
+                        w: $window.innerWidth
+                    };
+                }, function () {
+                    if (!fs.isEmptyObject(scope.panelData)) {
+                        heightCalc();
+                        populateDetails(scope.panelData);
                     }
+                }
+            );
 
-                    tbs.buildTable({
-                        scope: $scope,
-                        tag: 'flow',
-                        selCb: selCb,
-                        query: params,
-                    });
-
-                    $scope.nav = function (path) {
-                        if ($scope.devId) {
-                            ns.navTo(path, { devId: $scope.devId });
-                        }
-                    };
-
-                    // details panel handlers
-                    handlers[detailsResp] = respDetailsCb;
-                    wss.bindHandlers(handlers);
-
-                    function selCb($event, row) {
-                        if ($scope.selId) {
-                            wss.sendEvent(detailsReq, { flowId: row.id, appId: row.appId });
-                        } else {
-                            $scope.hidePanel();
-                        }
-                        $log.debug('Got a click on:', row);
-                    }
-
-                    $scope.$on('$destroy', function () {
-                        wss.unbindHandlers(handlers);
-                    });
-
-                    $scope.briefToggle = function () {
-                        $scope.brief = !$scope.brief;
-                    };
-
-                    Object.defineProperty($scope, 'queryFilter', {
-                        get: function () {
-                            var out = {};
-                            out[$scope.queryBy || '$'] = $scope.queryTxt;
-                            return out;
-                        },
-                    });
-
-                    $log.log('OvFlowCtrl has been created');
-                }])
-
-        .directive('flowDetailsPanel',
-            ['$rootScope', '$window', '$timeout', 'KeyService',
-                function ($rootScope, $window, $timeout, ks) {
-                    return function (scope) {
-                        var unbindWatch;
-
-                        function heightCalc() {
-                            pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
-                                + mast.mastHeight() + topPdg;
-                            wSize = fs.windowSize(pStartY);
-                            pHeight = wSize.height;
-                        }
-
-                        function initPanel() {
-                            heightCalc();
-                            createDetailsPane();
-                        }
-
-                        // Safari has a bug where it renders the fixed-layout table wrong
-                        // if you ask for the window's size too early
-                        if (scope.onos.browser === 'safari') {
-                            $timeout(initPanel);
-                        } else {
-                            initPanel();
-                        }
-                        // create key bindings to handle panel
-                        ks.keyBindings({
-                            esc: [handleEscape, 'Close the details panel'],
-                            _helpFormat: ['esc'],
-                        });
-                        ks.gestureNotes([
-                            ['click', 'Select a row to show cluster node details'],
-                            ['scroll down', 'See available cluster nodes'],
-                        ]);
-                        // if the panelData changes
-                        scope.$watch('panelData', function () {
-                            if (!fs.isEmptyObject(scope.panelData)) {
-                                populateDetails(scope.panelData);
-                                detailsPanel.show();
-                            }
-                        });
-                        // if the window size changes
-                        unbindWatch = $rootScope.$watchCollection(
-                            function () {
-                                return {
-                                    h: $window.innerHeight,
-                                    w: $window.innerWidth,
-                                };
-                            }, function () {
-                                if (!fs.isEmptyObject(scope.panelData)) {
-                                    heightCalc();
-                                    populateDetails(scope.panelData);
-                                }
-                            }
-                        );
-
-                        scope.$on('$destroy', function () {
-                            unbindWatch();
-                            ps.destroyPanel(pName);
-                        });
-                    };
-                }]);
+            scope.$on('$destroy', function () {
+                unbindWatch();
+                ps.destroyPanel(pName);
+            });
+        };
+    }]);
 
 }());
diff --git a/web/gui/src/main/webapp/app/view/group/group.js b/web/gui/src/main/webapp/app/view/group/group.js
index 5190360..50a97c5 100644
--- a/web/gui/src/main/webapp/app/view/group/group.js
+++ b/web/gui/src/main/webapp/app/view/group/group.js
@@ -52,7 +52,7 @@
             tbs.buildTable({
                 scope: $scope,
                 tag: 'group',
-                query: params,
+                query: params
             });
 
             $scope.$watch('tableData', function () {
@@ -72,12 +72,12 @@
                 $scope.brief = !$scope.brief;
             };
 
-            Object.defineProperty($scope, 'queryFilter', {
-                get: function () {
+            Object.defineProperty($scope, "queryFilter", {
+                get: function() {
                     var out = {};
-                    out[$scope.queryBy || '$'] = $scope.query;
+                    out[$scope.queryBy || "$"] = $scope.query;
                     return out;
-                },
+                }
             });
 
 
diff --git a/web/gui/src/main/webapp/app/view/host/host.js b/web/gui/src/main/webapp/app/view/host/host.js
index 7ccb243..4e8153c 100644
--- a/web/gui/src/main/webapp/app/view/host/host.js
+++ b/web/gui/src/main/webapp/app/view/host/host.js
@@ -31,7 +31,8 @@
         top,
         iconDiv,
         wSize,
-        editingName = false;
+        editingName = false,
+        host;
 
     // constants
     var topPdg = 28,
@@ -42,11 +43,11 @@
         nameChangeResp = 'hostNameChangeResponse';
 
     var propOrder = [
-            'id', 'ip', 'mac', 'vlan', 'configured', 'location',
+            'id', 'ip', 'mac', 'vlan', 'configured', 'location'
         ],
         friendlyProps = [
             'Host ID', 'IP Address', 'MAC Address', 'VLAN',
-            'Configured', 'Location',
+            'Configured', 'Location'
         ];
 
     function closePanel() {
@@ -164,6 +165,7 @@
 
     function respDetailsCb(data) {
         $scope.panelData = data.details;
+        host = data.host;
         $scope.$apply();
     }
 
@@ -178,11 +180,11 @@
         detailsPanel = ps.createPanel(pName, {
             width: wSize.width,
             margin: 0,
-            hideMargin: 0,
+            hideMargin: 0
         });
         detailsPanel.el().style({
             position: 'absolute',
-            top: pStartY + 'px',
+            top: pStartY + 'px'
         });
         $scope.hidePanel = function () { detailsPanel.hide(); };
         detailsPanel.hide();
@@ -244,7 +246,7 @@
             tbs.buildTable({
                 scope: $scope,
                 tag: 'host',
-                selCb: selCb,
+                selCb: selCb
             });
 
             $scope.nav = function (path) {
@@ -289,11 +291,11 @@
             ks.keyBindings({
                 enter: editNameSave,
                 esc: [handleEscape, 'Close the details panel'],
-                _helpFormat: ['esc'],
+                _helpFormat: ['esc']
             });
             ks.gestureNotes([
                 ['click', 'Select a row to show device details'],
-                ['scroll down', 'See more devices'],
+                ['scroll down', 'See more devices']
             ]);
 
             // if the panelData changes
@@ -309,7 +311,7 @@
                 function () {
                     return {
                         h: $window.innerHeight,
-                        w: $window.innerWidth,
+                        w: $window.innerWidth
                     };
                 }, function () {
                     if (!fs.isEmptyObject(scope.panelData)) {
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.js b/web/gui/src/main/webapp/app/view/intent/intent.js
index afd29b9..9567119 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.js
+++ b/web/gui/src/main/webapp/app/view/intent/intent.js
@@ -24,7 +24,7 @@
     // constants and configuration
     var dialogId = 'remove-intent-dialog',
         dialogOpts = {
-            edge: 'right',
+            edge: 'right'
         };
 
     // DOM elements
@@ -61,7 +61,7 @@
                 appId: id,
                 appName: name,
                 key: row.key,
-                intentType: row.type,
+                intentType: row.type
             } : null;
 
         $scope.intentState = row.state;
@@ -84,7 +84,7 @@
         dropdown.style('display', b ? 'block' : 'none');
     }
 
-    function showIntent() {
+    function showIntent () {
         var d = $scope.intentData,
             handlers,
             nh;
@@ -163,7 +163,7 @@
             // set up scope function references...
             $scope.showIntent = showIntent;
 
-            $scope.canShowIntent = function () {
+            $scope.canShowIntent = function() {
                 var d = $scope.intentData;
                 return d && tov.overlaysAcceptingIntents(d.intentType).length > 0;
             };
@@ -174,7 +174,7 @@
                 tag: 'intent',
                 selCb: selCb,
                 respCb: respCb,
-                idKey: 'key',
+                idKey: 'key'
             });
 
 
@@ -200,6 +200,7 @@
 
             function executeAction(action) {
                 var content = ds.createDiv(),
+                    txt,
                     bPurge = action === 'purge';
 
                 $scope.intentData.intentPurge = bPurge;
@@ -230,10 +231,10 @@
             }
 
             function executeActions(action) {
-                 var content = ds.createDiv();
-
-                 content.append('p')
-                    .text('Are you sure you want to purge all the withdrawn intents?');
+                 var content = ds.createDiv(),
+                     txt='purgeIntents';
+                     content.append('p').
+                     text('Are you sure you want to purge all the withdrawn intents?');
 
                  function dOk() {
                      tts.removeIntents();
@@ -254,15 +255,15 @@
             }
 
             $scope.deactivateIntent = function () {
-                executeAction('withdraw');
+                executeAction("withdraw");
             };
 
             $scope.resubmitIntent = function () {
-                executeAction('resubmit');
+                executeAction("resubmit");
             };
 
             $scope.purgeIntent = function () {
-                executeAction('purge');
+                executeAction("purge");
             };
 
             $scope.briefToggle = function () {
@@ -275,9 +276,8 @@
             });
 
             $scope.purgeIntents = function () {
-                executeActions('purgeIntents');
+                executeActions("purgeIntents");
             };
-
             $log.debug('OvIntentCtrl has been created');
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/link/link.js b/web/gui/src/main/webapp/app/view/link/link.js
index 558aeb9..30d485c 100644
--- a/web/gui/src/main/webapp/app/view/link/link.js
+++ b/web/gui/src/main/webapp/app/view/link/link.js
@@ -28,7 +28,7 @@
         function ($log, $scope, $sce, fs, tbs) {
             tbs.buildTable({
                 scope: $scope,
-                tag: 'link',
+                tag: 'link'
             });
 
             $scope.$watch('tableData', function () {
diff --git a/web/gui/src/main/webapp/app/view/meter/meter.js b/web/gui/src/main/webapp/app/view/meter/meter.js
index 8fabbb0..0635650 100644
--- a/web/gui/src/main/webapp/app/view/meter/meter.js
+++ b/web/gui/src/main/webapp/app/view/meter/meter.js
@@ -49,7 +49,7 @@
             tbs.buildTable({
                 scope: $scope,
                 tag: 'meter',
-                query: params,
+                query: params
             });
 
             $scope.$watch('tableData', function () {
@@ -66,12 +66,12 @@
                 }
             };
 
-            Object.defineProperty($scope, 'queryFilter', {
-                get: function () {
+            Object.defineProperty($scope, "queryFilter", {
+                get: function() {
                     var out = {};
-                    out[$scope.queryBy || '$'] = $scope.query;
+                    out[$scope.queryBy || "$"] = $scope.query;
                     return out;
-                },
+                }
             });
 
 
diff --git a/web/gui/src/main/webapp/app/view/partition/partition.js b/web/gui/src/main/webapp/app/view/partition/partition.js
index fc2194d..11c9a85 100644
--- a/web/gui/src/main/webapp/app/view/partition/partition.js
+++ b/web/gui/src/main/webapp/app/view/partition/partition.js
@@ -28,7 +28,7 @@
                 function ($log, $scope, $sce, fs, tbs) {
                     tbs.buildTable({
                         scope: $scope,
-                        tag: 'partition',
+                        tag: 'partition'
                     });
 
                     $log.log('OvPartitionCtrl has been created');
diff --git a/web/gui/src/main/webapp/app/view/port/port.js b/web/gui/src/main/webapp/app/view/port/port.js
index a08933d..98a0cfb 100644
--- a/web/gui/src/main/webapp/app/view/port/port.js
+++ b/web/gui/src/main/webapp/app/view/port/port.js
@@ -22,17 +22,19 @@
     'use strict';
 
     // injected references
-    var $log, $scope, $location, tbs, ns;
+    var $log, $scope, $location, fs, tbs, ns;
 
     angular.module('ovPort', [])
     .controller('OvPortCtrl',
-        ['$log', '$scope', '$location', 'TableBuilderService', 'NavService',
+        ['$log', '$scope', '$location',
+            'FnService', 'TableBuilderService', 'NavService',
 
-        function (_$log_, _$scope_, _$location_, _tbs_, _ns_) {
+        function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _ns_) {
             var params;
             $log = _$log_;
             $scope = _$scope_;
             $location = _$location_;
+            fs = _fs_;
             tbs = _tbs_;
             ns = _ns_;
             $scope.deviceTip = 'Show device table';
@@ -48,7 +50,7 @@
             tbs.buildTable({
                 scope: $scope,
                 tag: 'port',
-                query: params,
+                query: params
             });
 
             $scope.nav = function (path) {
@@ -57,12 +59,12 @@
                 }
             };
 
-             Object.defineProperty($scope, 'queryFilter', {
-                 get: function () {
+             Object.defineProperty($scope, "queryFilter", {
+                 get: function() {
                      var out = {};
-                     out[$scope.queryBy || '$'] = $scope.query;
+                     out[$scope.queryBy || "$"] = $scope.query;
                      return out;
-                 },
+                 }
              });
 
             $log.log('OvPortCtrl has been created');
diff --git a/web/gui/src/main/webapp/app/view/processor/processor.js b/web/gui/src/main/webapp/app/view/processor/processor.js
index ca2d0ea..706ccfc 100644
--- a/web/gui/src/main/webapp/app/view/processor/processor.js
+++ b/web/gui/src/main/webapp/app/view/processor/processor.js
@@ -22,17 +22,19 @@
     'use strict';
 
     // injected references
-    var $log, $scope, $location, tbs, ns;
+    var $log, $scope, $location, fs, tbs, ns;
 
     angular.module('ovProcessor', [])
     .controller('OvProcessorCtrl',
-        ['$log', '$scope', '$location', 'TableBuilderService', 'NavService',
+        ['$log', '$scope', '$location',
+            'FnService', 'TableBuilderService', 'NavService',
 
-        function (_$log_, _$scope_, _$location_, _tbs_, _ns_) {
+        function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _ns_) {
             var params;
             $log = _$log_;
             $scope = _$scope_;
             $location = _$location_;
+            fs = _fs_;
             tbs = _tbs_;
             ns = _ns_;
             $scope.requestTip = 'Show packet requests';
@@ -42,7 +44,7 @@
             tbs.buildTable({
                 scope: $scope,
                 tag: 'processor',
-                query: params,
+                query: params
             });
 
             $scope.nav = function (path) {
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.js b/web/gui/src/main/webapp/app/view/settings/settings.js
index bdc0e1f..ce3caa1 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.js
+++ b/web/gui/src/main/webapp/app/view/settings/settings.js
@@ -22,7 +22,7 @@
     'use strict';
 
     // injected refs
-    var $log, $scope, fs, ks, ps, is;
+    var $log, $scope, wss, fs, ks, ps, is;
 
     // internal state
     var detailsPanel,
@@ -39,19 +39,19 @@
         propOrder = ['fqComponent', 'prop', 'type', 'value', 'defValue', 'desc'],
         friendlyProps = [
             'Component', 'Property', 'Type', 'Value', 'Default Value',
-            'Description',
+            'Description'
         ];
 
     function createDetailsPanel() {
         detailsPanel = ps.createPanel(pName, {
             width: wSize.width,
             margin: 0,
-            hideMargin: 0,
+            hideMargin: 0
         });
 
         detailsPanel.el().style({
             position: 'absolute',
-            top: pStartY + 'px',
+            top: pStartY + 'px'
         });
 
         detailsPanel.hide();
@@ -87,7 +87,7 @@
         div = top.append('div').classed('top-content', true);
 
         function ndiv(cls, addTable) {
-            var d = div.append('div').classed(cls, true);
+            var  d = div.append('div').classed(cls, true);
             if (addTable) {
                 d.append('table');
             }
@@ -129,12 +129,13 @@
     angular.module('ovSettings', [])
         .controller('OvSettingsCtrl',
             ['$log', '$scope',
-            'FnService', 'KeyService', 'PanelService',
+            'WebSocketService', 'FnService', 'KeyService', 'PanelService',
             'IconService', 'TableBuilderService',
 
-        function (_$log_, _$scope_, _fs_, _ks_, _ps_, _is_, tbs) {
+        function (_$log_, _$scope_, _wss_, _fs_, _ks_, _ps_, _is_, tbs) {
             $log = _$log_;
             $scope = _$scope_;
+            wss = _wss_;
             fs = _fs_;
             ks = _ks_;
             ps = _ps_;
@@ -155,16 +156,16 @@
             tbs.buildTable({
                 scope: $scope,
                 tag: 'setting',
-                selCb: selCb,
+                selCb: selCb
             });
 
             ks.keyBindings({
                 esc: [$scope.selectCallback, 'Deselect property'],
-                _helpFormat: ['esc'],
+                _helpFormat: ['esc']
             });
             ks.gestureNotes([
                 ['click row', 'Select / deselect settings property'],
-                ['scroll down', 'See more settings'],
+                ['scroll down', 'See more settings']
             ]);
 
             $scope.$on('$destroy', function () {
@@ -203,11 +204,11 @@
                     // create key bindings to handle panel
                     ks.keyBindings({
                         esc: [closePanel, 'Close the details panel'],
-                        _helpFormat: ['esc'],
+                        _helpFormat: ['esc']
                     });
                     ks.gestureNotes([
                         ['click', 'Select a row to show property details'],
-                        ['scroll down', 'See more properties'],
+                        ['scroll down', 'See more properties']
                     ]);
 
                     // if the window size changes
@@ -215,7 +216,7 @@
                         function () {
                             return {
                                 h: $window.innerHeight,
-                                w: $window.innerWidth,
+                                w: $window.innerWidth
                             };
                         }, function () {
                             if (panelData) {
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index e495cb4..29f149f 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -25,13 +25,13 @@
         'ngCookies',
         'onosUtil',
         'onosSvg',
-        'onosRemote',
+        'onosRemote'
     ];
 
     // references to injected services
-    var $scope, $log, $loc, $timeout,
+    var $scope, $log, $loc, $timeout, $cookies,
         fs, ks, zs, gs, ms, sus, flash, wss, ps, th, tds, t3s, tes, tfs, tps,
-        tis, tms, tss, tls, tos, fltr, ttbs, tspr, tov;
+        tis, tms, tss, tls, tts, tos, fltr, ttbs, tspr, ttip, tov;
 
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
@@ -68,7 +68,7 @@
 
             E: [equalizeMasters, 'Equalize mastership roles'],
 
-            // -- instance color palette debug
+            //-- instance color palette debug
             // 9: function () { sus.cat7().testCard(svg); },
 
             // topology overlay selections
@@ -83,10 +83,10 @@
             _keyListener: ttbs.keyListener,
 
             _helpFormat: [
-                ['I', 'O', 'D', 'H', 'M', 'P', 'dash', 'B', 'G', 'S'],
+                ['I', 'O', 'D', 'H', 'M', 'P', 'dash', 'B', 'G', 'S' ],
                 ['X', 'Z', 'N', 'L', 'shift-L', 'U', 'R', '-', 'E', '-', 'dot'],
-                [], // this column reserved for overlay actions
-            ],
+                []   // this column reserved for overlay actions
+            ]
         };
 
         if (fs.isO(overlayKeys)) {
@@ -100,7 +100,7 @@
             ['shift-click', 'Toggle selection state'],
             ['drag', 'Reposition (and pin) device / host'],
             ['cmd-scroll', 'Zoom in / out'],
-            ['cmd-drag', 'Pan'],
+            ['cmd-drag', 'Pan']
         ]);
     }
 
@@ -183,7 +183,7 @@
     function handleEscape() {
         if (tis.showMaster()) {
             // if an instance is selected, cancel the affinity mapping
-            tis.cancelAffinity();
+            tis.cancelAffinity()
 
         } else if (tov.hooks.escape()) {
             // else if the overlay consumed the ESC event...
@@ -234,7 +234,7 @@
     function setUpToolbar() {
         ttbs.init({
             getActionEntry: getActionEntry,
-            setUpKeys: setUpKeys,
+            setUpKeys: setUpKeys
         });
         ttbs.createToolbar();
     }
@@ -259,7 +259,7 @@
         var sc = zoomer.scale(),
             tr = zoomer.translate();
 
-        ps.setPrefs('topo_zoom', { tx: tr[0], ty: tr[1], sc: sc });
+        ps.setPrefs('topo_zoom', {tx:tr[0], ty:tr[1], sc:sc});
 
         // keep the map lines constant width while zooming
         mapG.style('stroke-width', (2.0 / sc) + 'px');
@@ -273,7 +273,7 @@
             svg: svg,
             zoomLayer: zoomLayer,
             zoomEnabled: zoomEnabled,
-            zoomCallback: zoomCallback,
+            zoomCallback: zoomCallback
         });
     }
 
@@ -289,7 +289,7 @@
         var g, box;
         noDevsLayer = svg.append('g').attr({
             id: 'topo-noDevsLayer',
-            transform: sus.translate(500, 500),
+            transform: sus.translate(500,500)
         });
         // Note, SVG viewbox is '0 0 1000 1000', defined in topo.html.
         // We are translating this layer to have its origin at the center
@@ -297,7 +297,7 @@
         g = noDevsLayer.append('g');
         gs.addGlyph(g, 'bird', 100).attr('class', 'noDevsBird');
         g.append('text').text('No devices are connected')
-            .attr({ x: 120, y: 80 });
+            .attr({ x: 120, y: 80});
 
         box = g.node().getBBox();
         box.x -= box.width/2;
@@ -348,7 +348,7 @@
 
         australia: function (c) {
             return c.properties.adm0_a3 === 'AUS';
-        },
+        }
     };
 
     var tintOn = 0,
@@ -357,19 +357,19 @@
         light: {
             sea: 'aliceblue',
             land: 'white',
-            outline: '#ddd',
+            outline: '#ddd'
         },
         dark: {
             sea: '#001830',
             land: '#232331',
-            outline: '#3a3a3a',
-        },
+            outline: '#3a3a3a'
+        }
     };
 
     function shading() {
         return tintOn ? {
             palette: shadePalette[th.theme()],
-            flip: shadeFlip,
+            flip: shadeFlip
         } : '';
     }
 
@@ -386,7 +386,7 @@
                 mapid: 'usa',
                 mapscale: 1,
                 mapfilepath: '*continental_us',
-                tint: 'off',
+                tint: 'off'
             },
             $loc.search()
         );
@@ -410,7 +410,7 @@
         if (mapG.empty()) {
             mapG = zoomLayer.append('g').attr('id', 'topo-map');
         } else {
-            mapG.each(function (d, i) {
+            mapG.each(function(d,i) {
                 d3.selectAll(this.childNodes).remove();
             });
         }
@@ -422,13 +422,13 @@
             promise = ms.loadMapRegionInto(mapG, {
                 countryFilter: cfilter,
                 adjustScale: mapScale,
-                shading: shading(),
+                shading: shading()
             });
         } else {
 
             promise = ms.loadMapInto(mapG, mapFilePath, mapId, {
                 adjustScale: mapScale,
-                shading: shading(),
+                shading: shading()
             });
         }
 
@@ -437,7 +437,7 @@
     }
 
     function mapReshader() {
-        $log.debug('... Re-shading map ...');
+        $log.debug('... Re-shading map ...')
         ms.reshade(shading());
     }
 
@@ -460,7 +460,7 @@
         var prefs = ps.getPrefs('topo_sprites', { sprites: '' }, $loc.search()),
             sprId = prefs.sprites;
 
-        spriteG = zoomLayer.append('g').attr('id', 'topo-sprites');
+        spriteG = zoomLayer.append ('g').attr('id', 'topo-sprites');
         if (sprId) {
             ps.setPrefs('topo_sprites', prefs);
             tspr.loadSprites(spriteG, defs, sprId);
@@ -536,21 +536,21 @@
 
     angular.module('ovTopo', moduleDependencies)
         .controller('OvTopoCtrl', ['$scope', '$log', '$location', '$timeout',
-            'FnService', 'MastService', 'KeyService', 'ZoomService',
+            '$cookies', 'FnService', 'MastService', 'KeyService', 'ZoomService',
             'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
             'WebSocketService', 'PrefsService', 'ThemeService',
             'TopoDialogService', 'TopoD3Service',
             'TopoEventService', 'TopoForceService', 'TopoPanelService',
             'TopoInstService', 'TopoSelectService', 'TopoLinkService',
-            'TopoObliqueService', 'TopoFilterService',
+            'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
             'TopoToolbarService', 'TopoMapService', 'TopoSpriteService',
-            'TopoOverlayService',
+            'TooltipService', 'TopoOverlayService',
 
-        function (_$scope_, _$log_, _$loc_, _$timeout_, _fs_, mast, _ks_,
+        function (_$scope_, _$log_, _$loc_, _$timeout_, _$cookies_, _fs_, mast, _ks_,
                   _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _th_,
                   _tds_, _t3s_, _tes_,
-                  _tfs_, _tps_, _tis_, _tss_, _tls_, _tos_, _fltr_,
-                  _ttbs_, _tms_, _tspr_, _tov_) {
+                  _tfs_, _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_,
+                  _ttbs_, _tms_, _tspr_, _ttip_, _tov_) {
 
             var params = _$loc_.search(),
                 selOverlay = params.overlayId,
@@ -563,13 +563,14 @@
                     zoomLayer: function () { return zoomLayer; },
                     zoomer: function () { return zoomer; },
                     opacifyMap: opacifyMap,
-                    topoStartDone: topoStartDone,
+                    topoStartDone: topoStartDone
                 };
 
             $scope = _$scope_;
             $log = _$log_;
             $loc = _$loc_;
             $timeout = _$timeout_;
+            $cookies = _$cookies_;
             fs = _fs_;
             ks = _ks_;
             zs = _zs_;
@@ -590,18 +591,20 @@
             tps = _tps_;
             tis = _tis_;
             tms = _tms_;
+            tss = _tss_;
             tls = _tls_;
+            tts = _tts_;
             tos = _tos_;
             fltr = _fltr_;
             ttbs = _ttbs_;
             tspr = _tspr_;
+            ttip = _ttip_;
             tov = _tov_;
-            tss = _tss_;
 
             tms.start({
                 toggleMap: toggleMap,
                 currentMap: currentMap,
-                setMap: setMap,
+                setMap: setMap
             });
 
             // pull intent data from the query string...
@@ -610,7 +613,7 @@
                     key: params.key,
                     appId: params.appId,
                     appName: params.appName,
-                    intentType: params.intentType,
+                    intentType: params.intentType
                 };
             }
 
@@ -646,7 +649,7 @@
             setUpNoDevs();
             setUpMap().then(
                 function (proj) {
-                    var z = ps.getPrefs('topo_zoom', { tx: 0, ty: 0, sc: 1 });
+                    var z = ps.getPrefs('topo_zoom', { tx:0, ty:0, sc:1 });
                     zoomer.panZoom([z.tx, z.ty], z.sc);
                     $log.debug('** Zoom restored:', z);
 
diff --git a/web/gui/src/main/webapp/app/view/topo/topoD3.js b/web/gui/src/main/webapp/app/view/topo/topoD3.js
index c5c3b1f..3d232ee 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -23,7 +23,7 @@
     'use strict';
 
     // injected refs
-    var sus, is, ts, ps, ttbs;
+    var $log, fs, sus, is, ts, ps, ttbs;
 
     // api to topoForce
     var zoomer, api;
@@ -46,7 +46,7 @@
         badgeConfig = {
             radius: 12,
             yoff: 5,
-            gdelta: 10,
+            gdelta: 10
         },
         halfDevIcon = devIconDim / 2,
         devBadgeOff = { dx: -halfDevIcon, dy: -halfDevIcon },
@@ -55,7 +55,7 @@
         status = {
             i: 'badgeInfo',
             w: 'badgeWarn',
-            e: 'badgeError',
+            e: 'badgeError'
         };
 
     // NOTE: this type of hack should go away once we have implemented
@@ -77,7 +77,7 @@
     var remappedHostTypes = {
         router: 'm_router',
         endstation: 'm_endstation',
-        bgpSpeaker: 'm_bgpSpeaker',
+        bgpSpeaker: 'm_bgpSpeaker'
     };
 
     function mapDeviceTypeToGlyph(type) {
@@ -100,13 +100,13 @@
     var dColTheme = {
         light: {
             online: '#444444',
-            offline: '#cccccc',
+            offline: '#cccccc'
         },
         dark: {
             // TODO: theme
             online: '#444444',
-            offline: '#cccccc',
-        },
+            offline: '#cccccc'
+        }
     };
 
     function devGlyphColor(d) {
@@ -119,13 +119,13 @@
 
     function setDeviceColor(d) {
         // want to color the square rectangle (no longer the 'use' glyph)
-        d.el.selectAll('rect').filter(function (d, i) { return i === 1; })
+        d.el.selectAll('rect').filter(function (d, i) {return i === 1;})
             .style('fill', devGlyphColor(d));
     }
 
     function incDevLabIndex() {
         setDevLabIndex(deviceLabelIndex+1);
-        switch (deviceLabelIndex) {
+        switch(deviceLabelIndex) {
             case 0: return 'Hide device labels';
             case 1: return 'Show friendly device labels';
             case 2: return 'Show device ID labels';
@@ -141,7 +141,7 @@
 
     function incHostLabIndex() {
         setHostLabIndex(hostLabelIndex+1);
-        switch (hostLabelIndex) {
+        switch(hostLabelIndex) {
             case 0: return 'Show friendly host labels';
             case 1: return 'Show host IP Addresses';
             case 2: return 'Show host MAC Addresses';
@@ -180,8 +180,8 @@
             x: -dim/2,
             y: -dim/2,
             width: dim + labelWidth,
-            height: dim,
-        };
+            height: dim
+        }
     }
 
     function updateDeviceRendering(d) {
@@ -239,7 +239,7 @@
                     width: bcgd * 2,
                     height: bcgd * 2,
                     transform: sus.translate(-bcgd, -bcgd),
-                    'xlink:href': '#' + bdg.gid,
+                    'xlink:href': '#' + bdg.gid
                 });
         }
     }
@@ -279,14 +279,14 @@
         var node = d3.select(this),
             glyphId = mapDeviceTypeToGlyph(d.type),
             label = trimLabel(deviceLabel(d)),
-            rect, crect, glyph, labelWidth;
+            rect, crect, text, glyph, labelWidth;
 
         d.el = node;
 
         rect = node.append('rect');
         crect = node.append('rect');
 
-        node.append('text').text(label)
+        text = node.append('text').text(label)
             .attr('text-anchor', 'left')
             .attr('y', '0.3em')
             .attr('x', halfDevIcon + labelPad);
@@ -462,13 +462,13 @@
             });
 
             if (idx === -1) {
-                labels.push({ id: newId, x: newX, y: newY });
+                labels.push({id: newId, x: newX, y: newY});
             } else {
-                labels[idx] = { id: newId, x: newX, y: newY };
+                labels[idx] = {id: newId, x: newX, y: newY};
             }
 
-            return { x: newX, y: newY };
-        };
+            return {x: newX, y: newY};
+        }
     }
 
     var getLabelPos = generateLabelFunction();
@@ -518,7 +518,7 @@
 
         return {
             x: movedX,
-            y: movedY,
+            y: movedY
         };
     }
 
@@ -545,7 +545,7 @@
             x2: mid.x + moveAmtX,
             y2: mid.y + moveAmtY,
             stroke: api.linkConfig()[ts.theme()].baseColor,
-            transform: 'rotate(' + angle + ',' + mid.x + ',' + mid.y + ')',
+            transform: 'rotate(' + angle + ',' + mid.x + ',' + mid.y + ')'
         };
     }
 
@@ -554,7 +554,7 @@
             dist = 20;
         return {
             x: point.x + dist,
-            y: point.y + dist,
+            y: point.y + dist
         };
     }
 
@@ -568,7 +568,7 @@
             var el = d3.select(this);
 
             el.attr({
-                transform: function (d) { return calcGroupPos(d.linkCoords); },
+                transform: function (d) { return calcGroupPos(d.linkCoords); }
             });
             el.select('line')
                 .attr(hashAttrs(d.linkCoords));
@@ -583,7 +583,7 @@
             .append('g')
             .attr({
                 transform: function (d) { return calcGroupPos(d.linkCoords); },
-                id: function (d) { return 'pair-' + d.id; },
+                id: function (d) { return 'pair-' + d.id; }
             })
             .classed('numLinkLabel', true);
 
@@ -608,10 +608,12 @@
 
     angular.module('ovTopo')
     .factory('TopoD3Service',
-        ['SvgUtilService', 'IconService', 'ThemeService',
+        ['$log', 'FnService', 'SvgUtilService', 'IconService', 'ThemeService',
             'PrefsService', 'TopoToolbarService',
 
-        function (_sus_, _is_, _ts_, _ps_, _ttbs_) {
+        function (_$log_, _fs_, _sus_, _is_, _ts_, _ps_, _ttbs_) {
+            $log = _$log_;
+            fs = _fs_;
             sus = _sus_;
             is = _is_;
             ts = _ts_;
@@ -652,7 +654,7 @@
                 applyLinkLabels: applyLinkLabels,
                 transformLabel: transformLabel,
                 applyPortLabels: applyPortLabels,
-                applyNumLinkLabels: applyNumLinkLabels,
+                applyNumLinkLabels: applyNumLinkLabels
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoDialog.js b/web/gui/src/main/webapp/app/view/topo/topoDialog.js
index 18c83e9..425dad0 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoDialog.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoDialog.js
@@ -25,7 +25,7 @@
     // constants
     var idDialog = 'topo-p-dialog',
         opts = {
-            cssCls: 'topo-p',
+            cssCls: 'topo-p'
         };
 
     // ==========================
@@ -38,7 +38,7 @@
             return {
                 openDialog: function () { return ds.openDialog(idDialog, opts); },
                 closeDialog: ds.closeDialog,
-                createDiv: ds.createDiv,
+                createDiv: ds.createDiv
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoEvent.js b/web/gui/src/main/webapp/app/view/topo/topoEvent.js
index 01b2891..2a93895 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoEvent.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoEvent.js
@@ -27,7 +27,7 @@
     'use strict';
 
     // injected refs
-    var $log, wss, tps, tis, tfs, tss, tov, tspr;
+    var $log, $interval, wss, tps, tis, tfs, tss, tov, tspr;
 
     // internal state
     var handlerMap,
@@ -61,7 +61,7 @@
             topoStartDone: tfs,
 
             spriteListResponse: tspr,
-            spriteDataResponse: tspr,
+            spriteDataResponse: tspr
         };
     }
 
@@ -74,13 +74,14 @@
 
     angular.module('ovTopo')
     .factory('TopoEventService',
-        ['$log', 'WebSocketService',
+        ['$log', '$interval', 'WebSocketService',
             'TopoPanelService', 'TopoInstService', 'TopoForceService',
             'TopoSelectService', 'TopoOverlayService', 'TopoSpriteService',
 
-        function (_$log_, _wss_,
+        function (_$log_,  _$interval_, _wss_,
                   _tps_, _tis_, _tfs_, _tss_, _tov_, _tspr_) {
             $log = _$log_;
+            $interval = _$interval_;
             wss = _wss_;
             tps = _tps_;
             tis = _tis_;
@@ -114,7 +115,7 @@
             return {
                 bindHandlers: bindHandlers,
                 start: start,
-                stop: stop,
+                stop: stop
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoFilter.js b/web/gui/src/main/webapp/app/view/topo/topoFilter.js
index db5b3c3..b877fce 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoFilter.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoFilter.js
@@ -24,7 +24,7 @@
     'use strict';
 
     // injected refs
-    var flash;
+    var $log, fs, flash, tps, tts;
 
     // api to topoForce
     var api;
@@ -39,40 +39,40 @@
     var layerLookup = {
             host: {
                 endstation: 'pkt', // default, if host event does not define type
-                router: 'pkt',
-                bgpSpeaker: 'pkt',
+                router:     'pkt',
+                bgpSpeaker: 'pkt'
             },
             device: {
                 switch: 'pkt',
                 router: 'pkt',
                 roadm: 'opt',
-                otn: 'opt',
+                otn: 'opt'
             },
             link: {
                 hostLink: 'pkt',
                 direct: 'pkt',
                 indirect: '',
                 tunnel: '',
-                optical: 'opt',
-            },
+                optical: 'opt'
+            }
         },
         // order of layer cycling in button
         dispatch = [
             {
                 type: 'all',
                 action: function () { suppressLayers(false); },
-                msg: 'All Layers Shown',
+                msg: 'All Layers Shown'
             },
             {
                 type: 'pkt',
                 action: function () { showLayer('pkt'); },
-                msg: 'Packet Layer Shown',
+                msg: 'Packet Layer Shown'
             },
             {
                 type: 'opt',
                 action: function () { showLayer('opt'); },
-                msg: 'Optical Layer Shown',
-            },
+                msg: 'Optical Layer Shown'
+            }
         ],
         layer = 0;
 
@@ -123,9 +123,18 @@
     // === MODULE DEFINITION ===
 
     angular.module('ovTopo')
-        .factory('TopoFilterService', ['FlashService',
-            function (_flash_) {
+        .factory('TopoFilterService',
+        ['$log', 'FnService',
+            'FlashService',
+            'TopoPanelService',
+            'TopoTrafficService',
+
+            function (_$log_, _fs_, _flash_, _tps_, _tts_) {
+                $log = _$log_;
+                fs = _fs_;
                 flash = _flash_;
+                tps = _tps_;
+                tts = _tts_;
 
                 function initFilter(_api_) {
                     api = _api_;
@@ -136,8 +145,7 @@
 
                     clickAction: clickAction,
                     selected: selected,
-                    inLayer: inLayer,
+                    inLayer: inLayer
                 };
-            },
-        ]);
+            }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoForce.js b/web/gui/src/main/webapp/app/view/topo/topoForce.js
index c149f7b..f38fa56 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoForce.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoForce.js
@@ -31,42 +31,42 @@
         light: {
             baseColor: '#939598',
             inColor: '#66f',
-            outColor: '#f00',
+            outColor: '#f00'
         },
         dark: {
             // TODO : theme
             baseColor: '#939598',
             inColor: '#66f',
-            outColor: '#f00',
+            outColor: '#f00'
         },
         inWidth: 12,
-        outWidth: 10,
+        outWidth: 10
     };
 
     // internal state
-    var settings, // merged default settings and options
-        force, // force layout object
-        drag, // drag behavior handler
+    var settings,   // merged default settings and options
+        force,      // force layout object
+        drag,       // drag behavior handler
         network = {
             nodes: [],
             links: [],
             linksByDevice: {},
             lookup: {},
-            revLinkToKey: {},
+            revLinkToKey: {}
         },
-        lu, // shorthand for lookup
-        rlk, // shorthand for revLinktoKey
-        showHosts = false, // whether hosts are displayed
-        showOffline = true, // whether offline devices are displayed
-        nodeLock = false, // whether nodes can be dragged or not (locked)
-        fTimer, // timer for delayed force layout
-        fNodesTimer, // timer for delayed nodes update
-        fLinksTimer, // timer for delayed links update
-        dim, // the dimensions of the force layout [w,h]
-        linkNums = [], // array of link number labels
-        devIconDim = 36, // node target dimension
-        devIconDimMin = 20, // node minimum dimension when zoomed out
-        devIconDimMax = 40, // node maximum dimension when zoomed in
+        lu,                     // shorthand for lookup
+        rlk,                    // shorthand for revLinktoKey
+        showHosts = false,      // whether hosts are displayed
+        showOffline = true,     // whether offline devices are displayed
+        nodeLock = false,       // whether nodes can be dragged or not (locked)
+        fTimer,                 // timer for delayed force layout
+        fNodesTimer,            // timer for delayed nodes update
+        fLinksTimer,            // timer for delayed links update
+        dim,                    // the dimensions of the force layout [w,h]
+        linkNums = [],          // array of link number labels
+        devIconDim = 36,        // node target dimension
+        devIconDimMin = 20,     // node minimum dimension when zoomed out
+        devIconDimMax = 40,     // node maximum dimension when zoomed in
         portLabelDim = 30;
 
     // SVG elements;
@@ -83,23 +83,23 @@
             // note: key is node.class
             device: -8000,
             host: -5000,
-            _def_: -12000,
+            _def_: -12000
         },
         linkDistance: {
             // note: key is link.type
             direct: 100,
             optical: 120,
             hostLink: 3,
-            _def_: 50,
+            _def_: 50
         },
         linkStrength: {
             // note: key is link.type
             // range: {0.0 ... 1.0}
-            // direct: 1.0,
-            // optical: 1.0,
-            // hostLink: 1.0,
-            _def_: 1.0,
-        },
+            //direct: 1.0,
+            //optical: 1.0,
+            //hostLink: 1.0,
+            _def_: 1.0
+        }
     };
 
 
@@ -171,7 +171,7 @@
 
         lnk = tms.createHostLink(data);
         if (lnk) {
-            d.linkData = lnk; // cache ref on its host
+            d.linkData = lnk;    // cache ref on its host
             network.links.push(lnk);
             lu[d.ingress] = lnk;
             lu[d.egress] = lnk;
@@ -308,7 +308,7 @@
             network.linksByDevice[found].push(ldata);
             ldata.devicePair = found;
         } else {
-            network.linksByDevice[key] = [ldata];
+            network.linksByDevice[key] = [ ldata ];
             ldata.devicePair = key;
         }
     }
@@ -318,7 +318,7 @@
         ldata.fromTarget = link;
         rlk[link.id] = ldata.key;
         // possible solution to el being undefined in restyleLinkElement:
-        // _updateLinks();
+        //_updateLinks();
         restyleLinkElement(ldata);
     }
 
@@ -468,15 +468,15 @@
                 y: d.y,
                 equivLoc: {
                     lng: ll[0],
-                    lat: ll[1],
-                },
+                    lat: ll[1]
+                }
             };
         }
         d.metaUi = metaUi;
         wss.sendEvent('updateMeta', {
             id: d.id,
             class: d.class,
-            memento: metaUi,
+            memento: metaUi
         });
     }
 
@@ -557,7 +557,7 @@
     }
 
     function supAmt(less) {
-        return less ? 'suppressed' : 'suppressedmax';
+        return less ? "suppressed" : "suppressedmax";
     }
 
     function suppressLayers(b, less) {
@@ -665,6 +665,8 @@
     // IMPLEMENTATION NOTE: _updateNodes() should NOT stop, start, or resume
     //  the force layout; that needs to be determined and implemented elsewhere
     function _updateNodes() {
+
+        var scale = uplink.zoomer().scale();
         // select all the nodes in the layout:
         node = nodeG.selectAll('.node')
             .data(network.nodes, function (d) { return d.id; });
@@ -683,7 +685,7 @@
                     // Need to guard against NaN here ??
                     return sus.translate(d.x, d.y);
                 },
-                opacity: 0,
+                opacity: 0
             })
             .call(drag)
             .on('mouseover', tss.nodeMouseOver)
@@ -719,7 +721,7 @@
             x1: link.source.x,
             y1: link.source.y,
             x2: link.target.x,
-            y2: link.target.y,
+            y2: link.target.y
         };
     }
 
@@ -740,7 +742,7 @@
             x1: pos.x1 + (mult * dy / length),
             y1: pos.y1 + (mult * -dx / length),
             x2: pos.x2 + (mult * dy / length),
-            y2: pos.y2 + (mult * -dx / length),
+            y2: pos.y2 + (mult * -dx / length)
         };
     }
 
@@ -783,7 +785,7 @@
                 linkNums.push({
                     id: key,
                     num: numLinks,
-                    linkCoords: linkArr[0].position,
+                    linkCoords: linkArr[0].position
                 });
             } else {
                 linkSrcId = null;
@@ -832,14 +834,14 @@
                 x2: function (d) { return d.position.x2; },
                 y2: function (d) { return d.position.y2; },
                 stroke: linkConfig[th].inColor,
-                'stroke-width': linkConfig.inWidth,
+                'stroke-width': linkConfig.inWidth
             });
 
         // augment links
         entering.each(td3.linkEntering);
 
         // operate on both existing and new links:
-        // link.each(...)
+        //link.each(...)
 
         // add labels for how many links are in a thick line
         td3.applyNumLinkLabels(linkNums, numLinkLblsG);
@@ -856,7 +858,7 @@
             .duration(1500)
             .attr({
                 'stroke-dasharray': '3 12',
-                'stroke-width': linkConfig.outWidth,
+                'stroke-width': linkConfig.outWidth
             })
             .style('opacity', 0.0)
             .remove();
@@ -878,7 +880,7 @@
                 $timeout.cancel(fTimer);
             }
             fTimer = $timeout(function () {
-                $log.debug('Starting force-layout');
+                $log.debug("Starting force-layout");
                 force.start();
             }, 200);
         }
@@ -890,13 +892,13 @@
                 var dx = isNaN(d.x) ? 0 : d.x,
                     dy = isNaN(d.y) ? 0 : d.y;
                 return sus.translate(dx, dy);
-            },
+            }
         },
         linkAttr: {
             x1: function (d) { return d.position.x1; },
             y1: function (d) { return d.position.y1; },
             x2: function (d) { return d.position.x2; },
-            y2: function (d) { return d.position.y2; },
+            y2: function (d) { return d.position.y2; }
         },
         linkLabelAttr: {
             transform: function (d) {
@@ -904,8 +906,8 @@
                 if (lnk) {
                     return td3.transformLabel(lnk.position, d.key);
                 }
-            },
-        },
+            }
+        }
     };
 
     function tick() {
@@ -989,7 +991,7 @@
                     id: 'lab-' + d.key,
                     key: d.key,
                     label: d.label,
-                    ldata: d,
+                    ldata: d
                 });
             }
         });
@@ -1006,7 +1008,7 @@
             projection: uplink.projection,
             network: network,
             restyleLinkElement: restyleLinkElement,
-            removeLinkElement: removeLinkElement,
+            removeLinkElement: removeLinkElement
         };
     }
 
@@ -1022,7 +1024,7 @@
             updateLinkLabelModel: updateLinkLabelModel,
             linkConfig: function () { return linkConfig; },
             deviceScale: deviceScale,
-            linkWidthScale: linkWidthScale,
+            linkWidthScale: linkWidthScale
         };
     }
 
@@ -1031,7 +1033,7 @@
             node: function () { return node; },
             zoomingOrPanning: zoomingOrPanning,
             updateDeviceColors: td3.updateDeviceColors,
-            deselectAllLinks: tls.deselectAllLinks,
+            deselectAllLinks: tls.deselectAllLinks
         };
     }
 
@@ -1039,7 +1041,7 @@
         return {
             hovered: tss.hovered,
             somethingSelected: tss.somethingSelected,
-            selectOrder: tss.selectOrder,
+            selectOrder: tss.selectOrder
         };
     }
 
@@ -1055,15 +1057,15 @@
             updateNodes: updateNodes,
             supLayers: suppressLayers,
             unsupNode: unsuppressNode,
-            unsupLink: unsuppressLink,
+            unsupLink: unsuppressLink
         };
     }
 
     function mkObliqueApi(uplink, fltr) {
         return {
-            force: function () { return force; },
+            force: function() { return force; },
             zoomLayer: uplink.zoomLayer,
-            nodeGBBox: function () { return nodeG.node().getBBox(); },
+            nodeGBBox: function() { return nodeG.node().getBBox(); },
             node: function () { return node; },
             link: function () { return link; },
             linkLabel: function () { return linkLabel; },
@@ -1079,14 +1081,14 @@
             calcLinkPos: calcPosition,
             applyNumLinkLabels: function () {
                 td3.applyNumLinkLabels(linkNums, numLinkLblsG);
-            },
+            }
         };
     }
 
     function mkFilterApi() {
         return {
             node: function () { return node; },
-            link: function () { return link; },
+            link: function () { return link; }
         };
     }
 
@@ -1096,7 +1098,7 @@
             zoomer: uplink.zoomer(),
             network: network,
             portLabelG: function () { return portLabelG; },
-            showHosts: function () { return showHosts; },
+            showHosts: function () { return showHosts; }
         };
     }
 
@@ -1262,7 +1264,7 @@
                 addLink: addLink,
                 updateLink: updateLink,
                 removeLink: removeLink,
-                topoStartDone: topoStartDone,
+                topoStartDone: topoStartDone
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoInst.js b/web/gui/src/main/webapp/app/view/topo/topoInst.js
index 7a51b2b..4146407 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoInst.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoInst.js
@@ -36,7 +36,7 @@
         idIns = 'topo-p-instance',
         instOpts = {
             edge: 'left',
-            width: 20,
+            width: 20
         };
 
     // internal state
@@ -141,24 +141,24 @@
             instSvg = {
                 width: 170,
                 height: 85,
-                viewBox: '0 0 170 85',
+                viewBox: '0 0 170 85'
             },
             headRect = {
                 x: rox,
                 y: roy,
                 width: rw,
-                height: rhh,
+                height: rhh
             },
             bodyRect = {
                 x: rox,
                 y: roy + rhh,
                 width: rw,
-                height: rbh,
+                height: rbh
             },
             titleAttr = {
                 class: 'instTitle',
                 x: tx,
-                y: 27,
+                y: 27
             };
 
         var onoses = oiBox.el().selectAll('.onosInst')
@@ -225,7 +225,7 @@
                 svg.append('text').attr({
                     class: 'instLabel ' + id,
                     x: tx,
-                    y: ty,
+                    y: ty
                 }).text(label);
                 ty += 18;
             }
@@ -342,7 +342,7 @@
                 show: showInsts,
                 hide: hideInsts,
                 toggle: toggleInsts,
-                showMaster: function () { return oiShowMaster; },
+                showMaster: function () { return oiShowMaster; }
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoLink.js b/web/gui/src/main/webapp/app/view/topo/topoLink.js
index 2bccbe4..a7b5bc7 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoLink.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoLink.js
@@ -23,15 +23,15 @@
     'use strict';
 
     // injected refs
-    var $log, fs, flash, tss, tps, tov;
+    var $log, fs, sus, ts, flash, tss, tps, tov;
 
     // internal state
     var api,
         td3,
         network,
-        showPorts = true, // enable port highlighting by default
-        enhancedLink = null, // the link over which the mouse is hovering
-        selectedLinks = {}; // the links which are already selected
+        showPorts = true,       // enable port highlighting by default
+        enhancedLink = null,    // the link over which the mouse is hovering
+        selectedLinks = {};     // the links which are already selected
 
     // SVG elements;
     var svg;
@@ -45,7 +45,7 @@
             tr = api.zoomer.translate(),
             mx = (m[0] - tr[0]) / sc,
             my = (m[1] - tr[1]) / sc;
-        return { x: mx, y: my };
+        return {x: mx, y: my};
     }
 
 
@@ -74,7 +74,7 @@
                     return; // skip hidden hosts
                 }
 
-                dist = mdist({ x: d.x, y: d.y }, mouse);
+                dist = mdist({x: d.x, y: d.y}, mouse);
                 if (dist < minDist && dist < proximity) {
                     minDist = dist;
                     nearest = d;
@@ -101,7 +101,7 @@
                     (sq(y2-y1) + sq(x2-x1)),
                 x4 = x3 - k * (y2-y1),
                 y4 = y3 + k * (x2-x1);
-            return { x: x4, y: y4 };
+            return {x:x4, y:y4};
         }
 
         function lineHit(line, p, m) {
@@ -179,7 +179,7 @@
         point = locatePortLabel(d);
         angular.extend(point, {
             id: 'topo-port-tgt',
-            num: d.tgtPort,
+            num: d.tgtPort
         });
         data.push(point);
 
@@ -187,7 +187,7 @@
             point = locatePortLabel(d, 1);
             angular.extend(point, {
                 id: 'topo-port-src',
-                num: d.srcPort,
+                num: d.srcPort
             });
             data.push(point);
         }
@@ -209,7 +209,7 @@
             dy = farY - nearY,
             k = offset / dist(dx, dy);
 
-        return { x: k * dx + nearX, y: k * dy + nearY };
+        return {x: k * dx + nearX, y: k * dy + nearY};
     }
 
     function selectLink(ldata) {
@@ -248,7 +248,7 @@
         if (!d.el) return;
 
         d.el.classed('selected', true);
-        selectedLinks[d.key] = { key: d };
+        selectedLinks[d.key] = {key : d};
 
         tps.displayLink(d, tov.hooks.modifyLinkData);
         tps.displaySomething();
@@ -317,12 +317,14 @@
 
     angular.module('ovTopo')
         .factory('TopoLinkService',
-        ['$log', 'FnService', 'FlashService', 'TopoSelectService',
-        'TopoPanelService', 'TopoOverlayService',
+        ['$log', 'FnService', 'SvgUtilService', 'ThemeService', 'FlashService',
+            'TopoSelectService', 'TopoPanelService', 'TopoOverlayService',
 
-        function (_$log_, _fs_, _flash_, _tss_, _tps_, _tov_) {
+        function (_$log_, _fs_, _sus_, _ts_, _flash_, _tss_, _tps_, _tov_) {
             $log = _$log_;
             fs = _fs_;
+            sus = _sus_;
+            ts = _ts_;
             flash = _flash_;
             tss = _tss_;
             tps = _tps_;
@@ -349,7 +351,7 @@
                 initLink: initLink,
                 destroyLink: destroyLink,
                 togglePorts: togglePorts,
-                deselectAllLinks: deselectAllLinks,
+                deselectAllLinks: deselectAllLinks
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoMap.js b/web/gui/src/main/webapp/app/view/topo/topoMap.js
index 2095f0d..9418d17 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoMap.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoMap.js
@@ -23,13 +23,13 @@
     'use strict';
 
     // injected refs
-    var $log, wss, tds, delegate;
+    var $log, $loc, fs, flash, wss, tds, delegate;
 
     // constants
     var mapRequest = 'mapSelectorRequest';
 
     // internal state
-    var order, maps, map, mapItems, msgHandlers;
+    var order, maps, map, mapItems, tintCheck, msgHandlers;
 
     // === ---------------------------
     // === Helper functions
@@ -60,7 +60,7 @@
             mapid: map.id,
             mapscale: map.scale,
             mapfilepath: map.filePath,
-            tint: 'off',
+            tint: 'off'
             // tint: tintCheck.property('checked') ? 'on' : 'off'
         };
         setMap(p);
@@ -98,7 +98,7 @@
         }
         p.append('span').text('Enable map tint');
 */
-
+        
         return content;
     }
 
@@ -131,15 +131,19 @@
 
     angular.module('ovTopo')
     .factory('TopoMapService',
-        ['$log', 'WebSocketService', 'TopoDialogService',
+        ['$log', '$location', 'FnService', 'FlashService', 'WebSocketService',
+            'TopoDialogService',
 
-        function (_$log_, _wss_, _tds_) {
+        function (_$log_, _$loc_, _fs_, _flash_, _wss_, _tds_) {
             $log = _$log_;
+            $loc = _$loc_;
+            fs = _fs_;
+            flash = _flash_;
             wss = _wss_;
             tds = _tds_;
 
             msgHandlers = {
-                mapSelectorResponse: handleMapResponse,
+                mapSelectorResponse: handleMapResponse
             };
 
             return {
@@ -150,7 +154,7 @@
                 openMapSelection: openMapSelection,
                 closeMapSelection: closeMapSelection,
                 start: start,
-                stop: stop,
+                stop: stop
             };
         }]);
 
diff --git a/web/gui/src/main/webapp/app/view/topo/topoModel.js b/web/gui/src/main/webapp/app/view/topo/topoModel.js
index eadbb43..e841907 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoModel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoModel.js
@@ -38,7 +38,7 @@
     // shorthand
     var lu, rlk, nodes, links, linksByDevice;
 
-    var dim; // dimensions of layout [w,h]
+    var dim;    // dimensions of layout [w,h]
 
     // configuration 'constants'
     var defaultLinkType = 'direct',
@@ -90,14 +90,14 @@
         function rand() {
             return {
                 x: rnd.randDim(dim[0]),
-                y: rnd.randDim(dim[1]),
+                y: rnd.randDim(dim[1])
             };
         }
 
         function near(node) {
             return {
                 x: node.x + nearDist + rnd.spread(nearDist),
-                y: node.y + nearDist + rnd.spread(nearDist),
+                y: node.y + nearDist + rnd.spread(nearDist)
             };
         }
 
@@ -181,7 +181,7 @@
                 // hostlink target is edge switch
                 return lnk.target.online;
             },
-            linkWidth: function () { return 1; },
+            linkWidth: function () { return 1; }
         });
         return lnk;
     }
@@ -203,7 +203,7 @@
                 x1: 0,
                 y1: 0,
                 x2: 0,
-                y2: 0,
+                y2: 0
             },
 
             // functions to aggregate dual link state
@@ -230,7 +230,7 @@
                     wt = (t && t.linkWidth) || 0;
                 return lnk.position.multiLink ? 5 : Math.max(ws, wt);
             },
-            extra: link.extra,
+            extra: link.extra
         });
         return lnk;
     }
@@ -244,13 +244,13 @@
 
         if (sMiss || dMiss) {
             $log.error('Node(s) not on map for link:' + sMiss + dMiss);
-            // logicError('Node(s) not on map for link:\n' + sMiss + dMiss);
+            //logicError('Node(s) not on map for link:\n' + sMiss + dMiss);
             return null;
         }
 
         return {
             source: srcNode,
-            target: dstNode,
+            target: dstNode
         };
     }
 
@@ -306,7 +306,7 @@
                 result.updateWith = function (data) {
                     angular.extend(rawLink, data);
                     api.restyleLinkElement(ldata);
-                };
+                }
             }
         } else if (op === 'remove') {
             if (!ldata) {
@@ -349,7 +349,7 @@
                         } else {
                             api.removeLinkElement(ldata);
                         }
-                    };
+                    }
                 }
             }
         }
@@ -466,7 +466,7 @@
                 findHosts: findHosts,
                 findAttachedHosts: findAttachedHosts,
                 findAttachedLinks: findAttachedLinks,
-                findBadLinks: findBadLinks,
-            };
+                findBadLinks: findBadLinks
+            }
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoOblique.js b/web/gui/src/main/webapp/app/view/topo/topoOblique.js
index 63027db..f3ac25b 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoOblique.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoOblique.js
@@ -24,7 +24,7 @@
     'use strict';
 
     // injected refs
-    var sus, flash;
+    var $log, fs, sus, flash;
 
     // api to topoForce
     var api;
@@ -43,14 +43,14 @@
      */
 
     // configuration
-    var xsky = -.7, // x skew y factor
-        xsk = -35, // x skew angle
-        ysc = .5, // y scale
+    var xsky = -.7,     // x skew y factor
+        xsk = -35,      // x skew angle
+        ysc = .5,       // y scale
         pad = 50,
         time = 1500,
         fill = {
-            pkt: 'rgba(130,130,170,0.3)', // blue-ish
-            opt: 'rgba(170,130,170,0.3)', // magenta-ish
+            pkt: 'rgba(130,130,170,0.3)',   // blue-ish
+            opt: 'rgba(170,130,170,0.3)'    // magenta-ish
         };
 
     // internal state
@@ -74,7 +74,7 @@
     }
 
     function noXform() {
-        return sus.skewX(0) + sus.translate(0, 0) + sus.scale(1, 1);
+        return sus.skewX(0) + sus.translate(0,0) + sus.scale(1,1);
     }
 
     function padBox(box, p) {
@@ -105,7 +105,7 @@
                 ay = xy.y - oy,
                 x = ax + ay * xsky,
                 y = (ay + yt) * ysc;
-            return { x: ox + x, y: oy + y };
+            return {x: ox + x, y: oy + y};
         };
 
         showPlane('pkt', box, -1);
@@ -136,7 +136,7 @@
 
         if (xffn) {
             api.nodes().forEach(function (d) {
-                var oldxy = { x: d.x, y: d.y },
+                var oldxy = {x: d.x, y: d.y},
                     coords = xffn(oldxy, dir(d));
                 d.oldxy = oldxy;
                 d.px = d.x = coords.x;
@@ -144,7 +144,7 @@
             });
         } else {
             api.nodes().forEach(function (d) {
-                var old = d.oldxy || { x: d.x, y: d.y };
+                var old = d.oldxy || {x: d.x, y: d.y};
                 d.px = d.x = old.x;
                 d.py = d.y = old.y;
                 delete d.oldxy;
@@ -191,7 +191,7 @@
             var id = planeId(tag),
                 g = api.zoomLayer().insert('g', '#topo-G')
                     .attr('id', id)
-                    .attr('transform', sus.translate(ox, oy));
+                    .attr('transform', sus.translate(ox,oy));
             g.append('rect')
                 .attr('fill', fill[tag])
                 .attr('opacity', 0);
@@ -220,9 +220,11 @@
 
 angular.module('ovTopo')
     .factory('TopoObliqueService',
-    ['SvgUtilService', 'FlashService',
+    ['$log', 'FnService', 'SvgUtilService', 'FlashService',
 
-    function (_sus_, _flash_) {
+    function (_$log_, _fs_, _sus_, _flash_) {
+        $log = _$log_;
+        fs = _fs_;
         sus = _sus_;
         flash = _flash_;
 
@@ -249,7 +251,7 @@
             destroyOblique: destroyOblique,
 
             isOblique: function () { return oblique; },
-            toggleOblique: toggleOblique,
+            toggleOblique: toggleOblique
         };
     }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
index d86af89..f953911 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
@@ -126,7 +126,7 @@
             if (sicb && aicb && aicb(intentType)) {
                 result.push({
                     id: ovid,
-                    tt: ov.tooltip || '%' + ovid + '%',
+                    tt: ov.tooltip || '%' + ovid + '%'
                 });
             }
         });
@@ -145,7 +145,7 @@
                 tooltip: (ov.tooltip || '(no tooltip)'),
                 cb: function () {
                     tbSelection(ov.overlayId, switchFn);
-                },
+                }
             });
             map[ov.overlayId] = idx++;
         });
@@ -185,28 +185,28 @@
         showDeviceView: {
             gid: 'switch',
             tt: 'Show Device View',
-            path: 'device',
+            path: 'device'
         },
         showFlowView: {
             gid: 'flowTable',
             tt: 'Show Flow View for this Device',
-            path: 'flow',
+            path: 'flow'
         },
         showPortView: {
             gid: 'portTable',
             tt: 'Show Port View for this Device',
-            path: 'port',
+            path: 'port'
         },
         showGroupView: {
             gid: 'groupTable',
             tt: 'Show Group View for this Device',
-            path: 'group',
+            path: 'group'
         },
         showMeterView: {
             gid: 'meterTable',
             tt: 'Show Meter View for this Device',
-            path: 'meter',
-        },
+            path: 'meter'
+        }
     };
 
     // retrieves a button definition from the current overlay and generates
@@ -221,7 +221,7 @@
             id: current.mkId(id),
             gid: current.mkGid(b.gid),
             tt: b.tt,
-            cb: f,
+            cb: f
         } : null;
     }
 
@@ -238,7 +238,7 @@
                     id: 'core-' + id,
                     gid: gid,
                     tt: tt,
-                    cb: function () { ns.navTo(path, { devId: devId }); },
+                    cb: function () { ns.navTo(path, {devId: devId }); }
                 });
             } else if (btn = _getButtonDef(id, data)) {
                 tps.addAction(btn);
@@ -253,7 +253,7 @@
                 id: current.mkId(id),
                 gid: current.mkGid(b.gid),
                 cb: b.cb,
-                tt: b.tt,
+                tt: b.tt
             });
         }
     }
@@ -318,7 +318,7 @@
         tss = _tss_;
     }
 
-    // process highlight event with optional delay
+    //process highlight event with optional delay
     function showHighlights(data) {
         function doHighlight() {
             _showHighlights(data);
@@ -446,11 +446,11 @@
                     mouseOver: mouseOverHook,
                     mouseOut: mouseOutHook,
                     modifyLinkData: modifyLinkDataHook,
-                    showIntent: showIntentHook,
+                    showIntent: showIntentHook
                 },
 
-                showHighlights: showHighlights,
-            };
+                showHighlights: showHighlights
+            }
         }]);
 
-}());
+}());
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo/topoPanel.js b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
index 18af617..8f8eef5 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
@@ -30,17 +30,17 @@
         idSum = 'topo-p-summary',
         idDet = 'topo-p-detail',
         panelOpts = {
-            width: 260, // summary and detail panel width
+            width: 260          // summary and detail panel width
         },
-        sumMax = 226, // summary panel max height
-        padTop = 16, // summary panel padding below masthead
-        padding = 16, // panel internal padding
+        sumMax = 226,           // summary panel max height
+        padTop = 16,            // summary panel padding below masthead
+        padding = 16,           // panel internal padding
         padFudge = padTop + 2 * padding;
 
     // internal state
-    var useDetails = true, // should we show details if we have 'em?
-        haveDetails = false, // do we have details that we could show?
-        sumFromTop, // summary panel distance from top of screen
+    var useDetails = true,      // should we show details if we have 'em?
+        haveDetails = false,    // do we have details that we could show?
+        sumFromTop,             // summary panel distance from top of screen
         unbindWatch;
 
     // panels
@@ -140,7 +140,7 @@
             appendHeader: hAppend,
             appendBody: bAppend,
             appendFooter: fAppend,
-            adjustHeight: adjustHeight,
+            adjustHeight: adjustHeight
         };
     }
 
@@ -195,7 +195,7 @@
             function () {
                 return {
                     h: $window.innerHeight,
-                    w: $window.innerWidth,
+                    w: $window.innerWidth
                 };
             }, function () {
                 var h = summary.adjustHeight(sumFromTop, sumMax),
@@ -220,7 +220,7 @@
             table = summary.appendBody('table'),
             tbody = table.append('tbody');
 
-        gs.addGlyph(svg, 'bird', 24, 0, [1, 1]);
+        gs.addGlyph(svg, 'bird', 24, 0, [1,1]);
 
         title.text(data.title);
         listProps(tbody, data);
@@ -231,7 +231,7 @@
 
     var navPathIdKey = {
         device: 'devId',
-        host: 'hostId',
+        host: 'hostId'
     };
 
     function displaySingle(data) {
@@ -291,7 +291,7 @@
 
     var friendlyIndex = {
         device: 1,
-        host: 0,
+        host: 0
     };
 
     function friendly(d) {
@@ -306,7 +306,7 @@
 
     // provided to change presentation of internal type name
     var linkTypePres = {
-        hostLink: 'edge link',
+        hostLink: 'edge link'
     };
 
     function linkType(d) {
@@ -320,12 +320,12 @@
     var coreOrder = [
             'Type', 'Expected', '-',
             'A_type', 'A_id', 'A_label', 'A_port', '-',
-            'B_type', 'B_id', 'B_label', 'B_port',
+            'B_type', 'B_id', 'B_label', 'B_port'
         ],
         edgeOrder = [
             'Type', '-',
             'A_type', 'A_id', 'A_label', '-',
-            'B_type', 'B_id', 'B_label', 'B_port',
+            'B_type', 'B_id', 'B_label', 'B_port'
         ];
 
     function displayLink(data, modifyCb) {
@@ -344,7 +344,7 @@
         title.text('Link');
 
         var linkData = {
-            propOrder: order.slice(0), // makes a copy of the array
+            propOrder: order.slice(0),      // makes a copy of the array
             props: {
                 Type: linkType(data),
                 Expected: linkExpected(data),
@@ -357,8 +357,8 @@
                 B_type: data.target.class,
                 B_id: data.target.id,
                 B_label: friendly(data.target),
-                B_port: data.tgtPort,
-            },
+                B_port: data.tgtPort
+            }
         };
         listProps(tbody, modifyCb(linkData, data.extra));
 
@@ -422,7 +422,7 @@
 
     function hideSummaryPanel() {
         // instruct server to stop sending summary data
-        wss.sendEvent('cancelSummary');
+        wss.sendEvent("cancelSummary");
         summary.panel().hide(detail.up);
     }
 
@@ -443,7 +443,7 @@
     function augmentDetailPanel() {
         var d = detail,
             downPos = sumFromTop + sumMax + padFudge;
-        d.ypos = { up: sumFromTop, down: downPos, current: downPos };
+        d.ypos = { up: sumFromTop, down: downPos, current: downPos};
 
         d._move = function (y, cb) {
             var yp = d.ypos,
@@ -453,11 +453,11 @@
                 endCb = function () {
                     cb();
                     d.adjustHeight(d.ypos.current);
-                };
+                }
             } else {
                 endCb = function () {
                     d.adjustHeight(d.ypos.current);
-                };
+                }
             }
             if (yp.current !== y) {
                 yp.current = y;
@@ -552,7 +552,7 @@
                 addAction: addAction,
 
                 detailVisible: function () { return detail.panel().isVisible(); },
-                summaryVisible: function () { return summary.panel().isVisible(); },
+                summaryVisible: function () { return summary.panel().isVisible(); }
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoProtectedIntent.js b/web/gui/src/main/webapp/app/view/topo/topoProtectedIntent.js
index 8625dec..20193dd 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoProtectedIntent.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoProtectedIntent.js
@@ -23,7 +23,7 @@
     'use strict';
 
     // injected refs
-    var flash, wss;
+    var $log, fs, flash, wss, api;
 
     // internal state
     var showingProtectedIntent = null;
@@ -54,20 +54,21 @@
 
     angular.module('ovTopo')
     .factory('TopoProtectedIntentsService',
-        ['FlashService', 'WebSocketService',
+        ['$log', 'FnService', 'FlashService', 'WebSocketService',
 
-        function (_flash_, _wss_) {
+        function (_$log_, _fs_, _flash_, _wss_) {
+            $log = _$log_;
+            fs = _fs_;
             flash = _flash_;
             wss = _wss_;
 
             return {
-                // TODO: Remove references
-                initProtectedIntents: function (_api_) {},
+                initProtectedIntents: function (_api_) { api = _api_; },
                 destroyProtectedIntents: function () { },
 
                 // invoked from toolbar overlay buttons or keystrokes
                 cancelHighlights: cancelHighlights,
-                showProtectedIntent: showProtectedIntent,
+                showProtectedIntent: showProtectedIntent
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoProtectedIntentOverlay.js b/web/gui/src/main/webapp/app/view/topo/topoProtectedIntentOverlay.js
index bfe9afd..ab9114f 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoProtectedIntentOverlay.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoProtectedIntentOverlay.js
@@ -38,12 +38,12 @@
         tooltip: 'Protected Intents Overlay',
 
         activate: function () {
-            $log.debug('Protected Intent overlay ACTIVATED');
+            $log.debug("Protected Intent overlay ACTIVATED");
         },
 
         deactivate: function () {
             tpis.cancelHighlights();
-            $log.debug('Protected Intent DEACTIVATED');
+            $log.debug("Protected Intent DEACTIVATED");
         },
 
         hooks: {
@@ -60,8 +60,8 @@
             showIntent: function (info) {
                 $log.debug('^^ topoProtectedIntentsOverlay.showintent() ^^', info);
                 tpis.showProtectedIntent(info);
-            },
-        },
+            }
+        }
     };
 
     // invoke code to register with the overlay service
diff --git a/web/gui/src/main/webapp/app/view/topo/topoSelect.js b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
index 9693755..724b43c 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoSelect.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
@@ -23,7 +23,7 @@
     'use strict';
 
     // injected refs
-    var fs, wss, tov, tps, tts, sus;
+    var $log, fs, wss, tov, tps, tts, ns, sus, tpis;
 
     // api to topoForce
     var api;
@@ -37,11 +37,11 @@
     // internal state
     var hovered, selections, selectOrder, consumeClick;
 
-    function setInitialState() {
-        hovered = null; // the node over which the mouse is hovering
-        selections = {}; // currently selected nodes (by id)
-        selectOrder = []; // the order in which we made selections
-        consumeClick = false; // used to coordinate with SVG click handler
+    function setInitialState () {
+        hovered = null;         // the node over which the mouse is hovering
+        selections = {};        // currently selected nodes (by id)
+        selectOrder = [];       // the order in which we made selections
+        consumeClick = false;   // used to coordinate with SVG click handler
     }
 
     // ==========================
@@ -70,7 +70,7 @@
                 tov.hooks.mouseOver({
                     id: m.id,
                     class: m.class,
-                    type: m.type,
+                    type: m.type
                 });
             }
         }
@@ -185,7 +185,7 @@
     function requestDetails(data) {
         wss.sendEvent('requestDetails', {
             id: data.id,
-            class: data.class,
+            class: data.class
         });
     }
 
@@ -210,7 +210,7 @@
     function singleSelect() {
         var data = getSel(0).obj;
 
-        // the link details are already taken care of in topoLink.js
+        //the link details are already taken care of in topoLink.js
         if (data.class === 'link') {
             return;
         }
@@ -235,14 +235,14 @@
                     id: 'host-flow-btn',
                     gid: 'endstation',
                     cb: tts.addHostIntent,
-                    tt: 'Create Host-to-Host Flow',
+                    tt: 'Create Host-to-Host Flow'
                 });
             } else if (nSel() >= 2) {
                 tps.addAction({
                     id: 'mult-src-flow-btn',
                     gid: 'flows',
                     cb: tts.addMultiSourceIntent,
-                    tt: 'Create Multi-Source Flow',
+                    tt: 'Create Multi-Source Flow'
                 });
             }
         }
@@ -295,7 +295,7 @@
         return {
             devices: devices,
             hosts: hosts,
-            types: types,
+            types: types
         };
     }
 
@@ -304,16 +304,20 @@
 
     angular.module('ovTopo')
     .factory('TopoSelectService',
-        ['FnService', 'WebSocketService', 'TopoOverlayService',
-        'TopoPanelService', 'TopoTrafficService', 'SvgUtilService',
+        ['$log', 'FnService', 'WebSocketService', 'TopoOverlayService',
+            'TopoPanelService', 'TopoTrafficService', 'NavService',
+            'SvgUtilService', 'TopoProtectedIntentsService',
 
-        function (_fs_, _wss_, _tov_, _tps_, _tts_, _sus_) {
+        function (_$log_, _fs_, _wss_, _tov_, _tps_, _tts_, _ns_, _sus_, _tpis_) {
+            $log = _$log_;
             fs = _fs_;
             wss = _wss_;
             tov = _tov_;
             tps = _tps_;
             tts = _tts_;
+            ns = _ns_;
             sus = _sus_;
+            tpis= _tpis_;
 
             function initSelect(_api_) {
                 api = _api_;
@@ -343,7 +347,7 @@
 
                 clickConsumed: clickConsumed,
                 selectionContext: selectionContext,
-                reselect: reselect,
+                reselect: reselect
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoSprite.js b/web/gui/src/main/webapp/app/view/topo/topoSprite.js
index 7c63bfa..0a4785f 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoSprite.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoSprite.js
@@ -23,11 +23,11 @@
     'use strict';
 
     // injected refs
-    var $log, fs, gs, sus, wss;
+    var $log, $http, fs, gs, sus, wss;
 
     // constants
     var tssid = 'TopoSpriteService: ',
-        fontsize = 20; // default font size 20pt.
+        fontsize = 20;  // default font size 20pt.
 
     // internal state
     var spriteLayer, defsElement;
@@ -76,9 +76,9 @@
     function doSprite(spr, def, pathmeta) {
         var pmeta = pathmeta[def.path],
             c = spr.class || 'gray1',
-            p = spr.pos || [0, 0],
+            p = spr.pos || [0,0],
             lab = spr.label,
-            dim = def.dim || [40, 40],
+            dim = def.dim || [40,40],
             w = dim[0],
             h = dim[1],
             dy = def.labelyoff || 1,
@@ -97,7 +97,7 @@
         attr = {
             width: w,
             height: h,
-            'xlink:href': '#' + pmeta.u,
+            'xlink:href': '#' + pmeta.u
         };
 
         use = g.append('use').attr(attr);
@@ -113,7 +113,7 @@
                     width: w,
                     height: h,
                     'xlink:href': '#' + pmeta.u,
-                    transform: sus.translate(v.pos),
+                    transform: sus.translate(v.pos)
                 };
                 use = g.append('use').attr(attr);
                 applyStrokeStyle(pmeta.s, use);
@@ -130,10 +130,9 @@
 
     function doLabel(label) {
         var c = label.class || 'gray1',
-            p = label.pos || [0, 0],
-            sz = label.size || 1.0;
-
-            spriteLayer.append('g')
+            p = label.pos || [0,0],
+            sz = label.size || 1.0,
+            g = spriteLayer.append('g')
                 .classed(c, true)
                 .attr('transform', sus.translate(p))
                 .append('text')
@@ -175,7 +174,7 @@
         load = data.load;
         pfx = tssid + '[' + name + ']: ';
 
-        $log.debug('Loading sprites...[' + name + ']', desc);
+        $log.debug("Loading sprites...[" + name + "]", desc);
 
         function no(what) {
             warn.push(pfx + 'No ' + what + ' property defined');
@@ -196,7 +195,7 @@
         paths.forEach(function (p) {
             pathmeta[p.tag] = {
                 s: p.stroke,
-                u: p.glyph || 'spr_' + p.tag,
+                u: p.glyph || 'spr_' + p.tag
             };
         });
 
@@ -234,7 +233,7 @@
         $log.info(tssid + 'Requesting sprite definition ['+name+']...');
 
         wss.sendEvent('spriteListRequest');
-        wss.sendEvent('spriteDataRequest', { name: name });
+        wss.sendEvent('spriteDataRequest', {name: name});
     }
 
     // === -----------------------------------------------------
@@ -242,11 +241,12 @@
 
     angular.module('ovTopo')
     .factory('TopoSpriteService',
-        ['$log', 'FnService', 'GlyphService',
+        ['$log', '$http', 'FnService', 'GlyphService',
             'SvgUtilService', 'WebSocketService',
 
-        function (_$log_, _fs_, _gs_, _sus_, _wss_) {
+        function (_$log_, _$http_, _fs_, _gs_, _sus_, _wss_) {
             $log = _$log_;
+            $http = _$http_;
             fs = _fs_;
             gs = _gs_;
             sus = _sus_;
@@ -255,7 +255,7 @@
             return {
                 loadSprites: loadSprites,
                 spriteListResponse: inList,
-                spriteDataResponse: inData,
+                spriteDataResponse: inData
             };
         }]);
 
diff --git a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
index 505dabf..82d14ac 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
@@ -42,7 +42,7 @@
 
     // key to button mapping data
     var k2b = {
-        O: { id: 'summary-tog', gid: 'm_summary', isel: true },
+        O: { id: 'summary-tog', gid: 'm_summary', isel: true},
         I: { id: 'instance-tog', gid: 'm_uiAttached', isel: true },
         D: { id: 'details-tog', gid: 'm_details', isel: true },
         H: { id: 'hosts-tog', gid: 'm_endstation', isel: false },
@@ -57,12 +57,12 @@
         L: { id: 'cycleLabels-btn', gid: 'm_cycleLabels' },
         R: { id: 'resetZoom-btn', gid: 'm_resetZoom' },
 
-        E: { id: 'eqMaster-btn', gid: 'm_eqMaster' },
+        E: { id: 'eqMaster-btn', gid: 'm_eqMaster' }
     };
 
     var prohibited = [
         'T', 'backSlash', 'slash',
-        'X', // needed until we re-instate X above.
+        'X' // needed until we re-instate X above.
     ];
     prohibited = prohibited.concat(d3.map(k2b).keys());
 
@@ -79,8 +79,8 @@
             porthl: 1,
             bg: 0,
             spr: 0,
-            ovid: 'traffic', // default to traffic overlay
-            toolbar: 0,
+            ovid: 'traffic',   // default to traffic overlay
+            toolbar: 0
         },
         prefsMap = {
             summary: 'O',
@@ -90,7 +90,7 @@
             offdev: 'M',
             porthl: 'P',
             bg: 'B',
-            spr: 'S',
+            spr: 'S'
             // NOTE: toolbar state is handled separately
         };
 
@@ -125,10 +125,10 @@
     function initKeyData() {
         // TODO: use angular forEach instead of d3.map
         keyData = d3.map(k2b);
-        keyData.forEach(function (key, value) {
+        keyData.forEach(function(key, value) {
             var data = api.getActionEntry(key);
-            value.cb = data[0]; // on-click callback
-            value.tt = data[1] + ' (' + key + ')'; // tooltip
+            value.cb = data[0];                     // on-click callback
+            value.tt = data[1] + ' (' + key + ')';  // tooltip
         });
     }
 
@@ -158,7 +158,7 @@
     }
 
     function addSecondRow() {
-        // addToggle('X');
+        //addToggle('X');
         addToggle('Z');
         addButton('N');
         addButton('L');
@@ -176,7 +176,7 @@
                 tooltip: 'No Overlay',
                 cb: function () {
                     tov.tbSelection(null, switchOverlayActions);
-                },
+                }
             }];
         ovIndex = tov.augmentRbset(rset, switchOverlayActions);
         ovRset = toolbar.addRadioSet('topo-overlays', rset);
@@ -317,7 +317,7 @@
                 toggleToolbar: toggleToolbar,
                 selectOverlay: selectOverlay,
                 defaultPrefs: defaultPrefsState,
-                fnkey: fnkey,
+                fnkey: fnkey
             };
         }]);
-}());
+}());
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo/topoTraffic.js b/web/gui/src/main/webapp/app/view/topo/topoTraffic.js
index 6bde992..11a4dba 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoTraffic.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoTraffic.js
@@ -23,7 +23,7 @@
     'use strict';
 
     // injected refs
-    var $log, flash, wss, api;
+    var $log, fs, flash, wss, api;
 
     /*
        API to topoForce
@@ -35,12 +35,12 @@
     var allTrafficTypes = [
             'flowStatsBytes',
             'portStatsBitSec',
-            'portStatsPktSec',
+            'portStatsPktSec'
         ],
         allTrafficMsgs = [
             'Flow Stats (bytes)',
             'Port Stats (bits / second)',
-            'Port Stats (packets / second)',
+            'Port Stats (packets / second)'
         ];
 
     // internal state
@@ -49,6 +49,7 @@
         allTrafficIndex = 0;
 
 
+
     // === -----------------------------------------------------
     //  Helper functions
 
@@ -77,7 +78,7 @@
         if (api.somethingSelected()) {
             wss.sendEvent('requestDeviceLinkFlows', {
                 ids: api.selectOrder(),
-                hover: hoverValid() ? hov.id : '',
+                hover: hoverValid() ? hov.id : ''
             });
         }
     }
@@ -96,7 +97,7 @@
         if (api.somethingSelected()) {
             wss.sendEvent('requestRelatedIntents', {
                 ids: api.selectOrder(),
-                hover: hoverValid() ? hov.id : '',
+                hover: hoverValid() ? hov.id : ''
             });
         }
     }
@@ -120,19 +121,19 @@
         trafficMode = 'allFlowPort';
         hoverMode = null;
         wss.sendEvent('requestAllTraffic', {
-            trafficType: allTrafficTypes[allTrafficIndex],
+            trafficType: allTrafficTypes[allTrafficIndex]
         });
         flash.flash(allTrafficMsgs[allTrafficIndex]);
         allTrafficIndex = (allTrafficIndex + 1) % 3;
     }
 
-    function showDeviceLinkFlows() {
+    function showDeviceLinkFlows () {
         trafficMode = hoverMode = 'flows';
         requestDeviceLinkFlows();
         flash.flash('Device Flows');
     }
 
-    function showRelatedIntents() {
+    function showRelatedIntents () {
         trafficMode = hoverMode = 'intents';
         requestRelatedIntents();
         flash.flash('Related Paths');
@@ -174,25 +175,25 @@
     // === ------------------------------------------------------
     // action buttons on detail panel (multiple selection)
 
-    function addHostIntent() {
+    function addHostIntent () {
         var so = api.selectOrder();
         wss.sendEvent('addHostIntent', {
             one: so[0],
             two: so[1],
-            ids: so,
+            ids: so
         });
         trafficMode = 'intents';
         hoverMode = null;
         flash.flash('Host-to-Host flow added');
     }
 
-    function removeIntent(d) {
+    function removeIntent (d) {
         $log.debug('Entering removeIntent');
         wss.sendEvent('removeIntent', {
             appId: d.appId,
             appName: d.appName,
             key: d.key,
-            purge: d.intentPurge,
+            purge: d.intentPurge
         });
         trafficMode = 'intents';
         hoverMode = null;
@@ -200,32 +201,32 @@
         flash.flash('Intent ' + txt);
     }
 
-    function resubmitIntent(d) {
+    function resubmitIntent (d) {
         $log.debug('Entering resubmitIntent');
         wss.sendEvent('resubmitIntent', {
             appId: d.appId,
             appName: d.appName,
             key: d.key,
-            purge: d.intentPurge,
+            purge: d.intentPurge
         });
         trafficMode = 'intents';
         hoverMode = null;
         flash.flash('Intent resubmitted');
     }
 
-    function addMultiSourceIntent() {
+    function addMultiSourceIntent () {
         var so = api.selectOrder();
         wss.sendEvent('addMultiSourceIntent', {
             src: so.slice(0, so.length - 1),
             dst: so[so.length - 1],
-            ids: so,
+            ids: so
         });
         trafficMode = 'intents';
         hoverMode = null;
         flash.flash('Multi-Source flow added');
     }
 
-    function removeIntents() {
+    function removeIntents () {
         $log.debug('Entering removeIntents');
         wss.sendEvent('removeIntents', {});
         trafficMode = 'intents';
@@ -239,10 +240,11 @@
 
     angular.module('ovTopo')
     .factory('TopoTrafficService',
-        ['$log', 'FnService', 'WebSocketService',
+        ['$log', 'FnService', 'FlashService', 'WebSocketService',
 
-        function (_$log_, _flash_, _wss_) {
+        function (_$log_, _fs_, _flash_, _wss_) {
             $log = _$log_;
+            fs = _fs_;
             flash = _flash_;
             wss = _wss_;
 
@@ -269,7 +271,7 @@
                 addMultiSourceIntent: addMultiSourceIntent,
                 removeIntent: removeIntent,
                 resubmitIntent: resubmitIntent,
-                removeIntents: removeIntents,
+                removeIntents: removeIntents
             };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js b/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
index c395e04..7877e93 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
@@ -41,12 +41,12 @@
         // NOTE: Traffic glyphs already installed as part of the base ONOS set.
 
         activate: function () {
-            $log.debug('Traffic overlay ACTIVATED');
+            $log.debug("Traffic overlay ACTIVATED");
         },
 
         deactivate: function () {
             tts.cancelTraffic(true);
-            $log.debug('Traffic overlay DEACTIVATED');
+            $log.debug("Traffic overlay DEACTIVATED");
         },
 
         // detail panel button definitions
@@ -55,14 +55,14 @@
             showDeviceFlows: {
                 gid: 'm_flows',
                 tt: 'Show Device Flows',
-                cb: function (data) { tts.showDeviceLinkFlows(); },
+                cb: function (data) { tts.showDeviceLinkFlows(); }
             },
 
             showRelatedTraffic: {
                 gid: 'm_relatedIntents',
                 tt: 'Show Related Traffic',
-                cb: function (data) { tts.showRelatedIntents(); },
-            },
+                cb: function (data) { tts.showRelatedIntents(); }
+            }
         },
 
         // key bindings for traffic overlay toolbar buttons
@@ -71,43 +71,43 @@
             0: {
                 cb: function () { tts.cancelTraffic(true); },
                 tt: 'Cancel traffic monitoring',
-                gid: 'm_xMark',
+                gid: 'm_xMark'
             },
 
             A: {
                 cb: function () { tts.showAllTraffic(); },
                 tt: 'Monitor all traffic',
-                gid: 'm_allTraffic',
+                gid: 'm_allTraffic'
             },
             F: {
                 cb: function () { tts.showDeviceLinkFlows(); },
                 tt: 'Show device link flows',
-                gid: 'm_flows',
+                gid: 'm_flows'
             },
             V: {
                 cb: function () { tts.showRelatedIntents(); },
                 tt: 'Show all related intents',
-                gid: 'm_relatedIntents',
+                gid: 'm_relatedIntents'
             },
             leftArrow: {
                 cb: function () { tts.showPrevIntent(); },
                 tt: 'Show previous related intent',
-                gid: 'm_prev',
+                gid: 'm_prev'
             },
             rightArrow: {
                 cb: function () { tts.showNextIntent(); },
                 tt: 'Show next related intent',
-                gid: 'm_next',
+                gid: 'm_next'
             },
             W: {
                 cb: function () { tts.showSelectedIntentTraffic(); },
                 tt: 'Monitor traffic of selected intent',
-                gid: 'm_intentTraffic',
+                gid: 'm_intentTraffic'
             },
 
             _keyOrder: [
-                '0', 'A', 'F', 'V', 'leftArrow', 'rightArrow', 'W',
-            ],
+                '0', 'A', 'F', 'V', 'leftArrow', 'rightArrow', 'W'
+            ]
         },
 
         hooks: {
@@ -146,8 +146,8 @@
             showIntent: function (info) {
                 $log.debug('^^ trafficOverlay.showintent() ^^', info);
                 tts.selectIntent(info);
-            },
-        },
+            }
+        }
     };
 
     // invoke code to register with the overlay service
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.js b/web/gui/src/main/webapp/app/view/topo2/topo2.js
index 95082f1..db64e14 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js
@@ -22,10 +22,10 @@
 
 (function () {
     'use strict';
-
+    
     // references to injected services
     var $scope, $log, fs, mast, ks, wss,
-        gs, sus, t2es, t2fs, t2is, t2bcs, t2kcs, t2ms, t2zs;
+        gs, sus, ps, t2es, t2fs, t2is, t2bcs, t2kcs, t2ms, t2mcs, t2zs;
 
     // DOM elements
     var ovtopo2, svg, defs, zoomLayer, forceG;
@@ -59,11 +59,11 @@
         var sc = zoomer.scale(),
             tr = zoomer.translate(),
             metaUi = isNaN(sc) ? {
-                useCfg: 1,
+                useCfg: 1
             } : {
                 scale: sc,
                 offsetX: tr[0],
-                offsetY: tr[1],
+                offsetY: tr[1]
             };
 
         // Allow map service to react to change in zoom parameters
@@ -74,7 +74,7 @@
 
         wss.sendEvent('updateMeta2', {
             id: 'layoutZoom',
-            memento: metaUi,
+            memento: metaUi
         });
     }
 
@@ -85,7 +85,7 @@
             svg: svg,
             zoomLayer: zoomLayer,
             zoomEnabled: zoomEnabled,
-            zoomCallback: zoomCallback,
+            zoomCallback: zoomCallback
         });
     }
 
@@ -95,20 +95,22 @@
     .controller('OvTopo2Ctrl', [
         '$scope', '$log', '$location',
         'FnService', 'MastService', 'KeyService', 'GlyphService', 'MapService',
-        'SvgUtilService', 'FlashService', 'WebSocketService', 'ThemeService',
+        'SvgUtilService', 'FlashService', 'WebSocketService',
+        'PrefsService', 'ThemeService',
         'Topo2EventService', 'Topo2ForceService', 'Topo2InstanceService',
         'Topo2BreadcrumbService', 'Topo2KeyCommandService', 'Topo2MapService',
-        'Topo2ZoomService', 'Topo2SpriteLayerService',
+        'Topo2MapConfigService', 'Topo2ZoomService', 'Topo2SpriteLayerService',
         'Topo2SummaryPanelService', 'Topo2DeviceDetailsPanel', 'Topo2ToolbarService',
         'Topo2NoDevicesConnectedService', 'Topo2OverlayService',
 
         function (
             _$scope_, _$log_, _$loc_,
             _fs_, _mast_, _ks_, _gs_, _ms_,
-            _sus_, _flash_, _wss_, _th_,
+            _sus_, _flash_, _wss_,
+            _ps_, _th_,
             _t2es_, _t2fs_, _t2is_,
             _t2bcs_, _t2kcs_, _t2ms_,
-            _t2zs_, t2sls,
+            _t2mcs_, _t2zs_, t2sls,
             summaryPanel, detailsPanel, t2tbs, t2ndcs, t2os
         ) {
             var params = _$loc_.search(),
@@ -116,7 +118,7 @@
                 wh,
                 uplink = {
                     zoomLayer: function () { return zoomLayer; },
-                    zoomer: function () { return zoomer; },
+                    zoomer: function () { return zoomer; }
                 };
 
             $scope = _$scope_;
@@ -128,6 +130,7 @@
             wss = _wss_;
             gs = _gs_;
             sus = _sus_;
+            ps = _ps_;
 
             t2es = _t2es_;
             t2fs = _t2fs_;
@@ -135,6 +138,7 @@
             t2bcs = _t2bcs_;
             t2kcs = _t2kcs_;
             t2ms = _t2ms_;
+            t2mcs = _t2mcs_;
             t2zs = _t2zs_;
 
             // capture selected intent parameters (if they are set in the
@@ -148,7 +152,7 @@
                     key: params.intentKey,
                     appId: params.intentAppId,
                     appName: params.intentAppName,
-                    intentType: params.intentType,
+                    intentType: params.intentType
                 };
             }
 
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Background.js b/web/gui/src/main/webapp/app/view/topo2/topo2Background.js
index 127ba86..902ebdc 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Background.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Background.js
@@ -116,10 +116,10 @@
                     resetZoom: function () {
                         var pan = zoomPan(this.zoomData, true);
                         t2zs.panAndZoom(pan, zoomScale(this.zoomData, true), 1000);
-                    },
+                    }
                 });
 
                 return instance || new BackgroundView();
-            },
+            }
         ]);
-})();
+})();
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Badge.js b/web/gui/src/main/webapp/app/view/topo2/topo2Badge.js
index e602aab..429627e 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Badge.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Badge.js
@@ -20,4 +20,4 @@
  usage: new NodeBadge({text, icon}, DOM Element, Node);
  */
 
-// TODO: Create a badge class
+// TODO: Create a badge class
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
index 3ff7932..d2a1391 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Breadcrumb.js
@@ -23,11 +23,12 @@
 
     'use strict';
 
-    var t2rns;
+    var $log, $loc, wss, t2rns;
 
     // Internal
     var breadcrumbContainer,
-        breadcrumbs;
+        breadcrumbs,
+        layout;
 
     function init() {
         breadcrumbs = [];
@@ -95,21 +96,27 @@
             });
     }
 
-    // TODO: Remove references
-    function addLayout(_layout_) {}
+    function addLayout(_layout_) {
+        layout = _layout_;
+    }
 
     angular.module('ovTopo2')
     .factory('Topo2BreadcrumbService', [
+        '$log', '$location', 'WebSocketService',
         'Topo2RegionNavigationService',
-        function (_t2rns_) {
+        function (_$log_, _$loc_, _wss_, _t2rns_) {
+
+            $log = _$log_;
+            $loc = _$loc_;
+            wss = _wss_;
             t2rns = _t2rns_;
 
             return {
                 init: init,
                 addBreadcrumb: addBreadcrumb,
                 addLayout: addLayout,
-                hide: hide,
+                hide: hide
             };
-        },
+        }
     ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Collection.js b/web/gui/src/main/webapp/app/view/topo2/topo2Collection.js
index f4790bd..3218988 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Collection.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Collection.js
@@ -116,7 +116,7 @@
             return this.models.map(function (model) {
                 return model.toJSON(options);
             });
-        },
+        }
     };
 
     angular.module('ovTopo2')
@@ -126,7 +126,7 @@
                 Collection.extend = fn.extend;
                 Model = _Model_;
                 return Collection;
-            },
+            }
         ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js
index 9ed6a0e..fd55a08 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js
@@ -43,7 +43,7 @@
         panelPadding = 64,
         panelSpacing = 20,
         panelOpts = {
-            width: 260, // summary and detail panel width
+            width: 260          // summary and detail panel width
         };
 
     function getInstance(_summaryPanel_) {
@@ -54,7 +54,7 @@
         summaryPanel = _summaryPanel_;
 
         var options = angular.extend({}, panelOpts, {
-            class: className,
+            class: className
         });
 
         Panel = Panel.extend({
@@ -84,7 +84,7 @@
                 detailsPanel.el.el()
                     .style('top', panelPadding + position + 'px');
                 detailsPanel.el.show();
-            },
+            }
         });
 
         detailsPanel = new Panel(id, options);
@@ -94,6 +94,7 @@
     }
 
 
+
     angular.module('ovTopo2')
     .factory('Topo2DetailsPanelService', [
         'Topo2PanelService',
@@ -101,6 +102,6 @@
             Panel = _ps_;
 
             return getInstance;
-        },
+        }
     ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
index ae8ebd9..8f7edd9 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Device.js
@@ -26,13 +26,13 @@
 
     var remappedDeviceTypes = {
         switch: 'm_switch',
-        virtual: 'cord',
+        virtual: 'cord'
     };
 
     function createDeviceCollection(data) {
 
         var DeviceCollection = Collection.extend({
-            model: Model,
+            model: Model
         });
 
         var devices = [];
@@ -58,7 +58,7 @@
                     nodeType: 'device',
                     multiSelectEnabled: true,
                     events: {
-                        'click': 'onClick',
+                        'click': 'onClick'
                     },
 
                     initialize: function () {
@@ -88,7 +88,7 @@
                         var id = this.mastershipService.mastership(),
                             suppress = id ? this.get('master') !== id : false;
 
-                        this.set({ mastership: suppress });
+                        this.set({mastership: suppress});
                     },
                     setOfflineVisibility: function () {
                         var showOffline = ps.getPrefs('topo2_prefs')['offline_devices'],
@@ -107,13 +107,13 @@
                             .style('stroke-fill', '#555')
                             .style('fill', '#888')
                             .style('opacity', 0.5);
-                    },
+                    }
                 });
 
                 return {
-                    createDeviceCollection: createDeviceCollection,
+                    createDeviceCollection: createDeviceCollection
                 };
-            },
+            }
         ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2DeviceDetailsPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2DeviceDetailsPanel.js
index 1ff054c..3cacf8b 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2DeviceDetailsPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2DeviceDetailsPanel.js
@@ -32,35 +32,35 @@
     var id = 'topo2-p-detail',
         devicePath = 'device',
         handlerMap = {
-            'showDetails': showDetails,
+            'showDetails': showDetails
         };
 
     var coreButtons = {
         showDeviceView: {
             gid: 'switch',
             tt: 'Show Device View',
-            path: 'device',
+            path: 'device'
         },
         showFlowView: {
             gid: 'flowTable',
             tt: 'Show Flow View for this Device',
-            path: 'flow',
+            path: 'flow'
         },
         showPortView: {
             gid: 'portTable',
             tt: 'Show Port View for this Device',
-            path: 'port',
+            path: 'port'
         },
         showGroupView: {
             gid: 'groupTable',
             tt: 'Show Group View for this Device',
-            path: 'group',
+            path: 'group'
         },
         showMeterView: {
             gid: 'meterTable',
             tt: 'Show Meter View for this Device',
-            path: 'meter',
-        },
+            path: 'meter'
+        }
     };
 
     function init(summaryPanel) {
@@ -94,7 +94,7 @@
                     id: 'core-' + id,
                     gid: gid,
                     tt: tt,
-                    cb: function () { ns.navTo(path, { devId: devId }); },
+                    cb: function () { ns.navTo(path, { devId: devId }); }
                 });
             }
         });
@@ -168,7 +168,7 @@
     function updateDetails(id, nodeType) {
         wss.sendEvent('requestDetails', {
             id: id,
-            class: nodeType,
+            class: nodeType
         });
     }
 
@@ -223,8 +223,8 @@
                 hide: hide,
                 destroy: destroy,
                 isVisible: function () { return detailsPanel.isVisible(); },
-                getInstance: function () { return detailsPanel; },
+                getInstance: function () { return detailsPanel; }
             };
-        },
+        }
     ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Event.js b/web/gui/src/main/webapp/app/view/topo2/topo2Event.js
index fc245f4..e8b8eac 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Event.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Event.js
@@ -98,7 +98,7 @@
             return {
                 bindHandlers: bindHandlers,
                 start: start,
-                stop: stop,
+                stop: stop
             };
         }]);
 })();
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 c75935e..b18ff32 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
@@ -26,7 +26,10 @@
     var $log, $loc, wss;
 
     var t2is, t2rs, t2ls, t2vs, t2bcs, t2ss, t2bgs, t2tbs, t2mss;
-    var svg, uplink, dim, opts, zoomer;
+    var svg, forceG, uplink, dim, opts, zoomer;
+
+    // D3 Selections
+    var node;
 
     // ========================== Helper Functions
 
@@ -60,7 +63,7 @@
         $log.debug('navToBookmarkedRegion:', regionId);
         if (regionId) {
             wss.sendEvent('topo2navRegion', {
-                rid: regionId,
+                rid: regionId
             });
 
             t2ls.createForceElements();
@@ -220,7 +223,7 @@
                 updateNodes: updateNodes,
                 updateLinks: updateLinks,
                 resetNodeLocation: resetNodeLocation,
-                unpin: unpin,
+                unpin: unpin
             };
         }]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js b/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
index a1eff3d..ed3a981 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
@@ -32,7 +32,7 @@
     function createHostCollection(data, region) {
 
         var HostCollection = Collection.extend({
-            model: Model,
+            model: Model
         });
 
         var hosts = [];
@@ -57,7 +57,7 @@
 
                 nodeType: 'host',
                 events: {
-                    'click': 'onClick',
+                    'click': 'onClick'
                 },
                 initialize: function () {
                     this.super = this.constructor.__super__;
@@ -69,7 +69,7 @@
                         this.el.attr('class', this.svgClassName());
                     }
                 },
-                showDetails: function () {
+                showDetails: function() {
                     t2hds.displayPanel(this);
                 },
                 icon: function () {
@@ -118,7 +118,7 @@
                         width: glyphSize,
                         height: glyphSize,
                         x: -glyphSize / 2,
-                        y: -glyphSize / 2,
+                        y: -glyphSize / 2
                     });
 
                     var labelText = this.label();
@@ -132,13 +132,13 @@
                     this.setScale();
                     this.setUpEvents();
                     this.setVisibility();
-                },
+                }
             });
 
             return {
-                createHostCollection: createHostCollection,
+                createHostCollection: createHostCollection
             };
-        },
+        }
     ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js
index 410c9ee..fcc3f31 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js
@@ -40,8 +40,8 @@
                 '-': '',
                 'MAC': data.get('id'),
                 'IP': data.get('ips')[0],
-                'VLAN': 'None', // TODO: VLAN is not currently in the data received from backend
-            },
+                'VLAN': 'None' // TODO: VLAN is not currently in the data received from backend
+            }
         };
 
         if (data.get('location')) {
@@ -111,9 +111,9 @@
                 hide: hide,
                 toggle: toggle,
                 destroy: destroy,
-                isVisible: function () { return hostPanel.isVisible(); },
+                isVisible: function () { return hostPanel.isVisible(); }
             };
-        },
+        }
     ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js b/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js
index de7c09e..044e3d6 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js
@@ -4,12 +4,15 @@
     // injected refs
     var $log, ps, sus, gs, flash, ts, t2mss;
 
+    // api from topo
+    var api;
+
     // configuration
     var showLogicErrors = true,
         idIns = 'topo2-p-instance',
         instOpts = {
             edge: 'left',
-            width: 20,
+            width: 20
         };
 
     // internal state
@@ -94,24 +97,24 @@
             instSvg = {
                 width: 170,
                 height: 85,
-                viewBox: '0 0 170 85',
+                viewBox: '0 0 170 85'
             },
             headRect = {
                 x: rox,
                 y: roy,
                 width: rw,
-                height: rhh,
+                height: rhh
             },
             bodyRect = {
                 x: rox,
                 y: roy + rhh,
                 width: rw,
-                height: rbh,
+                height: rbh
             },
             titleAttr = {
                 class: 'instTitle',
                 x: tx,
-                y: 27,
+                y: 27
             };
 
         var onoses = oiBox.el().selectAll('.onosInst')
@@ -177,7 +180,7 @@
                 svg.append('text').attr({
                     class: 'instLabel ' + id,
                     x: tx,
-                    y: ty,
+                    y: ty
                 }).text(label);
                 ty += 18;
             }
@@ -212,7 +215,8 @@
         }
     }
 
-    function initInst() {
+    function initInst(_api_) {
+        api = _api_;
         oiBox = ps.createPanel(idIns, instOpts);
         oiBox.show();
 
@@ -282,9 +286,9 @@
                     allInstances: allInstances,
                     destroy: destroy,
                     toggle: toggle,
-                    isVisible: function () { return oiBox.isVisible(); },
+                    isVisible: function () { return oiBox.isVisible(); }
                 };
-            },
+            }
         ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js b/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
index 554ee06..939b9d2 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
@@ -18,7 +18,7 @@
 
     // Injected Services
     var $log, fs, ks, flash, wss, t2ps, t2bgs, ps, t2is, t2sp, t2vs, t2rs,
-        t2fs, t2tbs;
+        t2fs, t2sls, t2tbs;
 
     // Commmands
     function actionMap() {
@@ -38,8 +38,8 @@
 
             esc: handleEscape,
 
-            _keyListener: t2tbs.keyListener.bind(t2tbs),
-        };
+            _keyListener: t2tbs.keyListener.bind(t2tbs)
+        }
     }
 
     function init(_t2fs_, _t2tbs_) {
@@ -74,7 +74,7 @@
             ['shift-click', 'Toggle selection state'],
             ['drag', 'Reposition (and pin) device / host'],
             ['cmd-scroll', 'Zoom in / out'],
-            ['cmd-drag', 'Pan'],
+            ['cmd-drag', 'Pan']
         ]);
     }
 
@@ -170,12 +170,12 @@
 
     function toggleHosts() {
         var on = t2rs.toggleHosts();
-        actionedFlashed(on ? 'Show': 'Hide', 'Hosts');
+        actionedFlashed(on ? 'Show': 'Hide', 'Hosts')
     }
 
     function toggleOfflineDevices() {
         var on = t2rs.toggleOfflineDevices();
-        actionedFlashed(on ? 'Show': 'Hide', 'offline devices');
+        actionedFlashed(on ? 'Show': 'Hide', 'offline devices')
     }
 
     function notValid(what) {
@@ -204,10 +204,10 @@
         '$log', 'FnService', 'KeyService', 'FlashService', 'WebSocketService',
         'Topo2PrefsService', 'Topo2BackgroundService', 'PrefsService',
         'Topo2InstanceService', 'Topo2SummaryPanelService', 'Topo2ViewService',
-        'Topo2RegionService',
+        'Topo2RegionService', 'Topo2SpriteLayerService',
 
         function (_$log_, _fs_, _ks_, _flash_, _wss_, _t2ps_, _t2bgs_, _ps_,
-                  _t2is_, _t2sp_, _t2vs_, _t2rs_) {
+                  _t2is_, _t2sp_, _t2vs_, _t2rs_, _t2sls_) {
 
             $log = _$log_;
             fs = _fs_;
@@ -221,12 +221,13 @@
             t2sp = _t2sp_;
             t2vs = _t2vs_;
             t2rs = _t2rs_;
+            t2sls = _t2sls_;
 
             return {
                 init: init,
                 bindCommands: bindCommands,
-                getActionEntry: getActionEntry,
+                getActionEntry: getActionEntry
             };
-        },
+        }
     ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Label.js b/web/gui/src/main/webapp/app/view/topo2/topo2Label.js
index e00febd..28f134c 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Label.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Label.js
@@ -25,20 +25,20 @@
     var defaultStyles = {
         label: {
             text: {
-                fill: '#000000',
+                fill: '#000000'
             },
             rect: {
-                fill: '#ffffff',
-            },
+                fill: '#ffffff'
+            }
         },
         icon: {
             glyph: {
-                fill: '#000000',
+                fill: '#000000'
             },
             rect: {
-                fill: '#ffffff',
-            },
-        },
+                fill: '#ffffff'
+            }
+        }
     };
 
     angular.module('ovTopo2')
@@ -69,9 +69,9 @@
                             this._labelG.text.text(this.get('label'));
                             this._labelG.rect.attr({
                                 width: width,
-                                height: height,
+                                height: height
                             }).style({
-                                transform: sus.translate(-(width/2) + 'px', -(height/2) + 'px'),
+                                transform: sus.translate(-(width/2) + 'px', -(height/2) + 'px')
                             });
                         }
                     },
@@ -108,9 +108,9 @@
 
                         this._labelG.rect.attr({
                             width: this._labelG.text.node().getBBox().width + 20,
-                            height: this._labelG.text.node().getBBox().height + 10,
+                            height: this._labelG.text.node().getBBox().height + 10
                         }).style({
-                            transform: sus.translate('-50%', '-50%'),
+                            transform: sus.translate('-50%', '-50%')
                         });
                     },
                     renderIcon: function () {
@@ -123,7 +123,7 @@
                         this._iconG.rect = this._iconG.el.append('rect')
                             .attr({
                                 width: this.iconSize,
-                                height: this.iconSize,
+                                height: this.iconSize
                             });
 
                         this._iconG.glyph = is.addDeviceIcon(this._iconG.el,
@@ -131,9 +131,9 @@
 
 
                         var iconX = (-bbox.width / 2) - this.iconSize + 'px',
-                            iconY = -this.iconSize /2 + 'px';
+                            iconY = -this.iconSize /2  + 'px';
                         this._iconG.el.style({
-                            transform: sus.translate(iconX, iconY),
+                            transform: sus.translate(iconX, iconY)
                         });
                     },
                     beforeRender: function () {},
@@ -141,7 +141,7 @@
                         this.el = this.parent.append('g')
                             .attr('class', 'topo2-label')
                             .style({
-                                transform: 'translate(300px, 300px)',
+                                transform: 'translate(300px, 300px)'
                             });
 
                         this.content = this.el.append('g')
@@ -160,8 +160,8 @@
                     afterRender: function () {},
                     remove: function () {
                         this.el.remove();
-                    },
+                    }
                 });
-            },
+            }
         ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2LabelCollection.js b/web/gui/src/main/webapp/app/view/topo2/topo2LabelCollection.js
index 64c5a55..ba05bb5 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2LabelCollection.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2LabelCollection.js
@@ -36,13 +36,13 @@
                         if (this._byId[label.id]) {
                             this.get(label.id).set(label);
                         } else {
-                            var lab = new Model(label, targetNode, options);
+                            var lab = new Model(label, targetNode, options)
                             this.add(lab);
                         }
-                    },
+                    }
                 });
 
                 return instance || new LabelCollection();
-            },
+            }
         ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
index 7be4c6a..a64a75b 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
@@ -34,20 +34,20 @@
             device: -8000,
             host: -20000,
             region: -8000,
-            _def_: -12000,
+            _def_: -12000
         },
         linkDistance: {
             // note: key is link.type
             direct: 100,
             optical: 120,
             UiEdgeLink: 100,
-            _def_: 50,
+            _def_: 50
         },
         linkStrength: {
             // note: key is link.type
             // range: {0.0 ... 1.0}
-            _def_: 1.0,
-        },
+            _def_: 1.0
+        }
     };
 
     // configuration
@@ -55,20 +55,20 @@
         light: {
             baseColor: '#939598',
             inColor: '#66f',
-            outColor: '#f00',
+            outColor: '#f00'
         },
         dark: {
             // TODO : theme
             baseColor: '#939598',
             inColor: '#66f',
-            outColor: '#f00',
+            outColor: '#f00'
         },
         inWidth: 12,
-        outWidth: 10,
+        outWidth: 10
     };
 
     // internal state
-    var nodeLock = false; // whether nodes can be dragged or not (locked)
+    var nodeLock = false;       // whether nodes can be dragged or not (locked)
 
     // predicate that indicates when clicking is active
     function clickEnabled() {
@@ -117,7 +117,7 @@
                             linkLabelG: this.addElement(this.forceG, 'topo2-linkLabels'),
                             numLinksLabels: this.addElement(this.forceG, 'topo2-numLinkLabels'),
                             nodeG: this.addElement(this.forceG, 'topo2-nodes'),
-                            portLabels: this.addElement(this.forceG, 'topo2-portLabels'),
+                            portLabels: this.addElement(this.forceG, 'topo2-portLabels')
                         };
                     },
                     addElement: function (parent, className) {
@@ -138,7 +138,7 @@
                             .linkStrength(this.settingOrDefault.bind(this, 'linkStrength'))
                             .nodes([])
                             .links([])
-                            .on('tick', this.tick.bind(this))
+                            .on("tick", this.tick.bind(this))
                             .start();
 
                         this.drag = sus.createDragBehavior(this.force,
@@ -173,15 +173,15 @@
                                     var dx = isNaN(d.x) ? 0 : d.x,
                                         dy = isNaN(d.y) ? 0 : d.y;
                                     return sus.translate(dx, dy);
-                                },
+                                }
                             });
 
                         this.link
                             .each(this.setLinkPosition)
-                            .attr('x1', function (d) { return d.get('position').x1; })
-                            .attr('y1', function (d) { return d.get('position').y1; })
-                            .attr('x2', function (d) { return d.get('position').x2; })
-                            .attr('y2', function (d) { return d.get('position').y2; });
+                            .attr("x1", function (d) { return d.get('position').x1; })
+                            .attr("y1", function (d) { return d.get('position').y1; })
+                            .attr("x2", function (d) { return d.get('position').x2; })
+                            .attr("y2", function (d) { return d.get('position').y2; });
                     },
 
                     start: function () {
@@ -215,13 +215,13 @@
                                     // Need to guard against NaN here ??
                                     return sus.translate(d.node.x, d.node.y);
                                 },
-                                opacity: 0,
+                                opacity: 0
                             })
                             .call(this.drag)
                             .transition()
                             .attr('opacity', 1);
 
-                        entering.each(function (d) { d.onEnter(this, d); });
+                        entering.each(function (d) { d.onEnter(this, d) });
 
                         this.force.nodes(regionNodes);
                     },
@@ -242,10 +242,10 @@
                                 x2: function (d) { return d.get('position').x2; },
                                 y2: function (d) { return d.get('position').y2; },
                                 stroke: linkConfig.light.inColor,
-                                'stroke-width': linkConfig.inWidth,
+                                'stroke-width': linkConfig.inWidth
                             });
 
-                        entering.each(function (d) { d.onEnter(this, d); });
+                        entering.each(function (d) { d.onEnter(this, d) });
 
                         // operate on exiting links:
                         this.link.exit()
@@ -280,15 +280,15 @@
                                 y: d.y,
                                 equivLoc: {
                                     lng: ll[0],
-                                    lat: ll[1],
-                                },
+                                    lat: ll[1]
+                                }
                             };
                         }
                         d.metaUi = metaUi;
                         wss.sendEvent('updateMeta2', {
                             id: d.get('id'),
                             class: d.get('class'),
-                            memento: metaUi,
+                            memento: metaUi
                         });
                     },
                     setDimensions: function () {
@@ -341,12 +341,12 @@
                             .style('opacity', 1)
                             .each('end', function () {
                                 t2rns.navigateToRegionComplete();
-                            }); ;
+                            });;
                     },
                     navigateToRegionHandler: function () {
                         this.createForceElements();
                         this.transitionDownRegion();
-                    },
+                    }
                 });
 
                 function getInstance(svg, forceG, uplink, dim, zoomer, opts) {
@@ -354,7 +354,7 @@
                 }
 
                 return getInstance();
-            },
+            }
         ]
     );
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Link.js b/web/gui/src/main/webapp/app/view/topo2/topo2Link.js
index 9a25894..6954920 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Link.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Link.js
@@ -39,16 +39,16 @@
         light: {
             baseColor: '#939598',
             inColor: '#66f',
-            outColor: '#f00',
+            outColor: '#f00'
         },
         dark: {
             // TODO : theme
             baseColor: '#939598',
             inColor: '#66f',
-            outColor: '#f00',
+            outColor: '#f00'
         },
         inWidth: 12,
-        outWidth: 10,
+        outWidth: 10
     };
 
     function createLink() {
@@ -62,8 +62,8 @@
                 x1: 0,
                 y1: 0,
                 x2: 0,
-                y2: 0,
-            },
+                y2: 0
+            }
             // functions to aggregate dual link state
             // extra: link.extra
         });
@@ -109,7 +109,7 @@
 
         return {
             source: sourceNode,
-            target: targetNode,
+            target: targetNode
         };
     }
 
@@ -134,7 +134,7 @@
                     {
                         enhanced: this.get('enhanced'),
                         selected: this.get('selected'),
-                        suppressedmax: this.get('mastership'),
+                        suppressedmax: this.get('mastership')
                     },
                     (this.linkLabel) ? this.linkLabel.linkLabelCSSClass() : null
                 );
@@ -168,7 +168,7 @@
                     point = this.locatePortLabel();
                     angular.extend(point, {
                         id: 'topo2-port-tgt',
-                        num: this.get('portB'),
+                        num: this.get('portB')
                     });
                     data.push(point);
 
@@ -176,7 +176,7 @@
                         point = this.locatePortLabel(1);
                         angular.extend(point, {
                             id: 'topo2-port-src',
-                            num: this.get('portA'),
+                            num: this.get('portA')
                         });
                         data.push(point);
                     }
@@ -224,8 +224,8 @@
                     x1: this.get('source').x,
                     y1: this.get('source').y,
                     x2: this.get('target').x,
-                    y2: this.get('target').y,
-                };
+                    y2: this.get('target').y
+                }
             },
             calcMovement: function (amt, flipped) {
                 var pos = this.defaultPosition(),
@@ -238,7 +238,7 @@
                     x1: pos.x1 + (mult * dy / length),
                     y1: pos.y1 + (mult * -dx / length),
                     x2: pos.x2 + (mult * dy / length),
-                    y2: pos.y2 + (mult * -dx / length),
+                    y2: pos.y2 + (mult * -dx / length)
                 };
             },
             setPosition: function () {
@@ -282,7 +282,7 @@
             deselect: function () {
                 this.set({
                     'selected': false,
-                    'enhanced': false,
+                    'enhanced': false
                 });
             },
             showDetails: function () {
@@ -394,7 +394,7 @@
                 this.el.style('visibility', visible ? 'visible' : 'hidden');
             },
             displayMastership: function () {
-                this.set({ mastership: t2mss.mastership() !== null });
+                this.set({ mastership: t2mss.mastership() !== null});
             },
             remove: function () {
 
@@ -407,11 +407,11 @@
                     .transition()
                     .delay(1000)
                     .style('opacity', 0);
-            },
+            }
         });
 
         var LinkCollection = Collection.extend({
-            model: LinkModel,
+            model: LinkModel
         });
 
         return new LinkCollection(data);
@@ -444,8 +444,8 @@
             t2ts = _t2ts_;
 
             return {
-                createLinkCollection: createLinkCollection,
+                createLinkCollection: createLinkCollection
             };
-        },
+        }
     ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2LinkLabel.js b/web/gui/src/main/webapp/app/view/topo2/topo2LinkLabel.js
index 162eb2c..66b06e5 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2LinkLabel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2LinkLabel.js
@@ -47,7 +47,7 @@
                         var link = this.link;
                         this.set({
                             x: (link.source.x + link.target.x) / 2,
-                            y: (link.source.y + link.target.y) / 2,
+                            y: (link.source.y + link.target.y) / 2
                         });
                     },
                     setScale: function () {
@@ -61,8 +61,8 @@
                         this.link.linkLabel = null;
                         this.link.onChange();
                         this.constructor.__super__.remove.apply(this, arguments);
-                    },
+                    }
                 });
-            },
+            }
         ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2LinkPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2LinkPanel.js
index a5b570d..b3a7a5b 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2LinkPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2LinkPanel.js
@@ -42,7 +42,7 @@
             propOrder: [
                 'Type', '-',
                 'A Type', 'A Id', 'A Label', 'A Port', '-',
-                'B Type', 'B Id', 'B Label', 'B Port',
+                'B Type', 'B Id', 'B Label', 'B Port'
             ],
             props: {
                 '-': '',
@@ -54,8 +54,8 @@
                 'B Type': target.get('nodeType'),
                 'B Id': target.get('id'),
                 'B Label': target.get('props').name,
-                'B Port': data.get('portB') || 'N/A',
-            },
+                'B Port': data.get('portB') || 'N/A'
+            }
         };
     }
 
@@ -117,9 +117,9 @@
                 hide: hide,
                 toggle: toggle,
                 destroy: destroy,
-                isVisible: function () { return linkPanel.isVisible(); },
+                isVisible: function () { return linkPanel.isVisible(); }
             };
-        },
+        }
     ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Map.js b/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
index 202a1cf..002ca69 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
@@ -23,13 +23,14 @@
     'use strict';
 
     // Injected Services
-    var t2zs, countryFilters, ms;
+    var $log, $loc, ps, ms, flash, sus, t2zs, countryFilters;
 
     // internal state
-    var instance, zoomer, currentMap;
+    var instance, mapG, zoomLayer, zoomer, currentMap;
 
     function init() {
         this.appendElement('#topo2-background', 'g');
+        zoomLayer = d3.select('#topo2-zoomlayer');
         zoomer = t2zs.getZoomer();
         currentMap = null;
     }
@@ -37,7 +38,7 @@
     function setUpMap(mapId, mapFilePath, mapScale) {
 
         if (currentMap === mapId) {
-            return new Promise(function (resolve) {
+            return new Promise(function(resolve) {
                 resolve();
             });
         }
@@ -47,7 +48,7 @@
         var loadMap = ms.loadMapInto,
             promise, cfilter;
 
-        this.node().selectAll('*').remove();
+        this.node().selectAll("*").remove();
 
         if (mapFilePath === '*countries') {
             cfilter = countryFilters[mapId] || countryFilters.uk;
@@ -57,7 +58,7 @@
         promise = loadMap(this.node(), mapFilePath, mapId, {
             countryFilters: cfilter,
             adjustScale: mapScale || 1,
-            shading: '',
+            shading: ''
         });
 
         return promise;
@@ -79,11 +80,19 @@
 
     angular.module('ovTopo2')
     .factory('Topo2MapService', [
-        'Topo2ZoomService', 'MapService', 'Topo2ViewController',
+        '$log', '$location', 'Topo2ViewController', 'PrefsService',
+        'MapService', 'FlashService', 'SvgUtilService', 'Topo2ZoomService',
 
-        function (_t2zs_, _ms_, ViewController) {
-            t2zs = _t2zs_;
+        function (_$log_, _$loc_, ViewController, _ps_,
+                  _ms_, _flash_, _sus_, _t2zs_) {
+
+            $log = _$log_;
+            $loc = _$loc_;
+            ps = _ps_;
             ms = _ms_;
+            flash = _flash_;
+            sus = _sus_;
+            t2zs = _t2zs_;
 
             var MapLayer = ViewController.extend({
 
@@ -94,10 +103,10 @@
                 setUpMap: setUpMap,
                 resetZoom: resetZoom,
                 zoomCallback: zoomCallback,
-                getCurrentMap: getCurrentMap,
+                getCurrentMap: getCurrentMap
             });
 
             return instance || new MapLayer();
-        },
+        }
     ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2MapConfig.js b/web/gui/src/main/webapp/app/view/topo2/topo2MapConfig.js
index 9ffa8f7..ffb7f86 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2MapConfig.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2MapConfig.js
@@ -31,7 +31,7 @@
     function projection(x) {
         if (x) {
             proj = x;
-            $log.debug('Set the projection');
+            $log.debug("Set the projection");
         }
         return proj;
     }
@@ -44,9 +44,9 @@
                 $log = _$log_;
 
                 return {
-                    projection: projection,
+                    projection: projection
                 };
-            },
+            }
         ]
     );
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Mastership.js b/web/gui/src/main/webapp/app/view/topo2/topo2Mastership.js
index 1fef792..7b1735f 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Mastership.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Mastership.js
@@ -49,10 +49,10 @@
                     setMastership: function (id) {
                         this.currentMastership = id;
                         this.displayMastership();
-                    },
-                };
+                    }
+                }
 
                 return instance || new MastershipController();
-            },
+            }
         ]);
-})();
+})();
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Model.js b/web/gui/src/main/webapp/app/view/topo2/topo2Model.js
index 56941f4..6da29c4 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Model.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Model.js
@@ -117,7 +117,7 @@
             if (this.collection) {
                 this.collection.remove(this);
             }
-        },
+        }
     };
 
     angular.module('ovTopo2')
@@ -127,6 +127,6 @@
             Model.extend = fn.extend;
 
             return Model;
-        },
+        }
     ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NoDevicesConnected.js b/web/gui/src/main/webapp/app/view/topo2/topo2NoDevicesConnected.js
index 0d9e670..d0c08d3 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2NoDevicesConnected.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2NoDevicesConnected.js
@@ -36,7 +36,7 @@
                         instance = this;
                         this.appendElement('#topo2', 'g')
                             .attr({
-                                transform: sus.translate(500, 500),
+                                transform: sus.translate(500, 500)
                             });
 
                         this.render();
@@ -49,16 +49,16 @@
                         g = this.node().append('g');
                         gs.addGlyph(g, 'bird', 100).attr('class', 'noDevsBird');
                         g.append('text').text('No devices are connected')
-                            .attr({ x: 120, y: 80 });
+                            .attr({ x: 120, y: 80});
 
                         box = g.node().getBBox();
                         box.x -= box.width/2;
                         box.y -= box.height/2;
                         g.attr('transform', sus.translate(box.x, box.y));
-                    },
+                    }
                 });
 
                 return instance || new NoDevicesConnected();
-            },
+            }
         ]);
-})();
+})();
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
index 9b275c9..7498696 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2NodeModel.js
@@ -35,18 +35,18 @@
     var dColTheme = {
             light: {
                 online: '#444444',
-                offline: '#cccccc',
+                offline: '#cccccc'
             },
             dark: {
                 // TODO: theme
                 online: '#444444',
-                offline: '#cccccc',
-            },
+                offline: '#cccccc'
+            }
         },
         // and here are the stroke colors of the glyph, per theme
         dUseTheme = {
             light: 'white',
-            dark: 'black',
+            dark: 'black'
         };
 
     angular.module('ovTopo2')
@@ -72,7 +72,7 @@
                     this.mastershipService = t2mss;
                     this._events = {
                         'mouseover': 'mouseoverHandler',
-                        'mouseout': 'mouseoutHandler',
+                        'mouseout': 'mouseoutHandler'
                     };
                 },
                 select: function () {
@@ -162,7 +162,7 @@
                         x: -dim / 2 - labelPad,
                         y: -dim / 2 - labelPad,
                         width: dim + labelWidth + (labelPad * 2) + _textPad,
-                        height: dim + (labelPad * 2),
+                        height: dim + (labelPad * 2)
                     };
                 },
                 iconBox: function (dim, labelWidth) {
@@ -170,7 +170,7 @@
                         x: -dim / 2,
                         y: -dim / 2,
                         width: dim + labelWidth,
-                        height: dim,
+                        height: dim
                     };
                 },
                 svgClassName: function () {
@@ -182,7 +182,7 @@
                             selected: this.get('selected'),
                             hovered: this.get('hovered'),
                             fixed: this.get('fixed'),
-                            suppressedmax: this.get('mastership'),
+                            suppressedmax: this.get('mastership')
                         }
                     );
                 },
@@ -194,7 +194,7 @@
                     t2nps.setLongLat(this);
                 },
                 displayMastership: function () {
-                    this.set({ mastership: t2mss.mastership() !== null });
+                    this.set({ mastership: t2mss.mastership() !== null});
                 },
                 update: function () {
                     this.updateLabel();
@@ -247,7 +247,7 @@
 
                     return {
                         rect: rect,
-                        text: text,
+                        text: text
                     };
                 },
                 addIconElements: function (el) {
@@ -256,7 +256,7 @@
                         glyph;
 
                     var iconG = el.append('g')
-                        .attr('class', 'icon');
+                        .attr('class', 'icon')
 
                     iconG.append('rect')
                         .attr('class', 'icon-rect')
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js b/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js
index 1b7a88c..8889168 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js
@@ -72,7 +72,7 @@
             if (!loc.latOrY && !loc.longOrX) {
                 loc = {
                     longOrX: -20,
-                    latOrY: 10 * node.index(),
+                    latOrY: 10 * node.index()
                 };
             }
 
@@ -101,14 +101,14 @@
         function rand() {
             return {
                 x: rs.randDim(dim[0]),
-                y: rs.randDim(dim[1]),
+                y: rs.randDim(dim[1])
             };
         }
 
         function near(node) {
             return {
                 x: node.x + nearDist + rs.spread(nearDist),
-                y: node.y + nearDist + rs.spread(nearDist),
+                y: node.y + nearDist + rs.spread(nearDist)
             };
         }
 
@@ -176,8 +176,8 @@
 
                 return {
                     positionNode: positionNode,
-                    setLongLat: setLongLat,
+                    setLongLat: setLongLat
                 };
-            },
+            }
         ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Overlay.js b/web/gui/src/main/webapp/app/view/topo2/topo2Overlay.js
index d16417e..de85acf 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Overlay.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Overlay.js
@@ -22,11 +22,12 @@
     var t2os = 'Topo2OverlayService: ';
 
     // injected refs
-    var $log, fs, t2kcs, t2rs, t2lc, LinkLabel;
+    var $log, $timeout, fs, gs, wss, t2kcs, t2rs, t2lc, api, LinkLabel;
 
     // internal state
     var overlays = {},
-        current = null;
+        current = null,
+        reset = true;
 
     function error(fn, msg) {
         $log.error(t2os + fn + '(): ' + msg);
@@ -118,6 +119,10 @@
     // === -----------------------------------------------------
     //  Event Handlers (events from server)
 
+    function setApi(_api_) {
+        api = _api_;
+    }
+
     function setOverlay(ovid) {
         var ov = overlays[ovid];
         if (!ov) {
@@ -138,7 +143,7 @@
                 nodeLink = t2rs.getLink(id);
                 if (nodeLink) {
                     t2lc.addLabel(LinkLabel, link, linkLabelsDOM, {
-                        link: nodeLink,
+                        link: nodeLink
                     });
                 }
         });
@@ -148,13 +153,17 @@
 
     angular.module('ovTopo2')
     .factory('Topo2OverlayService', [
-        '$log', 'FnService', 'Topo2KeyCommandService',
-        'Topo2RegionService', 'Topo2LabelCollection', 'Topo2LinkLabel',
+        '$log', '$timeout', 'FnService', 'GlyphService', 'WebSocketService',
+        'Topo2KeyCommandService', 'Topo2RegionService', 'Topo2LabelCollection',
+        'Topo2LinkLabel',
 
-        function (_$log_, _fs_, _t2kcs_, _t2rs_,
+        function (_$log_, _$timeout_, _fs_, _gs_, _wss_, _t2kcs_, _t2rs_,
             _t2lc_, _t2ll_) {
             $log = _$log_;
+            $timeout = _$timeout_;
             fs = _fs_;
+            gs = _gs_;
+            wss = _wss_;
             t2kcs = _t2kcs_;
             t2rs = _t2rs_;
             t2lc = _t2lc_;
@@ -162,6 +171,7 @@
 
             return {
                 register: register,
+                setApi: setApi,
                 setOverlay: setOverlay,
 
                 hooks: {
@@ -170,10 +180,11 @@
                     singleSelect: singleSelectHook,
                     multiSelect: multiSelectHook,
                     mouseOver: mouseOverHook,
-                    mouseOut: mouseOutHook,
+                    mouseOut: mouseOutHook
                 },
-                showHighlights: showHighlights,
-            };
-        },
+                showHighlights: showHighlights
+            }
+        }
     ]);
-}());
+
+}());
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Panel.js b/web/gui/src/main/webapp/app/view/topo2/topo2Panel.js
index dd7722b..88ba678 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Panel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Panel.js
@@ -51,16 +51,16 @@
             return this.footer.append(x);
         },
         emptyRegions: function () {
-            this.header.selectAll('*').remove();
-            this.body.selectAll('*').remove();
-            this.footer.selectAll('*').remove();
+            this.header.selectAll("*").remove();
+            this.body.selectAll("*").remove();
+            this.footer.selectAll("*").remove();
         },
         destroy: function () {
             ps.destroyPanel(this.id);
         },
         isVisible: function () {
             return this.el.isVisible();
-        },
+        }
     };
 
     angular.module('ovTopo2')
@@ -71,7 +71,7 @@
             ps = _ps_;
 
             return View.extend(panel);
-        },
+        }
     ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2PeerRegion.js b/web/gui/src/main/webapp/app/view/topo2/topo2PeerRegion.js
index 738ce08..9e8ad31 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2PeerRegion.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2PeerRegion.js
@@ -25,14 +25,14 @@
     var Collection, Model;
 
     var remappedDeviceTypes = {
-        virtual: 'cord',
+        virtual: 'cord'
     };
 
     function createCollection(data, region) {
 
         var PeerRegionCollection = Collection.extend({
             model: Model,
-            region: region,
+            region: region
         });
 
         return new PeerRegionCollection(data);
@@ -52,7 +52,7 @@
                     nodeType: 'peer-region',
                     events: {
                         'dblclick': 'navigateToRegion',
-                        'click': 'onClick',
+                        'click': 'onClick'
                     },
 
                     initialize: function () {
@@ -76,13 +76,13 @@
                         if (d3.event.defaultPrevented) return;
                         t2rns.navigateToRegion(this.get('id'));
                         t2srp.hide();
-                    },
+                    }
                 });
 
                 return {
-                    createCollection: createCollection,
+                    createCollection: createCollection
                 };
-            },
+            }
         ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Prefs.js b/web/gui/src/main/webapp/app/view/topo2/topo2Prefs.js
index 2f69f7b..9d822c8 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Prefs.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Prefs.js
@@ -30,8 +30,8 @@
         porthl: 1,
         bg: 0,
         spr: 0,
-        ovid: 'traffic', // default to traffic overlay
-        toolbar: 0,
+        ovid: 'traffic',   // default to traffic overlay
+        toolbar: 0
     };
 
     function topo2Prefs() {
@@ -59,8 +59,8 @@
 
             return {
                 get: get,
-                set: set,
+                set: set
             };
-        },
+        }
     ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index bba3f39..cd4a75b 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -53,7 +53,7 @@
 
                     var RegionModel = Model.extend({
                         findNodeById: this.findNodeById,
-                        nodes: this.regionNodes.bind(this),
+                        nodes: this.regionNodes.bind(this)
                     });
 
                     this.model = new RegionModel();
@@ -67,7 +67,7 @@
                     this.model.set({ peerRegions: t2pr.createCollection([], this) });
                     this.model.set({ links: t2ls.createLinkCollection([], this) });
                 },
-                isLoadComplete: function () {
+                isLoadComplete: function() {
                     return this.bgRendered && this.regionData && this.peers;
                 },
                 loaded: function (key, value) {
@@ -80,7 +80,7 @@
 
                     this.model.set({
                         id: this.regionData.id,
-                        layerOrder: this.regionData.layerOrder,
+                        layerOrder: this.regionData.layerOrder
                     });
 
                     this.sortMultiLinks();
@@ -117,7 +117,7 @@
                             if (peer.id === id) {
                                 peer.location = location;
                             }
-                        });
+                        })
                     });
                 },
                 sortMultiLinks: function () {
@@ -147,11 +147,12 @@
                             _.each(collection, function (link, index) {
                                 link.multiline = {
                                     deviceLinks: collection.length,
-                                    index: index,
-                                };
+                                    index: index
+                                }
                             });
                         }
-                    });
+                    })
+
                 },
                 isRootRegion: function () {
                     return this.model.get('id') === ROOT;
@@ -247,17 +248,17 @@
                 },
                 update: function (event) {
 
-                    if (!this.isLoadComplete()) {
+                    if (!this.isLoadComplete()){
                         this.layout.createForceLayout();
                     }
 
                     if (this[event.type]) {
                         this[event.type](event);
                     } else {
-                        $log.error('Unhanded topology update', event);
+                        $log.error("Unhanded topology update", event);
                     }
 
-                    this.layout.update();
+                    this.layout.update()
                     this.displayNoDevs();
                 },
                 displayNoDevs: function () {
@@ -271,10 +272,11 @@
                 // Topology update event handlers
                 LINK_ADDED_OR_UPDATED: function (event) {
 
-                    var regionLinks = this.model.get('links');
+                    var regionLinks = this.model.get('links'),
+                        device;
 
                     if (!regionLinks) {
-                        this.model.set({ links: t2ls.createLinkCollection([], this) });
+                        this.model.set({ links: t2ls.createLinkCollection([], this) })
                     }
 
                     if (event.memo === 'added') {
@@ -294,7 +296,7 @@
                         device;
 
                     if (!regionDevices) {
-                        this.model.set({ devices: t2ds.createDeviceCollection([], this) });
+                        this.model.set({ devices: t2ds.createDeviceCollection([], this) })
                     }
 
                     if (event.memo === 'added') {
@@ -313,7 +315,7 @@
                         host;
 
                     if (!regionHosts) {
-                        this.model.set({ hosts: t2hs.createHostCollection([], this) });
+                        this.model.set({ hosts: t2hs.createHostCollection([], this) })
                     }
 
                     if (event.memo === 'added') {
@@ -326,14 +328,14 @@
                         region;
 
                     if (!regionSubRegions) {
-                        this.model.set({ subregions: t2sr.createSubRegionCollection([], this) });
+                        this.model.set({ subregions: t2sr.createSubRegionCollection([], this) })
                     }
 
                     if (event.memo === 'added') {
                         region = this.model.get('subregions').add(event.data);
                         $log.debug('Added region', region);
                     }
-                },
+                }
             });
 
             function getInstance() {
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2RegionNavigation.js b/web/gui/src/main/webapp/app/view/topo2/topo2RegionNavigation.js
index 9cf78e3..092ec2c 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2RegionNavigation.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2RegionNavigation.js
@@ -50,7 +50,7 @@
         navigateToRegion: function (id) {
             $loc.search('regionId', id);
             wss.sendEvent('topo2navRegion', {
-                rid: id,
+                rid: id
             });
             this.notifyListeners('region:navigation-start', id);
         },
@@ -60,7 +60,7 @@
 
         destory: function () {
             this.listeners = {};
-        },
+        }
     };
 
     angular.module('ovTopo2')
@@ -72,6 +72,6 @@
                 wss = _wss_;
 
                 return instance || new RegionNavigationService();
-            },
+            }
         ]);
-})();
+})();
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Select.js b/web/gui/src/main/webapp/app/view/topo2/topo2Select.js
index d7fe6a5..49fbfe7 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Select.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Select.js
@@ -27,7 +27,7 @@
     var instance,
         consumeClick,
         zoomer,
-        previousNearestLink; // previous link to mouse position
+        previousNearestLink;    // previous link to mouse position
 
     function mouseClickHandler() {
         if (d3.event.defaultPrevented) return;
@@ -162,11 +162,11 @@
         },
         updateDetails: function () {
 
-            var nodeCount = this.selectedNodes.length;
+            var nodeCount =  this.selectedNodes.length;
 
             if (nodeCount === 1) {
                 this.selectedNodes[0].showDetails();
-            } else if (nodeCount > 1) {
+            } else if (nodeCount > 1)  {
                 t2ddp.showMulti(this.selectedNodes);
             } else {
                 t2ddp.hide();
@@ -211,7 +211,7 @@
             var cc = consumeClick;
             consumeClick = Boolean(x);
             return cc;
-        },
+        }
     };
 
     angular.module('ovTopo2')
@@ -221,7 +221,7 @@
             t2zs = _t2zs_;
             t2ddp = _t2ddp_;
             return instance || new SelectionService();
-        },
+        }
     ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
index 6d1b8c6..f53ccc6 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
@@ -19,10 +19,11 @@
  Defines behavior for loading sprites into the sprite layer.
  */
 
- (function () {
+ (function() {
     'use strict';
 
-    var instance;
+    var instance,
+        renderer;
 
     function vbox(w, h) {
       return '0 0 ' + w + ' ' + h;
@@ -40,14 +41,14 @@
                     id: 'topo2-sprites',
                     displayName: 'Sprite Layer',
 
-                    init: function () {
+                    init: function() {
                         this.svg = d3.select('#topo2');
                         this.createSpriteDefs();
                         this.container = this.appendElement('#topo2-background', 'g');
                     },
                     loadLayout: function (id) {
                         var _this = this;
-                        this.container.selectAll('*').remove();
+                        this.container.selectAll("*").remove();
                         this.layout = ss.layout(id);
 
                         if (this.layout) {
@@ -64,7 +65,7 @@
                         }
 
                         // Returns a promise for consistency with Topo2MapService
-                        return new Promise(function (resolve) {
+                        return new Promise(function(resolve) {
                             resolve(_this);
                         });
                     },
@@ -131,7 +132,7 @@
 
                             layout
                                 .append('g')
-                                .append('use')
+                                .append("use")
                                 .attr('xlink:href', '#rack')
                                 .attr('width', 20)
                                 .attr('height', 25)
@@ -163,7 +164,7 @@
                                 .attr('y', i * gridSpacing)
                                 .attr('x', 0);
                         }
-                    },
+                    }
                 });
 
                 function getInstance() {
@@ -171,6 +172,6 @@
                 }
 
                 return getInstance();
-            },
-        ]);
- })();
+            }
+        ])
+ })();
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js b/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js
index a34e075..c426d64 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SubRegion.js
@@ -25,14 +25,14 @@
     var Collection, Model;
 
     var remappedDeviceTypes = {
-        virtual: 'cord',
+        virtual: 'cord'
     };
 
     function createSubRegionCollection(data, region) {
 
         var SubRegionCollection = Collection.extend({
             model: Model,
-            region: region,
+            region: region
         });
 
         return new SubRegionCollection(data);
@@ -52,7 +52,7 @@
                 nodeType: 'sub-region',
                 events: {
                     'dblclick': 'navigateToRegion',
-                    'click': 'onClick',
+                    'click': 'onClick'
                 },
 
                 initialize: function () {
@@ -76,13 +76,13 @@
                     if (d3.event.defaultPrevented) return;
                     t2rns.navigateToRegion(this.get('id'));
                     t2srp.hide();
-                },
+                }
             });
 
             return {
-                createSubRegionCollection: createSubRegionCollection,
+                createSubRegionCollection: createSubRegionCollection
             };
-        },
+        }
     ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegionPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2SubRegionPanel.js
index 68e091a..e084980 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SubRegionPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SubRegionPanel.js
@@ -41,8 +41,8 @@
                 'Id': data.get('id'),
                 'Type': data.get('nodeType'),
                 'Number of Devices': data.get('nDevs'),
-                'Number of Hosts': data.get('nHosts'),
-            },
+                'Number of Hosts': data.get('nHosts')
+            }
         };
     }
 
@@ -103,9 +103,9 @@
                 hide: hide,
                 toggle: toggle,
                 destroy: destroy,
-                isVisible: function () { return subRegionPanel.isVisible(); },
+                isVisible: function () { return subRegionPanel.isVisible(); }
             };
-        },
+        }
     ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js
index 6b651f7..982cd5d4 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js
@@ -33,10 +33,10 @@
         className = 'topo2-p',
         panelOpts = {
             show: true,
-            width: 260, // summary and detail panel width
+            width: 260 // summary and detail panel width
         },
         handlerMap = {
-            showSummary: handleSummaryData,
+            showSummary: handleSummaryData
         };
 
     function init(_detailsPanel_) {
@@ -47,7 +47,7 @@
         wss.sendEvent('requestSummary');
 
         var options = angular.extend({}, panelOpts, {
-            class: className,
+            class: className
         });
 
         summaryPanel = new Panel(id, options);
@@ -128,9 +128,9 @@
                 toggle: toggle,
                 destroy: destroy,
                 isVisible: function () { return summaryPanel.isVisible(); },
-                getInstance: function () { return summaryPanel; },
+                getInstance: function () { return summaryPanel; }
             };
-        },
+        }
     ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Toolbar.js b/web/gui/src/main/webapp/app/view/topo2/topo2Toolbar.js
index ec45bd8..1edcdff 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Toolbar.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Toolbar.js
@@ -24,7 +24,7 @@
 
     // key to button mapping data
     var k2b = {
-        O: { id: 'topo2-summary-tog', gid: 'm_summary', isel: true },
+        O: { id: 'topo2-summary-tog', gid: 'm_summary', isel: true},
         I: { id: 'topo2-instance-tog', gid: 'm_uiAttached', isel: true },
         // D: { id: 'details-tog', gid: 'm_details', isel: true },
         // H: { id: 'hosts-tog', gid: 'm_endstation', isel: false },
@@ -37,7 +37,7 @@
         L: { id: 'topo2-cycleLabels-btn', gid: 'm_cycleLabels' },
         R: { id: 'topo2-resetZoom-btn', gid: 'm_resetZoom' },
 
-        E: { id: 'topo2-eqMaster-btn', gid: 'm_eqMaster' },
+        E: { id: 'topo2-eqMaster-btn', gid: 'm_eqMaster' }
     };
 
     angular.module('ovTopo2')
@@ -63,13 +63,11 @@
                         this.el.hide();
                     },
                     initKeyData: function () {
-                        _.each(k2b, function (value, key) {
+                        _.each(k2b, function(value, key) {
                             var data = t2kcs.getActionEntry(key);
                             if (data) {
-                                // on-click callback
-                                value.cb = data[0];
-                                // tooltip
-                                value.tt = data[1] + ' (' + key + ')';
+                                value.cb = data[0];                     // on-click callback
+                                value.tt = data[1] + ' (' + key + ')';  // tooltip
                             }
                         });
                     },
@@ -84,11 +82,11 @@
                         }
                     },
                     addButton: function (key) {
-                        var v = this.getKey(key);
+                        var v =  this.getKey(key);
                         v.btn = this.el.addButton(v.id, v.gid, v.cb, v.tt);
                     },
                     addToggle: function (key, suppressIfMobile) {
-                        var v = this.getKey(key);
+                        var v =  this.getKey(key);
                         if (suppressIfMobile && fs.isMobile()) { return; }
                         v.tog = this.el.addToggle(v.id, v.gid, v.isel, v.cb, v.tt);
                     },
@@ -109,7 +107,7 @@
                         this.addToggle('B');
                     },
                     addSecondRow: function () {
-                        // addToggle('X');
+                        //addToggle('X');
                         // this.addToggle('Z');
                         // this.addButton('N');
                         this.addButton('L');
@@ -122,10 +120,10 @@
                         // TODO: Should the tbs remove button id's in the destroyToolbar method?
                         // If you go topo2 -> topo -> topo2 there's a button id conflict
                         tbs.destroyToolbar(this.className);
-                    },
+                    }
                 };
 
                 return instance || new Toolbar();
-            },
+            }
         ]);
-}());
+}());
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Traffic.js b/web/gui/src/main/webapp/app/view/topo2/topo2Traffic.js
index 994e32c..1cb703f 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Traffic.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Traffic.js
@@ -19,18 +19,18 @@
     'use strict';
 
     // injected refs
-    var $log, flash, wss;
+    var $log, fs, flash, wss, api;
 
     // configuration
     var allTrafficTypes = [
             'flowStatsBytes',
             'portStatsBitSec',
-            'portStatsPktSec',
+            'portStatsPktSec'
         ],
         allTrafficMsgs = [
             'Flow Stats (bytes)',
             'Port Stats (bits / second)',
-            'Port Stats (packets / second)',
+            'Port Stats (packets / second)'
         ];
 
     // internal state
@@ -57,7 +57,7 @@
 
         mode = 'allFlowPort';
         wss.sendEvent('topo2RequestAllTraffic', {
-            trafficType: allTrafficTypes[allIndex],
+            trafficType: allTrafficTypes[allIndex]
         });
         flash.flash(allTrafficMsgs[allIndex]);
         currentIndex = allIndex;
@@ -72,23 +72,23 @@
 
     angular.module('ovTopo2')
         .factory('Topo2TrafficService', [
-            '$log', 'FlashService', 'WebSocketService',
+            '$log', 'FnService', 'FlashService', 'WebSocketService',
 
-            function (_$log_, _flash_, _wss_) {
+            function (_$log_, _fs_, _flash_, _wss_) {
                 $log = _$log_;
+                fs = _fs_;
                 flash = _flash_;
                 wss = _wss_;
 
                 return {
-                    // TODO: Remove References
-                    initTraffic: function (_api_) {},
+                    initTraffic: function (_api_) { api = _api_; },
                     destroyTraffic: function () {},
 
                     // invoked from toolbar overlay buttons or keystrokes
                     cancelTraffic: cancelTraffic,
                     showAllTraffic: showAllTraffic,
-                    selectedTrafficOverlay: selectedTrafficOverlay,
-                };
-            },
+                    selectedTrafficOverlay: selectedTrafficOverlay
+                }
+            }
         ]);
-}());
+}());
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2TrafficOverlay.js b/web/gui/src/main/webapp/app/view/topo2/topo2TrafficOverlay.js
index a606078..19d0844 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2TrafficOverlay.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2TrafficOverlay.js
@@ -30,12 +30,12 @@
         tooltip: 'Traffic Overlay',
 
         activate: function () {
-            $log.debug('Traffic-2 overlay ACTIVATED');
+            $log.debug("Traffic-2 overlay ACTIVATED");
         },
 
         deactivate: function () {
             t2ts.cancelTraffic(true);
-            $log.debug('Traffic-2 overlay DEACTIVATED');
+            $log.debug("Traffic-2 overlay DEACTIVATED");
         },
 
         // key bindings for toolbar buttons
@@ -44,18 +44,18 @@
             0: {
                 cb: function () { t2ts.cancelTraffic(true); },
                 tt: 'Cancel traffic monitoring',
-                gid: 'm_xMark',
+                gid: 'm_xMark'
             },
 
             A: {
                 cb: function () { t2ts.showAllTraffic(); },
                 tt: 'Monitor all traffic',
-                gid: 'm_allTraffic',
+                gid: 'm_allTraffic'
             },
 
             _keyOrder: [
-                '0', 'A',
-            ],
+                '0', 'A'
+            ]
         },
 
         hooks: {
@@ -63,10 +63,10 @@
             escape: function () {
                 // Must return true to consume ESC, false otherwise.
                 return t2ts.cancelTraffic(true);
-            },
+            }
             // TODO : add node selection events etc.
             // NOTE : see topoTrafficNew.js
-        },
+        }
     };
 
     // invoke code to register with the overlay service
@@ -80,4 +80,4 @@
             t2ov.register(overlay);
         }]);
 
-}());
+}());
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2View.js b/web/gui/src/main/webapp/app/view/topo2/topo2View.js
index 9e6d6b1..ae29894 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2View.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2View.js
@@ -28,7 +28,7 @@
     // Internal State
     var dimensions,
         viewOptions = {
-            linkPortHighlighting: true,
+            linkPortHighlighting: true
         };
 
     function newDim(_dimensions) {
@@ -65,9 +65,9 @@
                     getDimensions: getDimensions,
 
                     togglePortHighlights: togglePortHighlights,
-                    getPortHighlighting: getPortHighlighting,
+                    getPortHighlighting: getPortHighlighting
                 };
-            },
+            }
         ]
     );
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js b/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js
index 7387c94..190f751 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js
@@ -34,10 +34,10 @@
         displayName: 'View',
 
         initialize: function () {
-            this.name = this.displayName.toLowerCase().replace(/ /g, '_');
+            this.name = this.displayName.toLowerCase().replace(/ /g,"_");
             this.prefs = {
-                visible: this.name + '_visible',
-            };
+                visible: this.name + '_visible'
+            }
         },
         appendElement: function (parent, node) {
             var el = d3.select('#' + this.id);
@@ -46,7 +46,7 @@
             }
             return el;
         },
-        node: function () {
+        node: function() {
             return d3.select('#' + this.id);
         },
         enabled: function () {
@@ -64,7 +64,7 @@
                     .duration(400)
                     .style('opacity', 0)
                     .each('end', function () {
-                        node.style('visibility', 'hidden');
+                        node.style('visibility', 'hidden')
                     });
             }
         },
@@ -76,7 +76,7 @@
                     .style('visibility', 'visible')
                     .transition()
                     .duration(400)
-                    .style('opacity', 1);
+                    .style('opacity', 1)
             }
         },
         toggle: function () {
@@ -95,7 +95,7 @@
             var state = ps.getPrefs('topo2_prefs');
             state[key] = value ? 1 : 0;
             ps.setPrefs('topo2_prefs', state);
-        },
+        }
     };
 
     angular.module('ovTopo2')
@@ -108,6 +108,6 @@
 
                 ViewController.extend = fn.extend;
                 return ViewController;
-            },
+            }
         ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Zoom.js b/web/gui/src/main/webapp/app/view/topo2/topo2Zoom.js
index f70496b..3e6f12a 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Zoom.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Zoom.js
@@ -23,7 +23,7 @@
     'use strict';
 
     // injected references
-    var fs, zs;
+    var fs, zs, ps;
 
     // internal state
     var zoomer,
@@ -91,11 +91,12 @@
 
     angular.module('ovTopo2')
     .factory('Topo2ZoomService', [
-        'FnService', 'ZoomService',
-        function (_fs_, _zs_) {
+        'FnService', 'ZoomService', 'PrefsService',
+        function (_fs_, _zs_, _ps_) {
 
             fs = _fs_;
             zs = _zs_;
+            ps = _ps_;
 
             return {
                 getZoomer: getZoomer,
@@ -105,7 +106,7 @@
 
                 scale: scale,
                 adjustmentScale: adjustmentScale,
-                panAndZoom: panAndZoom,
+                panAndZoom: panAndZoom
             };
         }]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/uiView.js b/web/gui/src/main/webapp/app/view/topo2/uiView.js
index ba1219e..77419a5 100644
--- a/web/gui/src/main/webapp/app/view/topo2/uiView.js
+++ b/web/gui/src/main/webapp/app/view/topo2/uiView.js
@@ -47,12 +47,12 @@
                     // TODO: Unbind Events
                     this.empty();
                     return this;
-                },
+                }
             });
 
             View.extend = fn.extend;
             return View;
-        },
+        }
     ]);
 
 })();
diff --git a/web/gui/src/main/webapp/app/view/tunnel/tunnel.js b/web/gui/src/main/webapp/app/view/tunnel/tunnel.js
index 810774c..88325e2 100644
--- a/web/gui/src/main/webapp/app/view/tunnel/tunnel.js
+++ b/web/gui/src/main/webapp/app/view/tunnel/tunnel.js
@@ -28,13 +28,13 @@
         function ($log, $scope, $sce, fs, tbs) {
             tbs.buildTable({
                 scope: $scope,
-                tag: 'tunnel',
+                tag: 'tunnel'
             });
 
             $scope.$watch('tableData', function () {
                 if (!fs.isEmptyObject($scope.tableData)) {
                     $scope.tableData.forEach(function (tunnel) {
-                        // tunnel.direction = $sce.trustAsHtml(tunnel.direction);
+                        //tunnel.direction = $sce.trustAsHtml(tunnel.direction);
                     });
                 }
             });