[PATCH] Add colored legend to the web graph

[Lindsey at be-mel-corp01.betoptions.com]

# HG changeset patch
# User lindsey
# Date 1227834953 -39600
# Node ID 824b032c8d2fa57068319dbc2e8cbbf2b4747f35
# Parent  62f1f213165490fe88b8bfb8dbaa59fd1f443c35
Add colored legend to the web graph

diff --git a/templates/paper/graph.tmpl b/templates/paper/graph.tmpl
old mode 100644
new mode 100755
--- a/templates/paper/graph.tmpl
+++ b/templates/paper/graph.tmpl
@@ -22,6 +22,8 @@
 <ul>
 <li><a href="{url}rev/{node|short}{sessionvars%urlparameter}">changeset</a></li>
 <li><a href="{url}file/{node|short}{path|urlescape}{sessionvars%urlparameter}">browse</a></li>
+</ul>
+<ul id="branch_colors">
 </ul>
 </div>
 
diff --git a/templates/static/graph.js b/templates/static/graph.js
old mode 100644
new mode 100755
--- a/templates/static/graph.js
+++ b/templates/static/graph.js
@@ -19,7 +19,7 @@
 ];
 
 function Graph() {
-	
+
 	this.canvas = document.getElementById('graph');
 	if (navigator.userAgent.indexOf('MSIE') >= 0) this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
 	this.ctx = this.canvas.getContext('2d');
@@ -31,13 +31,13 @@
 	this.cell = [2, 0];
 	this.columns = 0;
 	this.revlink = '';
-	
+
 	this.scale = function(height) {
 		this.bg_height = height;
 		this.box_size = Math.floor(this.bg_height / 1.2);
 		this.cell_height = this.box_size;
 	}
-	
+
 	function colorPart(num) {
 		num *= 255
 		num = num < 0 ? 0 : num;
@@ -51,14 +51,14 @@
 	}
 
 	this.setColor = function(color, bg, fg) {
-		
+
 		// Set the colour.
 		//
 		// Picks a distinct colour based on an internal wheel; the bg
 		// parameter provides the value that should be assigned to the 'zero'
 		// colours and the fg parameter provides the multiplier that should be
 		// applied to the foreground colours.
-		
+
 		color %= colors.length;
 		var red = (colors[color][0] * fg) || bg;
 		var green = (colors[color][1] * fg) || bg;
@@ -70,27 +70,29 @@
 		this.ctx.strokeStyle = s;
 		this.ctx.fillStyle = s;
 		return s;
-		
+
 	}
 
 	this.render = function(data) {
-		
+
 		var backgrounds = '';
 		var nodedata = '';
-		
+
+		var branch_colors = {};
+
 		for (var i in data) {
-			
+
 			var parity = i % 2;
 			this.cell[1] += this.bg_height;
 			this.bg[1] += this.bg_height;
-			
+
 			var cur = data[i];
 			var node = cur[1];
 			var edges = cur[2];
 			var fold = false;
-			
+
 			for (var j in edges) {
-				
+
 				line = edges[j];
 				start = line[0];
 				end = line[1];
@@ -99,39 +101,54 @@
 				if (end > this.columns || start > this.columns) {
 					this.columns += 1;
 				}
-				
+
 				if (start == this.columns && start > end) {
 					var fold = true;
 				}
-				
+
 				x0 = this.cell[0] + this.box_size * start + this.box_size / 2;
 				y0 = this.bg[1] - this.bg_height / 2;
 				x1 = this.cell[0] + this.box_size * end + this.box_size / 2;
 				y1 = this.bg[1] + this.bg_height / 2;
-				
+
 				this.edge(x0, y0, x1, y1, color);
-				
+
 			}
-			
+
 			// Draw the revision node in the right column
-			
+
 			column = node[0]
 			color = node[1]
-			
+
 			radius = this.box_size / 8;
 			x = this.cell[0] + this.box_size * column + this.box_size / 2;
 			y = this.bg[1] - this.bg_height / 2;
 			var add = this.vertex(x, y, color, parity, cur);
 			backgrounds += add[0];
 			nodedata += add[1];
-			
+
 			if (fold) this.columns -= 1;
-			
+
+			branch_colors[data[i][6][0]] = this.setColor(color, 0.25, 0.75);
+
 		}
-		
+
 		document.getElementById('nodebgs').innerHTML += backgrounds;
 		document.getElementById('graphnodes').innerHTML += nodedata;
-		
+
+		this.drawBranchColors(branch_colors);
+
+	}
+
+	this.drawBranchColors = function(colors) {
+
+		var html = '';
+
+		for (var branch_name in colors) {
+			html = html + '<li class="branch_color" style="color:' + colors[branch_name] + ';border-bottom: 2px solid ' + colors[branch_name] + '">' + branch_name.substr(0, 11) + '</li>';
+		}
+
+		document.getElementById('branch_colors').innerHTML = html;
 	}
 
 }
diff --git a/templates/static/style-paper.css b/templates/static/style-paper.css
old mode 100644
new mode 100755
--- a/templates/static/style-paper.css
+++ b/templates/static/style-paper.css
@@ -245,3 +245,11 @@
 	position: relative;
 	top: -3px;
 }
+
+#branch_colors {
+	position: fixed;
+}
+
+li.branch_color {
+	font-size: 85%;
+}