GUI -- TopoView - re-instated selection "glow" - themed (blue for light theme, y…

…ellow for dark theme).

Change-Id: I3994d22889285547688429e490f6fa73ae4c768a

@@ -125,15 +125,42 @@
                         }
                     });
 
-                return drag;            }
+                return drag;
+            }
+
+
+            function loadGlow(defs, r, g, b, id) {
+                var glow = defs.append('filter')
+                    .attr('x', '-50%')
+                    .attr('y', '-50%')
+                    .attr('width', '200%')
+                    .attr('height', '200%')
+                    .attr('id', id);
+
+                glow.append('feColorMatrix')
+                    .attr('type', 'matrix')
+                    .attr('values',
+                    '0 0 0 0  ' + r + ' ' +
+                    '0 0 0 0  ' + g + ' ' +
+                    '0 0 0 0  ' + b + ' ' +
+                    '0 0 0 1  0 ');
+
+                glow.append('feGaussianBlur')
+                    .attr('stdDeviation', 3)
+                    .attr('result', 'coloredBlur');
+
+                glow.append('feMerge').selectAll('feMergeNode')
+                    .data(['coloredBlur', 'SourceGraphic'])
+                    .enter().append('feMergeNode')
+                    .attr('in', String);
+            }
 
-            function loadGlow() {
-                $log.warn('SvgUtilService: loadGlow -- To Be Implemented');
+            function loadGlowDefs(defs) {
+                loadGlow(defs, 0.0, 0.0, 0.7, 'blue-glow');
+                loadGlow(defs, 1.0, 1.0, 0.3, 'yellow-glow');
             }
 
             // --- Ordinal scales for 7 values.
-            // TODO: tune colors for light and dark themes
-            // Note: These colors look good on the white background. Still, need to tune for dark.
 
             //               blue       brown      brick red  sea green  purple     dark teal  lime
             var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
@@ -249,7 +276,7 @@
 
             return {
                 createDragBehavior: createDragBehavior,
-                loadGlow: loadGlow,
+                loadGlowDefs: loadGlowDefs,
                 cat7: cat7,
                 translate: translate,
                 stripPx: stripPx,

@@ -290,9 +290,11 @@
 #topo-p-instance .onosInst.mastership.affinity {
     opacity: 1.0;
 }
-#topo-p-instance .onosInst.mastership.affinity svg rect {
-    /* TODO: add blue glow */
-    /*filter: url(#blue-glow);*/
+.light #topo-p-instance .onosInst.mastership.affinity svg rect {
+    filter: url(#blue-glow);
+}
+.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
+    filter: url(#yellow-glow);
 }
 
 
@@ -302,11 +304,15 @@
     cursor: pointer;
 }
 
-#ov-topo svg .node.selected rect,
-#ov-topo svg .node.selected circle {
+.light #ov-topo svg .node.selected rect,
+.light #ov-topo svg .node.selected circle {
+    fill: #f90;
+    filter: url(#blue-glow);
+}
+.dark #ov-topo svg .node.selected rect,
+.dark #ov-topo svg .node.selected circle {
     fill: #f90;
-    /* TODO: add blue glow filter */
-    /*filter: url(#blue-glow);*/
+    filter: url(#yellow-glow);
 }
 
 #ov-topo svg .node text {

@@ -130,6 +130,7 @@
     function setUpDefs() {
         defs = svg.append('defs');
         gs.loadDefs(defs);
+        sus.loadGlowDefs(defs);
     }