Add loading indicators; handle binary files; keep selected file across points in time.

services/web/app/views/project/editor/history-file-tree.pug

@@ -7,6 +7,7 @@ aside.file-tree.full-size(
 			file-tree="currentFileTree"
 			selected-pathname="history.selection.pathname"
 			on-selected-file-change="handleFileSelection(file)"
+			is-loading="history.loadingFileTree"
 		)
 
 script(type="text/ng-template", id="historyFileTreeTpl")
@@ -14,7 +15,11 @@ script(type="text/ng-template", id="historyFileTreeTpl")
 		history-file-entity(
 			ng-repeat="fileEntity in $ctrl.fileTree"
 			file-entity="fileEntity"
+			ng-show="!$ctrl.isLoading"
 		)
+		.loading(ng-show="$ctrl.isLoading")
+			i.fa.fa-spin.fa-refresh
+			|    #{translate("loading")}...
 
 script(type="text/ng-template", id="historyFileEntityTpl")
 	.history-file-entity-wrapper

services/web/app/views/project/editor/history/entriesListV2.pug

@@ -24,8 +24,9 @@ script(type="text/ng-template", id="historyEntriesListTpl")
 				entry="entry"
 				current-user="$ctrl.currentUser"
 				on-select="$ctrl.onEntrySelect({ selectedEntry: selectedEntry })"
+				ng-show="!$ctrl.isLoading"
 			)
-			.loading(ng-show="history.loading")
+			.loading(ng-show="$ctrl.isLoading")
 				i.fa.fa-spin.fa-refresh
 				|    #{translate("loading")}...
 

services/web/app/views/project/editor/history/previewPanelV2.pug

@@ -56,13 +56,21 @@
 	ng-if="history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME"
 )
 	.point-in-time-editor-container(
-		ng-if="!!history.selectedFile"
+		ng-if="!!history.selectedFile && !history.selectedFile.loading && !history.selectedFile.error"
 	)
 		.hide-ace-cursor(
+			ng-if="!history.selectedFile.binary"
 			ace-editor="history-pointintime",
 			theme="settings.theme",
 			font-size="settings.fontSize",
 			text="history.selectedFile.text",
 			read-only="true",
 			resize-on="layout:main:resize",
-		)
+		)
+		.alert.alert-info(ng-if="history.selectedFile.binary")
+			| We're still working on showing image and binary changes, sorry. Stay tuned!
+	.loading-panel(ng-show="history.selectedFile.loading")
+		i.fa.fa-spin.fa-refresh
+		|   #{translate("loading")}...
+	.error-panel(ng-show="history.selectedFile.error")
+		.alert.alert-danger #{translate("generic_something_went_wrong")}

services/web/app/views/project/editor/history/toolbarV2.pug

@@ -1,4 +1,5 @@
 .history-toolbar(
 	ng-if="ui.view == 'history' && history.isV2"
-) Browsing project as of 
+)
-	time.history-toolbar-time {{ history.selection.updates[0].meta.end_ts | formatDate:'Do MMM YYYY, h:mm a' }}
+	span(ng-show="!history.loadingFileTree") Browsing project as of 
+		time.history-toolbar-time {{ history.selection.updates[0].meta.end_ts | formatDate:'Do MMM YYYY, h:mm a' }}

services/web/public/coffee/ide/history/HistoryV2Manager.coffee

@@ -30,6 +30,7 @@ define [
 
 			# @$scope.$watch "history.selection.pathname", () =>
 			# 	@reloadDiff()
+			
 			@$scope.$watch "history.selection.pathname", (pathname) =>
 				if pathname?
 					@loadFileAtPointInTime()
@@ -75,10 +76,14 @@ define [
 			url = "/project/#{@$scope.project_id}/filetree/diff"
 			query = [ "from=#{toV}", "to=#{toV}" ]
 			url += "?" + query.join("&")
+			@$scope.history.loadingFileTree = true
+			@$scope.history.selectedFile = null
+			@$scope.history.selection.pathname = null
 			@ide.$http
 				.get(url)
 				.then (response) =>
 					@$scope.history.files = response.data.diff
+					@$scope.history.loadingFileTree = false
 
 		MAX_RECENT_UPDATES_TO_SELECT: 5
 		autoSelectRecentUpdates: () ->
@@ -115,6 +120,7 @@ define [
 			if @$scope.history.nextBeforeTimestamp?
 				url += "&before=#{@$scope.history.nextBeforeTimestamp}"
 			@$scope.history.loading = true
+			@$scope.history.loadingFileTree = true
 			@ide.$http
 				.get(url)
 				.then (response) =>
@@ -131,11 +137,16 @@ define [
 			url = "/project/#{@$scope.project_id}/diff"
 			query = ["pathname=#{encodeURIComponent(pathname)}", "from=#{toV}", "to=#{toV}"]
 			url += "?" + query.join("&")
+			@$scope.history.selectedFile =
+				loading: true
 			@ide.$http
 				.get(url)
 				.then (response) =>
-					@$scope.history.selectedFile =
+					{text, binary} = @_parseDiff(response.data.diff)
-						text : response.data.diff[0].u
+					@$scope.history.selectedFile.binary = binary
+					@$scope.history.selectedFile.text = text
+					@$scope.history.selectedFile.loading = false
+					console.log @$scope.history.selectedFile
 				.catch () ->
 
 		reloadDiff: () ->

services/web/public/coffee/ide/history/components/historyFileTree.coffee

@@ -12,6 +12,7 @@ define [
 			fileTree: "<"
 			selectedPathname: "<"
 			onSelectedFileChange: "&"
+			isLoading: "<"
 		controller: historyFileTreeController
 		templateUrl: "historyFileTreeTpl"
 	}

services/web/public/coffee/ide/history/controllers/HistoryV2FileTreeController.coffee

@@ -3,24 +3,33 @@ define [
 ], (App) ->
 
 	App.controller "HistoryV2FileTreeController", ["$scope", "ide", "_", ($scope, ide, _) ->
+		_previouslySelectedPathname = null
 		$scope.currentFileTree = []
-		_selectedDefaultPathname = (files) ->
+
-			# TODO: Improve heuristic to determine the default pathname to show.
+		_pathnameExistsInFiles = (pathname, files) -> 
-			if files? and files.length > 0
+			_.any files, (file) -> file.pathname == pathname
-				mainFile = files.find (file) -> /main\.tex$/.test file.pathname
+
+		_getSelectedDefaultPathname = (files) ->
+			selectedPathname = null
+			if _previouslySelectedPathname? and _pathnameExistsInFiles _previouslySelectedPathname, files
+				selectedPathname = _previouslySelectedPathname
+			else 
+				mainFile = _.find files, (file) -> /main\.tex$/.test file.pathname
 				if mainFile?
-					mainFile.pathname
+					selectedPathname = _previouslySelectedPathname = mainFile.pathname
 				else
-					files[0].pathname
+					selectedPathname = _previouslySelectedPathname = files[0].pathname
+			return selectedPathname
 
 		$scope.handleFileSelection = (file) ->
-			$scope.history.selection.pathname = file.pathname
+			$scope.history.selection.pathname = _previouslySelectedPathname = file.pathname
 
 		$scope.$watch 'history.files', (files) ->
-			$scope.currentFileTree = _.reduce files, reducePathsToTree, []
+			if files? and files.length > 0
-			$scope.history.selection.pathname = _selectedDefaultPathname(files)
+				$scope.currentFileTree = _.reduce files, _reducePathsToTree, []
+				$scope.history.selection.pathname = _getSelectedDefaultPathname(files)
 
-		reducePathsToTree = (currentFileTree, fileObject) ->
+		_reducePathsToTree = (currentFileTree, fileObject) ->
 			filePathParts = fileObject.pathname.split "/"
 			currentFileTreeLocation = currentFileTree
 			for pathPart, index in filePathParts

services/web/public/stylesheets/app/editor/history-v2.less

@@ -12,6 +12,7 @@
 	.history-toolbar-time {
 		font-weight: bold;
 	}
+
 .history-entries {
 	font-size: @history-base-font-size;
 	color: @history-base-color;
@@ -82,6 +83,13 @@
 	.full-size;
 	overflow-y: auto;
 	background-color: @file-tree-bg;
+
+	.loading {
+		color: #FFF;
+		font-size: @history-base-font-size;
+		text-align: center;
+		font-family: @font-family-serif;
+	}
 }
 	.history-file-entity-wrapper {
 		color: #FFF;