web/ons-demo/js/app.js - spring-open - Gitiles

 /*global d3*/


 var colors = [
 	'color1',
 	'color2',
 	'color3',
 	'color4',
 	'color5',
 	'color6',
 	'color7',
 	'color8',
 	'color9',
 	'color10',
 	'color11',
 	'color12',
 ]
 colors.reverse();

 var controllerColorMap = {};


 function createTopologyView() {
 	return d3.select('#svg-container').append('svg:svg').append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
 			attr('id', 'viewbox').append('svg:g').attr('transform', 'translate(500 500)');
 }

 function updateHeader(model) {
 	d3.select('#lastUpdate').text(new Date());
 	d3.select('#activeSwitches').text(model.edgeSwitches.length + model.aggregationSwitches.length + model.coreSwitches.length);
 	d3.select('#activeFlows').text(model.flows.length);
 }

 function toRadians (angle) {
   return angle * (Math.PI / 180);
 }

 function createRingsFromModel(model) {
 	var rings = [{
 		radius: 3,
 		width: 6,
 		switches: model.edgeSwitches,
 		className: 'edge',
 		angles: []
 	}, {
 		radius: 2.25,
 		width: 12,
 		switches: model.aggregationSwitches,
 		className: 'aggregation',
 		angles: []
 	}, {
 		radius: .75,
 		width: 18,
 		switches: model.coreSwitches,
 		className: 'core',
 		angles: []
 	}];


 	var aggRanges = {};

 	// arrange edge switches at equal increments
 	var k = 360 / rings[0].switches.length;
 	rings[0].switches.forEach(function (s, i) {
 		var angle = k * i;

 		rings[0].angles[i] = angle;

 		// record the angle for the agg switch layout
 		var dpid = s.dpid.split(':');
 		dpid[7] = '01'; // the last component of the agg switch is always '01'
 		var aggdpid = dpid.join(':');
 		var aggRange = aggRanges[aggdpid];
 		if (!aggRange) {
 			aggRange = aggRanges[aggdpid] = {};
 			aggRange.min = aggRange.max = angle;
 		} else {
 			aggRange.max = angle;
 		}
 	});

 	// arrange aggregation switches to "fan out" to edge switches
 	k = 360 / rings[1].switches.length;
 	rings[1].switches.forEach(function (s, i) {
 //		rings[1].angles[i] = k * i;
 		var range = aggRanges[s.dpid];

 		rings[1].angles[i] = (range.min + range.max)/2;
 	});

 	// find the association between core switches and aggregation switches
 	var aggregationSwitchMap = {};
 	model.aggregationSwitches.forEach(function (s, i) {
 		aggregationSwitchMap[s.dpid] = i;
 	});

 	// put core switches next to linked aggregation switches
 	k = 360 / rings[2].switches.length;
 	rings[2].switches.forEach(function (s, i) {
 //		rings[2].angles[i] = k * i;
 		var associatedAggregationSwitches = model.configuration.association[s.dpid];
 		// TODO: go between if there are multiple
 		var index = aggregationSwitchMap[associatedAggregationSwitches[0]];

 		rings[2].angles[i] = rings[1].angles[index];
 	});

 	return rings;
 }

 function updateTopology(svg, model) {

 	// DRAW THE SWITCHES
 	var rings = svg.selectAll('.ring').data(createRingsFromModel(model));

 	function ringEnter(data, i) {
 		if (!data.switches.length) {
 			return;
 		}

 		// create the nodes
 		// TODO: do this in two layers so that the text can always be on top
 		var nodes = d3.select(this).selectAll("g")
 			.data(d3.range(data.switches.length).map(function() {
 				return data;
 			}))
 			.enter().append("svg:g")
 			.classed('nolabel', true)
 			.attr("id", function (_, i) {
 				return data.switches[i].dpid;
 			})
 			.attr("transform", function(_, i) {
 				return "rotate(" + data.angles[i]+ ")translate(" + data.radius * 150 + ")rotate(" + (-data.angles[i]) + ")";
 			});

 		// add the cirles representing the switches
 		nodes.append("svg:circle")
 			.attr("transform", function(_, i) {
 				var m = document.querySelector('#viewbox').getTransformToElement().inverse();
 				if (data.scale) {
 					m = m.scale(data.scale);
 				}
 				return "matrix( " + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + " )";
 			})
 			.attr("x", -data.width / 2)
 			.attr("y", -data.width / 2)
 			.attr("r", data.width)

 		// add the text nodes which show on mouse over
 		nodes.append("svg:text")
 				.text(function (d, i) {return d.switches[i].dpid})
 				.attr("x", 0)
 				.attr("y", 0)
 				.attr("transform", function(_, i) {
 					var m = document.querySelector('#viewbox').getTransformToElement().inverse();
 					if (data.scale) {
 						m = m.scale(data.scale);
 					}
 					return "matrix( " + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + " )";
 				})

 		// setup the mouseover behaviors
 		function showLabel(data, index) {
 			d3.select(document.getElementById(data.switches[index].dpid)).classed('nolabel', false);
 		}

 		function hideLabel(data, index) {
 			d3.select(document.getElementById(data.switches[index].dpid)).classed('nolabel', true);
 		}

 		nodes.on('mouseover', showLabel);
 		nodes.on('mouseout', hideLabel);
 	}

 	// append switches
 	rings.enter().append("svg:g")
 		.attr("class", "ring")
 		.each(ringEnter);


 	function ringUpdate(data, i) {
 		nodes = d3.select(this).selectAll("circle");
 		nodes.attr('class', function (_, i)  {
 				if (data.switches[i].state == 'ACTIVE') {
 					return data.className + ' ' + controllerColorMap[data.switches[i].controller];
 				} else {
 					return data.className + ' ' + 'colorInactive';
 				}
 			})
 	}

 	// update  switches
 	rings.each(ringUpdate);

 	// switches should not change during operation of the ui so no
 	// rings.exit()


 	// do mouseover zoom on edge nodes
 	// function zoom(data, index) {
 	// 	var g = d3.select(document.getElementById(data.switches[index].dpid)).select('circle');
 	// 		g.transition().duration(100).attr("r", rings[0].width*3);
 	// }

 	// svg.selectAll('.edge').on('mouseover', zoom);
 	// svg.selectAll('.edge').on('mousedown', zoom);

 	// function unzoom(data, index) {
 	// 	var g = d3.select(document.getElementById(data.switches[index].dpid)).select('circle');
 	// 		g.transition().duration(100).attr("r", rings[0].width);
 	// }
 	// svg.selectAll('.edge').on('mouseout', unzoom);


 	// DRAW THE LINKS
 	var line = d3.svg.line()
 	    .x(function(d) {
 	    	return d.x;
 	    })
 	    .y(function(d) {
 	    	return d.y;
 	    })
 	    .interpolate("basis");

 	// key on link dpids since these will come/go during demo
 	var links = d3.select('svg').selectAll('path').data(model.links, function (d) {
 			return d['src-switch']+'->'+d['dst-switch'];
 	});

 	// add new links
 	links.enter().append("svg:path").attr("d", function (d) {

 		var src = d3.select(document.getElementById(d['src-switch']));
 		var dst = d3.select(document.getElementById(d['dst-switch']));

 		var srcPt = document.querySelector('svg').createSVGPoint();
 		srcPt.x = src.attr('x');
 		srcPt.y = src.attr('y') + 10; // tmp: make up and down links distinguishable

 		var dstPt = document.querySelector('svg').createSVGPoint();
 		dstPt.x = dst.attr('x');
 		dstPt.y = dst.attr('y') - 10; // tmp: make up and down links distinguishable

 		return line([srcPt.matrixTransform(src[0][0].getCTM()), dstPt.matrixTransform(dst[0][0].getCTM())]);
 	});

 	// remove old links
 	links.exit().remove();
 }

 function updateControllers(model) {
 	var controllers = d3.select('#controllerList').selectAll('.controller').data(model.controllers);
 	controllers.enter().append('div')
 		.attr('class', function (d) {

 			var color = 'color0';
 			if (model.activeControllers.indexOf(d) != -1) {
 				color = controllerColorMap[d];
 				if (!color) {
 					color = controllerColorMap[d] = colors.pop();
 				}
 			} else {
 				controllerColorMap[d] = color;
 			}
 			var className = 'controller ' + color;
 			return className;
 		});
 	controllers.text(function (d) {
 		return d;
 	});
 	controllers.exit().remove();

 	model.controllers.forEach(function (c) {
 		d3.select(document.body).classed(controllerColorMap[c] + '-selected', true);
 	});

 	controllers.on('click', function (c, index) {
 		var allSelected = true;
 		for (var key in controllerColorMap) {
 			if (!d3.select(document.body).classed(controllerColorMap[key] + '-selected')) {
 				allSelected = false;
 				break;
 			}
 		}
 		if (allSelected) {
 			for (var key in controllerColorMap) {
 				d3.select(document.body).classed(controllerColorMap[key] + '-selected', key == c)
 			}
 		} else {
 			for (var key in controllerColorMap) {
 				d3.select(document.body).classed(controllerColorMap[key] + '-selected', true)
 			}
 		}

 		// var selected = d3.select(document.body).classed(controllerColorMap[c] + '-selected');
 		// d3.select(document.body).classed(controllerColorMap[c] + '-selected', !selected);
 	});
 }

 var oldModel;
 function sync(svg) {
 	var d = Date.now();
 	updateModel(function (newModel) {
 		console.log('Update time: ' + (Date.now() - d)/1000 + 's');

 		if (true || !oldModel && JSON.stringify(oldModel) != JSON.stringify(newModel)) {
 			updateControllers(newModel);
 			updateTopology(svg, newModel);
 		} else {
 			console.log('no change');
 		}
 		updateHeader(newModel);

 		oldModel = newModel;

 		// do it again in 1s
 		setTimeout(function () {
 			sync(svg)
 		}, 1000);
 	});
 }

 svg = createTopologyView();
 // workaround for Chrome v25 bug
 // if executed immediately, the view box transform logic doesn't work properly
 // fixed in Chrome v27
 setTimeout(function () {
 	// workaround for another Chrome v25 bug
 	// viewbox transform stuff doesn't work in combination with browser zoom
 	// also works in Chrome v27
 	d3.select('#svg-container').style('zoom',  window.document.body.clientWidth/window.document.width);
 	sync(svg);
 }, 100);
	/global d3/


	var colors = [
	'color1',
	'color2',
	'color3',
	'color4',
	'color5',
	'color6',
	'color7',
	'color8',
	'color9',
	'color10',
	'color11',
	'color12',
	]
	colors.reverse();

	var controllerColorMap = {};



	function createTopologyView() {
	return d3.select('#svg-container').append('svg:svg').append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
	attr('id', 'viewbox').append('svg:g').attr('transform', 'translate(500 500)');
	}

	function updateHeader(model) {
	d3.select('#lastUpdate').text(new Date());
	d3.select('#activeSwitches').text(model.edgeSwitches.length + model.aggregationSwitches.length + model.coreSwitches.length);
	d3.select('#activeFlows').text(model.flows.length);
	}

	function toRadians (angle) {
	return angle * (Math.PI / 180);
	}

	function createRingsFromModel(model) {
	var rings = [{
	radius: 3,
	width: 6,
	switches: model.edgeSwitches,
	className: 'edge',
	angles: []
	}, {
	radius: 2.25,
	width: 12,
	switches: model.aggregationSwitches,
	className: 'aggregation',
	angles: []
	}, {
	radius: .75,
	width: 18,
	switches: model.coreSwitches,
	className: 'core',
	angles: []
	}];


	var aggRanges = {};

	// arrange edge switches at equal increments
	var k = 360 / rings[0].switches.length;
	rings[0].switches.forEach(function (s, i) {
	var angle = k * i;

	rings[0].angles[i] = angle;

	// record the angle for the agg switch layout
	var dpid = s.dpid.split(':');
	dpid[7] = '01'; // the last component of the agg switch is always '01'
	var aggdpid = dpid.join(':');
	var aggRange = aggRanges[aggdpid];
	if (!aggRange) {
	aggRange = aggRanges[aggdpid] = {};
	aggRange.min = aggRange.max = angle;
	} else {
	aggRange.max = angle;
	}
	});

	// arrange aggregation switches to "fan out" to edge switches
	k = 360 / rings[1].switches.length;
	rings[1].switches.forEach(function (s, i) {
	// rings[1].angles[i] = k * i;
	var range = aggRanges[s.dpid];

	rings[1].angles[i] = (range.min + range.max)/2;
	});

	// find the association between core switches and aggregation switches
	var aggregationSwitchMap = {};
	model.aggregationSwitches.forEach(function (s, i) {
	aggregationSwitchMap[s.dpid] = i;
	});

	// put core switches next to linked aggregation switches
	k = 360 / rings[2].switches.length;
	rings[2].switches.forEach(function (s, i) {
	// rings[2].angles[i] = k * i;
	var associatedAggregationSwitches = model.configuration.association[s.dpid];
	// TODO: go between if there are multiple
	var index = aggregationSwitchMap[associatedAggregationSwitches[0]];

	rings[2].angles[i] = rings[1].angles[index];
	});

	return rings;
	}

	function updateTopology(svg, model) {

	// DRAW THE SWITCHES
	var rings = svg.selectAll('.ring').data(createRingsFromModel(model));

	function ringEnter(data, i) {
	if (!data.switches.length) {
	return;
	}

	// create the nodes
	// TODO: do this in two layers so that the text can always be on top
	var nodes = d3.select(this).selectAll("g")
	.data(d3.range(data.switches.length).map(function() {
	return data;
	}))
	.enter().append("svg:g")
	.classed('nolabel', true)
	.attr("id", function (_, i) {
	return data.switches[i].dpid;
	})
	.attr("transform", function(_, i) {
	return "rotate(" + data.angles[i]+ ")translate(" + data.radius * 150 + ")rotate(" + (-data.angles[i]) + ")";
	});

	// add the cirles representing the switches
	nodes.append("svg:circle")
	.attr("transform", function(_, i) {
	var m = document.querySelector('#viewbox').getTransformToElement().inverse();
	if (data.scale) {
	m = m.scale(data.scale);
	}
	return "matrix( " + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + " )";
	})
	.attr("x", -data.width / 2)
	.attr("y", -data.width / 2)
	.attr("r", data.width)

	// add the text nodes which show on mouse over
	nodes.append("svg:text")
	.text(function (d, i) {return d.switches[i].dpid})
	.attr("x", 0)
	.attr("y", 0)
	.attr("transform", function(_, i) {
	var m = document.querySelector('#viewbox').getTransformToElement().inverse();
	if (data.scale) {
	m = m.scale(data.scale);
	}
	return "matrix( " + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + " )";
	})

	// setup the mouseover behaviors
	function showLabel(data, index) {
	d3.select(document.getElementById(data.switches[index].dpid)).classed('nolabel', false);
	}

	function hideLabel(data, index) {
	d3.select(document.getElementById(data.switches[index].dpid)).classed('nolabel', true);
	}

	nodes.on('mouseover', showLabel);
	nodes.on('mouseout', hideLabel);
	}

	// append switches
	rings.enter().append("svg:g")
	.attr("class", "ring")
	.each(ringEnter);


	function ringUpdate(data, i) {
	nodes = d3.select(this).selectAll("circle");
	nodes.attr('class', function (_, i) {
	if (data.switches[i].state == 'ACTIVE') {
	return data.className + ' ' + controllerColorMap[data.switches[i].controller];
	} else {
	return data.className + ' ' + 'colorInactive';
	}
	})
	}

	// update switches
	rings.each(ringUpdate);

	// switches should not change during operation of the ui so no
	// rings.exit()


	// do mouseover zoom on edge nodes
	// function zoom(data, index) {
	// var g = d3.select(document.getElementById(data.switches[index].dpid)).select('circle');
	// g.transition().duration(100).attr("r", rings[0].width*3);
	// }

	// svg.selectAll('.edge').on('mouseover', zoom);
	// svg.selectAll('.edge').on('mousedown', zoom);

	// function unzoom(data, index) {
	// var g = d3.select(document.getElementById(data.switches[index].dpid)).select('circle');
	// g.transition().duration(100).attr("r", rings[0].width);
	// }
	// svg.selectAll('.edge').on('mouseout', unzoom);


	// DRAW THE LINKS
	var line = d3.svg.line()
	.x(function(d) {
	return d.x;
	})
	.y(function(d) {
	return d.y;
	})
	.interpolate("basis");

	// key on link dpids since these will come/go during demo
	var links = d3.select('svg').selectAll('path').data(model.links, function (d) {
	return d['src-switch']+'->'+d['dst-switch'];
	});

	// add new links
	links.enter().append("svg:path").attr("d", function (d) {

	var src = d3.select(document.getElementById(d['src-switch']));
	var dst = d3.select(document.getElementById(d['dst-switch']));

	var srcPt = document.querySelector('svg').createSVGPoint();
	srcPt.x = src.attr('x');
	srcPt.y = src.attr('y') + 10; // tmp: make up and down links distinguishable

	var dstPt = document.querySelector('svg').createSVGPoint();
	dstPt.x = dst.attr('x');
	dstPt.y = dst.attr('y') - 10; // tmp: make up and down links distinguishable

	return line([srcPt.matrixTransform(src[0][0].getCTM()), dstPt.matrixTransform(dst[0][0].getCTM())]);
	});

	// remove old links
	links.exit().remove();
	}

	function updateControllers(model) {
	var controllers = d3.select('#controllerList').selectAll('.controller').data(model.controllers);
	controllers.enter().append('div')
	.attr('class', function (d) {

	var color = 'color0';
	if (model.activeControllers.indexOf(d) != -1) {
	color = controllerColorMap[d];
	if (!color) {
	color = controllerColorMap[d] = colors.pop();
	}
	} else {
	controllerColorMap[d] = color;
	}
	var className = 'controller ' + color;
	return className;
	});
	controllers.text(function (d) {
	return d;
	});
	controllers.exit().remove();

	model.controllers.forEach(function (c) {
	d3.select(document.body).classed(controllerColorMap[c] + '-selected', true);
	});

	controllers.on('click', function (c, index) {
	var allSelected = true;
	for (var key in controllerColorMap) {
	if (!d3.select(document.body).classed(controllerColorMap[key] + '-selected')) {
	allSelected = false;
	break;
	}
	}
	if (allSelected) {
	for (var key in controllerColorMap) {
	d3.select(document.body).classed(controllerColorMap[key] + '-selected', key == c)
	}
	} else {
	for (var key in controllerColorMap) {
	d3.select(document.body).classed(controllerColorMap[key] + '-selected', true)
	}
	}

	// var selected = d3.select(document.body).classed(controllerColorMap[c] + '-selected');
	// d3.select(document.body).classed(controllerColorMap[c] + '-selected', !selected);
	});
	}

	var oldModel;
	function sync(svg) {
	var d = Date.now();
	updateModel(function (newModel) {
	console.log('Update time: ' + (Date.now() - d)/1000 + 's');

	if (true \|\| !oldModel && JSON.stringify(oldModel) != JSON.stringify(newModel)) {
	updateControllers(newModel);
	updateTopology(svg, newModel);
	} else {
	console.log('no change');
	}
	updateHeader(newModel);

	oldModel = newModel;

	// do it again in 1s
	setTimeout(function () {
	sync(svg)
	}, 1000);
	});
	}

	svg = createTopologyView();
	// workaround for Chrome v25 bug
	// if executed immediately, the view box transform logic doesn't work properly
	// fixed in Chrome v27
	setTimeout(function () {
	// workaround for another Chrome v25 bug
	// viewbox transform stuff doesn't work in combination with browser zoom
	// also works in Chrome v27
	d3.select('#svg-container').style('zoom', window.document.body.clientWidth/window.document.width);
	sync(svg);
	}, 100);