changeset 6728:84294e3710b8

graph: optimize rendering by appending all nodes at once
author Augie Fackler <durin42@gmail.com>
date Tue, 24 Jun 2008 10:08:32 +0200
parents f4b6dec99950
children 855851eae70f
files templates/coal/graph.tmpl templates/gitweb/graph.tmpl templates/graph.tmpl templates/static/graph.js
diffstat 4 files changed, 14 insertions(+), 19 deletions(-) [+]
line wrap: on
line diff
--- a/templates/coal/graph.tmpl	Tue Jun 24 09:53:48 2008 +0200
+++ b/templates/coal/graph.tmpl	Tue Jun 24 10:08:32 2008 +0200
@@ -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,8 +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;';
 	var item = revlink.replace(/_STYLE/, nstyle);
@@ -95,7 +90,8 @@
 	item = item.replace(/_USER/, cur[4]);
 	item = item.replace(/_DATE/, cur[5]);
 	item = item.replace(/_TAGS/, cur[7].join('&nbsp; '));
-	nodes.innerHTML += item;
+	
+	return [bg, item];
 	
 }
 
--- a/templates/gitweb/graph.tmpl	Tue Jun 24 09:53:48 2008 +0200
+++ b/templates/gitweb/graph.tmpl	Tue Jun 24 10:08:32 2008 +0200
@@ -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,8 +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;';
 	var item = revlink.replace(/_STYLE/, nstyle);
@@ -107,7 +102,7 @@
 	}
 	
 	item = item.replace(/_TAGS/, tagspan);
-	nodes.innerHTML += item;
+	return [bg, item];
 	
 }
 
--- a/templates/graph.tmpl	Tue Jun 24 09:53:48 2008 +0200
+++ b/templates/graph.tmpl	Tue Jun 24 10:08:32 2008 +0200
@@ -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,8 +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;';
 	var item = revlink.replace(/_STYLE/, nstyle);
@@ -78,7 +73,8 @@
 	item = item.replace(/_DESC/, cur[3]);
 	item = item.replace(/_USER/, cur[4]);
 	item = item.replace(/_DATE/, cur[5]);
-	nodes.innerHTML += item;
+	
+	return [bg, item];
 	
 }
 
--- a/templates/static/graph.js	Tue Jun 24 09:53:48 2008 +0200
+++ b/templates/static/graph.js	Tue Jun 24 10:08:32 2008 +0200
@@ -75,6 +75,9 @@
 
 	this.render = function(data) {
 		
+		var backgrounds = '';
+		var nodedata = '';
+		
 		for (var i in data) {
 			
 			var parity = i % 2;
@@ -118,12 +121,17 @@
 			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 add = this.vertex(x, y, color, parity, cur);
+			backgrounds += add[0];
+			nodedata += add[1];
 			
 			if (fold) this.columns -= 1;
 			
 		}
 		
+		document.getElementById('nodebgs').innerHTML += backgrounds;
+		document.getElementById('graphnodes').innerHTML += nodedata;
+		
 	}
 
 }