v0.3 Release – 1st Iteration of the Graph View

I’ve been working hard trying to get the graph view working for the gitweb_mozilla template. Earlier, I documented the problems I was having. That is all resolved now and I’m moving on to bigger and better things.

So my goal was to get the graph to the stage of the coal template, which I am using as a reference and then make further improvements from there to make it look similar to the rest of the gitweb_mozilla pages.

To do this I created a new template called graph.tmpl which can be viewed by typing {url}/graph in the address bar. This is where the graph will be drawn. You can view the code it has here. However, with just this code my graph wasn’t rendering properly. The following is what it looked like: http://sidkalra.com/files/mercurial/graphView1.png. I couldn’t quite figure out why this was happening. It seemed like the graph was drawing properly and the data was appearing properly too and yet they weren’t coming together. Something was missing from the puzzle…

I showed my problem to a friend, Tiago Moreira who happened to be sitting right next to me as the time. He was able to point out that it might be a CSS problem, something I failed to consider. This was definately a lead and I had a look at the coal template’s css file and the answer hit me in the face straight away. The canvas tag was assigned a z-index of 5.

canvas {
	position: absolute;
	z-index: 5;
	top: -0.7em;
	margin: 0;
}

This means that anything in the canvas tag will have a higher priority over everything else and it will also allow the data in other tags (in this case the two ul tags with the ids graphnodes and nodebgs) to slip in underneath the canvas giving the following result: http://sidkalra.com/files/mercurial/graphView2.png

Now my graph view looks similar to the one that the coal template has. My next objectives are to improve it greatly by making it look similar to the other pages in the gitweb_mozilla theme as I mentioned above and adding more changeset information to the each row. Basically the end goal is for it to look similar to the pushlog but with the graph drawn in as well.