From 1aee3498bcf0daf2b6a4cfce00e49dbac0c1f2e1 Mon Sep 17 00:00:00 2001 From: Lucy Zhang Date: Mon, 23 Aug 2021 08:32:30 -0700 Subject: [PATCH] Filter plugin: don't set columns if auto size column plugin is also on (#16833) * don't rerender columns if autosize plugin is on * add comments * pr comments * pr comments * pr comments * add comment --- .../ui/table/plugins/autoSizeColumns.plugin.ts | 7 ++++++- .../browser/ui/table/plugins/headerFilter.plugin.ts | 12 +++++++++++- src/sql/workbench/contrib/query/browser/gridPanel.ts | 8 +++++--- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts b/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts index 6c6e3fd390..848d84fdc9 100644 --- a/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/autoSizeColumns.plugin.ts @@ -7,11 +7,13 @@ import { deepClone } from 'vs/base/common/objects'; export interface IAutoColumnSizeOptions extends Slick.PluginOptions { maxWidth?: number; autoSizeOnRender?: boolean; + extraColumnHeaderWidth?: number; } const defaultOptions: IAutoColumnSizeOptions = { maxWidth: 212, - autoSizeOnRender: false + autoSizeOnRender: false, + extraColumnHeaderWidth: 0 }; // Set the max number of rows to scan to 10 since the result grid viewport in query editor is usually around 10 rows but can go up to 20 rows for notebooks. @@ -97,6 +99,9 @@ export class AutoColumnSize implements Slick.Plugin { + return width + this._options.extraColumnHeaderWidth; + }); let maxColumnTextWidths: number[] = this.getMaxColumnTextWidths(columnDefs, colIndices); for (let i = 0; i < columnDefs.length; i++) { diff --git a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts index a9c2ce43e3..beed3fe37d 100644 --- a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts @@ -34,6 +34,11 @@ export interface ITableFilterOptions { * The message to be displayed when the filter is disabled and the user tries to open the filter menu. */ disabledFilterMessage?: string; + /** + * The columns are refreshed by default to add the filter menu button to the headers. + * Set to false to prevent the grid from being re-drawn multiple times by different plugins. + */ + refreshColumns?: boolean; } export interface ITableFilterStyles extends IButtonStyles, IInputBoxStyles, IListStyles, ICountBadgetyles { @@ -45,6 +50,8 @@ interface NotificationProvider { const ShowFilterText: string = localize('headerFilter.showFilter', "Show Filter"); +export const FilterButtonWidth: number = 34; + export class HeaderFilter { public onFilterApplied = new Slick.Event<{ grid: Slick.Grid, column: FilterableColumn }>(); @@ -84,7 +91,10 @@ export class HeaderFilter { .subscribe(this.grid.onClick, (e: DOMEvent) => this.handleBodyMouseDown(e as MouseEvent)) .subscribe(this.grid.onColumnsResized, () => this.columnsResized()) .subscribe(this.grid.onKeyDown, async (e: DOMEvent) => { await this.handleGridKeyDown(e as KeyboardEvent); }); - this.grid.setColumns(this.grid.getColumns()); + + if (this.options.refreshColumns !== false) { + this.grid.setColumns(this.grid.getColumns()); + } this.disposableStore.add(addDisposableListener(document.body, 'mousedown', e => this.handleBodyMouseDown(e), true)); this.disposableStore.add(addDisposableListener(document.body, 'keydown', e => this.handleKeyDown(e))); diff --git a/src/sql/workbench/contrib/query/browser/gridPanel.ts b/src/sql/workbench/contrib/query/browser/gridPanel.ts index 03e31fffa2..c6b99a55cf 100644 --- a/src/sql/workbench/contrib/query/browser/gridPanel.ts +++ b/src/sql/workbench/contrib/query/browser/gridPanel.ts @@ -49,7 +49,7 @@ import { ScrollableView, IView } from 'sql/base/browser/ui/scrollableView/scroll import { IQueryEditorConfiguration } from 'sql/platform/query/common/query'; import { Orientation } from 'vs/base/browser/ui/splitview/splitview'; import { IQueryModelService } from 'sql/workbench/services/query/common/queryModel'; -import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin'; +import { FilterButtonWidth, HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin'; import { HybridDataProvider } from 'sql/base/browser/ui/table/hybridDataProvider'; import { INotificationService } from 'vs/platform/notification/common/notification'; @@ -509,7 +509,8 @@ export abstract class GridTableBase extends Disposable implements IView { this.table.setTableTitle(localize('resultsGrid', "Results grid")); this.table.setSelectionModel(this.selectionModel); this.table.registerPlugin(new MouseWheelSupport()); - this.table.registerPlugin(new AutoColumnSize({ autoSizeOnRender: !this.state.columnSizes && this.configurationService.getValue('resultsGrid.autoSizeColumns'), maxWidth: this.configurationService.getValue('resultsGrid.maxColumnWidth') })); + const autoSizeOnRender: boolean = !this.state.columnSizes && this.configurationService.getValue('resultsGrid.autoSizeColumns'); + this.table.registerPlugin(new AutoColumnSize({ autoSizeOnRender: autoSizeOnRender, maxWidth: this.configurationService.getValue('resultsGrid.maxColumnWidth'), extraColumnHeaderWidth: this.enableFilteringFeature ? FilterButtonWidth : 0 })); this.table.registerPlugin(copyHandler); this.table.registerPlugin(this.rowNumberColumn); this.table.registerPlugin(new AdditionalKeyBindings()); @@ -537,7 +538,8 @@ export abstract class GridTableBase extends Disposable implements IView { })); if (this.enableFilteringFeature) { this.filterPlugin = new HeaderFilter(this.contextViewService, this.notificationService, { - disabledFilterMessage: localize('resultsGrid.maxRowCountExceeded', "Max row count for filtering/sorting has been exceeded. To update it, you can go to User Settings and change the setting: 'queryEditor.results.inMemoryDataProcessingThreshold'") + disabledFilterMessage: localize('resultsGrid.maxRowCountExceeded', "Max row count for filtering/sorting has been exceeded. To update it, navigate to User Settings and change the setting: 'queryEditor.results.inMemoryDataProcessingThreshold'"), + refreshColumns: !autoSizeOnRender // The auto size columns plugin refreshes the columns so we don't need to refresh twice if both plugins are on. }); this._register(attachTableFilterStyler(this.filterPlugin, this.themeService)); this.table.registerPlugin(this.filterPlugin);