Additional node information

doc/d3printing/GSoC/150808_labels/dev/d3theano.css

@@ -71,7 +71,7 @@ svg {
 	pointer-events: none;
 }
 
-.nodeTooltip {
+.nodeInfo {
 	position: absolute;
 	text-align: left;
 	vertical-align: middle;

doc/d3printing/GSoC/150808_labels/dev/d3theano.js

@@ -461,11 +461,11 @@ function setupGraph() {
 		
 		// Show node details if node is not edited as has profiling information
 		if (!isEditNode) {
-		   	nodeDiv.transition()        
+		   	nodeInfo.transition()        
 		        .duration(200)      
 		        .style('opacity', .9);
-		    nodeDiv
-		    	.html(nodeDetails(node))  
+		    nodeInfo
+		    	.html(formatNodeInfos(node))
 		        .style('left', (d3.event.pageX) + 30 + 'px')     
 		        .style('top', (d3.event.pageY - 28) + 'px');
 		}
@@ -480,7 +480,7 @@ function setupGraph() {
 					.style('opacity', 0.4);
 			}
 		});
-	   	hideNodeDiv();
+	   	hideNodeInfo();
 	});
 	
 	nodes.on('contextmenu', d3.contextMenu(menuItems));
@@ -655,10 +655,10 @@ function profileColor(per) {
 	return s(per);
 }
 
-
-function fillColor(d) {
-	if (colorProfile && exists(d.value.profile)) {
-		if (d.value.shape == 'ellipse') {
+function nodeFillColor(d) {
+	if (colorProfile) {
+		var p = d.value.profile;
+		if (d.value.node_type == 'apply' && exists(p)) {
 			return profileColor(d.value.profile[0] / d.value.profile[1]);
 		} else {
 			return 'white';
@@ -678,21 +678,30 @@ function formatTime(sec) {
 	return s;
 }
 
-function nodeDetails(node) {
+function formatNodeInfos(node) {
 	var v = node.value;
-	var s = '<b><center>' + v.label + '</center></b>';
+	var s = '<b><center>' + v.label + '</center></b><hr>';
+	s += '<b>Node:</b> ' + replaceAll(v.node_type, '_', ' ') + ' node';
 	if (exists(v.dtype)) {
-		s += 'Type: ' + v.dtype;
+		s += '</br>';
+		s += '<b>Type:</b> <source>' + v.dtype + '</source>';
+	}
+	if (exists(v.apply_op)) {
+		s += '</br>';
+		s += '<b>Apply:</b> <source>' + v.apply_op + '</source>';
 	}
 	if (exists(v.tag)) {
-		s += '<br>File: ' + v.tag[0];
-		s += '<br>Line: ' + v.tag[1];
-		s += '<br>Definition: ' + v.tag[2];
+		s += '<p>';
+		s += '<b>Location:</b> <source>' + v.tag[1] + ': ' + v.tag[0] + '</source><br>';
+		s += '<b>Definition:</b> <source>' + v.tag[2] + '</source><br>';
+		s += '</p>';
 	}
 	var p = v.profile;
-	if (exists(p) && length(p)) {
-		s += '<br>Time: ' + formatTime(p[0]);
-		s += '<br>Time: ' + (p[0] / p[1] * 100).toFixed(1) + '%';
+	if (exists(p)) {
+		s += '<p>';
+		s += '<b>Time:</b> ' + formatTime(p[0]) + '<br>';
+		s += '<b>Time:</b> ' + (p[0] / p[1] * 100).toFixed(1) + '%';
+		s += '</p>';
 	}
 	return s;	
 }
@@ -715,7 +724,7 @@ function updateNode(d, node) {
 			.attr('width', d.value.width)
 			.attr('height', d.value.height);
 	}
-	shape.attr('fill', fillColor(d));
+	shape.attr('fill', nodeFillColor(d));
 	
 	node.selectAll('text').remove();
 	var text = node.append('text')
@@ -736,8 +745,8 @@ function updateNodes() {
 	});	
 }
 
-function hideNodeDiv() {
-	nodeDiv.transition()        
+function hideNodeInfo() {
+	nodeInfo.transition()        
         .duration(200)      
         .style('opacity', 0);
 }
@@ -756,7 +765,7 @@ function editNode(elm, d) {
 		if (d3.event.defaultPrevented) return;
 		
 		isEditNode = true;
-		hideNodeDiv();
+		hideNodeInfo();
 		
 		var form = node.append('foreignObject')
 		.attr('x', pos.x)

doc/d3printing/GSoC/150808_labels/dev/dev.html

@@ -65,8 +65,8 @@
 			.attr('class', 'edgeTooltip')
 			.style('opacity', 0.0);
 			
-		var nodeDiv = d3.select('body').append('div')
-			.attr('class', 'nodeTooltip')
+		var nodeInfo = d3.select('body').append('div')
+			.attr('class', 'nodeInfo')
 			.style('opacity', 0.0);
 		
 		// Definition head of edges

doc/d3printing/GSoC/150808_labels/example1/d3-context-menu.css

+.d3-context-menu {
+	position: absolute;
+	display: none;
+	background-color: #f2f2f2;
+	border-radius: 4px;
+
+	font-family: Arial, sans-serif;
+	font-size: 14px;
+	min-width: 50px;
+	border: 1px solid #d4d4d4;
+
+	z-index:1200;
+}
+
+.d3-context-menu ul {
+	list-style-type: none;
+	margin: 4px 0px;
+	padding: 0px;
+	cursor: default;
+}
+
+.d3-context-menu ul li {
+	padding: 4px 16px;
+}
+
+.d3-context-menu ul li:hover {
+	background-color: #4677f8;
+	color: #fefefe;
+}

doc/d3printing/GSoC/150808_labels/example1/d3-context-menu.js

+d3.contextMenu = function (menu, openCallback) {
+
+	// create the div element that will hold the context menu
+	d3.selectAll('.d3-context-menu').data([1])
+		.enter()
+		.append('div')
+		.attr('class', 'd3-context-menu');
+
+	// close menu
+	d3.select('body').on('click.d3-context-menu', function() {
+		d3.select('.d3-context-menu').style('display', 'none');
+	});
+
+	// this gets executed when a contextmenu event occurs
+	return function(data, index) {	
+		var elm = this;
+
+		d3.selectAll('.d3-context-menu').html('');
+		var list = d3.selectAll('.d3-context-menu').append('ul');
+		list.selectAll('li').data(menu).enter()
+			.append('li')
+			.html(function(d) {
+				return d.title;
+			})
+			.on('click', function(d, i) {
+				d.action(elm, data, index);
+				d3.select('.d3-context-menu').style('display', 'none');
+			});
+
+		// the openCallback allows an action to fire before the menu is displayed
+		// an example usage would be closing a tooltip
+		if (openCallback) openCallback(data, index);
+
+		// display context menu
+		d3.select('.d3-context-menu')
+			.style('left', (d3.event.pageX - 2) + 'px')
+			.style('top', (d3.event.pageY - 2) + 'px')
+			.style('display', 'block');
+
+		d3.event.preventDefault();
+	};
+};

doc/d3printing/GSoC/150808_labels/example1/d3theano.css

+svg {
+	margin-left:auto;
+	margin-right:auto;
+	display:block;
+	position: fixed;
+	border: 0px solid black;
+	top:5%; left:0%; right:0% bottom=10%
+}
+
+.nodeRect {
+	stroke: black;
+	border: 3px solid black;
+}
+
+.nodeEllipse {
+	stroke: black;
+	border: 3px solid black;
+}
+
+.nodeText {
+	color: black;
+}
+
+.edge {
+	stroke-width: 3px;
+	cursor: pointer;
+	opacity: 0.4;
+}
+
+.edgeLabelRect {
+	stroke: black;
+	border: 1px solid black;
+	fill: skyblue;
+	opacity: 0.9;
+}
+
+.edgeLabelText {
+	fill: black;
+	text-anchor: start;
+}
+
+.arrowHead {
+	stroke: green;
+	stroke-width: 1px;
+}
+
+.arrowHead_n {
+	stroke: green;
+}
+
+.arrowHead_r {
+	stroke-width: 3px;
+	fill: red;
+	stroke: red;
+}
+
+.arrowHead_b {
+	stroke: dodgerblue;
+}
+
+.edgeTooltip {
+	position: absolute;
+	text-align: center;
+	vertical-align: middle;
+	min-width: 10px;
+	min-height: 10px;
+	padding: 5px;
+	background: lightsteelblue;
+	border: 1px solid black;
+	border-radius: 8px;
+	pointer-events: none;
+}
+
+.nodeInfo {
+	position: absolute;
+	text-align: left;
+	vertical-align: middle;
+	min-width: 10px;
+	min-height: 10px;
+	padding: 5px;
+	background: lightsteelblue;
+	border: 1px solid black;
+	border-radius: 8px;
+	pointer-events: none;
+}
+
+path.hull {
+	fill: lightsteelblue;
+	fill-opacity: 0.3;
+}
\ No newline at end of file