#384 View alternate parent changes at merge commits

src/dataSource.ts

@@ -339,10 +339,11 @@ export class DataSource extends Disposable {
 	 * @param repo The path of the repository.
 	 * @param commitHash The hash of the commit open in the Commit Details View.
 	 * @param hasParents Does the commit have parents
+	 * @param parentIndex The index of the commit parent
 	 * @returns The commit details.
 	 */
-	public getCommitDetails(repo: string, commitHash: string, hasParents: boolean): Promise<GitCommitDetailsData> {
-		const fromCommit = commitHash + (hasParents ? '^' : '');
+	public getCommitDetails(repo: string, commitHash: string, hasParents: boolean, parentIndex: number): Promise<GitCommitDetailsData> {
+		const fromCommit = commitHash + (hasParents ? `^${parentIndex}` : '');
 		return Promise.all([
 			this.getCommitDetailsBase(repo, commitHash),
 			this.getDiffNameStatus(repo, fromCommit, commitHash),
@@ -360,13 +361,15 @@ export class DataSource extends Disposable {
 	 * @param repo The path of the repository.
 	 * @param commitHash The hash of the stash commit open in the Commit Details View.
 	 * @param stash The stash.
+	 * @param parentIndex the index of the stash parent
 	 * @returns The stash details.
 	 */
-	public getStashDetails(repo: string, commitHash: string, stash: GitCommitStash): Promise<GitCommitDetailsData> {
+	public getStashDetails(repo: string, commitHash: string, stash: GitCommitStash, parentIndex: number): Promise<GitCommitDetailsData> {
+		const fromCommit = commitHash + `^${parentIndex}`;
 		return Promise.all([
 			this.getCommitDetailsBase(repo, commitHash),
-			this.getDiffNameStatus(repo, stash.baseHash, commitHash),
-			this.getDiffNumStat(repo, stash.baseHash, commitHash),
+			this.getDiffNameStatus(repo, fromCommit, commitHash),
+			this.getDiffNumStat(repo, fromCommit, commitHash),
 			stash.untrackedFilesHash !== null ? this.getDiffNameStatus(repo, stash.untrackedFilesHash, stash.untrackedFilesHash) : Promise.resolve([]),
 			stash.untrackedFilesHash !== null ? this.getDiffNumStat(repo, stash.untrackedFilesHash, stash.untrackedFilesHash) : Promise.resolve([])
 		]).then((results) => {

src/gitGraphView.ts

@@ -232,13 +232,14 @@ export class GitGraphView extends Disposable {
 					msg.commitHash === UNCOMMITTED
 						? this.dataSource.getUncommittedDetails(msg.repo)
 						: msg.stash === null
-							? this.dataSource.getCommitDetails(msg.repo, msg.commitHash, msg.hasParents)
-							: this.dataSource.getStashDetails(msg.repo, msg.commitHash, msg.stash),
+							? this.dataSource.getCommitDetails(msg.repo, msg.commitHash, msg.hasParents, msg.parentIndex)
+							: this.dataSource.getStashDetails(msg.repo, msg.commitHash, msg.stash, msg.parentIndex),
 					msg.avatarEmail !== null ? this.avatarManager.getAvatarImage(msg.avatarEmail) : Promise.resolve(null)
 				]);
 				this.sendMessage({
 					command: 'commitDetails',
 					...data[0],
+					parentIndex: msg.parentIndex,
 					avatar: data[1],
 					codeReview: msg.commitHash !== UNCOMMITTED ? this.extensionState.getCodeReview(msg.repo, msg.commitHash) : null,
 					refresh: msg.refresh

src/types.ts

@@ -651,13 +651,15 @@ export interface RequestCommitDetails extends RepoRequest {
 	readonly command: 'commitDetails';
 	readonly commitHash: string;
 	readonly hasParents: boolean;
+	readonly parentIndex: number;
 	readonly stash: GitCommitStash | null; // null => request is for a commit, otherwise => request is for a stash
 	readonly avatarEmail: string | null; // string => fetch avatar with the given email, null => don't fetch avatar
 	readonly refresh: boolean;
 }
 export interface ResponseCommitDetails extends ResponseWithErrorInfo {
 	readonly command: 'commitDetails';
 	readonly commitDetails: GitCommitDetails | null;
+	readonly parentIndex: number;
 	readonly avatar: string | null;
 	readonly codeReview: CodeReview | null;
 	readonly refresh: boolean;

web/findWidget.ts

@@ -397,7 +397,7 @@ class FindWidget {
 			if (commitHash !== null && !this.view.isCdvOpen(commitHash, null)) {
 				const commitElem = findCommitElemWithId(getCommitElems(), this.view.getCommitId(commitHash));
 				if (commitElem !== null) {
-					this.view.loadCommitDetails(commitElem);
+					this.view.loadCommitDetails(commitElem, DEFAULT_PARENT_INDEX);
 				}
 			}
 		}

web/global.d.ts

@@ -25,6 +25,7 @@ declare global {
 		index: number;
 		commitHash: string;
 		commitElem: HTMLElement | null;
+		parentIndex: number;
 		compareWithHash: string | null;
 		compareWithElem: HTMLElement | null;
 		commitDetails: GG.GitCommitDetails | null;

web/main.ts

@@ -322,7 +322,7 @@ class GitGraphView {
 					if (this.expandedCommit.compareWithHash === null) {
 						// Commit Details View is open
 						if (this.expandedCommit.commitHash === UNCOMMITTED) {
-							this.requestCommitDetails(this.expandedCommit.commitHash, true);
+							this.requestCommitDetails(this.expandedCommit.commitHash, true, this.expandedCommit.parentIndex);
 						}
 					} else {
 						// Commit Comparison is open
@@ -424,7 +424,7 @@ class GitGraphView {
 					if (compareWithElem !== null) {
 						this.loadCommitComparison(commitElem, compareWithElem);
 					} else {
-						this.loadCommitDetails(commitElem);
+						this.loadCommitDetails(commitElem, DEFAULT_PARENT_INDEX);
 					}
 				} else {
 					showErrorMessage('Unable to resume Code Review, it could not be found in the latest ' + this.maxCommits + ' commits that were loaded in this repository.');
@@ -660,13 +660,14 @@ class GitGraphView {
 		this.settingsWidget.refresh();
 	}
 
-	public requestCommitDetails(hash: string, refresh: boolean) {
+	public requestCommitDetails(hash: string, refresh: boolean, parentIndex: number) {
 		let commit = this.commits[this.commitLookup[hash]];
 		sendMessage({
 			command: 'commitDetails',
 			repo: this.currentRepo,
 			commitHash: hash,
 			hasParents: commit.parents.length > 0,
+			parentIndex: parentIndex,
 			stash: commit.stash,
 			avatarEmail: this.config.fetchAvatars && hash !== UNCOMMITTED ? commit.email : null,
 			refresh: refresh
@@ -746,6 +747,7 @@ class GitGraphView {
 			index: index,
 			commitHash: commitHash,
 			commitElem: commitElem,
+			parentIndex: DEFAULT_PARENT_INDEX,
 			compareWithHash: compareWithHash,
 			compareWithElem: compareWithElem,
 			commitDetails: null,
@@ -900,12 +902,12 @@ class GitGraphView {
 				if (expandedCommit.compareWithHash === null) {
 					// Commit Details View is open
 					if (!expandedCommit.loading && expandedCommit.commitDetails !== null && expandedCommit.fileTree !== null) {
-						this.showCommitDetails(expandedCommit.commitDetails, expandedCommit.fileTree, expandedCommit.avatar, expandedCommit.codeReview, expandedCommit.lastViewedFile, true);
+						this.showCommitDetails(expandedCommit.commitDetails, expandedCommit.parentIndex, expandedCommit.fileTree, expandedCommit.avatar, expandedCommit.codeReview, expandedCommit.lastViewedFile, true);
 						if (expandedCommit.commitHash === UNCOMMITTED) {
-							this.requestCommitDetails(expandedCommit.commitHash, true);
+							this.requestCommitDetails(expandedCommit.commitHash, true, expandedCommit.parentIndex);
 						}
 					} else {
-						this.loadCommitDetails(commitElem);
+						this.loadCommitDetails(commitElem, expandedCommit.parentIndex);
 					}
 				} else {
 					// Commit Comparison is open
@@ -2012,7 +2014,7 @@ class GitGraphView {
 				if (newHashIndex > -1) {
 					handledEvent(e);
 					const elem = findCommitElemWithId(getCommitElems(), newHashIndex);
-					if (elem !== null) this.loadCommitDetails(elem);
+					if (elem !== null) this.loadCommitDetails(elem, DEFAULT_PARENT_INDEX);
 				}
 			} else if (e.key && (e.ctrlKey || e.metaKey)) {
 				const key = e.key.toLowerCase(), keybindings = this.config.keybindings;
@@ -2060,13 +2062,33 @@ class GitGraphView {
 					case 'commit':
 						if (typeof this.commitLookup[value] === 'number' && (this.expandedCommit === null || this.expandedCommit.commitHash !== value || this.expandedCommit.compareWithHash !== null)) {
 							const elem = findCommitElemWithId(getCommitElems(), this.commitLookup[value]);
-							if (elem !== null) this.loadCommitDetails(elem);
+							if (elem === null) return;
+							if (e.ctrlKey || e.metaKey) {
+								if(this.expandedCommit !== null && this.expandedCommit.commitElem !== null && this.expandedCommit.commitDetails !== null) {
+									const parentIndex = this.expandedCommit.commitDetails.parents.indexOf(value) + 1;
+									this.loadCommitDetails(this.expandedCommit.commitElem, parentIndex);
+								}
+							} else {
+								this.loadCommitDetails(elem, DEFAULT_PARENT_INDEX);
+							}
 						}
 						break;
 				}
 			}
 		};
 
+		const getParentIndexFromClass = (element: Element) => {
+			const eventTargetClasses = element.classList.value.split(' ');
+			const parentIndexClasses = eventTargetClasses.filter(className => className.startsWith(`${CLASS_PARENT}-`));
+
+			const isParentElement = parentIndexClasses.length === 1;
+			if(!isParentElement) {
+				return -1;
+			}
+
+			return parseInt(parentIndexClasses[0].substring(`${CLASS_PARENT}-`.length));
+		};
+
 		document.body.addEventListener('click', followInternalLink);
 
 		document.body.addEventListener('contextmenu', (e: MouseEvent) => {
@@ -2107,6 +2129,8 @@ class GitGraphView {
 					isInDialog = true;
 				}
 
+				const parentIndex = getParentIndexFromClass(eventTarget);
+
 				handledEvent(e);
 				contextMenu.show([
 					[
@@ -2122,6 +2146,13 @@ class GitGraphView {
 							visible: isInternalUrl,
 							onClick: () => followInternalLink(e)
 						},
+						{
+							title: 'View Changes with this Parent',
+							visible: isInternalUrl && parentIndex !== -1,
+							onClick: () => {
+								this.loadCommitDetails(this.expandedCommit!.commitElem!, parentIndex);
+							}
+						},
 						{
 							title: 'Copy URL to Clipboard',
 							visible: isExternalUrl,
@@ -2170,10 +2201,10 @@ class GitGraphView {
 							this.loadCommitComparison(this.expandedCommit.commitElem, eventElem);
 						}
 					} else {
-						this.loadCommitDetails(eventElem);
+						this.loadCommitDetails(eventElem, DEFAULT_PARENT_INDEX);
 					}
 				} else {
-					this.loadCommitDetails(eventElem);
+					this.loadCommitDetails(eventElem, DEFAULT_PARENT_INDEX);
 				}
 			}
 		});
@@ -2290,15 +2321,15 @@ class GitGraphView {
 
 	/* Commit Details View */
 
-	public loadCommitDetails(commitElem: HTMLElement) {
+	public loadCommitDetails(commitElem: HTMLElement, parentIndex: number) {
 		const commit = this.getCommitOfElem(commitElem);
 		if (commit === null) return;
 
 		this.closeCommitDetails(false);
 		this.saveExpandedCommitLoading(parseInt(commitElem.dataset.id!), commit.hash, commitElem, null, null);
 		commitElem.classList.add(CLASS_COMMIT_DETAILS_OPEN);
 		this.renderCommitDetailsView(false);
-		this.requestCommitDetails(commit.hash, false);
+		this.requestCommitDetails(commit.hash, false, parentIndex);
 	}
 
 	public closeCommitDetails(saveAndRender: boolean) {
@@ -2328,7 +2359,7 @@ class GitGraphView {
 		}
 	}
 
-	public showCommitDetails(commitDetails: GG.GitCommitDetails, fileTree: FileTreeFolder, avatar: string | null, codeReview: GG.CodeReview | null, lastViewedFile: string | null, refresh: boolean) {
+	public showCommitDetails(commitDetails: GG.GitCommitDetails, parentIndex: number, fileTree: FileTreeFolder, avatar: string | null, codeReview: GG.CodeReview | null, lastViewedFile: string | null, refresh: boolean) {
 		const expandedCommit = this.expandedCommit;
 		if (expandedCommit === null || expandedCommit.commitElem === null || expandedCommit.commitHash !== commitDetails.hash || expandedCommit.compareWithHash !== null) return;
 
@@ -2343,6 +2374,7 @@ class GitGraphView {
 			expandedCommit.fileTree = fileTree;
 			GitGraphView.closeCdvContextMenuIfOpen(expandedCommit);
 		}
+		expandedCommit.parentIndex = parentIndex;
 		expandedCommit.avatar = avatar;
 		expandedCommit.codeReview = codeReview;
 		if (!refresh) {
@@ -2421,7 +2453,7 @@ class GitGraphView {
 			if (expandedCommit.commitElem !== null) {
 				this.saveExpandedCommitLoading(expandedCommit.index, expandedCommit.commitHash, expandedCommit.commitElem, null, null);
 				this.renderCommitDetailsView(false);
-				this.requestCommitDetails(expandedCommit.commitHash, false);
+				this.requestCommitDetails(expandedCommit.commitHash, false, expandedCommit.parentIndex);
 			} else {
 				this.closeCommitDetails(true);
 			}
@@ -2460,6 +2492,7 @@ class GitGraphView {
 		const commitOrder = this.getCommitOrder(expandedCommit.commitHash, expandedCommit.compareWithHash === null ? expandedCommit.commitHash : expandedCommit.compareWithHash);
 		const codeReviewPossible = !expandedCommit.loading && commitOrder.to !== UNCOMMITTED;
 		const externalDiffPossible = !expandedCommit.loading && (expandedCommit.compareWithHash !== null || this.commits[this.commitLookup[expandedCommit.commitHash]].parents.length > 0);
+		const loadedParents = expandedCommit.commitDetails?.parents.filter(parent => this.commitLookup[parent]) || [];
 
 		if (elem === null) {
 			elem = document.createElement(isDocked ? 'div' : 'tr');
@@ -2490,11 +2523,23 @@ class GitGraphView {
 					});
 					const commitDetails = expandedCommit.commitDetails!;
 					const parents = commitDetails.parents.length > 0
-						? commitDetails.parents.map((parent) => {
+						? commitDetails.parents.map((parent, parentIndex) => {
 							const escapedParent = escapeHtml(parent);
-							return typeof this.commitLookup[parent] === 'number'
-								? '<span class="' + CLASS_INTERNAL_URL + '" data-type="commit" data-value="' + escapedParent + '" tabindex="-1">' + escapedParent + '</span>'
-								: escapedParent;
+
+							const parentWasLoaded = loadedParents.includes(parent);
+							const isComparedToParent = parentIndex + 1 === expandedCommit.parentIndex;
+
+							let parentHtml = abbrevCommit(escapedParent);
+							if(parentWasLoaded) {
+								parentHtml = `<span class="${CLASS_INTERNAL_URL} ${CLASS_PARENT}-${parentIndex + 1}" data-type="commit" data-value="${escapedParent}" tabindex="-1">
+									${parentHtml}
+								</span>`;
+							}
+							if(isComparedToParent) {
+								parentHtml = `<b>${parentHtml}</b>`;
+							}
+
+							return parentHtml;
 						}).join(', ')
 						: 'None';
 					html += '<span class="cdvSummaryTop' + (expandedCommit.avatar !== null ? ' withAvatar' : '') + '"><span class="cdvSummaryTopRow"><span class="cdvSummaryKeyValues">'
@@ -2520,6 +2565,7 @@ class GitGraphView {
 			(codeReviewPossible ? '<div id="cdvCodeReview" class="cdvControlBtn">' + SVG_ICONS.review + '</div>' : '') +
 			(!expandedCommit.loading ? '<div id="cdvFileViewTypeTree" class="cdvControlBtn cdvFileViewTypeBtn" title="File Tree View">' + SVG_ICONS.fileTree + '</div><div id="cdvFileViewTypeList" class="cdvControlBtn cdvFileViewTypeBtn" title="File List View">' + SVG_ICONS.fileList + '</div>' : '') +
 			(externalDiffPossible ? '<div id="cdvExternalDiff" class="cdvControlBtn">' + SVG_ICONS.linkExternal + '</div>' : '') +
+			(loadedParents.length > 1 ? '<div id="cdvParentToggle" class="cdvControlBtn" title="Toggle Parent">' + SVG_ICONS.merge + '</div>' : '') +
 			'</div><div class="cdvHeightResize"></div>';
 
 		elem.innerHTML = isDocked ? html : '<td><div class="cdvHeightResize"></div></td><td colspan="' + (this.getNumColumns() - 1) + '">' + html + '</td>';
@@ -2591,6 +2637,22 @@ class GitGraphView {
 				this.changeFileViewType(GG.FileViewType.List);
 			});
 
+			document.getElementById('cdvParentToggle')?.addEventListener('click', () => {
+				const expandedCommit = this.expandedCommit!;
+				const parentIndex = expandedCommit.parentIndex;
+				const parents = expandedCommit.commitDetails!.parents;
+
+				let nextParentIndex = parentIndex < parents.length ? parentIndex + 1 : 1;
+				while(!loadedParents.includes(parents[nextParentIndex - 1])) {
+					if(nextParentIndex === parentIndex) {
+						break;
+					}
+					nextParentIndex = nextParentIndex < parents.length ? parentIndex + 1 : 1;
+				}
+
+				this.loadCommitDetails(expandedCommit.commitElem!, nextParentIndex);
+			});
+
 			if (codeReviewPossible) {
 				this.renderCodeReviewBtn();
 				document.getElementById('cdvCodeReview')!.addEventListener('click', (e) => {
@@ -3136,7 +3198,7 @@ window.addEventListener('load', () => {
 				break;
 			case 'commitDetails':
 				if (msg.commitDetails !== null) {
-					gitGraph.showCommitDetails(msg.commitDetails, gitGraph.createFileTree(msg.commitDetails.fileChanges, msg.codeReview), msg.avatar, msg.codeReview, msg.codeReview !== null ? msg.codeReview.lastViewedFile : null, msg.refresh);
+					gitGraph.showCommitDetails(msg.commitDetails, msg.parentIndex, gitGraph.createFileTree(msg.commitDetails.fileChanges, msg.codeReview), msg.avatar, msg.codeReview, msg.codeReview !== null ? msg.codeReview.lastViewedFile : null, msg.refresh);
 				} else {
 					gitGraph.closeCommitDetails(true);
 					dialog.showError('Unable to load Commit Details', msg.error, null, null);