From 9f0e74eb956005dcc50728bb4fbebf66d6ee0349 Mon Sep 17 00:00:00 2001
From: Eric Amodio
Date: Tue, 27 Sep 2022 01:54:13 -0400
Subject: [PATCH] Adds context menus for column headers
---
package.json | 86 +++++++++-
src/config.ts | 5 -
src/plus/webviews/graph/graphWebview.ts | 160 ++++++++++++------
src/plus/webviews/graph/protocol.ts | 32 +++-
src/storage.ts | 9 +-
src/webviews/apps/plus/graph/GraphWrapper.tsx | 159 ++++++-----------
src/webviews/apps/plus/graph/graph.scss | 145 +++-------------
src/webviews/apps/plus/graph/graph.tsx | 21 ++-
yarn.lock | 8 +-
9 files changed, 325 insertions(+), 300 deletions(-)
diff --git a/package.json b/package.json
index 874247aa4f3d1..98b6659eb50e0 100644
--- a/package.json
+++ b/package.json
@@ -6378,6 +6378,36 @@
"title": "Create Pull Request...",
"category": "GitLens",
"icon": "$(git-pull-request-create)"
+ },
+ {
+ "command": "gitlens.graph.columnAuthorOn",
+ "title": "Show Author",
+ "category": "GitLens"
+ },
+ {
+ "command": "gitlens.graph.columnAuthorOff",
+ "title": "Hide Author",
+ "category": "GitLens"
+ },
+ {
+ "command": "gitlens.graph.columnDateTimeOn",
+ "title": "Show Date",
+ "category": "GitLens"
+ },
+ {
+ "command": "gitlens.graph.columnDateTimeOff",
+ "title": "Hide Date",
+ "category": "GitLens"
+ },
+ {
+ "command": "gitlens.graph.columnShaOn",
+ "title": "Show SHA",
+ "category": "GitLens"
+ },
+ {
+ "command": "gitlens.graph.columnShaOff",
+ "title": "Hide SHA",
+ "category": "GitLens"
}
],
"icons": {
@@ -8257,6 +8287,30 @@
"command": "gitlens.graph.createPullRequest",
"when": "false"
},
+ {
+ "command": "gitlens.graph.columnAuthorOn",
+ "when": "false"
+ },
+ {
+ "command": "gitlens.graph.columnAuthorOff",
+ "when": "false"
+ },
+ {
+ "command": "gitlens.graph.columnDateTimeOn",
+ "when": "false"
+ },
+ {
+ "command": "gitlens.graph.columnDateTimeOff",
+ "when": "false"
+ },
+ {
+ "command": "gitlens.graph.columnShaOn",
+ "when": "false"
+ },
+ {
+ "command": "gitlens.graph.columnShaOff",
+ "when": "false"
+ },
{
"command": "gitlens.enableDebugLogging",
"when": "config.gitlens.outputLevel != debug"
@@ -10819,6 +10873,36 @@
"command": "gitlens.graph.createBranch",
"when": "!gitlens:readonly && !gitlens:untrusted && !gitlens:hasVirtualFolders && webviewItem =~ /gitlens:tag\\b/",
"group": "1_gitlens_actions@3"
+ },
+ {
+ "command": "gitlens.graph.columnAuthorOn",
+ "when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bauthor\\b/",
+ "group": "1_columns@1"
+ },
+ {
+ "command": "gitlens.graph.columnAuthorOff",
+ "when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bauthor\\b).)*$/",
+ "group": "1_columns@1"
+ },
+ {
+ "command": "gitlens.graph.columnDateTimeOn",
+ "when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bdatetime\\b/",
+ "group": "1_columns@2"
+ },
+ {
+ "command": "gitlens.graph.columnDateTimeOff",
+ "when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bdatetime\\b).)*$/",
+ "group": "1_columns@2"
+ },
+ {
+ "command": "gitlens.graph.columnShaOn",
+ "when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /\\bsha\\b/",
+ "group": "1_columns@3"
+ },
+ {
+ "command": "gitlens.graph.columnShaOff",
+ "when": "webviewItem =~ /gitlens:graph:columns\\b/ && webviewItemValue =~ /^(?:(?!\\bsha\\b).)*$/",
+ "group": "1_columns@3"
}
],
"gitlens/commit/browse": [
@@ -12083,7 +12167,7 @@
"vscode:prepublish": "yarn run bundle"
},
"dependencies": {
- "@gitkraken/gitkraken-components": "1.0.0-rc.16",
+ "@gitkraken/gitkraken-components": "1.0.0-rc.17",
"@microsoft/fast-element": "1.10.5",
"@microsoft/fast-react-wrapper": "0.3.14",
"@octokit/core": "4.0.5",
diff --git a/src/config.ts b/src/config.ts
index a6810f5ad8758..28f8b6e7095c6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -373,11 +373,6 @@ export interface AdvancedConfig {
similarityThreshold: number | null;
}
-export interface GraphColumnConfig {
- width: number;
- isHidden: boolean;
-}
-
export interface GraphConfig {
avatars: boolean;
commitOrdering: 'date' | 'author-date' | 'topo';
diff --git a/src/plus/webviews/graph/graphWebview.ts b/src/plus/webviews/graph/graphWebview.ts
index bf941f2696228..6fac526c7ef35 100644
--- a/src/plus/webviews/graph/graphWebview.ts
+++ b/src/plus/webviews/graph/graphWebview.ts
@@ -33,7 +33,7 @@ import { first, last } from '../../../system/iterable';
import { updateRecordValue } from '../../../system/object';
import { isDarkTheme, isLightTheme } from '../../../system/utils';
import type { WebviewItemContext } from '../../../system/webview';
-import { isWebviewItemContext } from '../../../system/webview';
+import { isWebviewItemContext, serializeWebviewItemContext } from '../../../system/webview';
import { RepositoryFolderNode } from '../../../views/nodes/viewNode';
import type { IpcMessage } from '../../../webviews/protocol';
import { onIpc } from '../../../webviews/protocol';
@@ -45,6 +45,8 @@ import type {
EnsureCommitParams,
GetMissingAvatarsParams,
GetMoreCommitsParams,
+ GraphColumnConfig,
+ GraphColumnName,
GraphComponentConfig,
GraphRepository,
SearchCommitsParams,
@@ -55,6 +57,7 @@ import type {
} from './protocol';
import {
DidChangeAvatarsNotificationType,
+ DidChangeColumnsNotificationType,
DidChangeCommitsNotificationType,
DidChangeGraphConfigurationNotificationType,
DidChangeNotificationType,
@@ -233,6 +236,13 @@ export class GraphWebview extends WebviewBase {
registerCommand('gitlens.graph.createWorktree', this.createWorktree, this),
registerCommand('gitlens.graph.createPullRequest', this.createPullRequest, this),
+
+ registerCommand('gitlens.graph.columnAuthorOn', () => this.toggleColumn('author', true)),
+ registerCommand('gitlens.graph.columnAuthorOff', () => this.toggleColumn('author', false)),
+ registerCommand('gitlens.graph.columnDateTimeOn', () => this.toggleColumn('datetime', true)),
+ registerCommand('gitlens.graph.columnDateTimeOff', () => this.toggleColumn('datetime', false)),
+ registerCommand('gitlens.graph.columnShaOn', () => this.toggleColumn('sha', true)),
+ registerCommand('gitlens.graph.columnShaOff', () => this.toggleColumn('sha', false)),
];
}
@@ -339,7 +349,7 @@ export class GraphWebview extends WebviewBase {
configuration.changed(e, 'graph.dateStyle') ||
configuration.changed(e, 'graph.highlightRowsOnRefHover')
) {
- void this.notifyDidChangeGraphConfiguration();
+ void this.notifyDidChangeConfiguration();
}
}
@@ -399,11 +409,7 @@ export class GraphWebview extends WebviewBase {
}
private onColumnUpdated(e: UpdateColumnParams) {
- let columns = this.container.storage.getWorkspace('graph:columns');
- columns = updateRecordValue(columns, e.name, e.config);
- void this.container.storage.storeWorkspace('graph:columns', columns);
-
- void this.notifyDidChangeGraphConfiguration();
+ this.updateColumn(e.name, e.config);
}
@debug()
@@ -622,48 +628,32 @@ export class GraphWebview extends WebviewBase {
}
@debug()
- private async notifyDidChangeState() {
- if (!this.isReady || !this.visible) return false;
-
- return this.notify(DidChangeNotificationType, { state: await this.getState() });
- }
-
- @debug()
- private async notifyDidChangeGraphConfiguration() {
- if (!this.isReady || !this.visible) return false;
-
- return this.notify(DidChangeGraphConfigurationNotificationType, {
- config: this.getComponentConfig(),
- });
- }
-
- @debug()
- private async notifyDidChangeSelection() {
+ private async notifyDidChangeAvatars() {
if (!this.isReady || !this.visible) return false;
- return this.notify(DidChangeSelectionNotificationType, {
- selection: this._selectedRows,
+ const data = this._graph!;
+ return this.notify(DidChangeAvatarsNotificationType, {
+ avatars: Object.fromEntries(data.avatars),
});
}
@debug()
- private async notifyDidChangeSubscription() {
+ private async notifyDidChangeColumns() {
if (!this.isReady || !this.visible) return false;
- const access = await this.getGraphAccess();
- return this.notify(DidChangeSubscriptionNotificationType, {
- subscription: access.subscription.current,
- allowed: access.allowed,
+ const columns = this.getColumns();
+ return this.notify(DidChangeColumnsNotificationType, {
+ columns: columns,
+ context: this.getColumnHeaderContext(columns),
});
}
@debug()
- private async notifyDidChangeAvatars() {
+ private async notifyDidChangeConfiguration() {
if (!this.isReady || !this.visible) return false;
- const data = this._graph!;
- return this.notify(DidChangeAvatarsNotificationType, {
- avatars: Object.fromEntries(data.avatars),
+ return this.notify(DidChangeGraphConfigurationNotificationType, {
+ config: this.getComponentConfig(),
});
}
@@ -692,10 +682,55 @@ export class GraphWebview extends WebviewBase {
return success;
}
+ @debug()
+ private async notifyDidChangeSelection() {
+ if (!this.isReady || !this.visible) return false;
+
+ return this.notify(DidChangeSelectionNotificationType, {
+ selection: this._selectedRows,
+ });
+ }
+
+ @debug()
+ private async notifyDidChangeSubscription() {
+ if (!this.isReady || !this.visible) return false;
+
+ const access = await this.getGraphAccess();
+ return this.notify(DidChangeSubscriptionNotificationType, {
+ subscription: access.subscription.current,
+ allowed: access.allowed,
+ });
+ }
+
+ @debug()
+ private async notifyDidChangeState() {
+ if (!this.isReady || !this.visible) return false;
+
+ return this.notify(DidChangeNotificationType, { state: await this.getState() });
+ }
+
+ private getColumns(): Record | undefined {
+ return this.container.storage.getWorkspace('graph:columns');
+ }
+
+ private getColumnHeaderContext(columns: Record | undefined): string {
+ const hidden: string[] = [];
+ if (columns != null) {
+ for (const [name, cfg] of Object.entries(columns)) {
+ if (cfg.isHidden) {
+ hidden.push(name);
+ }
+ }
+ }
+ return serializeWebviewItemContext({
+ webviewItem: 'gitlens:graph:columns',
+ webviewItemValue: hidden.join(','),
+ });
+ }
+
private getComponentConfig(): GraphComponentConfig {
const config: GraphComponentConfig = {
avatars: configuration.get('graph.avatars'),
- columns: this.container.storage.getWorkspace('graph:columns'),
dateFormat:
configuration.get('graph.dateFormat') ?? configuration.get('defaultDateFormat') ?? 'short+short',
dateStyle: configuration.get('graph.dateStyle') ?? configuration.get('defaultDateStyle'),
@@ -706,6 +741,18 @@ export class GraphWebview extends WebviewBase {
return config;
}
+ private async getGraphAccess() {
+ let access = await this.container.git.access(PlusFeatures.Graph, this.repository?.path);
+ this._etagSubscription = this.container.subscription.etag;
+
+ // If we don't have access to GitLens+, but the preview trial hasn't been started, auto-start it
+ if (!access.allowed && access.subscription.current.previewTrial == null) {
+ await this.container.subscription.startPreviewTrial(true);
+ access = await this.container.git.access(PlusFeatures.Graph, this.repository?.path);
+ }
+ return access;
+ }
+
private async getState(deferRows?: boolean): Promise {
if (this.container.git.repositoryCount === 0) return { allowed: true, repositories: [] };
@@ -758,6 +805,8 @@ export class GraphWebview extends WebviewBase {
this.setSelectedRows(data.sha);
}
+ const columns = this.getColumns();
+
return {
previewBanner: this.previewBanner,
trialBanner: this.trialBanner,
@@ -777,21 +826,19 @@ export class GraphWebview extends WebviewBase {
hasMore: data.paging?.hasMore ?? false,
}
: undefined,
+ columns: columns,
config: this.getComponentConfig(),
+ context: {
+ header: this.getColumnHeaderContext(columns),
+ },
nonce: this.cspNonce,
};
}
- private async getGraphAccess() {
- let access = await this.container.git.access(PlusFeatures.Graph, this.repository?.path);
- this._etagSubscription = this.container.subscription.etag;
-
- // If we don't have access to GitLens+, but the preview trial hasn't been started, auto-start it
- if (!access.allowed && access.subscription.current.previewTrial == null) {
- await this.container.subscription.startPreviewTrial(true);
- access = await this.container.git.access(PlusFeatures.Graph, this.repository?.path);
- }
- return access;
+ private updateColumn(name: GraphColumnName, cfg: GraphColumnConfig) {
+ let columns = this.container.storage.getWorkspace('graph:columns');
+ columns = updateRecordValue(columns, name, cfg);
+ void this.container.storage.storeWorkspace('graph:columns', columns);
}
private resetRepositoryState() {
@@ -1096,6 +1143,22 @@ export class GraphWebview extends WebviewBase {
return Promise.resolve();
}
+
+ @debug()
+ private async toggleColumn(name: GraphColumnName, visible: boolean) {
+ let columns = this.container.storage.getWorkspace('graph:columns');
+ let column = columns?.[name];
+ if (column != null) {
+ column.isHidden = !visible;
+ } else {
+ column = { isHidden: !visible };
+ }
+
+ columns = updateRecordValue(columns, name, column);
+ await this.container.storage.storeWorkspace('graph:columns', columns);
+
+ void this.notifyDidChangeColumns();
+ }
}
function formatRepositories(repositories: Repository[]): GraphRepository[] {
@@ -1123,9 +1186,7 @@ export interface GraphAvatarContextValue {
email: string;
}
-export interface GraphColumnsContextValue {
- type: 'columns';
-}
+export type GraphColumnsContextValue = string;
export interface GraphBranchContextValue {
type: 'branch';
@@ -1166,6 +1227,7 @@ function isGraphItemRefContext(item: unknown, refType?: GitReference['refType'])
return (
isGraphItemContext(item) &&
+ typeof item.webviewItemValue === 'object' &&
'ref' in item.webviewItemValue &&
(refType == null || item.webviewItemValue.ref.refType === refType)
);
diff --git a/src/plus/webviews/graph/protocol.ts b/src/plus/webviews/graph/protocol.ts
index 8f7b4210d93bb..0a2a6a44da103 100644
--- a/src/plus/webviews/graph/protocol.ts
+++ b/src/plus/webviews/graph/protocol.ts
@@ -1,5 +1,11 @@
-import type { GraphRow, Remote } from '@gitkraken/gitkraken-components';
-import type { DateStyle, GraphColumnConfig } from '../../../config';
+import type {
+ GraphColumnSetting,
+ GraphContexts,
+ GraphRow,
+ GraphZoneType,
+ Remote,
+} from '@gitkraken/gitkraken-components';
+import type { DateStyle } from '../../../config';
import type { RepositoryVisibility } from '../../../git/gitProvider';
import type { GitGraphRowType } from '../../../git/models/graph';
import type { SearchQuery } from '../../../git/search';
@@ -7,6 +13,8 @@ import type { Subscription } from '../../../subscription';
import type { DateTimeFormat } from '../../../system/date';
import { IpcCommandType, IpcNotificationType } from '../../../webviews/protocol';
+export type GraphColumnsSettings = Record;
+
export interface State {
repositories?: GraphRepository[];
selectedRepository?: string;
@@ -18,7 +26,9 @@ export interface State {
loading?: boolean;
rows?: GraphRow[];
paging?: GraphPaging;
+ columns?: Record;
config?: GraphComponentConfig;
+ context?: GraphContexts;
nonce?: string;
previewBanner?: boolean;
trialBanner?: boolean;
@@ -61,7 +71,6 @@ export type GraphBranch = Record;
export interface GraphComponentConfig {
avatars?: boolean;
- columns?: Record;
dateFormat: DateTimeFormat | string;
dateStyle: DateStyle;
enableMultiSelection?: boolean;
@@ -69,6 +78,13 @@ export interface GraphComponentConfig {
shaLength?: number;
}
+export interface GraphColumnConfig {
+ isHidden?: boolean;
+ width?: number;
+}
+
+export type GraphColumnName = GraphZoneType;
+
export interface UpdateStateCallback {
(state: State): void;
}
@@ -103,7 +119,7 @@ export interface SearchCommitsParams {
export const SearchCommitsCommandType = new IpcCommandType('graph/searchCommits');
export interface UpdateColumnParams {
- name: string;
+ name: GraphColumnName;
config: GraphColumnConfig;
}
export const UpdateColumnCommandType = new IpcCommandType('graph/update/column');
@@ -148,6 +164,14 @@ export const DidChangeAvatarsNotificationType = new IpcNotificationType | undefined;
+ context?: string;
+}
+export const DidChangeColumnsNotificationType = new IpcNotificationType(
+ 'graph/columns/didChange',
+);
+
export interface DidChangeCommitsParams {
rows: GraphRow[];
avatars: { [email: string]: string };
diff --git a/src/storage.ts b/src/storage.ts
index e3663f3292de3..e6f95836b5769 100644
--- a/src/storage.ts
+++ b/src/storage.ts
@@ -1,6 +1,6 @@
import type { Disposable, Event, ExtensionContext, SecretStorageChangeEvent } from 'vscode';
import { EventEmitter } from 'vscode';
-import type { GraphColumnConfig, ViewShowBranchComparison } from './config';
+import type { ViewShowBranchComparison } from './config';
import type { StoredSearchQuery } from './git/search';
import type { Subscription } from './subscription';
import type { TrackedUsage, TrackedUsageKeys } from './usageTracker';
@@ -163,7 +163,7 @@ export interface WorkspaceStorage {
banners: {
dismissed?: Record;
};
- columns?: Record;
+ columns?: Record;
};
remote: {
default?: string;
@@ -212,6 +212,11 @@ export interface StoredBranchComparisons {
[id: string]: string | StoredBranchComparison;
}
+export interface StoredGraphColumn {
+ isHidden?: boolean;
+ width?: number;
+}
+
export interface StoredNamedRef {
label?: string;
ref: string;
diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index 34237ee123034..9b52b88b70f38 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -1,17 +1,14 @@
import type { OnFormatCommitDateTime } from '@gitkraken/gitkraken-components';
import GraphContainer, {
type CssVariables,
- type GraphColumnSetting as GKGraphColumnSetting,
- type GraphColumnsSettings as GKGraphColumnsSettings,
+ type GraphColumnSetting,
type GraphPlatform,
type GraphRow,
- type GraphZoneType,
} from '@gitkraken/gitkraken-components';
import type { ReactElement } from 'react';
import React, { createElement, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { getPlatform } from '@env/platform';
import { DateStyle } from '../../../../config';
-import type { GraphColumnConfig } from '../../../../config';
import { RepositoryVisibility } from '../../../../git/gitProvider';
import type { GitGraphRowType } from '../../../../git/models/graph';
import type { SearchQuery } from '../../../../git/search';
@@ -19,6 +16,9 @@ import type {
DidEnsureCommitParams,
DidSearchCommitsParams,
DismissBannerParams,
+ GraphColumnConfig,
+ GraphColumnName,
+ GraphColumnsSettings,
GraphComponentConfig,
GraphRepository,
State,
@@ -36,7 +36,7 @@ export interface GraphWrapperProps extends State {
nonce?: string;
subscriber: (callback: UpdateStateCallback) => () => void;
onSelectRepository?: (repository: GraphRepository) => void;
- onColumnChange?: (name: string, settings: GraphColumnConfig) => void;
+ onColumnChange?: (name: GraphColumnName, settings: GraphColumnConfig) => void;
onMissingAvatars?: (emails: { [email: string]: string }) => void;
onMoreCommits?: (id?: string) => void;
onSearchCommits?: (search: SearchQuery | undefined, options?: { limit?: number }) => void;
@@ -74,21 +74,24 @@ const getStyleProps = (
};
};
-const defaultGraphColumnsSettings: GKGraphColumnsSettings = {
- commitAuthorZone: { width: 110, isHidden: false },
- commitDateTimeZone: { width: 130, isHidden: false },
- commitMessageZone: { width: 130, isHidden: false },
- commitZone: { width: 170, isHidden: false },
- refZone: { width: 150, isHidden: false },
+const defaultGraphColumnsSettings: GraphColumnsSettings = {
+ ref: { width: 150, isHidden: false },
+ graph: { width: 150, isHidden: false },
+ message: { width: 300, isHidden: false },
+ author: { width: 130, isHidden: false },
+ datetime: { width: 130, isHidden: false },
+ sha: { width: 130, isHidden: false },
};
-const getGraphColSettingsModel = (config?: GraphComponentConfig): GKGraphColumnsSettings => {
- const columnsSettings: GKGraphColumnsSettings = { ...defaultGraphColumnsSettings };
- if (config?.columns !== undefined) {
- for (const column of Object.keys(config.columns)) {
+const getGraphColumns = (columns?: Record | undefined): GraphColumnsSettings => {
+ const columnsSettings: GraphColumnsSettings = {
+ ...defaultGraphColumnsSettings,
+ };
+ if (columns != null) {
+ for (const [column, columnCfg] of Object.entries(columns) as [GraphColumnName, GraphColumnConfig][]) {
columnsSettings[column] = {
- width: config.columns[column].width,
- isHidden: config.columns[column].isHidden,
+ ...defaultGraphColumnsSettings[column],
+ ...columnCfg,
};
}
}
@@ -163,33 +166,6 @@ const getClientPlatform = (): GraphPlatform => {
const clientPlatform = getClientPlatform();
-const graphColumns: { [Key in GraphZoneType]: { name: string; hideable: boolean } } = {
- refZone: {
- name: 'Branch / Tag',
- hideable: false,
- },
- commitZone: {
- name: 'Graph',
- hideable: false,
- },
- commitMessageZone: {
- name: 'Commit Message',
- hideable: false,
- },
- commitAuthorZone: {
- name: 'Author',
- hideable: true,
- },
- commitDateTimeZone: {
- name: 'Commit Date / Time',
- hideable: true,
- },
- commitShaZone: {
- name: 'Sha',
- hideable: true,
- },
-};
-
// eslint-disable-next-line @typescript-eslint/naming-convention
export function GraphWrapper({
subscriber,
@@ -201,7 +177,9 @@ export function GraphWrapper({
selectedRepositoryVisibility,
allowed,
avatars,
+ columns,
config,
+ context,
loading,
paging,
onSelectRepository,
@@ -228,7 +206,8 @@ export function GraphWrapper({
const [graphSelectedRows, setSelectedRows] = useState(selectedRows);
const [graphConfig, setGraphConfig] = useState(config);
// const [graphDateFormatter, setGraphDateFormatter] = useState(getGraphDateFormatter(config));
- const [graphColSettings, setGraphColSettings] = useState(getGraphColSettingsModel(config));
+ const [graphColumns, setGraphColumns] = useState(getGraphColumns(columns));
+ const [graphContext, setGraphContext] = useState(context);
const [pagingState, setPagingState] = useState(paging);
const [isLoading, setIsLoading] = useState(loading);
const [styleProps, setStyleProps] = useState(getStyleProps(mixedColumnColors));
@@ -246,8 +225,6 @@ export function GraphWrapper({
const [subscriptionSnapshot, setSubscriptionSnapshot] = useState(subscription);
// repo selection UI
const [repoExpanded, setRepoExpanded] = useState(false);
- // column setting UI
- const [columnSettingsExpanded, setColumnSettingsExpanded] = useState(false);
// search state
const [searchQuery, setSearchQuery] = useState(undefined);
const [searchResultKey, setSearchResultKey] = useState(undefined);
@@ -432,7 +409,8 @@ export function GraphWrapper({
}
setGraphConfig(state.config);
// setGraphDateFormatter(getGraphDateFormatter(config));
- setGraphColSettings(getGraphColSettingsModel(state.config));
+ setGraphColumns(getGraphColumns(state.columns));
+ setGraphContext(state.context);
setPagingState(state.paging);
setStyleProps(getStyleProps(state.mixedColumnColors));
setIsAllowed(state.allowed ?? false);
@@ -463,15 +441,15 @@ export function GraphWrapper({
onMissingAvatars?.(emails);
};
- const handleSelectColumn = (graphZoneType: GraphZoneType) => {
- onColumnChange?.(graphZoneType, {
- ...graphColSettings[graphZoneType],
- isHidden: !graphColSettings[graphZoneType]?.isHidden,
+ const handleToggleColumnSettings = (event: React.MouseEvent) => {
+ const e = event.nativeEvent;
+ const evt = new MouseEvent('contextmenu', {
+ bubbles: true,
+ clientX: e.clientX,
+ clientY: e.clientY,
});
- };
-
- const handleToggleColumnSettings = () => {
- setColumnSettingsExpanded(!columnSettingsExpanded);
+ e.target?.dispatchEvent(evt);
+ e.stopImmediatePropagation();
};
const handleMoreCommits = () => {
@@ -479,9 +457,9 @@ export function GraphWrapper({
onMoreCommits?.();
};
- const handleOnColumnResized = (graphZoneType: GraphZoneType, columnSettings: GKGraphColumnSetting) => {
+ const handleOnColumnResized = (columnName: GraphColumnName, columnSettings: GraphColumnSetting) => {
if (columnSettings.width) {
- onColumnChange?.(graphZoneType, {
+ onColumnChange?.(columnName, {
width: columnSettings.width,
isHidden: columnSettings.isHidden,
});
@@ -698,7 +676,8 @@ export function GraphWrapper({
{mainWidth !== undefined && mainHeight !== undefined && (
No repository is selected
)}
-
-
-
-
-
- {Object.entries(graphColumns).map(
- ([graphZoneType, column]) =>
- column.hideable && (
- handleSelectColumn(graphZoneType as GraphZoneType)}
- >
-
- {column.name}{' '}
-
- ),
- )}
-
-
-
-
+