Improves perf of selecting a row if in the data

src/plus/webviews/graph/graphWebview.ts

@@ -31,6 +31,7 @@ import {
 	DidChangeCommitsNotificationType,
 	DidChangeGraphConfigurationNotificationType,
 	DidChangeNotificationType,
+	DidChangeSelectionNotificationType,
 	DidChangeSubscriptionNotificationType,
 	DismissPreviewCommandType,
 	GetMoreCommitsCommandType,
@@ -80,9 +81,10 @@ export class GraphWebview extends WebviewBase {
 
 	private _etagSubscription?: number;
 	private _etagRepository?: number;
+	private _graph?: GitGraph;
+	private _ids: Set<string> = new Set();
 	private _selectedSha?: string;
 	private _repositoryEventsDisposable: Disposable | undefined;
-	private _repositoryGraph?: GitGraph;
 
 	private _statusBarItem: StatusBarItem | undefined;
 	private _theme: ColorTheme | undefined;
@@ -115,7 +117,11 @@ export class GraphWebview extends WebviewBase {
 				if (this._panel == null) {
 					void this.show();
 				} else {
-					// TODO@eamodio we should be smarter here an look for the commit in the saved data before refreshing and only send the selectedSha
+					if (this._ids.has(args.sha)) {
+						void this.notifyDidChangeSelection();
+						return;
+					}
+
 					this.updateState();
 				}
 			}),
@@ -296,16 +302,16 @@ export class GraphWebview extends WebviewBase {
 
 	@gate()
 	private async onGetMoreCommits(limit?: number) {
-		if (this._repositoryGraph?.more == null || this._repository?.etag !== this._etagRepository) {
+		if (this._graph?.more == null || this._repository?.etag !== this._etagRepository) {
 			this.updateState(true);
 
 			return;
 		}
 
 		const { defaultItemLimit, pageItemLimit } = this.getConfig();
-		const newGraph = await this._repositoryGraph.more(limit ?? pageItemLimit ?? defaultItemLimit);
+		const newGraph = await this._graph.more(limit ?? pageItemLimit ?? defaultItemLimit);
 		if (newGraph != null) {
-			this._repositoryGraph = newGraph;
+			this.setGraph(newGraph);
 		} else {
 			debugger;
 		}
@@ -380,6 +386,15 @@ export class GraphWebview extends WebviewBase {
 	}
 
 	@debug()
+	private async notifyDidChangeSelection() {
+		if (!this.isReady || !this.visible) return false;
+
+		return this.notify(DidChangeSelectionNotificationType, {
+			selection: this._selectedSha != null ? [this._selectedSha] : [],
+		});
+	}
+
+	@debug()
 	private async notifyDidChangeSubscription() {
 		if (!this.isReady || !this.visible) return false;
 
@@ -394,7 +409,7 @@ export class GraphWebview extends WebviewBase {
 	private async notifyDidChangeCommits() {
 		if (!this.isReady || !this.visible) return false;
 
-		const data = this._repositoryGraph!;
+		const data = this._graph!;
 		return this.notify(DidChangeCommitsNotificationType, {
 			rows: data.rows,
 			paging: {
@@ -433,7 +448,7 @@ export class GraphWebview extends WebviewBase {
 		const config = this.getConfig();
 
 		// If we have a set of data refresh to the same set
-		const limit = this._repositoryGraph?.paging?.limit ?? config.defaultItemLimit;
+		const limit = this._graph?.paging?.limit ?? config.defaultItemLimit;
 
 		// only check on private
 		const access = await this.container.git.access(PlusFeatures.Graph, this.repository?.path);
@@ -447,7 +462,7 @@ export class GraphWebview extends WebviewBase {
 			this._panel!.webview.asWebviewUri,
 			{ limit: limit, ref: this._selectedSha ?? 'HEAD' },
 		);
-		this._repositoryGraph = data;
+		this.setGraph(data);
 		this._selectedSha = data.sha;
 
 		return {
@@ -470,9 +485,23 @@ export class GraphWebview extends WebviewBase {
 	}
 
 	private resetRepositoryState() {
-		this._repositoryGraph = undefined;
+		this.setGraph(undefined);
 		this._selectedSha = undefined;
 	}
+
+	private setGraph(graph: GitGraph | undefined) {
+		this._graph = graph;
+
+		if (graph == null) {
+			this._ids.clear();
+			return;
+		}
+
+		// TODO@eamodio see if we can ask the graph if it can select the sha, so we don't have to maintain a set of ids
+		for (const row of graph.rows) {
+			this._ids.add(row.sha);
+		}
+	}
 }
 
 function formatRepositories(repositories: Repository[]): GraphRepository[] {

src/plus/webviews/graph/protocol.ts

@@ -116,3 +116,10 @@ export interface DidChangeCommitsParams {
 export const DidChangeCommitsNotificationType = new IpcNotificationType<DidChangeCommitsParams>(
 	'graph/commits/didChange',
 );
+
+export interface DidChangeSelectionParams {
+	selection: string[];
+}
+export const DidChangeSelectionNotificationType = new IpcNotificationType<DidChangeSelectionParams>(
+	'graph/selection/didChange',
+);

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

@@ -9,6 +9,7 @@ import {
 	DidChangeCommitsNotificationType,
 	DidChangeGraphConfigurationNotificationType,
 	DidChangeNotificationType,
+	DidChangeSelectionNotificationType,
 	DidChangeSubscriptionNotificationType,
 	DismissPreviewCommandType,
 	GetMoreCommitsCommandType,
@@ -17,6 +18,7 @@ import {
 	UpdateSelectionCommandType,
 } from '../../../../plus/webviews/graph/protocol';
 import { debounce } from '../../../../system/function';
+import type { IpcMessage } from '../../../../webviews/protocol';
 import { onIpc } from '../../../../webviews/protocol';
 import { App } from '../../shared/appBase';
 import { mix, opacity } from '../../shared/colors';
@@ -80,13 +82,11 @@ export class GraphApp extends App {
 	}
 
 	protected override onMessageReceived(e: MessageEvent) {
-		this.log('onMessageReceived', e);
+		const msg = e.data as IpcMessage;
+		this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`);
 
-		const msg = e.data;
 		switch (msg.method) {
 			case DidChangeNotificationType.method:
-				this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`);
-
 				onIpc(DidChangeNotificationType, msg, params => {
 					this.setState({ ...this.state, ...params.state });
 					this.refresh(this.state);
@@ -94,8 +94,6 @@ export class GraphApp extends App {
 				break;
 
 			case DidChangeCommitsNotificationType.method:
-				this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`);
-
 				onIpc(DidChangeCommitsNotificationType, msg, params => {
 					let rows;
 					if (params?.paging?.startingCursor != null && this.state.rows != null) {
@@ -147,9 +145,14 @@ export class GraphApp extends App {
 				});
 				break;
 
-			case DidChangeGraphConfigurationNotificationType.method:
-				this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`);
+			case DidChangeSelectionNotificationType.method:
+				onIpc(DidChangeSelectionNotificationType, msg, params => {
+					this.setState({ ...this.state, selectedSha: params.selection[0] });
+					this.refresh(this.state);
+				});
+				break;
 
+			case DidChangeGraphConfigurationNotificationType.method:
 				onIpc(DidChangeGraphConfigurationNotificationType, msg, params => {
 					this.setState({
 						...this.state,
@@ -160,8 +163,6 @@ export class GraphApp extends App {
 				break;
 
 			case DidChangeSubscriptionNotificationType.method:
-				this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`);
-
 				onIpc(DidChangeSubscriptionNotificationType, msg, params => {
 					this.setState({
 						...this.state,