diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index c6438fa..2689b43 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -21,8 +21,6 @@
 			if (modelChanged) {
 				updateControllers();
 				updateSelectedFlows();
-				reconcilePendingLinks(model);
-				updateLinkMap(links);
 				updateTopology();
 			}
 
diff --git a/web/ons-demo/js/flows.js b/web/ons-demo/js/flows.js
index 29fc4fa..ae148e7 100644
--- a/web/ons-demo/js/flows.js
+++ b/web/ons-demo/js/flows.js
@@ -26,7 +26,7 @@
 				return;
 			}
 			var pts = [];
-			if (!d.dataPath.flowEntries) {
+			if (d.createPending) {
 				// create a temporary vector to indicate the pending flow
 				var s1 = d3.select(document.getElementById(d.srcDpid));
 				var s2 = d3.select(document.getElementById(d.dstDpid));
@@ -43,7 +43,7 @@
 				pt2 = pt2.matrixTransform(s2[0][0].getCTM());
 				pts.push(pt2);
 
-			} else {
+			} else if (d.dataPath && d.dataPath.flowEntries) {
 				d.dataPath.flowEntries.forEach(function (flowEntry) {
 					var s = d3.select(document.getElementById(flowEntry.dpid.value));
 					// s[0] is null if the flow entry refers to a non-existent switch
@@ -186,7 +186,6 @@
 	flows.exit().remove();
 }
 
-// TODO: cancel the interval when the flow is desel
 function startIPerfForFlow(flow) {
 	var duration = 10000; // seconds
 	var interval = 100; // ms. this is defined by the server
diff --git a/web/ons-demo/js/map.js b/web/ons-demo/js/map.js
index 382cb26..d40c9cb 100644
--- a/web/ons-demo/js/map.js
+++ b/web/ons-demo/js/map.js
@@ -116,7 +116,7 @@
 	});
 }
 
-function updateLinkLines() {
+function drawLinkLines() {
 
 	// key on link dpids since these will come/go during demo
 	var linkLines = linksLayer.selectAll('.link').data(links, function (d) {
@@ -227,12 +227,36 @@
 
 	if (d.label) {
 		g.append('svg:text')
+			.classed('label', true)
 			.text(d.label)
-			.attr('x', d.x + width)
-			.attr('y', d.y + width);
+			.attr("text-anchor", "end")
+			.attr('x', d.x - width)
+			.attr('y', d.y - width);
 	}
 }
 
+function labelsEnter(switches) {
+	return labelsLayer.selectAll('g').data(switches, function (d) {
+		return d.dpid;
+	}).enter().append('svg:g')
+		.classed('nolabel', true)
+		.attr("id", function (data) {
+			return data.dpid + '-label';
+		})
+		.append("svg:text")
+			.text(function (data) {return data.dpid;})
+			.attr('x', function (d) {
+				return d.x;
+			})
+			.attr('y', function (d) {
+				return d.y;
+			})
+			.attr("text-anchor", function (d) {
+				return d.x > 500 ? "end" : "start";
+			})
+
+}
+
 function switchesEnter(switches) {
 	return switchLayer.selectAll('g').data(switches, function (d) {
 		return d.dpid;
@@ -251,29 +275,6 @@
 				.each(switchEnter);
 }
 
-// function labelsEnter(className, model) {
-// 			.enter().append("svg:g")
-// 			.classed('nolabel', true)
-// 			.attr("id", function (data) {
-// 				return data.dpid + '-label';
-// 			})
-
-
-// 	return topology.selectAll('.'+className).data(makeSwitchesModel(model))
-// 		.enter()
-// 			.append('svg:g')
-// 				.attr("id", function (d) {
-// 					return d.dpid;
-// 				})
-// 				.classed('core', true)
-// 				.attr('x', function (d) {
-// 					return d.x;
-// 				})
-// 				.attr('y', function (d) {
-// 					return d.y;
-// 				})
-// 				.each(switchEnter);
-// }
 
 function switchesUpdate(switches) {
 	switches.each(function (d) {
@@ -307,11 +308,9 @@
 
 	switchesUpdate(switchesEnter(switches));
 
+	drawLinkLines();
 
-
-
-
-	updateLinkLines();
+	labelsEnter(switches);
 }
 
 })();
\ No newline at end of file
diff --git a/web/ons-demo/js/topology.js b/web/ons-demo/js/topology.js
index 9801302..7f91de8 100644
--- a/web/ons-demo/js/topology.js
+++ b/web/ons-demo/js/topology.js
@@ -10,6 +10,9 @@
 
 	/* currently rings.js and map.js can be included to define the topology display */
 
+	reconcilePendingLinks(model);
+	updateLinkMap(links);
+
 	drawTopology();
 
 	// setup the mouseover behaviors