Adds commit graph following to commit details view

src/plus/webviews/graph/graphWebview.ts

@@ -1,7 +1,7 @@
 import type { CommitType } from '@gitkraken/gitkraken-components';
 import { commitNodeType, mergeNodeType, stashNodeType } from '@gitkraken/gitkraken-components';
-import type { Disposable } from 'vscode';
-import { ViewColumn, window } from 'vscode';
+import type { Disposable, Event } from 'vscode';
+import { EventEmitter, ViewColumn, window } from 'vscode';
 import { configuration } from '../../../configuration';
 import { Commands } from '../../../constants';
 import type { Container } from '../../../container';
@@ -34,9 +34,19 @@ import {
 	DidChangeNotificationType,
 	MoreCommitsCommandType,
 	SelectRepositoryCommandType,
+	UpdateSelectionCommandType,
 } from './protocol';
 
+export interface GraphSelectionChangeEvent {
+	readonly selection: GitCommit[];
+}
+
 export class GraphWebview extends WebviewWithConfigBase<State> {
+	private _onDidChangeSelection = new EventEmitter<GraphSelectionChangeEvent>();
+	get onDidChangeSelection(): Event<GraphSelectionChangeEvent> {
+		return this._onDidChangeSelection.event;
+	}
+
 	private selectedRepository?: Repository;
 	private currentLog?: GitLog;
 	private repoDisposable: Disposable | undefined;
@@ -64,6 +74,9 @@ export class GraphWebview extends WebviewWithConfigBase {
 			case SelectRepositoryCommandType.method:
 				onIpc(SelectRepositoryCommandType, e, params => this.changeRepository(params.path));
 				break;
+			case UpdateSelectionCommandType.method:
+				onIpc(UpdateSelectionCommandType, e, params => this.onSelectionChanged(params.selection));
+				break;
 		}
 	}
 
@@ -97,6 +110,20 @@ export class GraphWebview extends WebviewWithConfigBase {
 		void this.notifyDidChangeState();
 	}
 
+	private async onSelectionChanged(selection: GraphCommit[]) {
+		const ref = selection[0]?.sha;
+
+		let commits: GitCommit[] | undefined;
+		if (ref != null) {
+			const commit = await this.selectedRepository?.getCommit(ref);
+			if (commit != null) {
+				commits = [commit];
+			}
+		}
+
+		this._onDidChangeSelection.fire({ selection: commits ?? [] });
+	}
+
 	private async notifyDidChangeConfig() {
 		return this.notify(DidChangeConfigNotificationType, {
 			config: this.getConfig(),

src/plus/webviews/graph/protocol.ts

@@ -62,6 +62,11 @@ export interface SelectRepositoryParams {
 }
 export const SelectRepositoryCommandType = new IpcCommandType<SelectRepositoryParams>('graph/selectRepository');
 
+export interface UpdateSelectionParams {
+	selection: GraphCommit[];
+}
+export const UpdateSelectionCommandType = new IpcCommandType<UpdateSelectionParams>('graph/update/selection');
+
 // Notifications
 export interface DidChangeParams {
 	state: State;

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -27,6 +27,7 @@ export interface GraphWrapperProps extends State {
 	onSelectRepository?: (repository: GraphRepository) => void;
 	onColumnChange?: (name: string, settings: GraphColumnConfig) => void;
 	onMoreCommits?: (limit?: number) => void;
+	onSelectionChange?: (selection: GraphCommit[]) => void;
 }
 
 // Copied from original pushed code of Miggy E.
@@ -175,6 +176,7 @@ export function GraphWrapper({
 	// onSelectRepository,
 	onColumnChange,
 	onMoreCommits,
+	onSelectionChange,
 	nonce,
 	mixedColumnColors,
 }: GraphWrapperProps) {
@@ -236,9 +238,11 @@ export function GraphWrapper({
 	};
 
 	const handleOnColumnResized = (graphZoneType: GraphZoneType, columnSettings: GKGraphColumnSetting) => {
-		if (onColumnChange !== undefined) {
-			onColumnChange(graphZoneType, { width: columnSettings.width });
-		}
+		onColumnChange?.(graphZoneType, { width: columnSettings.width });
+	};
+
+	const handleSelectGraphRows = (graphRows: GraphRow[]) => {
+		onSelectionChange?.(graphRows);
 	};
 
 	return (
@@ -255,6 +259,7 @@ export function GraphWrapper({
 							isLoadingRows={isLoading}
 							nonce={nonce}
 							onColumnResized={handleOnColumnResized}
+							onSelectGraphRows={handleSelectGraphRows}
 							onShowMoreCommits={handleMoreCommits}
 							width={mainWidth}
 							themeOpacityFactor={styleProps.themeOpacityFactor}

src/webviews/apps/plus/graph/graph.tsx

@@ -6,15 +6,18 @@ import type { GraphConfig } from '../../../../config';
 import type {
 	CommitListCallback,
 	GraphColumnConfig,
+	GraphCommit,
 	GraphRepository,
-	State} from '../../../../plus/webviews/graph/protocol';
+	State,
+} from '../../../../plus/webviews/graph/protocol';
 import {
 	ColumnChangeCommandType,
 	DidChangeCommitsNotificationType,
 	DidChangeConfigNotificationType,
 	DidChangeNotificationType,
 	MoreCommitsCommandType,
-	SelectRepositoryCommandType
+	SelectRepositoryCommandType,
+	UpdateSelectionCommandType,
 } from '../../../../plus/webviews/graph/protocol';
 import { debounce } from '../../../../system/function';
 import { DidChangeConfigurationNotificationType, onIpc } from '../../../../webviews/protocol';
@@ -34,7 +37,7 @@ export class GraphApp extends App {
 	protected override onBind() {
 		const disposables = super.onBind?.() ?? [];
 
-		console.log('GraphApp onBind log', this.state.log);
+		this.log('GraphApp onBind log', this.state.log);
 
 		const $root = document.getElementById('root');
 		if ($root != null) {
@@ -47,6 +50,7 @@ export class GraphApp extends App {
 					)}
 					onSelectRepository={debounce((path: GraphRepository) => this.onRepositoryChanged(path), 250)}
 					onMoreCommits={(...params) => this.onMoreCommits(...params)}
+					onSelectionChange={debounce((selection: GraphCommit[]) => this.onSelectionChanged(selection), 250)}
 					{...this.state}
 				/>,
 				$root,
@@ -60,7 +64,7 @@ export class GraphApp extends App {
 	}
 
 	protected override onMessageReceived(e: MessageEvent) {
-		console.log('onMessageReceived', e);
+		this.log('onMessageReceived', e);
 
 		const msg = e.data;
 		switch (msg.method) {
@@ -156,6 +160,12 @@ export class GraphApp extends App {
 		});
 	}
 
+	private onSelectionChanged(selection: GraphCommit[]) {
+		this.sendCommand(UpdateSelectionCommandType, {
+			selection: selection,
+		});
+	}
+
 	private registerEvents(callback: CommitListCallback): () => void {
 		this.callback = callback;
 

src/webviews/commitDetails/commitDetailsWebviewView.ts

@@ -9,6 +9,7 @@ import type { GitFileChange } from '../../git/models/file';
 import { GitFile } from '../../git/models/file';
 import type { IssueOrPullRequest } from '../../git/models/issue';
 import type { PullRequest } from '../../git/models/pullRequest';
+import type { GraphSelectionChangeEvent } from '../../plus/webviews/graph/graphWebview';
 import { WorkspaceStorageKeys } from '../../storage';
 import { executeCommand } from '../../system/command';
 import { debug } from '../../system/decorators/log';
@@ -136,11 +137,12 @@ export class CommitDetailsWebviewView extends WebviewViewBase
 
 		if (this._pinned || !this.visible) return;
 
-		const { lineTracker, commitsView } = this.container;
+		const { lineTracker, commitsView, graphWebview } = this.container;
 		this._visibilityDisposable = Disposable.from(
 			lineTracker.subscribe(this, lineTracker.onDidChangeActiveLines(this.onActiveLinesChanged, this)),
 			commitsView.onDidChangeVisibility(this.onCommitsViewVisibilityChanged, this),
 			commitsView.onDidChangeSelection(this.onCommitsViewSelectionChanged, this),
+			graphWebview.onDidChangeSelection(this.onGraphWebviewSelectionChanged, this),
 		);
 
 		const commit = this.getBestCommit();
@@ -224,6 +226,10 @@ export class CommitDetailsWebviewView extends WebviewViewBase
 		}
 	}
 
+	private onGraphWebviewSelectionChanged(e: GraphSelectionChangeEvent) {
+		this.updateCommit(e.selection[0]);
+	}
+
 	private onCommitsViewVisibilityChanged(e: TreeViewVisibilityChangeEvent) {
 		if (!e.visible) return;