GUI -- Completed Show Summary panel.

- added GlyphService.addGlyph().
- added SvgUtilService.translate().

Change-Id: I0bbc51a8f1d9c24b8b4f1377236570070da6f160

web/gui/src/main/webapp/app/fw/svg/glyph.css

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2014,2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Glyph Service -- CSS file
+ */
+
+svg .glyph {
+    stroke: none;
+    fill-rule: evenodd;
+}
+
+.light svg .glyph,
+.dark svg .glyph.overlay {
+    fill: black;
+}
+
+.dark svg .glyph,
+.light svg .glyph.overlay {
+    fill: white;
+}

web/gui/src/main/webapp/app/fw/svg/glyph.js

@@ -20,9 +20,11 @@
 (function () {
     'use strict';
 
-    var $log,
+    // injected references
-        fs,
+    var $log, fs, sus;
-        glyphs = d3.map(),
+
+    // internal state
+    var glyphs = d3.map(),
         msgGS = 'GlyphService.';
 
     // ----------------------------------------------------------------------
@@ -133,11 +135,6 @@
 
     // ----------------------------------------------------------------------
 
-    angular.module('onosSvg')
-        .factory('GlyphService', ['$log', 'FnService', function (_$log_, _fs_) {
-            $log = _$log_;
-            fs = _fs_;
-
     function clear() {
         // start with a fresh map
         glyphs = d3.map();
@@ -206,14 +203,45 @@
         });
     }
 
+    function addGlyph(elem, glyphId, size, overlay, trans) {
+        var sz = size || 40,
+            ovr = !!overlay,
+            xns = fs.isA(trans),
+            atr = {
+                width: sz,
+                height: sz,
+                'class': 'glyph',
+                'xlink:href': '#' + glyphId
+            };
+
+        if (xns) {
+            atr.transform = sus.translate(trans);
+        }
+        elem.append('use').attr(atr).classed('overlay', ovr);
+
+    }
+
+    // ----------------------------------------------------------------------
+
+    angular.module('onosSvg')
+    .factory('GlyphService',
+        ['$log', 'FnService', 'SvgUtilService',
+
+        function (_$log_, _fs_, _sus_) {
+            $log = _$log_;
+            fs = _fs_;
+            sus = _sus_;
+
             return {
                 clear: clear,
                 init: init,
                 register: register,
                 ids: ids,
                 glyph: glyph,
-                loadDefs: loadDefs
+                loadDefs: loadDefs,
+                addGlyph: addGlyph
             };
-        }]);
+        }]
+    );
 
 }());

web/gui/src/main/webapp/app/fw/svg/svgUtil.js

@@ -136,10 +136,18 @@
                 $log.warn('SvgUtilService: cat7 -- To Be Implemented');
             }
 
+            function translate(x, y) {
+                if (fs.isA(x) && x.length === 2 && !y) {
+                    return 'translate(' + x[0] + ',' + x[1] + ')';
+                }
+                return 'translate(' + x + ',' + y + ')';
+            }
+
             return {
                 createDragBehavior: createDragBehavior,
                 loadGlow: loadGlow,
-                cat7: cat7
+                cat7: cat7,
+                translate: translate
             };
         }]);
 }());

web/gui/src/main/webapp/app/index.html

@@ -66,6 +66,7 @@
     <link rel="stylesheet" href="onos.css">
     <link rel="stylesheet" href="common.css">
     <link rel="stylesheet" href="fw/mast/mast.css">
+    <link rel="stylesheet" href="fw/svg/glyph.css">
     <link rel="stylesheet" href="fw/svg/icon.css">
     <link rel="stylesheet" href="fw/layer/panel.css">
     <link rel="stylesheet" href="fw/nav/nav.css">

web/gui/src/main/webapp/app/view/topo/topo.css

@@ -56,17 +56,6 @@
     height: 42px;
 }
 
-#topo-p-summary svg .glyphIcon {
-    stroke: none;
-    fill-rule: evenodd;
-}
-.light #topo-p-summary svg .glyphIcon {
-    fill: black;
-}
-.dark #topo-p-summary svg .glyphIcon {
-    fill: #ddd;
-}
-
 #topo-p-summary h2 {
     position: absolute;
     margin: 0 4px;

web/gui/src/main/webapp/app/view/topo/topoPanel.js

@@ -23,7 +23,7 @@
     'use strict';
 
     // injected refs
-    var $log, ps;
+    var $log, ps, gs;
 
     // constants
     var idSum = 'topo-p-summary',
@@ -70,18 +70,15 @@
     function populateSummary(data) {
         summaryPanel.empty();
 
-        var svg = summaryPanel.append('svg').attr({
+        var svg = summaryPanel.append('svg'); //.style('background-color', 'goldenrod'),
-                width: 40,
+            //iid = '#' + (data.type || 'unknown');
-                height: 40
-            }).style('background-color', 'goldenrod'),
-            iid = '#' + (data.type || 'unknown');
 
         var title = summaryPanel.append('h2'),
             table = summaryPanel.append('table'),
             tbody = table.append('tbody');
 
-        // append glyph iid to SVG  // black fill
+        gs.addGlyph(svg, 'node', 40);
-        // append glyph bird to SVG // white fill
+        gs.addGlyph(svg, 'bird', 24, true, [8,12]);
 
         title.text(data.id);
 
@@ -103,11 +100,12 @@
 
     angular.module('ovTopo')
     .factory('TopoPanelService',
-        ['$log', 'PanelService',
+        ['$log', 'PanelService', 'GlyphService',
 
-        function (_$log_, _ps_) {
+        function (_$log_, _ps_, _gs_) {
             $log = _$log_;
             ps = _ps_;
+            gs = _gs_;
 
             function initPanels() {
                 summaryPanel = ps.createPanel(idSum, panelOpts);

web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js

@@ -18,7 +18,7 @@
  ONOS GUI -- SVG -- Glyph Service - Unit Tests
  */
 describe('factory: fw/svg/glyph.js', function() {
-    var $log, fs, gs, d3Elem;
+    var $log, fs, gs, d3Elem, svg;
 
     var numBaseGlyphs = 13,
         vbBird = '352 224 113 112',
@@ -47,13 +47,16 @@ describe('factory: fw/svg/glyph.js', function() {
     beforeEach(module('onosUtil', 'onosSvg'));
 
     beforeEach(inject(function (_$log_, FnService, GlyphService) {
+        var body = d3.select('body');
         $log = _$log_;
         fs = FnService;
         gs = GlyphService;
-        d3Elem = d3.select('body').append('defs').attr('id', 'myDefs');
+        d3Elem = body.append('defs').attr('id', 'myDefs');
+        svg = body.append('svg').attr('id', 'mySvg');
     }));
 
     afterEach(function () {
+        d3.select('#mySvg').remove();
         d3.select('#myDefs').remove();
         gs.clear();
     });
@@ -64,7 +67,7 @@ describe('factory: fw/svg/glyph.js', function() {
 
     it('should define api functions', function () {
         expect(fs.areFunctions(gs, [
-            'clear', 'init', 'register', 'ids', 'glyph', 'loadDefs'
+            'clear', 'init', 'register', 'ids', 'glyph', 'loadDefs', 'addGlyph'
         ])).toBeTruthy();
     });
 
@@ -246,4 +249,40 @@ describe('factory: fw/svg/glyph.js', function() {
         verifyLoadedInDom('chain', vbGlyph);
         verifyLoadedInDom('node', vbGlyph);
     });
+
+    it('should add a glyph with default size', function () {
+        gs.init();
+        gs.addGlyph(svg, 'crown');
+        var what = svg.selectAll('use');
+        expect(what.size()).toEqual(1);
+        expect(what.attr('width')).toEqual('40');
+        expect(what.attr('height')).toEqual('40');
+        expect(what.attr('xlink:href')).toEqual('#crown');
+        expect(what.classed('glyph')).toBeTruthy();
+        expect(what.classed('overlay')).toBeFalsy();
+    });
+
+    it('should add a glyph with given size', function () {
+        gs.init();
+        gs.addGlyph(svg, 'crown', 37);
+        var what = svg.selectAll('use');
+        expect(what.size()).toEqual(1);
+        expect(what.attr('width')).toEqual('37');
+        expect(what.attr('height')).toEqual('37');
+        expect(what.attr('xlink:href')).toEqual('#crown');
+        expect(what.classed('glyph')).toBeTruthy();
+        expect(what.classed('overlay')).toBeFalsy();
+    });
+
+    it('should add a glyph marked as overlay', function () {
+        gs.init();
+        gs.addGlyph(svg, 'crown', 20, true);
+        var what = svg.selectAll('use');
+        expect(what.size()).toEqual(1);
+        expect(what.attr('width')).toEqual('20');
+        expect(what.attr('height')).toEqual('20');
+        expect(what.attr('xlink:href')).toEqual('#crown');
+        expect(what.classed('glyph')).toBeTruthy();
+        expect(what.classed('overlay')).toBeTruthy();
+    });
 });

web/gui/src/main/webapp/tests/app/fw/svg/svgUtil-spec.js

@@ -39,8 +39,18 @@ describe('factory: fw/svg/svgUtil.js', function() {
 
     it('should define api functions', function () {
         expect(fs.areFunctions(sus, [
-            'createDragBehavior', 'loadGlow', 'cat7'
+            'createDragBehavior', 'loadGlow', 'cat7', 'translate'
         ])).toBeTruthy();
     });
 
+    // TODO: add unit tests for drag behavior etc.
+
+    it('should translate from two args', function () {
+        expect(sus.translate(1,2)).toEqual('translate(1,2)');
+    });
+
+    it('should translate from an array', function () {
+        expect(sus.translate([3,4])).toEqual('translate(3,4)');
+    });
+
 });