Fixing visuals for the SDN-IP demo. Fixed performance issue. Pulsing links inste…

…ad of ants, less frequently and turning off the timer when not needed.

Change-Id: I7100d5da28bcf3a315e34a3ee8c6eb0b1cee0ac2

@@ -127,6 +127,7 @@ svg .node.host circle {
 
 #topo svg .link {
     opacity: .7;
+    stroke-width: 1.2px;
 }
 
 #topo svg .link.inactive {
@@ -135,17 +136,17 @@ svg .node.host circle {
 }
 
 #topo svg .link.primary {
-    stroke: #f11;
+    stroke: #ffA300;
     stroke-width: 4px;
 }
 #topo svg .link.secondary {
-    stroke: rgba(255,100,100,0.5);
+    stroke: rgba(0,153,51,0.5);
     stroke-width: 3px;
 }
 #topo svg .link.animated {
-    stroke: #f11;
-    stroke-width: 6px;
-    stroke-dasharray: 8 8
+    stroke: #ffA300;
+    Xstroke-width: 6px;
+    Xstroke-dasharray: 8 8
 }
 
 #topo svg .link.primary.optical {
@@ -163,8 +164,8 @@ svg .node.host circle {
 }
 
 #topo svg .linkLabel rect {
-    stroke: #999;
-    stroke-width: 1.2px;
+    Xstroke: #ccc;
+    Xstroke-width: 2px;
     fill: #eee;
     stroke: none;
 }

@@ -731,10 +731,18 @@
         var paths = data.payload.paths;
 
         // Revert any links hilighted previously.
-        link.classed('primary secondary animated optical', false);
+        link.attr('stroke-width', null)
+            .style('stroke-width', null)
+            .classed('primary secondary animated optical', false);
         // Remove all previous labels.
         removeLinkLabels();
 
+        if (paths.length && !antTimer) {
+            startAntTimer();
+        } else if (!paths.length && antTimer) {
+            stopAntTimer();
+        }
+
         // Now hilight all links in the paths payload, and attach
         //  labels to them, if they are defined.
         paths.forEach(function (p) {
@@ -2160,22 +2168,35 @@
         // Load map data asynchronously; complete startup after that..
         loadGeoJsonData();
 
-        // start the and timer
-        var dashIdx = 0;
+        //var dashIdx = 0;
+        //antTimer = setInterval(function () {
+        //    // TODO: figure out how to choose Src-->Dst and Dst-->Src, per link
+        //    dashIdx = dashIdx === 0 ? 14 : dashIdx - 2;
+        //    d3.selectAll('.animated').style('stroke-dashoffset', dashIdx);
+        //}, 35);
+    }
+
+    function startAntTimer() {
+        var pulses = [ 5, 3, 1.2, 3 ],
+            pulse  = 0;
         antTimer = setInterval(function () {
-            // TODO: figure out how to choose Src-->Dst and Dst-->Src, per link
-            dashIdx = dashIdx === 0 ? 14 : dashIdx - 2;
-            d3.selectAll('.animated').style('stroke-dashoffset', dashIdx);
-        }, 35);
+            pulse = pulse + 1;
+            pulse = pulse === pulses.length ? 0 : pulse;
+            d3.selectAll('.animated').style('stroke-width', pulses[pulse]);
+        }, 200);
     }
 
-    function unload(view, ctx, flags) {
+    function stopAntTimer() {
         if (antTimer) {
             clearInterval(antTimer);
             antTimer = null;
         }
     }
 
+    function unload(view, ctx, flags) {
+        stopAntTimer();
+    }
+
     // TODO: move these to config/state portion of script
     var geoJsonUrl = 'json/map/continental_us.json',     // TODO: Paul
         geoJson;