add mouse over highlighting of selected flows
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 5607190..e9bb1d7 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -61,6 +61,10 @@
border-bottom: 1px solid #AAA;
}
+.selectedFlow:hover {
+ background-color: #333;
+}
+
.selectedFlow:last-child {
border-bottom: none;
}
@@ -132,6 +136,11 @@
stroke: rgba(255, 255, 255, .35);
}
+path.flow.highlight {
+ stroke-width: 6px;
+ stroke: rgba(255, 255, 255, .75);
+}
+
#selectedFlowsHeader {
border-top: 1px solid #AAA;
}
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 926ddf4..7d6774c 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -122,6 +122,11 @@
}
return line(pts);
})
+ .attr('id', function (d) {
+ if (d) {
+ return makeFlowKey(d);
+ }
+ })
.classed('pending', function (d) {
return d && d.pending
});
@@ -138,6 +143,19 @@
row.append('div').classed('srcDPID', true);
row.append('div').classed('dstDPID', true);
row.append('div').classed('iperf', true);
+
+ row.on('mouseover', function (d) {
+ if (d) {
+ var path = document.getElementById(makeFlowKey(d));
+ d3.select(path).classed('highlight', true);
+ }
+ });
+ row.on('mouseout', function (d) {
+ if (d) {
+ var path = document.getElementById(makeFlowKey(d));
+ d3.select(path).classed('highlight', false);
+ }
+ })
}
function rowUpdate(d) {