GitList/web/js/networkGraph.js

/**
 * Network Graph JS
 * This File is a part of the GitList Project at http://gitlist.org
 *
 * @license http://www.opensource.org/licenses/bsd-license.php
 * @author Lukas Domnick <lukx@lukx.de> http://github.com/lukx
 */
$( function() {

	// initialise network graph only when there is one network graph container on the page
	if( $('table.network-graph').length !== 1 ) {
		return;
	}

	var

	cfg = {
		laneColors: ['#ff0000', '#0000FF', '#00FFFF', '#00FF00', '#FFFF00', '#ff00ff'],
		laneWidth: 10,
		dotRadius: 3,
		rowHeight: 42 // thanks for making this divisable by two
	},

	// the table element into which we will render our graph
	commitsTable = $('table.network-graph').first(),
	nextPage = commitsTable.data('source'),

	refreshButton = $('<button class="btn btn-small"></button>').insertAfter(commitsTable.parent('div'))
	;

	function fetchCommitData( url ) {
		console.log('Starting to fetch commit data from ', url);
		setRefreshButtonState(true);
		$.ajax({
			dataType: "json",
			url: url,
			success: handleNetworkDataLoaded,
			error: handleNetworkDataError
		});
	}


	function setRefreshButtonState( isCurrentlyLoading ) {
		var newInner = '<i class="icon-repeat"></i> Load more';
		if( isCurrentlyLoading ) {
			newInner = '<i class="icon-refresh"></i> Loading...';
		}

		refreshButton.html(newInner);
	};

	var refreshButtonClickHandler = function () {
		fetchCommitData(nextPage);
	};

	refreshButton.click(refreshButtonClickHandler);

	// load initial data
	fetchCommitData( nextPage );

	function handleNetworkDataLoaded( data ) {
		setRefreshButtonState(false);
		console.log('Retreived Commit Data', data);

		// store the next page as gotten from pagination
		nextPage = data.nextPage;

		// no commits or empty commits array? Well, we can't draw a graph of that
		if( !data.commits || data.commits.length < 1 ) {
			handleNoAvailableData();
			return;
		}

		prepareCommits( data.commits );
		renderCommits( data.commits );
	}

	function handleNetworkDataError( err ){
		setRefreshButtonState(false);
		console.log(err);
	}

	function handleNoAvailableData() {
		console.log('No Data available');
	}

	var parentsBeingWaitedFor = {},
		occupiedLanes = [],
		maxLanes = 0;

	function prepareCommits( commits ) {
		$.each( commits, function ( index, commit) {
			prepareCommit( commit );
		});
	}

	function findFreeLane() {
		var i = 0;

		while( true ) {
			// if an array index is not yet defined or set to false, the lane with that number is free.
			if( !occupiedLanes[i] ) {
				return i;
			}
			i ++;
		}
	}

	function prepareCommit( commit ) {
		// make "date" an actual JS Date object
		commit.date = new Date(commit.date*1000);

		// the parents will be filled once they have become rendered

		commit.parents = [];
		// get children for this commit
		commit.children = [];
		if( parentsBeingWaitedFor.hasOwnProperty( commit.hash )) {
			// there are child commits waiting
			commit.children = parentsBeingWaitedFor[commit.hash];

			// let the children know their parent objects
			$.each( commit.children, function(key, thisChild ) {
				thisChild.parents.push( commit );
			});

			// remove this item from parentsBeingWaitedFor
			delete parentsBeingWaitedFor[commit.hash];
			console.log('taking commit out', commit.hash, parentsBeingWaitedFor);
		}

		commit.isFork  = ( commit.children.length > 1 );
		commit.isMerge = ( commit.parentsHash.length > 1 );



		// after a fork, the occupied lanes must be cleaned up. The children used some lanes we no longer occupy
		if (commit.isFork === true ) {
			$.each( commit.children, function( key, thisChild ) {
				console.log('Freeing lane ', thisChild.lane.number);
				occupiedLanes[thisChild.lane.number] = false;
			});
		}

		// find out which lane we're on. Start with a free one
		var laneNumber = findFreeLane();

		// if the child is a merge, we need to figure out which lane we may render this commit on.
		// Rules are simple: A "parent" by the same author as the merge may render on the same line as the parent
		// others take the next free lane.
		if( commit.children.length > 0) {
			if( commit.children[0].isMerge && commit.children[0].author.email === commit.author.email ) {
				console.log('same author, same lane', commit);
				laneNumber = commit.children[0].lane.number;
				// furthermore, commits in a linear line of events may stay on the same lane, too
			} else if ( !commit.children[0].isMerge ) {
				console.log('Taking the childs lane because it was not a merge', commit);
				laneNumber = commit.children[0].lane.number;
			}
		}

		commit.lane = getLaneInfo( laneNumber );

		// now the lane we chose must be marked occupied again.
		console.log('Occupying lane ', commit.lane.number);
		occupiedLanes[commit.lane.number] = true;
		maxLanes = Math.max( occupiedLanes.length, maxLanes);

		// This commit's parents are not on stage yet, as we are rendering following the time line.
		// Therefore we are registering this commit as "waiting" for each of the parent hashes

		$.each( commit.parentsHash, function( key, thisParentHash ) {
			// iterating over the rendered commit's parent hashes...
			// parent hash should always be a string, but although I can't imagine a reason why it shouldn't,
			// let's just clear out the case where it is a complete commit object...

			// If parentsBeingWaitedFor does not already have a key for thisParent's hash, initialise as array
			if( !parentsBeingWaitedFor.hasOwnProperty(thisParentHash) ) {
				parentsBeingWaitedFor[thisParentHash] = [];
			}

			// allright, now register the commit that is currently being rendered with the parent queue
			parentsBeingWaitedFor[ thisParentHash ].push( commit );
		});

	}

	var lastRenderedDate = new Date(0);
	function renderCommits( commits ) {
		$.each( commits, function ( index, commit) {
			if( lastRenderedDate.getYear() !== commit.date.getYear()
				|| lastRenderedDate.getMonth() !== commit.date.getMonth()
				|| lastRenderedDate.getDate() !== commit.date.getDate() ) {
				// insert date row
			}
			renderCommit(commit);
			lastRenderedDate = commit.date;
		});
	}

	function renderCommit( commit ) {

		var tableRow = $('<tr></tr>');

		// the required canvas width is at least the lane center plus the radius - but that will be added later

		// now the parent with the highest lane number determines whether we need more space to the right...


		// build the table row and insert it, so we can find out the required height
		var drawingArea = $('<div class="network-tree-segment"></div>');
		tableRow.append( $('<td/>').append(drawingArea));
		tableRow.append('<td>' + commit.date.toLocaleString() +'</td>');
		tableRow.append('<td>' + commit.author.name + '</td>');
		tableRow.append('<td>' + commit.message + '</td>');
		tableRow.data('theCommit', commit);

		commitsTable.append(tableRow);

		// awesome, now we have the height!
		var paper = Raphael( drawingArea[0], cfg.laneWidth * maxLanes, cfg.rowHeight);
		tableRow.data('rjsPaper', paper);

		 commit.tr = tableRow;

		commit.dot = paper.circle( commit.lane.centerX, cfg.rowHeight/2, cfg.dotRadius );
		commit.dot.attr({
			fill: commit.lane.color,
			stroke: 'none'
		});

		// render the line from this commit to it's children, but on their lane
		$.each( commit.children, function ( idx, thisChild ) {
			connectDots( commit, thisChild );
		});
	}

	function connectDots( firstCommit, secondCommit ) {
		var tableRow = firstCommit.tr;
		// for each child,
		// move upwards in <tr>s, beginning from the "commit" (not: child!)
		// until the tr.data('theCommit') is thisChild.
		//
		// if there is one child only, stay on the commit's lane as long as possible,
		// but if there is more than one child, switch to the child's lane ASAP.
		// this is to display merges and forks where they happen (ie. at a commit node/ a dot), rather than
		// "forking" from a line

		var nRow = tableRow.prev('tr'),
		// lineX holds the X position the line will be on while it's straight
			lineLane = firstCommit.lane;

		if( firstCommit.isFork ) {
			lineLane = secondCommit.lane;
		}

		// before iterating upwards as described above, the line part from the commit to the adequate lane
		// must be drawn
		tableRow.data('rjsPaper').path(
				getSvgLineString( firstCommit.lane.centerX, cfg.rowHeight/2,
					lineLane.centerX, 0) )
			.attr({
				stroke: lineLane.color, "stroke-width": 2
			})
			.data('theCommit', firstCommit).data('theChild', secondCommit).click(lineClickHandler)
			.toBack();

		while( nRow.length > 0 ) {

			if ( nRow.data('theCommit') === secondCommit ) {
				// we are done, render only the bottom half line towards the child
				// Starting at lineX, but moving to thisChild's lane.
				nRow.data('rjsPaper')
					.path(
						getSvgLineString( lineLane.centerX, cfg.rowHeight,
							secondCommit.lane.centerX, cfg.rowHeight/2) )
					.attr({
						stroke: lineLane.color, "stroke-width": 2
					})
					.data('theCommit', firstCommit).data('theChild', secondCommit).click(lineClickHandler)
					.toBack();
				return;
			} else {
				// this is just a common "throughput" line part from bottom of the TR to top without any X movement
				//
				// maybe the paper isn't big enough yet, so expand it first...
				nRow.data('rjsPaper')
					.path(
						getSvgLineString( lineLane.centerX, 0,
							lineLane.centerX, cfg.rowHeight) )
					.attr({
						stroke: lineLane.color, "stroke-width": 2
					})
					.data('theCommit', firstCommit).data('theChild', secondCommit).click(lineClickHandler)
					.toBack();
				nRow = nRow.prev('tr');
			}
		}
	}

	function getSvgLineString( fromX, fromY, toX, toY ) {
		return 'M' + fromX + ',' + fromY + 'L' + toX + ',' + toY;
	}

	function lineClickHandler() {
		console.log('Hi, I am connecting', this.data('theCommit'), 'with', this.data('theChild'));

		flashDot( this.data('theCommit').dot );
		flashDot( this.data('theChild').dot );
	}

	function flashDot( dot ) {
		var origCol = dot.attr('fill');
		dot.attr('fill', '#00FF00');
		dot.animate( {
			'fill': origCol
		}, 1000);
	}

	function dotClickHandler(evt) {
		console.log(this.data('commit'));
	}

	function getLaneInfo( laneNumber ) {
		return {
			'number': laneNumber,
			'centerX': ( laneNumber * cfg.laneWidth ) + (cfg.laneWidth/2),
			'color': cfg.laneColors[ laneNumber % cfg.laneColors.length ]
		};
	}


});