fixed bug which caused links to disappear after being added
only show label when mouse over a switch.
better colors
merge from master
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 5a8026e..0fa5fa3 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -24,13 +24,10 @@
'color2',
'color3',
'color4',
- 'color5',
- 'color6',
'color7',
'color8',
'color9',
- 'color10',
- 'color11',
+// 'color11',
'color12'
];
colors.reverse();
@@ -49,7 +46,7 @@
window.addEventListener('resize', function () {
// this is too slow. instead detect first resize event and hide the paths that have explicit matrix applied
// either that or is it possible to position the paths so they get the automatic transform as well?
-// updateTopology(svg, model);
+// updateTopology();
});
var svg = d3.select('#svg-container').append('svg:svg');
@@ -120,7 +117,7 @@
selectedFlows = selectedFlows.slice(0, 3);
updateSelectedFlows();
- updateTopology(svg, model);
+ updateTopology();
});
row.append('div')
@@ -343,12 +340,8 @@
return linkMap;
}
-updateTopology = function(svg, model) {
-
- // DRAW THE SWITCHES
- var rings = svg.selectAll('.ring').data(createRingsFromModel(model));
-
-
+// removes links from the pending list that are now in the model
+function reconcilePendingLinks(model) {
var links = [];
model.links.forEach(function (link) {
links.push(link);
@@ -358,7 +351,15 @@
for (linkId in pendingLinks) {
links.push(pendingLinks[linkId]);
}
+ return links
+}
+updateTopology = function() {
+
+ // DRAW THE SWITCHES
+ var rings = svg.selectAll('.ring').data(createRingsFromModel(model));
+
+ var links = reconcilePendingLinks(model);
var linkMap = createLinkMap(links);
// var flowMap = createFlowMap(model);
@@ -366,12 +367,12 @@
d3.event.preventDefault();
+ d3.select(document.getElementById(data.dpid + '-label')).classed('nolabel', false);
+
if (data.highlighted) {
return;
}
-
-
// only highlight valid link or flow destination by checking for class of existing highlighted circle
var highlighted = svg.selectAll('.highlight')[0];
if (highlighted.length == 1) {
@@ -399,8 +400,6 @@
data.target = true;
}
-
- d3.select(document.getElementById(data.dpid + '-label')).classed('nolabel', false);
var node = d3.select(document.getElementById(data.dpid));
node.classed('highlight', true).select('circle').transition().duration(100).attr("r", widths.core);
data.highlighted = true;
@@ -408,10 +407,11 @@
}
function mouseOutSwitch(data) {
+ d3.select(document.getElementById(data.dpid + '-label')).classed('nolabel', true);
+
if (data.mouseDown)
return;
- d3.select(document.getElementById(data.dpid + '-label')).classed('nolabel', true);
var node = d3.select(document.getElementById(data.dpid));
node.classed('highlight', false).select('circle').transition().duration(100).attr("r", widths[data.className]);
data.highlighted = false;
@@ -687,16 +687,16 @@
pending: true
};
pendingLinks[makeLinkKey(link2)] = link2;
- updateTopology(svg, model);
+ updateTopology();
linkUp(link1);
- // remove the pending link after 10s
+ // remove the pending links after 10s
setTimeout(function () {
delete pendingLinks[makeLinkKey(link1)];
delete pendingLinks[makeLinkKey(link2)];
- updateTopology(svg, model);
+ updateTopology();
}, 10000);
}
}
@@ -835,7 +835,7 @@
drawFlows();
}
-function updateControllers(model) {
+function updateControllers() {
var controllers = d3.select('#controllerList').selectAll('.controller').data(model.controllers);
controllers.enter().append('div')
.each(function (c) {
@@ -906,16 +906,21 @@
updateModel(function (newModel) {
// console.log('Update time: ' + (Date.now() - d)/1000 + 's');
+ var modelChanged = false;
if (!model || JSON.stringify(model) != JSON.stringify(newModel)) {
- updateControllers(newModel);
- updateSelectedFlows();
- updateTopology(svg, newModel);
+ modelChanged = true;
+ model = newModel;
} else {
// console.log('no change');
}
- updateHeader(newModel);
- model = newModel;
+ if (modelChanged) {
+ updateControllers();
+ updateSelectedFlows();
+ updateTopology();
+ }
+
+ updateHeader(newModel);
// do it again in 1s
setTimeout(function () {