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( $('div.network-graph').length !== 1 ) {
		return;
	}

	var

	cfg = {
		laneColors: ['#ff0000', '#0000FF', '#00FFFF', '#00FF00', '#FFFF00', '#ff00ff'],
		laneHeight: 20,
		columnWidth: 42,
		dotRadius: 3
	},

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

	refreshButton = $('<button class="btn btn-small"></button>').insertAfter(commitsGraph.parent('div')),
	paper = Raphael( commitsGraph[0], commitsGraph.width(), commitsGraph.height()),
	usedColumns = 0
	;

	window.pap = paper;

	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);
	};

	function refreshButtonClickHandler() {
		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];
		}

		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 ) {
				// free this lane
				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.
		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 ) {
		var neededWidth = ((usedColumns + Object.keys(commits).length) * cfg.columnWidth);
		if (  neededWidth > paper.width ) {
			console.log(neededWidth);
			extendPaper( neededWidth, paper.height  );


		} else {
			console.log( paper.width, neededWidth);
		}

		$.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 extendPaper( newWidth, newHeight ) {
		var deltaX = newWidth - paper.width;

		paper.setSize( newWidth, newHeight );
		// fixup parent's scroll position
		paper.canvas.parentNode.scrollLeft = paper.canvas.parentNode.scrollLeft + deltaX;

		// now fixup the x position

		paper.forEach( function( el ) {

			if( el.type === "circle" ) {
				el.attr('cx', el.attr('cx') + deltaX);
			} else if ( el.type === "path") {
				var newXTranslation = el.data('currentXTranslation') || 0;
				newXTranslation += deltaX;
				el.transform( 't' + newXTranslation + ' 0' );
				el.data('currentXTranslation', newXTranslation);
			}
		});
	}

	function renderCommit( commit ) {
		// find the column this dot is drawn on
		usedColumns++;
		commit.column = usedColumns;

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


		commit.dot = paper.circle( getXPositionForColumnNumber(commit.column), commit.lane.centerY, cfg.dotRadius );
		commit.dot.attr({
			fill: commit.lane.color,
			stroke: 'none',
			cursor: 'pointer'
		})
			.data('commit', commit)
			.click( dotClickHandler );

		$.each( commit.children, function ( idx, thisChild ) {
			// if there is one child only, stay on the commit's lane as long as possible when connecting the dots.
			// 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
			// connecting from a line.
			// So: commit.isFork decides whether or not we must switch lanes early

			connectDots( commit, thisChild, commit.isFork );
		});
	}

	/**
	 *
	 * @param firstCommit
	 * @param secondCommit
	 * @param switchLanesEarly (boolean): Move the line to the secondCommit's lane ASAP? Defaults to false
	 */
	function connectDots( firstCommit, secondCommit, switchLanesEarly ) {
		switchLanesEarly = switchLanesEarly || false;


		var lineLane = switchLanesEarly ? secondCommit.lane : firstCommit.lane;

		// the connection has 3 segments:
		// - from the x/y center of firstCommit.dot to the rightmost end (x) of the commit's column, with y=lineLane
		// - from the rightmost end of firstCommit's column, to the leftmost end of secondCommit's column
		// - from the leftmost end of secondCommit's column (y=lineLane) to the x/y center of secondCommit



		// draw the line between the two dots
		paper.path( getSvgLineString( [firstCommit.dot.attr('cx'),
									   firstCommit.dot.attr('cy')],

									  [firstCommit.dot.attr('cx') + (cfg.columnWidth/2),
									   lineLane.centerY],

									[secondCommit.dot.attr('cx') - (cfg.columnWidth/2),
									   lineLane.centerY],

									  [secondCommit.dot.attr('cx'),
									   secondCommit.dot.attr('cy')]
			)).attr({
				stroke: lineLane.color, "stroke-width": 2
			}).toBack();
		return;
	}

	// set together a path string from any amount of arguments
	// each argument is an array of [x, y]
	function getSvgLineString( ) {
		if (arguments.length < 2) return

		// we are using a little trick here: Due to the right-to-left direction of the graph, the fix point is at the
		// right hand side. But the top-right point will change each time we extend the drawing area, which would
		// result in a terrible parsing and re-assembling every single sub path.
		// Instead, we use the moveto feature to start the line at "our" base (top-right), and draw the lines using
		// relative linetos: The linetos will always stay the same - we only have to update the base

		var svgString = 'M' + arguments[0][0] + ' ' + arguments[0][1];

		for (var i = 1, j = arguments.length; i < j; i++){

			// x =0 means a relatively unchanged x value

			svgString += 'L' + arguments[i][0] + ' ' + arguments[i][1];

		}

		return svgString;
	}

	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,
			'centerY': ( laneNumber * cfg.laneHeight ) + (cfg.laneHeight/2),
			'color': cfg.laneColors[ laneNumber % cfg.laneColors.length ]
		};
	}

	function getXPositionForColumnNumber( columnNumber ) {
		// we want the column's center point
		return ( paper.width - ( columnNumber * cfg.columnWidth ) - (cfg.columnWidth / 2 ));
	}

	function initScrolling() {
		commitsGraph.on('mousedown', handleMouseDown);
		var lastX, lastY;

		function handleMouseDown( evt ) {
			commitsGraph.on('mousemove', handleMouseMove);
			commitsGraph.on('mouseup', handleMouseUp);
			commitsGraph.on('mouseleave', handleMouseUp);
			lastX = evt.pageX;
			lastY = evt.pageY;


		}

		function handleMouseMove(evt) {
			evt.preventDefault();

			commitsGraph[0].scrollLeft = commitsGraph[0].scrollLeft + lastX - evt.pageX;
			commitsGraph[0].scrollTop = commitsGraph[0].scrollTop + lastY - evt.pageY;

			lastX = evt.pageX;
			lastY = evt.pageY;
		}

		function handleMouseUp(evt) {
			commitsGraph.off('mousemove', handleMouseMove);
			commitsGraph.off('mouseup', handleMouseUp);
			commitsGraph.off('mouseleave', handleMouseUp);
		}
	}


	refreshButton.click(refreshButtonClickHandler);
	initScrolling();
	// load initial data
	fetchCommitData( nextPage );


});