GUI -- TopoView - re-implemented All/Pkt/Opt filter radio buttons.

Change-Id: I41cf0eca60a685606a631c0edf4779d7730bb649

@@ -57,3 +57,11 @@
 .dark #mast .title {
     color: #eee;
 }
+
+#mast-right {
+    display: inline-block;
+    padding-top: 8px;
+    padding-right: 16px;
+    float: right;
+    /*border: 1px solid red;*/
+}
\ No newline at end of file

 <!-- Masthead partial HTML -->
 <img class="logo" src="../data/img/onos-logo.png" ng-click="mastCtrl.toggleNav()">
 <span class="title">Open Network Operating System</span>
+<div id="mast-right"></div>

@@ -515,3 +515,40 @@
 .dark #ov-topo svg .linkLabel text {
     stroke: #777;
 }
+
+
+/* radio buttons injected into masthead */
+
+#topo-radio-group span.radio {
+    font-size: 10pt;
+    margin: 4px 2px;
+    padding: 1px 6px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.light #topo-radio-group span.radio {
+    border: 1px dotted #222;
+    color: #eee;
+}
+.dark #topo-radio-group span.radio {
+    border: 1px dotted #bbb;
+    color: #888;
+}
+
+#topo-radio-group span.radio.active {
+    padding: 1px 6px;
+}
+
+.light #topo-radio-group span.radio.active {
+    background-color: #bbb;
+    border: 1px solid #eee;
+    color: #666;
+
+}
+.dark #topo-radio-group span.radio.active {
+    background-color: #222;
+    border: 1px solid #eee;
+    color: #78a;
+}

@@ -29,11 +29,129 @@
     // api to topoForce
     var api;
     /*
-     node()                         // get ref to D3 selection of nodes
+     node()     // get ref to D3 selection of nodes
+     link()     // get ref to D3 selection of links
      */
 
-    // internal state
+    // which "layer" a particular item "belongs to"
+    var layerLookup = {
+        host: {
+            endstation: 'pkt', // default, if host event does not define type
+            router:     'pkt',
+            bgpSpeaker: 'pkt'
+        },
+        device: {
+            switch: 'pkt',
+            roadm: 'opt'
+        },
+        link: {
+            hostLink: 'pkt',
+            direct: 'pkt',
+            indirect: '',
+            tunnel: '',
+            optical: 'opt'
+        }
+    };
 
+    var idPrefix = 'topo-rb-';
+
+    var dispatch = {
+            all: function () { suppressLayers(false); },
+            pkt: function () { showLayer('pkt'); },
+            opt: function () { showLayer('opt'); }
+        },
+        filterButtons = [
+            { text: 'All Layers', id: 'all' },
+            { text: 'Packet Only', id: 'pkt' },
+            { text: 'Optical Only', id: 'opt' }
+        ],
+        btnG,
+        btnDef = {},
+        targetDiv;
+
+
+    function injectButtons(div) {
+        targetDiv = div;
+
+        btnG = div.append('div').attr('id', 'topo-radio-group');
+
+        filterButtons.forEach(function (btn, i) {
+            var bid = btn.id,
+                txt = btn.text,
+                uid = idPrefix + bid,
+                button = btnG.append('span')
+                    .attr({
+                        id: uid,
+                        'class': 'radio'
+                    })
+                    .text(txt);
+            btnDef[uid] = btn;
+
+            if (i === 0) {
+                button.classed('active', true);
+                btnG.selected = bid;
+            }
+        });
+
+        btnG.selectAll('span')
+            .on('click', function () {
+               var button = d3.select(this),
+                   uid = button.attr('id'),
+                   btn = btnDef[uid],
+                   act = button.classed('active');
+
+                if (!act) {
+                    btnG.selectAll('span').classed('active', false);
+                    button.classed('active', true);
+                    btnG.selected = btn.id;
+                    clickAction(btn.id);
+                }
+            });
+    }
+
+    function clickAction(which) {
+        dispatch[which]();
+    }
+
+    function selected() {
+        return btnG ? btnG.selected : '';
+    }
+
+    // code to manipulate the nodes and links as per the filter settings
+    function inLayer(d, layer) {
+        var type = d.class === 'link' ? d.type() : d.type,
+            look = layerLookup[d.class],
+            lyr = look && look[type];
+        return lyr === layer;
+    }
+
+    function unsuppressLayer(which) {
+        api.node().each(function (d) {
+            var node = d.el;
+            if (inLayer(d, which)) {
+                node.classed('suppressed', false);
+            }
+        });
+
+        api.link().each(function (d) {
+            var link = d.el;
+            if (inLayer(d, which)) {
+                link.classed('suppressed', false);
+            }
+        });
+    }
+
+    function suppressLayers(b) {
+        api.node().classed('suppressed', b);
+        api.link().classed('suppressed', b);
+//        d3.selectAll('svg .port').classed('inactive', false);
+//        d3.selectAll('svg .portText').classed('inactive', false);
+    }
+
+    function showLayer(which) {
+        suppressLayers(true);
+        unsuppressLayer(which);
+    }
 
     // === -----------------------------------------------------
     // === MODULE DEFINITION ===
@@ -52,15 +170,23 @@
                 tps = _tps_;
                 tts = _tts_;
 
-                function initFilter(_api_) {
+                function initFilter(_api_, div) {
                     api = _api_;
+                    injectButtons(div);
                 }
 
-                function destroyFilter() { }
+                function destroyFilter() {
+                    targetDiv.select('#topo-radio-group').remove();
+                    btnG = null;
+                    btnDef = {};
+                }
 
                 return {
                     initFilter: initFilter,
-                    destroyFilter: destroyFilter
+                    destroyFilter: destroyFilter,
+
+                    clickAction: clickAction,
+                    selected: selected
                 };
             }]);
 }());

@@ -23,7 +23,8 @@
     'use strict';
 
     // injected refs
-    var $log, fs, sus, is, ts, flash, tis, tms, tss, tts, icfg, uplink;
+    var $log, fs, sus, is, ts, flash, tis, tms, tss, tts, fltr,
+        icfg, uplink;
 
     // configuration
     var labelConfig = {
@@ -1078,14 +1079,21 @@
         }
     }
 
+    function mkFilterApi(uplink) {
+        return {
+            node: function () { return node; },
+            link: function () { return link; }
+        };
+    }
+
     angular.module('ovTopo')
     .factory('TopoForceService',
         ['$log', 'FnService', 'SvgUtilService', 'IconService', 'ThemeService',
             'FlashService', 'TopoInstService', 'TopoModelService',
-            'TopoSelectService', 'TopoTrafficService',
+            'TopoSelectService', 'TopoTrafficService', 'TopoFilterService',
 
         function (_$log_, _fs_, _sus_, _is_, _ts_, _flash_,
-                  _tis_, _tms_, _tss_, _tts_) {
+                  _tis_, _tms_, _tss_, _tts_, _fltr_) {
             $log = _$log_;
             fs = _fs_;
             sus = _sus_;
@@ -1096,6 +1104,7 @@
             tms = _tms_;
             tss = _tss_;
             tts = _tts_;
+            fltr = _fltr_;
 
             icfg = is.iconConfig();
 
@@ -1117,6 +1126,7 @@
                 tms.initModel(mkModelApi(uplink), dim);
                 tss.initSelect(mkSelectApi(uplink));
                 tts.initTraffic(mkTrafficApi(uplink));
+                fltr.initFilter(mkFilterApi(uplink), d3.select('#mast-right'));
 
                 settings = angular.extend({}, defaultSettings, opts);
 
@@ -1151,6 +1161,7 @@
             }
 
             function destroyForce() {
+                fltr.destroyFilter();
                 tts.destroyTraffic();
                 tss.destroySelect();
                 tms.destroyModel();

@@ -18,25 +18,80 @@
  ONOS GUI -- Topo View -- Topo Filter Service - Unit Tests
  */
 describe('factory: view/topo/topoFilter.js', function() {
-    var $log, fs, filter;
+    var $log, fs, fltr, d3Elem, api;
+
+    var mockNodes = {
+            each: function () {},
+            classed: function () {}
+        },
+        mockLinks = {
+            each: function () {},
+            classed: function () {}
+        };
 
     beforeEach(module('ovTopo', 'onosUtil', 'onosLayer'));
 
     beforeEach(inject(function (_$log_, FnService, TopoFilterService) {
         $log = _$log_;
         fs = FnService;
-        filter = TopoFilterService;
+        fltr = TopoFilterService;
+        d3Elem = d3.select('body').append('div').attr('id', 'myMastDiv');
+
+        api = {
+            node: function () { return mockNodes; },
+            link: function () { return mockLinks; }
+        };
     }));
 
+    afterEach(function () {
+        d3.select('#myMastDiv').remove();
+    });
+
     it('should define TopoFilterService', function () {
-        expect(filter).toBeDefined();
+        expect(fltr).toBeDefined();
     });
 
     it('should define api functions', function () {
-        expect(fs.areFunctions(filter, [
-            'initFilter', 'destroyFilter'
+        expect(fs.areFunctions(fltr, [
+            'initFilter', 'destroyFilter',
+            'clickAction', 'selected'
         ])).toBeTruthy();
     });
 
-    // TODO: more tests...
+    it('should inject the buttons into the given div', function () {
+        fltr.initFilter(api, d3Elem);
+        var grpdiv = d3Elem.select('#topo-radio-group');
+        expect(grpdiv.size()).toBe(1);
+
+        var btns = grpdiv.selectAll('span');
+        expect(btns.size()).toBe(3);
+
+        var prefix = 'topo-rb-',
+            expIds = [ 'all', 'pkt', 'opt' ];
+
+        btns.each(function (d, i) {
+            var b = d3.select(this);
+            expect(b.attr('id')).toEqual(prefix + expIds[i]);
+            // 0th button is active - others are not
+            expect(b.classed('active')).toEqual(i === 0);
+        });
+    });
+
+    it('should remove the buttons from the given div', function () {
+        fltr.initFilter(api, d3Elem);
+        var grpdiv = d3Elem.select('#topo-radio-group');
+        expect(grpdiv.size()).toBe(1);
+
+        fltr.destroyFilter();
+        grpdiv = d3Elem.select('#topo-radio-group');
+        expect(grpdiv.size()).toBe(0);
+    });
+
+    it('should report the selected button', function () {
+        fltr.initFilter(api, d3Elem);
+        expect(fltr.selected()).toEqual('all');
+    });
+
+    // TODO: figure out how to trigger the click function on the spans..
+
 });