Handle sorting of labels; keep selection between view changes.

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

@@ -152,7 +152,7 @@ script(type="text/ng-template", id="historyEntryTpl")
 
 		.history-entry-details(ng-click="$ctrl.onSelect({ selectedEntry: $ctrl.entry })")
 			history-label(
-				ng-repeat="label in $ctrl.entry.labels"
+				ng-repeat="label in $ctrl.entry.labels | orderBy : '-created_at'"
 				label-text="label.comment"
 				label-owner-name="$ctrl.displayNameById(label.user_id)"
 				label-creation-date-time="label.created_at"
@@ -208,8 +208,9 @@ script(type="text/ng-template", id="historyEntryTpl")
 script(type="text/ng-template", id="historyLabelsListTpl")
 	.history-labels-list
 		.history-entry-label(
-			ng-repeat="label in $ctrl.labels | orderBy : [ '-version', '-created_at' ] track by label.id"
+			ng-repeat="label in $ctrl.labels track by label.id"
 			ng-click="$ctrl.onLabelSelect({ label: label })"
+			ng-class="{ 'history-entry-label-selected': label.selected }" 
 		)
 			history-label(
 				show-tooltip="false"
@@ -222,15 +223,15 @@ script(type="text/ng-template", id="historyLabelsListTpl")
 					| Saved by 
 					span.name(
 						ng-if="user && user._id !== $ctrl.currentUser.id"
-						ng-style="$ctrl.getUserCSSStyle(user);"
+						ng-style="$ctrl.getUserCSSStyle(user, label);"
 					) {{ ::$ctrl.displayName(user) }} 
 					span.name(
 						ng-if="user && user._id == $ctrl.currentUser.id"
-						ng-style="$ctrl.getUserCSSStyle(user);"
+						ng-style="$ctrl.getUserCSSStyle(user, label);"
 					) You
 					span.name(
 						ng-if="user == null"
-						ng-style="$ctrl.getUserCSSStyle(user);"
+						ng-style="$ctrl.getUserCSSStyle(user, label);"
 					) #{translate("anonymous")}
 				time.history-entry-label-metadata-time {{ ::label.created_at | formatDate }}
 		.loading(ng-show="$ctrl.isLoading")

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

@@ -9,6 +9,7 @@
 		time.history-toolbar-time {{ history.selection.updates[0].meta.end_ts | formatDate:'Do MMM YYYY, h:mm a' }}
 	button.history-toolbar-btn(
 		ng-click="showAddLabelDialog();"
+		ng-if="!history.showOnlyLabels"
 		ng-disabled="history.loadingFileTree"
 	) 
 		i.fa.fa-tag

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

@@ -49,6 +49,10 @@ define [
 				else 
 					@reloadDiff()
 
+			@$scope.$watch "history.showOnlyLabels", (showOnlyLabels, prevVal) =>
+				if showOnlyLabels? and showOnlyLabels != prevVal and showOnlyLabels
+					@selectedLabelFromUpdatesSelection()
+
 		show: () ->
 			@$scope.ui.view = "history"
 			@reset()
@@ -131,6 +135,36 @@ define [
 			@$scope.history.updates[selectedUpdateIndex].selectedFrom = true
 			@loadFileTreeForUpdate @$scope.history.updates[selectedUpdateIndex]
 
+		selectLastLabel = () ->
+			return if @$scope.history.labels.length == 0
+			# TODO Select last label
+			
+		selectedLabelFromUpdatesSelection: () ->
+			nLabels = @$scope.history.selection.updates?[0]?.labels?.length
+			if nLabels == 1
+				@selectLabel @$scope.history.selection.updates[0].labels[0]
+			else if nLabels > 1
+				sortedLabels = @ide.$filter("orderBy")(@$scope.history.selection.updates[0].labels, '-created_at')
+				lastLabelFromUpdate = sortedLabels[0]
+				@selectLabel lastLabelFromUpdate
+				
+		selectLabel: (labelToSelect) ->
+			labelToSelectIndex = -1
+			for update, i in @$scope.history.updates
+				if update.toV == labelToSelect.version
+					labelToSelectIndex = i
+					break
+			if labelToSelectIndex == -1
+				labelToSelectIndex = 0
+			for update in @$scope.history.updates
+				update.selectedTo = false
+				update.selectedFrom = false
+			for label in @$scope.history.labels
+				label.selected = (labelToSelect.id == label.id)
+			@$scope.history.updates[labelToSelectIndex].selectedTo = true
+			@$scope.history.updates[labelToSelectIndex].selectedFrom = true
+			@loadFileTreeForUpdate @$scope.history.updates[labelToSelectIndex]
+
 		BATCH_SIZE: 10
 		fetchNextBatchOfUpdates: () ->
 			updatesURL = "/project/#{@ide.project_id}/updates?min_count=#{@BATCH_SIZE}"
@@ -155,9 +189,12 @@ define [
 					if !updatesData.nextBeforeTimestamp?
 						@$scope.history.atEnd = true
 					if response.labels?
-						@$scope.history.labels = response.labels.data
+						@$scope.history.labels = @_sortLabelsByVersionAndDate response.labels.data
 					@$scope.history.loading = false
 
+		_sortLabelsByVersionAndDate: (labels) ->
+			@ide.$filter("orderBy")(labels, [ '-version', '-created_at' ])
+
 		loadFileAtPointInTime: () ->
 			pathname = @$scope.history.selection.pathname
 			toV =  @$scope.history.selection.updates[0].toV
@@ -219,8 +256,8 @@ define [
 		labelCurrentVersion: (labelComment) => 
 			@_labelVersion labelComment, @$scope.history.selection.updates[0].toV
 
-		deleteLabel: (labelId) =>
-			url = "/project/#{@$scope.project_id}/labels/#{labelId}"
+		deleteLabel: (label) =>
+			url = "/project/#{@$scope.project_id}/labels/#{label.id}"
 
 			@ide.$http({
 				url,
@@ -228,14 +265,16 @@ define [
 				headers:
 					"X-CSRF-Token": window.csrfToken
 			}).then (response) =>
-				@_deleteLabelFromLocalCollection @$scope.history.updates, labelId
-				@_deleteLabelFromLocalCollection @$scope.history.selection, labelId
+				@_deleteLabelLocally label
 
-
-		_deleteLabelFromLocalCollection: (collection, labelId) ->
-			for update in collection
-				update.labels = _.filter update.labels, (label) -> 
-					label.id != labelId
+		_deleteLabelLocally: (labelToDelete) ->
+			for update, i in @$scope.history.updates
+				if update.toV == labelToDelete.version
+					update.labels = _.filter update.labels, (label) -> 
+						label.id != labelToDelete.id
+					break 
+			@$scope.history.labels = _.filter @$scope.history.labels, (label) -> 
+				label.id != labelToDelete.id
 
 		_parseDiff: (diff) ->
 			if diff.binary
@@ -314,7 +353,10 @@ define [
 				if @$scope.history.viewMode == HistoryViewModes.COMPARE
 					@autoSelectRecentUpdates()
 				else 
-					@autoSelectLastUpdate()
+					if @$scope.history.showOnlyLabels
+						@selectLastLabel()
+					else
+						@autoSelectLastUpdate()
 
 		_labelVersion: (comment, version) ->
 			url = "/project/#{@$scope.project_id}/labels"
@@ -327,10 +369,11 @@ define [
 				.then (response) =>
 					@_addLabelToLocalUpdate response.data
 
-		_addLabelToLocalUpdate: (label) ->
+		_addLabelToLocalUpdate: (label) =>
 			localUpdate = _.find @$scope.history.updates, (update) -> update.toV == label.version
 			if localUpdate?
-				localUpdate.labels.push label
+				localUpdate.labels = @_sortLabelsByVersionAndDate localUpdate.labels.concat label
+			@$scope.history.labels = @_sortLabelsByVersionAndDate @$scope.history.labels.concat label
 
 		_perDocSummaryOfUpdates: (updates) ->
 			# Track current_pathname -> original_pathname

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

@@ -13,10 +13,10 @@ define [
 				curUserId = user?._id or user?.id
 				curUserId == id
 		ctrl.displayName = displayNameForUser
-		ctrl.getUserCSSStyle = (user) ->
+		ctrl.getUserCSSStyle = (user, label) ->
 			curUserId = user?._id or user?.id
 			hue = ColorManager.getHueForUserId(curUserId) or 100
-			if false #ctrl.entry.inSelection 
+			if label.selected
 				color : "#FFF" 
 			else 
 				color: "hsl(#{ hue }, 70%, 50%)"

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

@@ -9,7 +9,7 @@ define [
 
 		$scope.deleteLabel = () ->
 			$scope.state.inflight = true
-			ide.historyManager.deleteLabel labelDetails.id
+			ide.historyManager.deleteLabel labelDetails
 				.then (response) ->
 					$scope.state.inflight = false
 					$modalInstance.close()

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

@@ -17,8 +17,9 @@ define [
 			$scope.recalculateSelectedUpdates()
 
 		$scope.handleLabelSelect = (label) ->
-			console.log label
-
+			ide.historyManager.selectLabel(label)
+			$scope.recalculateSelectedUpdates()
+			
 		$scope.handleLabelDelete = (labelDetails) ->
 			$modal.open(
 				templateUrl: "historyV2DeleteLabelModalTemplate"

services/web/public/coffee/ide/services/ide.coffee

@@ -3,11 +3,12 @@ define [
 ], (App) ->
 	# We create and provide this as service so that we can access the global ide
 	# from within other parts of the angular app.
-	App.factory "ide", ["$http", "queuedHttp", "$modal", "$q", ($http, queuedHttp, $modal, $q) ->
+	App.factory "ide", ["$http", "queuedHttp", "$modal", "$q", "$filter", ($http, queuedHttp, $modal, $q, $filter) ->
 		ide = {}
 		ide.$http = $http
 		ide.queuedHttp = queuedHttp
 		ide.$q = $q
+		ide.$filter = $filter
 
 		@recentEvents = []
 		ide.pushEvent = (type, meta = {}) =>

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

@@ -56,7 +56,8 @@
 	padding: 5px 10px;
 	cursor: pointer;
 
-	.history-entry-selected & {
+	.history-entry-selected &,
+	.history-entry-label-selected & {
 		background-color: @history-entry-selected-bg;
 		color: #FFF;
 	}
@@ -68,7 +69,8 @@
 		margin-bottom: 3px;
 		margin-right: 10px;
 		white-space: nowrap;
-		.history-entry-selected & {
+		.history-entry-selected &,
+		.history-entry-label-selected & {
 			color: @history-entry-selected-label-color;
 		}
 	}
@@ -77,7 +79,8 @@
 			padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
 			border: 0;
 			background-color: @history-entry-label-bg-color;
-			.history-entry-selected & {
+			.history-entry-selected &,
+			.history-entry-label-selected & {
 				background-color: @history-entry-selected-label-bg-color;
 			}
 		}
@@ -99,7 +102,8 @@
 			border-radius: 0 9999px 9999px 0;
 			&:hover {
 				background-color: darken(@history-entry-label-bg-color, 8%);
-				.history-entry-selected & {
+				.history-entry-selected &,
+				.history-entry-label-selected & {
 					background-color: darken(@history-entry-selected-label-bg-color, 8%);
 				}
 			}
@@ -137,7 +141,8 @@
 				color: @history-highlight-color;
 				font-weight: bold;
 				word-break: break-all;
-				.history-entry-selected & {
+				.history-entry-selected &,
+				.history-entry-label-selected & {
 					color: #FFF;
 				}
 			}
@@ -169,6 +174,10 @@
 	.history-entry-label {
 		.history-entry-details;
 		padding: 7px 10px;
+		&.history-entry-label-selected {
+			background-color: @history-entry-selected-bg;
+			color: #FFF;
+		}
 	}
 
 .history-file-tree-inner {