@theia/scm 1.75.0-next.18 → 1.75.0-next.21

package/src/browser/scm-history-graph-model.ts

@@ -19,12 +19,23 @@ import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposa
 import { Emitter } from '@theia/core/lib/common/event';
 import { CancellationTokenSource } from '@theia/core/lib/common/cancellation';
 import { ScmService } from './scm-service';
-import { ScmHistoryItem, ScmHistoryProvider, ScmHistoryOptions } from './scm-provider';
+import { ScmHistoryItem, ScmHistoryItemRef, ScmHistoryProvider, ScmHistoryOptions } from './scm-provider';
 import { computeGraphRows, GraphRow } from './scm-history-graph-lanes';
 import { getRefColorIndex } from './scm-history-graph-helpers';
+import { ScmPreferences } from '../common/scm-preferences';
 
 export const PAGE_SIZE = 50;
 
+export const ScmHistoryGraphModelProvider = Symbol('ScmHistoryGraphModelProvider');
+/**
+ * Resolves the {@link ScmHistoryGraphModel} singleton on first use. The model
+ * starts loading history and subscribing to provider events as soon as it is
+ * instantiated, so clients that may not need it (e.g. command contributions
+ * instantiated at application start) must inject this provider instead of the
+ * model itself.
+ */
+export type ScmHistoryGraphModelProvider = () => ScmHistoryGraphModel;
+
 export interface HistoryGraphEntry {
     readonly item: ScmHistoryItem;
     readonly graphRow: GraphRow;
@@ -36,6 +47,7 @@ export interface HistoryGraphEntry {
 export class ScmHistoryGraphModel {
 
     @inject(ScmService) protected readonly scmService: ScmService;
+    @inject(ScmPreferences) protected readonly scmPreferences: ScmPreferences;
 
     protected readonly toDispose = new DisposableCollection();
     protected readonly toDisposeOnProviderChange = new DisposableCollection();
@@ -45,6 +57,8 @@ export class ScmHistoryGraphModel {
     protected _loading = false;
     protected _hasAttemptedLoad = false;
     protected _provider: ScmHistoryProvider | undefined;
+    /** Explicitly picked ref ids to filter the graph by; `undefined` = auto (current/remote/base). */
+    protected _historyItemRefFilter: string[] | undefined;
 
     protected readonly onDidChangeEmitter = new Emitter<void>();
     readonly onDidChange = this.onDidChangeEmitter.event;
@@ -57,6 +71,11 @@ export class ScmHistoryGraphModel {
             Disposable.create(() => this.toDisposeOnProviderChange.dispose()),
             this.onDidChangeEmitter,
             this.scmService.onDidChangeSelectedRepository(() => this.refresh()),
+            this.scmPreferences.onPreferenceChanged(e => {
+                if (e.preferenceName === 'scm.graph.pageSize') {
+                    this.reload();
+                }
+            }),
         ]);
         this.refresh();
     }
@@ -70,6 +89,32 @@ export class ScmHistoryGraphModel {
         return this._provider;
     }
 
+    /** The explicitly picked ref ids filtering the graph, or `undefined` in auto mode. */
+    get historyItemRefFilter(): readonly string[] | undefined {
+        return this._historyItemRefFilter;
+    }
+
+    /**
+     * Sets the ref ids to filter the graph by (`undefined` returns to auto
+     * mode) and reloads the graph.
+     */
+    setHistoryItemRefFilter(refIds: readonly string[] | undefined): void {
+        this._historyItemRefFilter = refIds && refIds.length > 0 ? [...refIds] : undefined;
+        this.reload();
+    }
+
+    /**
+     * Whether the current history item ref is part of the graph's filter.
+     * Always true in auto mode, which includes the current ref.
+     */
+    isCurrentRefInFilter(): boolean {
+        if (!this._historyItemRefFilter) {
+            return true;
+        }
+        const currentId = this._provider?.currentHistoryItemRef?.id;
+        return currentId !== undefined && this._historyItemRefFilter.includes(currentId);
+    }
+
     get entries(): readonly HistoryGraphEntry[] {
         return this._entries;
     }
@@ -92,13 +137,14 @@ export class ScmHistoryGraphModel {
     }
 
     refresh(): void {
-        this.cancelSource.cancel();
-        this.cancelSource = new CancellationTokenSource();
-
         this.toDisposeOnProviderChange.dispose();
 
         const repo = this.scmService.selectedRepository;
         const hp = repo?.provider.historyProvider;
+        if (hp !== this._provider) {
+            // The repository changed — a filter picked for the old provider does not apply.
+            this._historyItemRefFilter = undefined;
+        }
         this._provider = hp;
 
         if (this._provider) {
@@ -106,7 +152,10 @@ export class ScmHistoryGraphModel {
                 this._provider.onDidChangeCurrentHistoryItemRefs(() => this.refresh())
             );
             this.toDisposeOnProviderChange.push(
-                this._provider.onDidChangeHistoryItemRefs(() => this.refresh())
+                this._provider.onDidChangeHistoryItemRefs(e => {
+                    this.pruneHistoryItemRefFilter(e.removed);
+                    this.refresh();
+                })
             );
         } else if (repo) {
             // historyProvider is not yet available; listen for provider changes
@@ -116,6 +165,31 @@ export class ScmHistoryGraphModel {
             );
         }
 
+        this.reload();
+    }
+
+    /**
+     * Drops refs that no longer exist from the explicit filter, so that
+     * deleting or renaming a filtered ref does not leave the graph stuck
+     * requesting history for it. When the last filtered ref is removed,
+     * the filter falls back to auto mode.
+     */
+    protected pruneHistoryItemRefFilter(removed: readonly ScmHistoryItemRef[]): void {
+        if (!this._historyItemRefFilter || removed.length === 0) {
+            return;
+        }
+        const removedIds = new Set(removed.map(ref => ref.id));
+        const remaining = this._historyItemRefFilter.filter(id => !removedIds.has(id));
+        if (remaining.length !== this._historyItemRefFilter.length) {
+            this._historyItemRefFilter = remaining.length > 0 ? remaining : undefined;
+        }
+    }
+
+    /** Clears the loaded entries and loads the first page again from the current provider. */
+    protected reload(): void {
+        this.cancelSource.cancel();
+        this.cancelSource = new CancellationTokenSource();
+
         this._entries = [];
         this._hasMore = false;
 
@@ -144,10 +218,11 @@ export class ScmHistoryGraphModel {
 
         const token = this.cancelSource.token;
         try {
+            const pageSize = this.pageSize;
             const historyItemRefs = this.getCurrentHistoryItemRefs();
             const options: ScmHistoryOptions = {
                 skip: this._entries.length,
-                limit: PAGE_SIZE,
+                limit: pageSize,
                 historyItemRefs: historyItemRefs.length > 0 ? historyItemRefs : undefined,
             };
             const items = await this._provider.provideHistoryItems(options, token);
@@ -157,7 +232,7 @@ export class ScmHistoryGraphModel {
             }
 
             const fetchedItems: ScmHistoryItem[] = items ?? [];
-            this._hasMore = fetchedItems.length >= PAGE_SIZE;
+            this._hasMore = fetchedItems.length >= pageSize;
 
             // Filter out any items already loaded so the graph does not show duplicates.
             const existingIds = new Set(this._entries.map(e => e.item.id));
@@ -189,13 +264,22 @@ export class ScmHistoryGraphModel {
         }
     }
 
+    /** The configured page size (`scm.graph.pageSize`). */
+    protected get pageSize(): number {
+        return this.scmPreferences['scm.graph.pageSize'] ?? PAGE_SIZE;
+    }
+
     /**
      * Resolves the ref-based color index of an item from its references,
-     * preferring current (0) over remote (1) over base (2).
+     * preferring current (0) over remote (1) over base (2). Refs excluded by
+     * an explicit filter get no role color, mirroring VS Code's color map.
      */
     protected resolveColorIndex(item: ScmHistoryItem): number | undefined {
         let result: number | undefined;
         for (const ref of item.references ?? []) {
+            if (this._historyItemRefFilter && !this._historyItemRefFilter.includes(ref.id)) {
+                continue;
+            }
             const index = getRefColorIndex(ref, this._provider);
             if (index !== undefined && (result === undefined || index < result)) {
                 result = index;
@@ -205,11 +289,15 @@ export class ScmHistoryGraphModel {
     }
 
     /**
-     * Returns the revisions of the current branch ref, its remote tracking ref,
-     * and the merge-base ref to pass to `provideHistoryItems`. Providers walk
-     * history starting from these revisions.
+     * Returns the refs to pass to `provideHistoryItems`: the explicitly picked
+     * ref ids when a filter is active, otherwise (auto mode) the revisions of
+     * the current branch ref, its remote tracking ref, and the merge-base ref.
+     * Providers walk history starting from these refs.
      */
     protected getCurrentHistoryItemRefs(): string[] {
+        if (this._historyItemRefFilter) {
+            return [...this._historyItemRefFilter];
+        }
         if (!this._provider) {
             return [];
         }

package/src/browser/scm-history-graph-widget.spec.ts

@@ -48,15 +48,17 @@ describe('ScmHistoryGraphWidget context keys', () => {
     let widget: ScmHistoryGraphWidget;
     let scmContextKeys: ScmContextKeyService;
     let provider: Partial<ScmHistoryProvider> | undefined;
+    let currentRefInFilter: boolean;
 
     beforeEach(() => {
         restoreJSDOM = enableJSDOM();
         scmContextKeys = createScmContextKeyService();
+        currentRefInFilter = true;
         widget = new ScmHistoryGraphWidget();
         const raw = widget as unknown as Record<string, unknown>;
         raw.scmContextKeys = scmContextKeys;
         Object.defineProperty(raw, 'model', {
-            get: () => ({ provider })
+            get: () => ({ provider, isCurrentRefInFilter: () => currentRefInFilter })
         });
     });
 
@@ -90,6 +92,15 @@ describe('ScmHistoryGraphWidget context keys', () => {
         expect(scmContextKeys.scmCurrentHistoryItemRefInFilter.get()).to.equal(false);
     });
 
+    it('should clear scmCurrentHistoryItemRefInFilter when the filter excludes the current ref', () => {
+        provider = {
+            currentHistoryItemRef: { id: 'refs/heads/main', name: 'main' }
+        };
+        currentRefInFilter = false;
+        updateContextKeys();
+        expect(scmContextKeys.scmCurrentHistoryItemRefInFilter.get()).to.equal(false);
+    });
+
     it('should set scmCurrentHistoryItemRefHasRemote when the provider has a remote ref', () => {
         provider = {
             currentHistoryItemRef: { id: 'refs/heads/main', name: 'main' },

package/src/browser/scm-history-graph-widget.tsx

@@ -30,13 +30,16 @@ import URI from '@theia/core/lib/common/uri';
 import { nls } from '@theia/core/lib/common/nls';
 import { CancellationTokenSource } from '@theia/core/lib/common/cancellation';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { Emitter, Event } from '@theia/core/lib/common/event';
+import { DynamicToolbarWidget } from '@theia/core/lib/browser/view-container';
 import { MenuPath } from '@theia/core/lib/common/menu/menu-types';
 import { ContextMenuRenderer } from '@theia/core/lib/browser/context-menu-renderer';
 import { OpenerService, open } from '@theia/core/lib/browser/opener-service';
 import { DiffUris } from '@theia/core/lib/browser/diff-uris';
 import { ScmContextKeyService } from './scm-context-key-service';
+import { ScmPreferences } from '../common/scm-preferences';
 import {
-    laneColor, getChangeStatus, getFileName, getFilePath, getRepoRelativePath,
+    laneColor, filterRefsForBadges, getChangeStatus, getFileName, getFilePath, getRepoRelativePath,
     getRefBadgeClass, getRefBadgePresentation, isTagRef, isRemoteRef, deduplicateRefs, DeduplicatedRef
 } from './scm-history-graph-helpers';
 import { buildHtmlTooltip, buildProviderTooltip } from './scm-history-graph-tooltip';
@@ -82,7 +85,7 @@ function renderJsxRefBadge(
 // ── Widget ──────────────────────────────────────────────────────────────────
 
 @injectable()
-export class ScmHistoryGraphWidget extends ReactWidget {
+export class ScmHistoryGraphWidget extends ReactWidget implements DynamicToolbarWidget {
 
     static readonly ID = 'scm-history-graph-widget';
     static readonly LABEL = nls.localizeByDefault('Graph');
@@ -96,6 +99,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
     @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
     @inject(OpenerService) protected readonly openerService: OpenerService;
     @inject(ScmContextKeyService) protected readonly scmContextKeys: ScmContextKeyService;
+    @inject(ScmPreferences) protected readonly scmPreferences: ScmPreferences;
 
     protected selectedIndex = -1;
     /** Currently selected change row key (`${itemId}-${ci}`), or undefined. */
@@ -109,6 +113,10 @@ export class ScmHistoryGraphWidget extends ReactWidget {
     /** Cleanup for the content of the hover currently being shown. */
     protected readonly toDisposeOnHover = new DisposableCollection();
 
+    protected readonly onDidChangeToolbarItemsEmitter = new Emitter<void>();
+    /** Re-renders the part toolbar on model changes, e.g. to reflect the toggled state of the ref filter picker. */
+    readonly onDidChangeToolbarItems: Event<void> = this.onDidChangeToolbarItemsEmitter.event;
+
     constructor() {
         super();
         this.id = ScmHistoryGraphWidget.ID;
@@ -121,10 +129,19 @@ export class ScmHistoryGraphWidget extends ReactWidget {
 
     @postConstruct()
     protected init(): void {
+        this.toDispose.push(this.onDidChangeToolbarItemsEmitter);
         this.toDispose.push(
             this.model.onDidChange(() => {
                 this.updateContextKeys();
                 this.update();
+                this.onDidChangeToolbarItemsEmitter.fire();
+            })
+        );
+        this.toDispose.push(
+            this.scmPreferences.onPreferenceChanged(e => {
+                if (e.preferenceName.startsWith('scm.graph.')) {
+                    this.update();
+                }
             })
         );
         this.toDispose.push({
@@ -144,9 +161,8 @@ export class ScmHistoryGraphWidget extends ReactWidget {
         const provider = this.model.provider;
         this.scmContextKeys.scmCurrentHistoryItemRefHasRemote.set(!!provider?.currentHistoryItemRemoteRef);
         this.scmContextKeys.scmCurrentHistoryItemRefHasBase.set(!!provider?.currentHistoryItemBaseRef);
-        // The graph has no ref filter yet, so the current ref is always considered part of it.
         // Commands like git.pullRef/git.pushRef gate their enablement on this key.
-        this.scmContextKeys.scmCurrentHistoryItemRefInFilter.set(!!provider?.currentHistoryItemRef);
+        this.scmContextKeys.scmCurrentHistoryItemRefInFilter.set(!!provider?.currentHistoryItemRef && this.model.isCurrentRefInFilter());
     }
 
     protected render(): React.ReactNode {
@@ -198,7 +214,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
                 className='scm-history-graph-list'
                 data={entries as HistoryGraphEntry[]}
                 itemContent={(idx, entry) => this.renderRow(entry, idx, svgWidth)}
-                endReached={hasMore && !loading ? this.handleEndReached : undefined}
+                endReached={hasMore && !loading && this.scmPreferences['scm.graph.pageOnScroll'] !== false ? this.handleEndReached : undefined}
                 overscan={500}
                 components={footer ? { Footer: footer } : {}}
                 style={{ overflowX: 'hidden' }}
@@ -606,8 +622,12 @@ export class ScmHistoryGraphWidget extends ReactWidget {
         }
 
         const provider = this.model.provider;
+        const visibleRefs = filterRefsForBadges(refs, provider, this.scmPreferences['scm.graph.badges'] ?? 'filter', this.model.historyItemRefFilter);
+        if (visibleRefs.length === 0) {
+            return undefined;
+        }
         const laneColorValue = entry ? laneColor(entry.graphRow.color) : undefined;
-        const deduplicated = deduplicateRefs(refs);
+        const deduplicated = deduplicateRefs(visibleRefs);
         const badgeForeground = 'var(--theia-scmGraph-historyItemRefForeground, var(--theia-badge-foreground))';
 
         const badges: React.ReactElement[] = [];

package/src/common/scm-preferences.ts

@@ -35,12 +35,39 @@ export const scmPreferenceSchema: PreferenceSchema = {
             ],
             description: nls.localizeByDefault('Controls the default Source Control repository view mode.'),
             default: 'list'
+        },
+        'scm.graph.badges': {
+            type: 'string',
+            enum: ['all', 'filter'],
+            enumDescriptions: [
+                nls.localizeByDefault('Show badges of all history item groups in the Source Control Graph view.'),
+                nls.localizeByDefault('Show only the badges of history item groups used as a filter in the Source Control Graph view.')
+            ],
+            description: nls.localizeByDefault(
+                // eslint-disable-next-line max-len
+                'Controls which badges are shown in the Source Control Graph view. The badges are shown on the right side of the graph indicating the names of history item groups.'),
+            default: 'filter'
+        },
+        'scm.graph.pageOnScroll': {
+            type: 'boolean',
+            description: nls.localizeByDefault('Controls whether the Source Control Graph view will load the next page of items when you scroll to the end of the list.'),
+            default: true
+        },
+        'scm.graph.pageSize': {
+            type: 'number',
+            minimum: 1,
+            maximum: 1000,
+            description: nls.localizeByDefault('The number of items to show in the Source Control Graph view by default and when loading more items.'),
+            default: 50
         }
     }
 };
 
 export interface ScmConfiguration {
     'scm.defaultViewMode': 'tree' | 'list'
+    'scm.graph.badges': 'all' | 'filter'
+    'scm.graph.pageOnScroll': boolean
+    'scm.graph.pageSize': number
 }
 
 export const ScmPreferenceContribution = Symbol('ScmPreferenceContribution');