only show marching ants animation for flows when iperf data is flowing
diff --git a/web/ons-demo/js/flows.js b/web/ons-demo/js/flows.js
index 120f9f5..fa0ccf2 100644
--- a/web/ons-demo/js/flows.js
+++ b/web/ons-demo/js/flows.js
@@ -1,3 +1,20 @@
+function startFlowAnimation(flow) {
+ if (flow.select('animate').empty()) {
+ flow.append('svg:animate')
+ .attr('attributeName', 'stroke-dashoffset')
+ .attr('attributeType', 'xml')
+ .attr('from', '500')
+ .attr('to', '-500')
+ .attr('dur', '20s')
+ .attr('repeatCount', 'indefinite');
+ }
+}
+
+function stopFlowAnimation(flow) {
+ flow.select('animate').remove();
+}
+
+
function updateSelectedFlowsTopology() {
// DRAW THE FLOWS
var topologyFlows = [];
@@ -11,13 +28,6 @@
flows.enter().append("svg:path").attr('class', 'flow')
.attr('stroke-dasharray', '4, 10')
- .append('svg:animate')
- .attr('attributeName', 'stroke-dashoffset')
- .attr('attributeType', 'xml')
- .attr('from', '500')
- .attr('to', '-500')
- .attr('dur', '20s')
- .attr('repeatCount', 'indefinite');
flows.exit().remove();
@@ -78,10 +88,6 @@
.classed('pending', function (d) {
return d && (d.createPending || d.deletePending);
});
-
- // "marching ants"
- flows.select('animate').attr('from', 500);
-
}
function updateSelectedFlowsTable() {
@@ -229,6 +235,9 @@
}, interval);
+
+ var animationTimeout;
+
flow.iperfFetchInterval = setInterval(function () {
getIPerfData(flow, function (data) {
try {
@@ -249,6 +258,14 @@
// if the data is fresh
if (flow.iperfData.timestamp && iperfData.timestamp != flow.iperfData.timestamp) {
+ var flowSelection = d3.select(document.getElementById(makeFlowKey(flow)));
+ startFlowAnimation(flowSelection);
+ clearTimeout(animationTimeout);
+ // kill the animation if iperfdata stops flowing
+ animationTimeout = setTimeout(function () {
+ stopFlowAnimation(flowSelection);
+ }, updateRate*1.5);
+
while (flow.iperfData.samples.length > pointsToDisplay + iperfData.samples.length) {
flow.iperfData.samples.shift();
}