Moving the Dot-Connecting algorithm to a dedicated function

views/network.twig

@@ -18,5 +18,6 @@
 	</div>
 
 	
+
     <hr />
 {% endblock %}

web/js/networkGraph.js

@@ -23,10 +23,14 @@ $( function() {
 
 	// the table element into which we will render our graph
 	commitsTable = $('table.network-graph').first(),
-	url = commitsTable.data('source');
+	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,
@@ -35,18 +39,30 @@ $( function() {
 		});
 	}
 
-	// load initial data
-	fetchCommitData( url );
 
-	//only for debug purposes!!
-	var nextPage;
-	window.fcd = function () {
+	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
@@ -60,6 +76,7 @@ $( function() {
 	}
 
 	function handleNetworkDataError( err ){
+		setRefreshButtonState(false);
 		console.log(err);
 	}
 
@@ -204,6 +221,8 @@ $( function() {
 		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,
@@ -212,7 +231,12 @@ $( function() {
 
 		// 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.
@@ -224,36 +248,36 @@ $( function() {
 
 		var nRow = tableRow.prev('tr'),
 		// lineX holds the X position the line will be on while it's straight
-				lineLane = commit.lane;
+			lineLane = firstCommit.lane;
 
-			if( commit.isFork ) {
-				lineLane = thisChild.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( commit.lane.centerX, cfg.rowHeight/2,
+				getSvgLineString( firstCommit.lane.centerX, cfg.rowHeight/2,
 					lineLane.centerX, 0) )
 			.attr({
 				stroke: lineLane.color, "stroke-width": 2
 			})
-				.data('theCommit', commit).data('theChild', thisChild).click(lineClickHandler)
+			.data('theCommit', firstCommit).data('theChild', secondCommit).click(lineClickHandler)
 			.toBack();
 
 		while( nRow.length > 0 ) {
 
-				if ( nRow.data('theCommit') === thisChild ) {
+			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,
-											  thisChild.lane.centerX, cfg.rowHeight/2) )
+							secondCommit.lane.centerX, cfg.rowHeight/2) )
 					.attr({
 						stroke: lineLane.color, "stroke-width": 2
 					})
-						.data('theCommit', commit).data('theChild', thisChild).click(lineClickHandler)
+					.data('theCommit', firstCommit).data('theChild', secondCommit).click(lineClickHandler)
 					.toBack();
 				return;
 			} else {
@@ -267,19 +291,18 @@ $( function() {
 					.attr({
 						stroke: lineLane.color, "stroke-width": 2
 					})
-						.data('theCommit', commit).data('theChild', thisChild).click(lineClickHandler)
+					.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(evt) {
+	function lineClickHandler() {
 		console.log('Hi, I am connecting', this.data('theCommit'), 'with', this.data('theChild'));
 
 		flashDot( this.data('theCommit').dot );
@@ -303,7 +326,7 @@ $( function() {
 			'number': laneNumber,
 			'centerX': ( laneNumber * cfg.laneWidth ) + (cfg.laneWidth/2),
 			'color': cfg.laneColors[ laneNumber % cfg.laneColors.length ]
-		}
+		};
 	}