Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Lower filter debounce delay #9712

Merged
merged 23 commits into from
Aug 14, 2023
Merged

[DataGrid] Lower filter debounce delay #9712

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
66c12f4
feat: make SUBMIT_FILTER_STROKE_TIME into a prop
romgrk Jul 18, 2023
3bdf00c
feat
romgrk Jul 18, 2023
9795860
feat
romgrk Jul 18, 2023
0d8babc
lint
romgrk Jul 18, 2023
776062d
lint
romgrk Jul 18, 2023
67fe5b4
build: docs:api
romgrk Jul 18, 2023
db2c5d9
refactor
romgrk Jul 18, 2023
8b6e63e
lint
romgrk Jul 18, 2023
40ae023
Merge branch 'master' into feat-quick-filter-delay
romgrk Jul 18, 2023
01f92ac
refactor
romgrk Jul 18, 2023
810a028
lint
romgrk Jul 18, 2023
5d3c395
lint
romgrk Jul 18, 2023
6fe923f
lint
romgrk Jul 18, 2023
6a1ad56
fix: input re-type bug
romgrk Jul 26, 2023
a6cdda2
ci: run
romgrk Jul 26, 2023
9185ab2
fix: add effect back
romgrk Jul 26, 2023
08315bf
lint
romgrk Jul 26, 2023
5b52b74
Merge branch 'master' into feat-quick-filter-delay
romgrk Aug 1, 2023
9bd9dee
Merge branch 'master' into feat-quick-filter-delay
romgrk Aug 1, 2023
5db6cbb
build
romgrk Aug 1, 2023
a42ae12
fix: filter panel re-type bug
romgrk Aug 3, 2023
f1d05aa
fix
romgrk Aug 11, 2023
e6abe96
lint
romgrk Aug 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions docs/data/data-grid/filtering/CustomMultiValueOperator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import * as React from 'react';
romgrk marked this conversation as resolved.
Show resolved Hide resolved
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { DataGrid } from '@mui/x-data-grid';
import { DataGrid, useGridRootProps } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import SyncIcon from '@mui/icons-material/Sync';

const SUBMIT_FILTER_STROKE_TIME = 500;

function InputNumberInterval(props) {
const rootProps = useGridRootProps();
const { item, applyValue, focusElementRef = null } = props;

const filterTimeout = React.useRef();
Expand All @@ -33,7 +32,7 @@ function InputNumberInterval(props) {
filterTimeout.current = setTimeout(() => {
setIsApplying(false);
applyValue({ ...item, value: [lowerBound, upperBound] });
}, SUBMIT_FILTER_STROKE_TIME);
}, rootProps.filterDebounceMs);
};

const handleUpperFilterChange = (event) => {
Expand Down
6 changes: 3 additions & 3 deletions docs/data/data-grid/filtering/CustomMultiValueOperator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import {
GridFilterItem,
GridFilterModel,
GridFilterOperator,
useGridRootProps,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import SyncIcon from '@mui/icons-material/Sync';

const SUBMIT_FILTER_STROKE_TIME = 500;

function InputNumberInterval(props: GridFilterInputValueProps) {
const rootProps = useGridRootProps();
const { item, applyValue, focusElementRef = null } = props;

const filterTimeout = React.useRef<any>();
Expand Down Expand Up @@ -41,7 +41,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) {
filterTimeout.current = setTimeout(() => {
setIsApplying(false);
applyValue({ ...item, value: [lowerBound, upperBound] });
}, SUBMIT_FILTER_STROKE_TIME);
}, rootProps.filterDebounceMs);
};

const handleUpperFilterChange: TextFieldProps['onChange'] = (event) => {
Expand Down
4 changes: 3 additions & 1 deletion packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
GridLogicOperator,
GridPreferencePanelsValue,
GridRowModel,
SUBMIT_FILTER_STROKE_TIME,
DATA_GRID_PRO_PROPS_DEFAULT_VALUES,
useGridApiRef,
DataGridPro,
GetColumnForNewFilterArgs,
Expand All @@ -21,6 +21,8 @@ import * as React from 'react';
import { spy } from 'sinon';
import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn';

const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PRO_PROPS_DEFAULT_VALUES.filterDebounceMs;

const isJSDOM = /jsdom/.test(window.navigator.userAgent);

describe('<DataGridPro /> - Filter', () => {
Expand Down
1 change: 1 addition & 0 deletions packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
disableVirtualization: false,
editMode: GridEditModes.Cell,
filterMode: 'client',
filterDebounceMs: 50,
columnHeaderHeight: 56,
hideFooter: false,
hideFooterPagination: false,
Expand Down
18 changes: 5 additions & 13 deletions packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { TextFieldProps } from '@mui/material/TextField';
import { unstable_useId as useId } from '@mui/utils';
import { useTimeout } from '../../../hooks/utils/useTimeout';
import { GridFilterInputValueProps } from './GridFilterInputValueProps';
import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';

Expand All @@ -16,8 +17,6 @@ export type GridFilterInputDateProps = GridFilterInputValueProps &
isFilterActive?: boolean;
};

export const SUBMIT_FILTER_DATE_STROKE_TIME = 500;

function GridFilterInputDate(props: GridFilterInputDateProps) {
const {
item,
Expand All @@ -32,7 +31,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
disabled,
...other
} = props;
const filterTimeout = React.useRef<any>();
const filterTimeout = useTimeout();
const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
const [applying, setIsApplying] = React.useState(false);
const id = useId();
Expand All @@ -42,24 +41,17 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const value = event.target.value;

clearTimeout(filterTimeout.current);
setFilterValueState(String(value));

setIsApplying(true);
filterTimeout.current = setTimeout(() => {
filterTimeout.start(rootProps.filterDebounceMs, () => {
applyValue({ ...item, value });
setIsApplying(false);
}, SUBMIT_FILTER_DATE_STROKE_TIME);
});
},
[applyValue, item],
[applyValue, item, rootProps.filterDebounceMs, filterTimeout],
);

React.useEffect(() => {
return () => {
clearTimeout(filterTimeout.current);
};
}, []);

React.useEffect(() => {
const itemValue = item.value ?? '';
setFilterValueState(String(itemValue));
Expand Down
18 changes: 5 additions & 13 deletions packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { TextFieldProps } from '@mui/material/TextField';
import { unstable_useId as useId } from '@mui/utils';
import { useTimeout } from '../../../hooks/utils/useTimeout';
import { GridFilterInputValueProps } from './GridFilterInputValueProps';
import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';

export const SUBMIT_FILTER_STROKE_TIME = 500;
romgrk marked this conversation as resolved.
Show resolved Hide resolved

export type GridTypeFilterInputValueProps = GridFilterInputValueProps &
TextFieldProps & {
type?: 'text' | 'number' | 'date' | 'datetime-local';
Expand All @@ -32,7 +31,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
InputProps,
...others
} = props;
const filterTimeout = React.useRef<any>();
const filterTimeout = useTimeout();
const [filterValueState, setFilterValueState] = React.useState<string>(item.value ?? '');
const [applying, setIsApplying] = React.useState(false);
const id = useId();
Expand All @@ -41,24 +40,17 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
const onFilterChange = React.useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.target;
clearTimeout(filterTimeout.current);
setFilterValueState(String(value));

setIsApplying(true);
filterTimeout.current = setTimeout(() => {
filterTimeout.start(rootProps.filterDebounceMs, () => {
applyValue({ ...item, value });
setIsApplying(false);
}, SUBMIT_FILTER_STROKE_TIME);
});
},
[applyValue, item],
[applyValue, item, rootProps.filterDebounceMs, filterTimeout],
);

React.useEffect(() => {
return () => {
clearTimeout(filterTimeout.current);
};
}, []);

React.useEffect(() => {
const itemValue = item.value ?? '';
setFilterValueState(String(itemValue));
Expand Down
4 changes: 2 additions & 2 deletions packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export type GridToolbarQuickFilterProps = TextFieldProps & {
quickFilterFormatter?: (values: NonNullable<GridFilterModel['quickFilterValues']>) => string;
/**
* The debounce time in milliseconds.
* @default 500
* @default 50
*/
debounceMs?: number;
};
Expand All @@ -71,7 +71,7 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
const {
quickFilterParser = defaultSearchValueParser,
quickFilterFormatter = defaultSearchValueFormatter,
debounceMs = 500,
debounceMs = 50,
...other
} = props;

Expand Down
37 changes: 37 additions & 0 deletions packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import * as React from 'react';
import { useLazyRef } from './useLazyRef';

class Timeout {
static create() {
return new Timeout();
}

currentId: number = 0;

start(delay: number, fn: Function) {
this.clear();
this.currentId = setTimeout(fn, delay);
}

clear = () => {
if (this.currentId !== 0) {
clearTimeout(this.currentId);
this.currentId = 0;
}
Comment on lines +17 to +20
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be equality fast but less JavaScript code with?

Suggested change
if (this.currentId !== 0) {
clearTimeout(this.currentId);
this.currentId = 0;
}
clearTimeout(this.currentId);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a small cost but in some places it matters.
Details here: mui/material-ui#37512

I have a few of these utils that should be migrated to core at some point.

Copy link
Member

@oliviertassinari oliviertassinari Aug 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a small cost but in some places it matters. Details here: mui/material-ui#37512

quasarframework/quasar#15203 seem to have faced something similar. Fair enough.

I have a few of these utils that should be migrated to core at some point.

  • useLazyRef: it could be great to comment on it to link Lazy useRef instance variables facebook/react#14490 I guess it's why it's here. Preferred when doing something a bit heavy to initialize the ref. Done in b9018a4
  • useTimeout: yeah, I see how this could be used in quite more places in Core.

};

disposeEffect = () => {
return this.clear;
};
}

const EMPTY = [] as any[];

export function useTimeout() {
const timeout = useLazyRef(Timeout.create).current;

// eslint-disable-next-line react-hooks/exhaustive-deps
React.useEffect(timeout.disposeEffect, EMPTY);
romgrk marked this conversation as resolved.
Show resolved Hide resolved

return timeout;
}
5 changes: 5 additions & 0 deletions packages/grid/x-data-grid/src/models/props/DataGridProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,11 @@ export interface DataGridPropsWithDefaultValues {
* @default "client"
*/
filterMode: GridFeatureMode;
/**
* The milliseconds delay to wait after a keystroke before triggering filtering.
* @default 50
*/
filterDebounceMs: number;
romgrk marked this conversation as resolved.
Show resolved Hide resolved
/**
* Sets the height in pixel of the column headers in the grid.
* @default 56
Expand Down
2 changes: 0 additions & 2 deletions scripts/x-data-grid-premium.exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -610,8 +610,6 @@
{ "name": "selectedIdsLookupSelector", "kind": "Variable" },
{ "name": "setupExcelExportWebWorker", "kind": "Function" },
{ "name": "skSK", "kind": "Variable" },
{ "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" },
{ "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" },
romgrk marked this conversation as resolved.
Show resolved Hide resolved
{ "name": "svSE", "kind": "Variable" },
{ "name": "ToolbarPropsOverrides", "kind": "Interface" },
{ "name": "trTR", "kind": "Variable" },
Expand Down
2 changes: 0 additions & 2 deletions scripts/x-data-grid-pro.exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -562,8 +562,6 @@
{ "name": "selectedGridRowsSelector", "kind": "Variable" },
{ "name": "selectedIdsLookupSelector", "kind": "Variable" },
{ "name": "skSK", "kind": "Variable" },
{ "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" },
{ "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" },
{ "name": "svSE", "kind": "Variable" },
{ "name": "ToolbarPropsOverrides", "kind": "Interface" },
{ "name": "trTR", "kind": "Variable" },
Expand Down
2 changes: 0 additions & 2 deletions scripts/x-data-grid.exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -516,8 +516,6 @@
{ "name": "selectedGridRowsSelector", "kind": "Variable" },
{ "name": "selectedIdsLookupSelector", "kind": "Variable" },
{ "name": "skSK", "kind": "Variable" },
{ "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" },
{ "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" },
{ "name": "svSE", "kind": "Variable" },
{ "name": "ToolbarPropsOverrides", "kind": "Interface" },
{ "name": "trTR", "kind": "Variable" },
Expand Down