Add graph header context menu option to toggle mode (#2611)

* Add graph header context menu option to toggle mode

* Updates graph dependency

package.json

@@ -7189,42 +7189,52 @@
 			},
 			{
 				"command": "gitlens.graph.columnAuthorOn",
-				"title": "Show Author",
+				"title": "Show Author Column",
 				"category": "GitLens"
 			},
 			{
 				"command": "gitlens.graph.columnAuthorOff",
-				"title": "Hide Author",
+				"title": "Hide Author Column",
 				"category": "GitLens"
 			},
 			{
 				"command": "gitlens.graph.columnDateTimeOn",
-				"title": "Show Date",
+				"title": "Show Date Column",
 				"category": "GitLens"
 			},
 			{
 				"command": "gitlens.graph.columnDateTimeOff",
-				"title": "Hide Date",
+				"title": "Hide Date Column",
 				"category": "GitLens"
 			},
 			{
 				"command": "gitlens.graph.columnShaOn",
-				"title": "Show SHA",
+				"title": "Show SHA Column",
 				"category": "GitLens"
 			},
 			{
 				"command": "gitlens.graph.columnShaOff",
-				"title": "Hide SHA",
+				"title": "Hide SHA Column",
 				"category": "GitLens"
 			},
 			{
 				"command": "gitlens.graph.columnChangesOn",
-				"title": "Show Changes",
+				"title": "Show Changes Column",
 				"category": "GitLens"
 			},
 			{
 				"command": "gitlens.graph.columnChangesOff",
-				"title": "Hide Changes",
+				"title": "Hide Changes Column",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.graph.columnGraphCompact",
+				"title": "Compact Graph Column Layout",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.graph.columnGraphDefault",
+				"title": "Default Graph Column Layout",
 				"category": "GitLens"
 			},
 			{
@@ -9316,6 +9326,14 @@
 					"when": "false"
 				},
 				{
+					"command": "gitlens.graph.columnGraphCompact",
+					"when": "false"
+				},
+				{
+					"command": "gitlens.graph.columnGraphDefault",
+					"when": "false"
+				},
+				{
 					"command": "gitlens.graph.columnChangesOn",
 					"when": "false"
 				},
@@ -12056,43 +12074,53 @@
 				},
 				{
 					"command": "gitlens.graph.columnAuthorOn",
-					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bauthor\\b/",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bhidden:author\\b/",
 					"group": "1_columns@1"
 				},
 				{
 					"command": "gitlens.graph.columnAuthorOff",
-					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bauthor\\b).)*$/",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bhidden:author\\b).)*$/",
 					"group": "1_columns@1"
 				},
 				{
 					"command": "gitlens.graph.columnChangesOn",
-					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bchanges\\b/",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bhidden:changes\\b/",
 					"group": "1_columns@2"
 				},
 				{
 					"command": "gitlens.graph.columnChangesOff",
-					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bchanges\\b).)*$/",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bhidden:changes\\b).)*$/",
 					"group": "1_columns@2"
 				},
 				{
 					"command": "gitlens.graph.columnDateTimeOn",
-					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bdatetime\\b/",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bhidden:datetime\\b/",
 					"group": "1_columns@3"
 				},
 				{
 					"command": "gitlens.graph.columnDateTimeOff",
-					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bdatetime\\b).)*$/",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bhidden:datetime\\b).)*$/",
 					"group": "1_columns@3"
 				},
 				{
 					"command": "gitlens.graph.columnShaOn",
-					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bsha\\b/",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bhidden:sha\\b/",
 					"group": "1_columns@4"
 				},
 				{
 					"command": "gitlens.graph.columnShaOff",
-					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bsha\\b).)*$/",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bhidden:sha\\b).)*$/",
 					"group": "1_columns@4"
+				},
+				{
+					"command": "gitlens.graph.columnGraphDefault",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bcompact:graph\\b/",
+					"group": "2_columns@1"
+				},
+				{
+					"command": "gitlens.graph.columnGraphCompact",
+					"when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bcompact:graph\\b).)*$/",
+					"group": "2_columns@1"
 				}
 			],
 			"gitlens/commit/browse": [
@@ -13465,7 +13493,7 @@
 		"vscode:prepublish": "yarn run bundle"
 	},
 	"dependencies": {
-		"@gitkraken/gitkraken-components": "8.0.2",
+		"@gitkraken/gitkraken-components": "8.1.0",
 		"@microsoft/fast-element": "1.11.0",
 		"@microsoft/fast-react-wrapper": "0.3.16-0",
 		"@octokit/core": "4.2.0",

src/plus/webviews/graph/graphWebview.ts

@@ -369,6 +369,8 @@ export class GraphWebviewProvider implements WebviewProvider {
 			registerCommand('gitlens.graph.columnShaOff', () => this.toggleColumn('sha', false)),
 			registerCommand('gitlens.graph.columnChangesOn', () => this.toggleColumn('changes', true)),
 			registerCommand('gitlens.graph.columnChangesOff', () => this.toggleColumn('changes', false)),
+			registerCommand('gitlens.graph.columnGraphCompact', () => this.setColumnMode('graph', 'compact')),
+			registerCommand('gitlens.graph.columnGraphDefault', () => this.setColumnMode('graph', undefined)),
 
 			registerCommand('gitlens.graph.copyDeepLinkToBranch', this.copyDeepLinkToBranch, this),
 			registerCommand('gitlens.graph.copyDeepLinkToCommit', this.copyDeepLinkToCommit, this),
@@ -1587,15 +1589,19 @@ export class GraphWebviewProvider implements WebviewProvider {
 	}
 
 	private getColumnHeaderContext(columnSettings: GraphColumnsSettings): string {
-		const hidden: string[] = [];
+		const contextItems: string[] = [];
 		for (const [name, settings] of Object.entries(columnSettings)) {
 			if (settings.isHidden) {
-				hidden.push(name);
+				contextItems.push(`hidden:${name}`);
+			}
+
+			if (settings.mode) {
+				contextItems.push(`${settings.mode}:${name}`);
 			}
 		}
 		return serializeWebviewItemContext<GraphItemContext>({
 			webviewItem: 'gitlens:graph:columns',
-			webviewItemValue: hidden.join(','),
+			webviewItemValue: contextItems.join(','),
 		});
 	}
 
@@ -2458,6 +2464,22 @@ export class GraphWebviewProvider implements WebviewProvider {
 		}
 	}
 
+	@debug()
+	private async setColumnMode(name: GraphColumnName, mode?: string) {
+		let columns = this.container.storage.getWorkspace('graph:columns');
+		let column = columns?.[name];
+		if (column != null) {
+			column.mode = mode;
+		} else {
+			column = { mode: mode };
+		}
+
+		columns = updateRecordValue(columns, name, column);
+		await this.container.storage.storeWorkspace('graph:columns', columns);
+
+		void this.notifyDidChangeColumns();
+	}
+
 	private getGraphItemRef(item?: GraphItemContext | unknown | undefined): GitReference | undefined;
 	private getGraphItemRef(
 		item: GraphItemContext | unknown | undefined,

src/plus/webviews/graph/protocol.ts

@@ -173,6 +173,7 @@ export interface GraphComponentConfig {
 
 export interface GraphColumnConfig {
 	isHidden?: boolean;
+	mode?: string;
 	width?: number;
 	order?: number;
 }

src/storage.ts

@@ -212,6 +212,7 @@ export interface StoredDeepLinkContext {
 
 export interface StoredGraphColumn {
 	isHidden?: boolean;
+	mode?: string;
 	width?: number;
 }
 

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

@@ -1,4 +1,5 @@
 import type {
+	GraphColumnMode,
 	GraphColumnSetting,
 	GraphColumnsSettings,
 	GraphContainerProps,
@@ -850,6 +851,7 @@ export function GraphWrapper({
 				[columnName]: {
 					width: columnSettings.width,
 					isHidden: columnSettings.isHidden,
+					mode: columnSettings.mode as GraphColumnMode,
 					order: columnSettings.order,
 				},
 			});

yarn.lock

@@ -202,10 +202,10 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@gitkraken/gitkraken-components@8.0.2":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@gitkraken/gitkraken-components/-/gitkraken-components-8.0.2.tgz#ba098462d07838634258a4cb2fa73df1abbbac3b"
-  integrity sha512-siGcf3RrJC8BGM7Usx+kP0/cdVo5ITk2GyJsxUJYlRCNE5SnttHTDRm+A1/KalIXw6kG82ww4twYIp6GrJ84qA==
+"@gitkraken/gitkraken-components@8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@gitkraken/gitkraken-components/-/gitkraken-components-8.1.0.tgz#ccfa32573837c16feaaf8e886ccd58ceb4e1d5e9"
+  integrity sha512-PBztRmgosUTJXAGPCR1W0iOBWeT10qC+LWXmUXAeD3AaBGadlL8RD16wrPYjML/ZxR9XZAfaWnmMEaTtuxOzWQ==
   dependencies:
     "@axosoft/react-virtualized" "9.22.3-gitkraken.3"
     classnames "2.3.2"