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
This commit is contained in:
Lucy Zhang
2021-08-23 08:32:30 -07:00
committed by GitHub
parent ed280cb003
commit 1aee3498bc
3 changed files with 22 additions and 5 deletions

View File

@@ -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<T extends Slick.SlickData> implements Slick.Plugin<T
}
let headerWidths: number[] = this.getElementWidths(headerElements);
headerWidths = headerWidths.map(width => {
return width + this._options.extraColumnHeaderWidth;
});
let maxColumnTextWidths: number[] = this.getMaxColumnTextWidths(columnDefs, colIndices);
for (let i = 0; i < columnDefs.length; i++) {

View File

@@ -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<T extends Slick.SlickData> {
public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: FilterableColumn<T> }>();
@@ -84,7 +91,10 @@ export class HeaderFilter<T extends Slick.SlickData> {
.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)));

View File

@@ -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<T> 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<number>('resultsGrid.maxColumnWidth') }));
const autoSizeOnRender: boolean = !this.state.columnSizes && this.configurationService.getValue('resultsGrid.autoSizeColumns');
this.table.registerPlugin(new AutoColumnSize({ autoSizeOnRender: autoSizeOnRender, maxWidth: this.configurationService.getValue<number>('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<T> 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);