Finalized auto-reload;

Improved the loading indicators.

src/GitList/Controller/NetworkController.php

@@ -10,31 +10,39 @@ use Symfony\Component\HttpFoundation\Request;
 
 class NetworkController implements ControllerProviderInterface
 {
+	/***
+	 * Reformat and prepare the commits to include everything the networkgraph must know about them
+	 *
+	 * @param $commits array
+	 */
+	private static function commitsToJsonArray( $commits ) {
+		$jsonFormattedCommits = array();
+
+		foreach( $commits as $commit ) {
+
+		}
+
+		return $jsonFormattedCommits;
+	}
+
     public function connect(Application $app)
     {
 		$route = $app['controllers_factory'];
 
 		$route->get('{repo}/network/{commitishPath}/{page}.json', function($repo, $commitishPath, $page) use ($app) {
 			/** @var $repository Repository */
-			$repository = $app['git']->getRepository($app['git.repos'], $repo);
+			$repository = $app['git']->getRepositoryFromName($app['git.repos'], $repo);
 
 			if ($commitishPath === null) {
 				$commitishPath = $repository->getHead();
 			}
 
-			list($branch, $file) = $app['util.routing']
-				->parseCommitishPathParam($commitishPath, $repo);
-
-			list($branch, $file) = $app['util.repository']->extractRef($repository, $branch, $file);
-
 			$pager = $app['util.view']->getPager($page, $repository->getTotalCommits($commitishPath));
 			$commits = $repository->getPaginatedCommits($commitishPath, $pager['current']);
 
-			// format the commits for the json reponse
 			$jsonFormattedCommits = array();
 
 			foreach( $commits as $commit ) {
-
 				$jsonFormattedCommits[$commit->getHash()] = array(
 					'hash' => $commit->getHash(),
 					'parentsHash' => $commit->getParentsHash(),
@@ -71,9 +79,8 @@ class NetworkController implements ControllerProviderInterface
 			->value('page', '0')
 			->bind('networkData');
 
-
 		$route->get('{repo}/network/{commitishPath}', function ($repo, $commitishPath) use ($app) {
-			$repository = $app['git']->getRepository($app['git.repos'], $repo);
+			$repository = $app['git']->getRepositoryFromName($app['git.repos'], $repo);
 
 			if ($commitishPath === null) {
 				$commitishPath = $repository->getHead();

web/js/networkGraph.js

@@ -8,7 +8,6 @@
 
 ( function( $ ){
 	// global config
-
 	var cfg = {
 		laneColors: ['#ff0000', '#0000FF', '#00FFFF', '#00FF00', '#FFFF00', '#ff00ff'],
 		laneHeight: 20,
@@ -26,6 +25,7 @@
 	$.fn.dragScrollr = function() {
 		var lastX,
 			lastY,
+			hotZone = 200,
 			container = this.first(),
 			domElement = container[0]; // so basically container without the jQuery stuff
 
@@ -40,20 +40,25 @@
 		function handleMouseMove(evt) {
 			evt.preventDefault();
 
+			// save the last scroll position to figure out whether the scroll event has entered the hot zone
+			var lastScrollLeft = domElement.scrollLeft;
 			domElement.scrollLeft = domElement.scrollLeft + lastX - evt.pageX;
 			domElement.scrollTop = domElement.scrollTop + lastY - evt.pageY;
 
-			// unify scroll event
-			container.trigger('dragscroll');
+			if( lastScrollLeft > hotZone && domElement.scrollLeft <= hotZone ) {
+				container.trigger('enterHotZone');
+			}
+
+			// when we move into the hot zone
 
 			lastX = evt.pageX;
 			lastY = evt.pageY;
 		}
 
 		function handleMouseUp(evt) {
-			container.off('mousemove', handleMouseMove);
-			container.off('mouseup', handleMouseUp);
-			container.off('mouseleave', handleMouseUp);
+			container.off('mousemove', handleMouseMove)
+				.off('mouseup', handleMouseUp)
+				.off('mouseleave', handleMouseUp);
 		}
 
 		// now bind the initial event
@@ -229,7 +234,7 @@
 		that.positionTo = function( x, y ) {
 			el.css('left', x + 'px');
 			el.css('top', y + 'px');
-		}
+		};
 
 
 		return that;
@@ -242,6 +247,7 @@
 			indicatorElements;
 
 		that.updateIndicators = function() {
+			console.log(indicatorElements);
 			if( isLoading ) {
 				$(indicatorElements).addClass('loading-commits');
 			} else {
@@ -253,8 +259,10 @@
 			if( !indicatorElements ) {
 				indicatorElements = $(el);
 			} else {
-				indicatorElements.add(el);
+				indicatorElements = indicatorElements.add(el);
 			}
+
+			console.log(indicatorElements.length);
 		};
 
 		that.unbindIndicator = function( el ) {
@@ -294,11 +302,15 @@
 			});
 		};
 
+		that.hasMore = function () {
+			return ( !!nextPage );
+		};
+
 		return that;
 	}
 
 
-	// the ('document').ready...
+	// the $(document).ready starting point
 	$( function() {
 
 		// initialise network graph only when there is one network graph container on the page
@@ -307,7 +319,7 @@
 		}
 
 		var
-		// the table element into which we will render our graph
+		// the element into which we will render our graph
 			commitsGraph = $('div.network-graph').first(),
 			laneManager = graphLaneManager(),
 			dataRetriever = commitDataRetriever( commitsGraph.data('source'), handleCommitsRetrieved  ),
@@ -318,9 +330,11 @@
 			detailOverlay = commitDetailOverlay();
 
 		dataRetriever.bindIndicator( $('.network-header .meta') );
+		dataRetriever.bindIndicator( commitsGraph );
 		detailOverlay.appendTo( commitsGraph );
 
-		function refreshButtonClickHandler() {
+
+		function handleEnterHotZone() {
 			dataRetriever.retrieve();
 		}
 
@@ -421,6 +435,9 @@
 
 			if (  neededWidth > paper.width ) {
 				extendPaper( neededWidth, paper.height  );
+			} else if( dataRetriever.hasMore() ) {
+				// this is the case when we have not loaded enough commits to fill the paper yet. Get some more then...
+				dataRetriever.retrieve();
 			}
 
 			$.each( commits, function ( index, commit) {
@@ -506,8 +523,8 @@
 		function handleCommitMouseover(evt) {
 			detailOverlay.setCommit( this.data('commit'))
 				.show()
-				.positionTo( evt.pageX - commitsGraph.position().left - 200,
-							 evt.pageY - commitsGraph.position().top + 10);
+				.positionTo( evt.pageX - commitsGraph.position().left + commitsGraph.scrollLeft() - 200,
+							 evt.pageY - commitsGraph.position().top + commitsGraph.scrollLeft() + 10);
 		}
 
 		function handleCommitMouseout(evt) {
@@ -540,13 +557,9 @@
 			});
 		}
 
-		refreshButton.click(refreshButtonClickHandler);
-
 		commitsGraph.dragScrollr();
+		commitsGraph.on('enterHotZone', handleEnterHotZone);
 		// load initial data
 		dataRetriever.retrieve( );
-
 	});
-
-
 }( jQuery ));

web/less/network.less

@@ -61,8 +61,22 @@
 			&>p {
 				padding-left: 48px;
 			}
+		}
 
-
+		&.loading-commits:before {
+			content: "";
+			display: block;
+			height: 100%;
+			width: 80px;
+			box-sizing: border-box;
+			padding: 10px;
+			font-weight: bold;
+			position: absolute;
+			left: 0;
+			top: 0;
+			color: #555;
+			background: rgba(255,255,255,.8) url("@{ajaxLoaderPath}") no-repeat center;
+			z-index: 2000;
 		}
 
 	}

web/less/variables.less

@@ -131,6 +131,7 @@
 @iconSpritePath:          "../img/glyphicons-halflings.png";
 @iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
 @rssIconPath:             "../img/feed.png";
+@ajaxLoaderPath:             "../img/ajax-loader.gif";
 
 // Input placeholder text color
 // -------------------------