Fixes selected row updating on the Graph

src/plus/webviews/graph/graphWebview.ts

@@ -84,6 +84,7 @@ export class GraphWebview extends WebviewBase {
 	private _etagRepository?: number;
 	private _graph?: GitGraph;
 	private _selectedSha?: string;
+	private _selectedRows: { [sha: string]: true } = {};
 	private _repositoryEventsDisposable: Disposable | undefined;
 
 	private _statusBarItem: StatusBarItem | undefined;
@@ -113,7 +114,7 @@ export class GraphWebview extends WebviewBase {
 			this.container.subscription.onDidChange(this.onSubscriptionChanged, this),
 			registerCommand(Commands.ShowCommitInGraph, (args: ShowCommitInGraphCommandArgs) => {
 				this.repository = this.container.git.getRepository(args.repoPath);
-				this._selectedSha = args.sha;
+				this.setSelectedRows(args.sha);
 
 				if (this._panel == null) {
 					void this.show({ preserveFocus: args.preserveFocus });
@@ -399,7 +400,7 @@ export class GraphWebview extends WebviewBase {
 		if (!this.isReady || !this.visible) return false;
 
 		return this.notify(DidChangeSelectionNotificationType, {
-			selection: this._selectedSha != null ? [this._selectedSha] : [],
+			selection: this._selectedRows,
 		});
 	}
 
@@ -474,14 +475,14 @@ export class GraphWebview extends WebviewBase {
 			{ limit: limit, ref: this._selectedSha ?? 'HEAD' },
 		);
 		this.setGraph(data);
-		this._selectedSha = data.sha;
+		this.setSelectedRows(data.sha);
 
 		return {
 			previewBanner: this.previewBanner,
 			trialBanner: this.trialBanner,
 			repositories: formatRepositories(this.container.git.openRepositories),
 			selectedRepository: this.repository.path,
-			selectedSha: this._selectedSha,
+			selectedRows: this._selectedRows,
 			selectedVisibility: visibility,
 			subscription: access.subscription.current,
 			allowed: access.allowed,
@@ -509,12 +510,19 @@ export class GraphWebview extends WebviewBase {
 
 	private resetRepositoryState() {
 		this.setGraph(undefined);
-		this._selectedSha = undefined;
+		this.setSelectedRows(undefined);
 	}
 
 	private setGraph(graph: GitGraph | undefined) {
 		this._graph = graph;
 	}
+
+	private setSelectedRows(sha: string | undefined) {
+		if (this._selectedSha === sha) return;
+
+		this._selectedSha = sha;
+		this._selectedRows = sha != null ? { [sha]: true } : {};
+	}
 }
 
 function formatRepositories(repositories: Repository[]): GraphRepository[] {

src/plus/webviews/graph/protocol.ts

@@ -8,8 +8,8 @@ import { IpcCommandType, IpcNotificationType } from '../../../webviews/protocol'
 export interface State {
 	repositories?: GraphRepository[];
 	selectedRepository?: string;
-	selectedSha?: string;
 	selectedVisibility?: RepositoryVisibility;
+	selectedRows?: { [id: string]: true };
 	subscription?: Subscription;
 	allowed?: boolean;
 	rows?: GraphRow[];
@@ -121,7 +121,7 @@ export const DidChangeCommitsNotificationType = new IpcNotificationType
 );
 
 export interface DidChangeSelectionParams {
-	selection: string[];
+	selection: { [id: string]: true };
 }
 export const DidChangeSelectionNotificationType = new IpcNotificationType<DidChangeSelectionParams>(
 	'graph/selection/didChange',

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

@@ -136,7 +136,7 @@ export function GraphWrapper({
 	repositories = [],
 	rows = [],
 	selectedRepository,
-	selectedSha,
+	selectedRows,
 	subscription,
 	selectedVisibility,
 	allowed,
@@ -157,7 +157,7 @@ export function GraphWrapper({
 	const [currentRepository, setCurrentRepository] = useState<GraphRepository | undefined>(
 		reposList.find(item => item.path === selectedRepository),
 	);
-	const [currentSha, setSelectedSha] = useState(selectedSha);
+	const [graphSelectedRows, setSelectedRows] = useState(selectedRows);
 	const [graphColSettings, setGraphColSettings] = useState(getGraphColSettingsModel(config));
 	const [pagingState, setPagingState] = useState(paging);
 	const [isLoading, setIsLoading] = useState(false);
@@ -203,7 +203,7 @@ export function GraphWrapper({
 		setGraphList(state.rows ?? []);
 		setReposList(state.repositories ?? []);
 		setCurrentRepository(reposList.find(item => item.path === state.selectedRepository));
-		setSelectedSha(state.selectedSha);
+		setSelectedRows(state.selectedRows);
 		setGraphColSettings(getGraphColSettingsModel(state.config));
 		setPagingState(state.paging);
 		setIsLoading(false);
@@ -431,12 +431,10 @@ export function GraphWrapper({
 							<GraphContainer
 								columnsSettings={graphColSettings}
 								cssVariables={styleProps.cssVariables}
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								//@ts-ignore - remove once the Graph component is updated to use the new API
 								getExternalIcon={getIconElementLibrary}
 								graphRows={graphList}
 								height={mainHeight}
-								isSelectedBySha={currentSha ? { [currentSha]: true } : undefined}
+								isSelectedBySha={graphSelectedRows}
 								hasMoreCommits={pagingState?.more}
 								isLoadingRows={isLoading}
 								nonce={nonce}

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

@@ -173,7 +173,7 @@ export class GraphApp extends App {
 
 			case DidChangeSelectionNotificationType.method:
 				onIpc(DidChangeSelectionNotificationType, msg, params => {
-					this.setState({ ...this.state, selectedSha: params.selection[0] });
+					this.setState({ ...this.state, selectedRows: params.selection });
 					this.refresh(this.state);
 				});
 				break;