Reworks graph protocols a bit

src/plus/webviews/graph/graphWebview.ts

@@ -14,6 +14,7 @@ import { isStash } from '../../../git/models/commit';
 import type { GitLog } from '../../../git/models/log';
 import type { GitRemote } from '../../../git/models/remote';
 import type { Repository, RepositoryChangeEvent } from '../../../git/models/repository';
+import { RepositoryChange, RepositoryChangeComparisonMode } from '../../../git/models/repository';
 import type { GitTag } from '../../../git/models/tag';
 import { RepositoryFolderNode } from '../../../views/nodes/viewNode';
 import type { IpcMessage } from '../../../webviews/protocol';
@@ -22,13 +23,13 @@ import { WebviewBase } from '../../../webviews/webviewBase';
 import { ensurePlusFeaturesEnabled } from '../../subscription/utils';
 import type { GraphCommit, GraphCompositeConfig, GraphRemote, GraphRepository, State } from './protocol';
 import {
-	ColumnChangeCommandType,
 	DidChangeCommitsNotificationType,
-	DidChangeConfigNotificationType,
+	DidChangeGraphConfigurationNotificationType,
 	DidChangeNotificationType,
 	DismissPreviewCommandType,
-	MoreCommitsCommandType,
-	SelectRepositoryCommandType,
+	GetMoreCommitsCommandType,
+	UpdateColumnCommandType,
+	UpdateSelectedRepositoryCommandType,
 	UpdateSelectionCommandType,
 } from './protocol';
 
@@ -100,37 +101,23 @@ export class GraphWebview extends WebviewBase {
 		return [window.onDidChangeActiveColorTheme(this.onThemeChanged, this)];
 	}
 
-	private onThemeChanged(theme: ColorTheme) {
-		if (this._theme != null) {
-			if (
-				(isDarkTheme(theme) && isDarkTheme(this._theme)) ||
-				(isLightTheme(theme) && isLightTheme(this._theme))
-			) {
-				return;
-			}
-		}
-
-		this._theme = theme;
-		void this.notifyDidChangeState();
-	}
-
 	protected override onMessageReceived(e: IpcMessage) {
 		switch (e.method) {
-			case ColumnChangeCommandType.method:
-				onIpc(ColumnChangeCommandType, e, params => this.changeColumn(params.name, params.config));
+			case DismissPreviewCommandType.method:
+				onIpc(DismissPreviewCommandType, e, () => this.dismissPreview());
 				break;
-			case MoreCommitsCommandType.method:
-				onIpc(MoreCommitsCommandType, e, params => this.moreCommits(params.limit));
+			case GetMoreCommitsCommandType.method:
+				onIpc(GetMoreCommitsCommandType, e, params => this.moreCommits(params.limit));
 				break;
-			case SelectRepositoryCommandType.method:
-				onIpc(SelectRepositoryCommandType, e, params => this.changeRepository(params.path));
+			case UpdateColumnCommandType.method:
+				onIpc(UpdateColumnCommandType, e, params => this.changeColumn(params.name, params.config));
+				break;
+			case UpdateSelectedRepositoryCommandType.method:
+				onIpc(UpdateSelectedRepositoryCommandType, e, params => this.changeRepository(params.path));
 				break;
 			case UpdateSelectionCommandType.method:
 				onIpc(UpdateSelectionCommandType, e, params => this.onSelectionChanged(params.selection));
 				break;
-			case DismissPreviewCommandType.method:
-				onIpc(DismissPreviewCommandType, e, () => this.dismissPreview());
-				break;
 		}
 	}
 
@@ -166,6 +153,20 @@ export class GraphWebview extends WebviewBase {
 		}
 	}
 
+	private onThemeChanged(theme: ColorTheme) {
+		if (this._theme != null) {
+			if (
+				(isDarkTheme(theme) && isDarkTheme(this._theme)) ||
+				(isLightTheme(theme) && isLightTheme(this._theme))
+			) {
+				return;
+			}
+		}
+
+		this._theme = theme;
+		void this.notifyDidChangeState();
+	}
+
 	private dismissPreview() {
 		this.previewBanner = false;
 		void this.container.storage.storeWorkspace('graph:preview', false);
@@ -212,7 +213,7 @@ export class GraphWebview extends WebviewBase {
 	}
 
 	private async notifyDidChangeConfig() {
-		return this.notify(DidChangeConfigNotificationType, {
+		return this.notify(DidChangeGraphConfigurationNotificationType, {
 			config: this.getConfig(),
 		});
 	}
@@ -357,8 +358,24 @@ export class GraphWebview extends WebviewBase {
 		return config;
 	}
 
-	private onRepositoryChanged(_e: RepositoryChangeEvent) {
-		// TODO: e.changed(RepositoryChange.Heads)
+	private onRepositoryChanged(e: RepositoryChangeEvent) {
+		if (
+			!e.changed(
+				RepositoryChange.Config,
+				RepositoryChange.Heads,
+				RepositoryChange.Index,
+				RepositoryChange.Remotes,
+				RepositoryChange.RemoteProviders,
+				RepositoryChange.Stash,
+				RepositoryChange.Status,
+				RepositoryChange.Tags,
+				RepositoryChange.Unknown,
+				RepositoryChangeComparisonMode.Any,
+			)
+		) {
+			return;
+		}
+
 		this.currentLog = undefined;
 		void this.notifyDidChangeState();
 	}

src/plus/webviews/graph/protocol.ts

@@ -12,7 +12,7 @@ export interface State {
 	branches?: GraphBranch[];
 	log?: GraphLog;
 	nonce?: string;
-	mixedColumnColors?: { [variable: string]: string };
+	mixedColumnColors?: Record<string, string>;
 	previewBanner?: boolean;
 }
 
@@ -30,9 +30,7 @@ export type GraphTag = Record;
 export type GraphBranch = Record<string, any>;
 
 export interface GraphCompositeConfig extends GraphConfig {
-	columns?: {
-		[key: string]: GraphColumnConfig;
-	};
+	columns?: Record<string, GraphColumnConfig>;
 }
 
 export interface CommitListCallback {
@@ -40,23 +38,25 @@ export interface CommitListCallback {
 }
 
 // Commands
-export interface ColumnChangeParams {
-	name: string;
-	config: GraphColumnConfig;
-}
-export const ColumnChangeCommandType = new IpcCommandType<ColumnChangeParams>('graph/column');
+export const DismissPreviewCommandType = new IpcCommandType<undefined>('graph/dismissPreview');
 
-export interface MoreCommitsParams {
+export interface GetMoreCommitsParams {
 	limit?: number;
 }
-export const MoreCommitsCommandType = new IpcCommandType<MoreCommitsParams>('graph/moreCommits');
+export const GetMoreCommitsCommandType = new IpcCommandType<GetMoreCommitsParams>('graph/getMoreCommits');
 
-export interface SelectRepositoryParams {
-	path: string;
+export interface UpdateColumnParams {
+	name: string;
+	config: GraphColumnConfig;
 }
-export const SelectRepositoryCommandType = new IpcCommandType<SelectRepositoryParams>('graph/selectRepository');
+export const UpdateColumnCommandType = new IpcCommandType<UpdateColumnParams>('graph/update/column');
 
-export const DismissPreviewCommandType = new IpcCommandType<undefined>('graph/dismissPreview');
+export interface UpdateSelectedRepositoryParams {
+	path: string;
+}
+export const UpdateSelectedRepositoryCommandType = new IpcCommandType<UpdateSelectedRepositoryParams>(
+	'graph/update/selectedRepository',
+);
 
 export interface UpdateSelectionParams {
 	selection: GraphCommit[];
@@ -69,15 +69,17 @@ export interface DidChangeParams {
 }
 export const DidChangeNotificationType = new IpcNotificationType<DidChangeParams>('graph/didChange');
 
-export interface DidChangeConfigParams {
+export interface DidChangeGraphConfigurationParams {
 	config: GraphCompositeConfig;
 }
-export const DidChangeConfigNotificationType = new IpcNotificationType<DidChangeConfigParams>('graph/didChangeConfig');
+export const DidChangeGraphConfigurationNotificationType = new IpcNotificationType<DidChangeGraphConfigurationParams>(
+	'graph/configuration/didChange',
+);
 
 export interface DidChangeCommitsParams {
 	commits: GraphCommit[];
 	log?: GraphLog;
 }
 export const DidChangeCommitsNotificationType = new IpcNotificationType<DidChangeCommitsParams>(
-	'graph/didChangeCommits',
+	'graph/commits/didChange',
 );

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

@@ -5,17 +5,17 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import type { GraphColumnConfig, GraphConfig } from '../../../../config';
 import type { CommitListCallback, GraphCommit, GraphRepository, State } from '../../../../plus/webviews/graph/protocol';
 import {
-	ColumnChangeCommandType,
 	DidChangeCommitsNotificationType,
-	DidChangeConfigNotificationType,
+	DidChangeGraphConfigurationNotificationType,
 	DidChangeNotificationType,
 	DismissPreviewCommandType,
-	MoreCommitsCommandType,
-	SelectRepositoryCommandType,
+	GetMoreCommitsCommandType,
+	UpdateColumnCommandType,
+	UpdateSelectedRepositoryCommandType,
 	UpdateSelectionCommandType,
 } from '../../../../plus/webviews/graph/protocol';
 import { debounce } from '../../../../system/function';
-import { DidChangeConfigurationNotificationType, onIpc } from '../../../../webviews/protocol';
+import { onIpc } from '../../../../webviews/protocol';
 import { App } from '../../shared/appBase';
 import { mix, opacity } from '../../shared/colors';
 import { GraphWrapper } from './GraphWrapper';
@@ -68,7 +68,7 @@ export class GraphApp extends App {
 				this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`);
 
 				onIpc(DidChangeNotificationType, msg, params => {
-					this.setState({ ...this.state, ...params.state });
+					this.setState({ ...this.state, ...params.state, mixedColumnColors: undefined });
 					this.refresh(this.state);
 				});
 				break;
@@ -86,20 +86,15 @@ export class GraphApp extends App {
 				});
 				break;
 
-			case DidChangeConfigNotificationType.method:
+			case DidChangeGraphConfigurationNotificationType.method:
 				this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`);
 
-				onIpc(DidChangeConfigNotificationType, msg, params => {
-					this.setState({ ...this.state, config: params.config });
-					this.refresh(this.state);
-				});
-				break;
-
-			case DidChangeConfigurationNotificationType.method:
-				this.log(`${this.appName}.onMessageReceived(${msg.id}): name=${msg.method}`);
-
-				onIpc(DidChangeConfigurationNotificationType, msg, params => {
-					this.setState({ ...this.state, mixedColumnColors: this.getGraphColors(params.config.graph) });
+				onIpc(DidChangeGraphConfigurationNotificationType, msg, params => {
+					this.setState({
+						...this.state,
+						config: params.config,
+						mixedColumnColors: undefined,
+					});
 					this.refresh(this.state);
 				});
 				break;
@@ -109,6 +104,18 @@ export class GraphApp extends App {
 		}
 	}
 
+	protected override onThemeUpdated() {
+		this.setState({ ...this.state, mixedColumnColors: undefined });
+		this.refresh(this.state);
+	}
+
+	protected override setState(state: State) {
+		if (state.mixedColumnColors == null) {
+			state.mixedColumnColors = this.getGraphColors(state.config);
+		}
+		super.setState(state);
+	}
+
 	private getGraphColors(config: GraphConfig | undefined): CssVariables {
 		// this will be called on theme updated as well as on config updated since it is dependent on the column colors from config changes and the background color from the theme
 		const body = document.body;
@@ -132,30 +139,25 @@ export class GraphApp extends App {
 		return mixedGraphColors;
 	}
 
-	protected override onThemeUpdated() {
-		this.setState({ ...this.state, mixedColumnColors: this.getGraphColors(this.state.config) });
-		this.refresh(this.state);
-	}
-
 	private onDismissPreview() {
 		this.sendCommand(DismissPreviewCommandType, undefined);
 	}
 
 	private onColumnChanged(name: string, settings: GraphColumnConfig) {
-		this.sendCommand(ColumnChangeCommandType, {
+		this.sendCommand(UpdateColumnCommandType, {
 			name: name,
 			config: settings,
 		});
 	}
 
 	private onRepositoryChanged(repo: GraphRepository) {
-		this.sendCommand(SelectRepositoryCommandType, {
+		this.sendCommand(UpdateSelectedRepositoryCommandType, {
 			path: repo.path,
 		});
 	}
 
 	private onMoreCommits(limit?: number) {
-		this.sendCommand(MoreCommitsCommandType, {
+		this.sendCommand(GetMoreCommitsCommandType, {
 			limit: limit,
 		});
 	}