[PATCH] Optimization for hgweb's graph JS

[Augie Fackler]

# HG changeset patch
# User Augie Fackler <durin42 at gmail.com>
# Date 1214263270 18000
# Node ID 2ed19dcfbfd11cc48c523afe00602716c63ff170
# Parent  1fe6f365df2e0ed6dd56b5bd9993812378506174
Change the way in which the javascript renders the graph such that the  
graph
renders significantly faster.

diff --git a/templates/coal/graph.tmpl b/templates/coal/graph.tmpl
--- a/templates/coal/graph.tmpl
+++ b/templates/coal/graph.tmpl
@@ -67,9 +67,6 @@
  	
  }

-var nodes = document.getElementById('graphnodes');
-var nodebgs = document.getElementById('nodebgs');
-
  var revlink = '<li style="_STYLE"><span class="desc">';
  revlink += '<a href="{url}rev/_NODEID{sessionvars%urlparameter}"  
title="_NODEID">_DESC</a>';
  revlink += '</span><span class="tag">_TAGS</span>';
@@ -83,7 +80,6 @@
  	this.ctx.fill();
  	
  	var bg = '<li class="bg parity' + parity + '"></li>';
-	nodebgs.innerHTML += bg;
  	
  	var left = (this.columns + 1) * this.bg_height;
  	var nstyle = 'padding-left: ' + left + 'px;';
@@ -95,8 +91,8 @@
  	item = item.replace(/_USER/, cur[4]);
  	item = item.replace(/_DATE/, cur[5]);
  	item = item.replace(/_TAGS/, cur[7].join('  '));
-	nodes.innerHTML += item;
-	
+ 	return {'nodesBg': bg,
+		'nodes': item }	
  }

  graph.render(data);
diff --git a/templates/gitweb/graph.tmpl b/templates/gitweb/graph.tmpl
--- a/templates/gitweb/graph.tmpl
+++ b/templates/gitweb/graph.tmpl
@@ -59,9 +59,6 @@
  	
  }

-var nodes = document.getElementById('graphnodes');
-var nodebgs = document.getElementById('nodebgs');
-
  var revlink = '<li style="_STYLE"><span class="desc">';
  revlink += '<a class="list" href="{url}rev/_NODEID{sessionvars 
%urlparameter}" title="_NODEID"><b>_DESC</b></a>';
  revlink += '</span> _TAGS';
@@ -75,7 +72,6 @@
  	this.ctx.fill();
  	
  	var bg = '<li class="bg parity' + parity + '"></li>';
-	nodebgs.innerHTML += bg;
  	
  	var left = (this.columns + 1) * this.bg_height;
  	var nstyle = 'padding-left: ' + left + 'px;';
@@ -107,8 +103,9 @@
  	}
  	
  	item = item.replace(/_TAGS/, tagspan);
-	nodes.innerHTML += item;
-	
+    return {'nodesBg': bg,
+            'nodes': item
+           };
  }

  graph.render(data);
diff --git a/templates/graph.tmpl b/templates/graph.tmpl
--- a/templates/graph.tmpl
+++ b/templates/graph.tmpl
@@ -52,9 +52,6 @@
  	
  }

-var nodes = document.getElementById('graphnodes');
-var nodebgs = document.getElementById('nodebgs');
-
  var revlink = '<li style="_STYLE"><span class="desc">';
  revlink += '<a href="{url}rev/_NODEID{sessionvars%urlparameter}"  
title="_NODEID">_DESC</a>';
  revlink += '</span><span class="info">_DATE ago, by _USER</span></ 
li>';
@@ -67,7 +64,6 @@
  	this.ctx.fill();
  	
  	var bg = '<li class="bg parity' + parity + '"></li>';
-	nodebgs.innerHTML += bg;
  	
  	var left = (this.columns + 1) * this.bg_height;
  	var nstyle = 'padding-left: ' + left + 'px;';
@@ -78,7 +74,9 @@
  	item = item.replace(/_DESC/, cur[3]);
  	item = item.replace(/_USER/, cur[4]);
  	item = item.replace(/_DATE/, cur[5]);
-	nodes.innerHTML += item;
+	return {'nodesBg': bg,
+		'nodes': item
+		}
  	
  }

diff --git a/templates/static/graph.js b/templates/static/graph.js
--- a/templates/static/graph.js
+++ b/templates/static/graph.js
@@ -74,7 +74,8 @@
  	}

  	this.render = function(data) {
-		
+		nodesbg_append = ''
+		nodes_append = ''
  		for (var i in data) {
  			
  			var parity = i % 2;
@@ -118,12 +119,13 @@
  			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;
-			this.vertex(x, y, color, parity, cur);
-			
+			var newData = this.vertex(x, y, color, parity, cur);
+			nodesbg_append += newData.nodesBg;
+			nodes_append += newData.nodes;
  			if (fold) this.columns -= 1;
-			
  		}
-		
+		document.getElementById('graphnodes').innerHTML += nodes_append;
+		document.getElementById('nodebgs').innerHTML += nodesbg_append;
  	}

  }