[DataGrid] Add `is any of` filter operator #2874

alexfauquette · 2021-10-14T15:34:36Z

The idea is to add the "is one of" filtering condition.

For now, filtering has been imagined as containing a unique value. I'm modifying the pipeline to allow an array of values.

To test the is any of:
https://deploy-preview-2874--material-ui-x.netlify.app/components/data-grid/filtering/#predefined-filters

The documentation about how to create custom filters operators with multiple values:
https://deploy-preview-2874--material-ui-x.netlify.app/components/data-grid/filtering/#multiple-values-operator

flaviendelangle · 2021-10-15T07:34:13Z

Is their an issue that was asking for this feature ? If so, can you link it in the description of the PR ?

alexfauquette · 2021-10-19T11:48:17Z

The idea is to add a field isArrayValue in FilterItem, such that dev can choose if its filter will be based on a single value or an array of values.

alexfauquette · 2021-10-19T13:13:27Z

packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx

@@ -48,8 +48,9 @@ GridColumnsMenuItem.propTypes = {
    filterOperators: PropTypes.arrayOf(
      PropTypes.shape({
        getApplyFilterFn: PropTypes.func.isRequired,
-        InputComponent: PropTypes.elementType,
+        InputComponent: PropTypes.func,


I do not understand Why InputComponent is now considered as a function. Its type is made of the union of two JSXElements.

InputComponent?: | React.JSXElementConstructor<GridFilterInputValueProps> | React.JSXElementConstructor< GridFilterInputMultipleValueProps & Omit<AutocompleteProps<any[], true, false, true>, 'options' | 'renderInput'> >;

(in gridFilterOperator.ts)

https://github.com/merceyz/typescript-to-proptypes/blob/a184bc439be86749436cd5eb05e99f29199f9055/src/generator.ts#L264

I do not see any obvious problem in their code
Maybe you can link it locally and have a look if this is a problem in JSDoc (in which case I would not go fix it if I were you) or just a small bug in Typescript-to-Proptypes.

I think it is because the two JSX elements have different props and then are considered as different objects. So it provides the common property: they are both function

alexfauquette · 2021-10-21T14:52:40Z

Because Autocomplete distinguishes onChange and onInputChange, the filtering is not applied while the user is typing. Filters are applied each time the value change (Chip added or removed)

Do you have an opinion on the expected behavior? Should the filter be applied or not when the user is typing?

flaviendelangle · 2021-10-21T15:58:29Z

Do you have an opinion on the expected behavior? Should the filter be applied or not when the user is typing?

I think it should not, for performances reason.

github-actions · 2021-10-22T12:49:30Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle · 2021-10-25T09:06:11Z

For date and datetime, it could be nice to add a range operator later.
But I agree that the in one of is not relevant for datetime and probably not for date (at least we can wait for feedbacks)

alexfauquette · 2021-10-25T09:09:55Z

On the same idea, we will be able to add a "is between" for numbers

alexfauquette · 2021-12-22T10:46:12Z

To be consistent with the other singleSelect, the item.value only contains the value, such that the valueParser gets the same input format. And the local state of the component contains the objects if valueOptions is made of objects.

m4theushw · 2021-12-22T13:19:52Z

@alexfauquette Then the alternative seems to be to map the values provided to the chips, so it's always an object instead of a value.

alexfauquette · 2021-12-22T14:09:11Z

@m4theushw I've been unclear in my previous message. The formating problem is solved. I was briefly describing how I change the state management such that Chip formatting works.

So with the new commits, we have:

value provided to the filterModel: an array of value
value provided to the autoComplete: an array of object

...ges/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx

m4theushw · 2021-12-22T15:42:59Z

...ges/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx

+
+      if (itemValue.length !== item.value.length) {
+        // remove filtered values
+        applyValue({ ...item, value: parsedCurrentValueOptions });


This is causing an infinite loop. Maybe we're missing a test case covering the selection of items to filter with a click, not only changing props.

Yes, tests were made only on the operator "is", so I added similar ones on "isAnyOf" to verify if the values are cleaned when changing the column.

I also refactorized how value is sanitized. The AutoComplete requires to have coherent values with options, so I sanitize the value with a useMemo. Such that the sanitization is performed before rendering the AutoComplete component.

If sanitization removes some elements, the DataGrid state is updated by a dedicated hook.

I spend too much time on this little piece of code. I'm taking a break on it, and I come back tomorrow to check on the deployment if it is working as expected, or if bugs are remaining

I played with filtering, no trivial bug was found this time

m4theushw

Well done! 👌

...ges/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx

m4theushw · 2022-01-07T23:15:37Z

...ges/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx

+  const id = useId();
+
+  const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
+  const currentValueOptions = React.useMemo(() => {


What about this name?

Suggested change

const currentValueOptions = React.useMemo(() => {

const resolvedValueOptions = React.useMemo(() => {

Yes, it will be more logic, since data are resolved from the apiRef. I've done the modification for the following namings:

resolvedColumn

resolvedValueOptions

resolvedFormattedValueOptions

github-actions · 2022-01-10T09:32:49Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette · 2022-01-10T11:02:50Z

I will wait for #3437 to adapt the documentation

github-actions · 2022-01-11T11:19:38Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle · 2022-01-12T16:35:15Z

#3437 is merged, we can fix the conflicts and merge this one

mui-bot · 2022-01-14T10:30:32Z

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	135.1	240.2	190.1	182.74	36.875
Sort 100k rows	ms	350.9	562.9	521.1	475.42	83.037
Select 100k rows	ms	130.8	272.5	182.6	184.94	49.155
Deselect 100k rows	ms	92.3	145.3	142.9	128.18	19.003

Generated by 🚫 dangerJS against c452f57

alexfauquette force-pushed the new-filter-operator branch from 4e3005b to 3363e78 Compare October 19, 2021 11:35

alexfauquette self-assigned this Oct 19, 2021

alexfauquette commented Oct 19, 2021

View reviewed changes

alexfauquette force-pushed the new-filter-operator branch from e655447 to ddd7976 Compare October 21, 2021 14:43

DanailH changed the title ~~[DataGrid] allows to us "in one of" filter operator~~ [DataGrid] Allows to us "in one of" filter operator Oct 22, 2021

DanailH changed the title ~~[DataGrid] Allows to us "in one of" filter operator~~ [DataGrid] Add 'in one of' filter operator Oct 22, 2021

DanailH changed the title ~~[DataGrid] Add 'in one of' filter operator~~ [DataGrid] Add in one of filter operator Oct 22, 2021

DanailH added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Oct 22, 2021

alexfauquette force-pushed the new-filter-operator branch from ddd7976 to 4c3a11a Compare October 22, 2021 11:44

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 22, 2021

alexfauquette changed the title ~~[DataGrid] Add in one of filter operator~~ [DataGrid] Add is one of filter operator Oct 25, 2021

alexfauquette force-pushed the new-filter-operator branch from 4c3a11a to 35d3a3f Compare October 27, 2021 08:01

alexfauquette added 9 commits October 28, 2021 12:53

add isArrayValue property to Filter Operator

a81d061

provide isOneOf to numeric column

a7c29c0

correct condition of filter to be activated when value is array

e120f80

fix tests

2f16906

support string column

3239a73

fix

4009b2f

keep filter value correct when updating filters

4b656dd

add support for singleSelect

3abed88

Autocomplete does not stringify the value

55418bf

alexfauquette force-pushed the new-filter-operator branch from 35d3a3f to 55418bf Compare October 28, 2021 10:54

alexfauquette added 3 commits December 22, 2021 10:47

feedbacks

599f6a0

grid State contains values, local state contains objects

07cc68f

propTypes (probably a bug)

5805871

m4theushw reviewed Dec 22, 2021

View reviewed changes

alexfauquette added 4 commits December 23, 2021 11:48

add inteaction tests

0d5f87b

rework filter value cleaning structure

cb5fff6

prettier

405ef2d

proptypes

094ebc6

alexfauquette requested a review from m4theushw December 24, 2021 08:30

m4theushw approved these changes Jan 7, 2022

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 10, 2022

alexfauquette added 3 commits January 10, 2022 11:48

Merge remote-tracking branch 'upstream/master' into new-filter-operator

33e172b

Merge remote-tracking branch 'upstream/master' into new-filter-operator

5f1df62

feedbacks on naming

52405e1

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 10, 2022

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 11, 2022

Merge remote-tracking branch 'upstream/master' into new-filter-operator

62c539f

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 14, 2022

scripts

c452f57

flaviendelangle approved these changes Jan 17, 2022

View reviewed changes

alexfauquette merged commit 0fc9429 into mui:master Jan 17, 2022

alexfauquette deleted the new-filter-operator branch January 17, 2022 11:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add `is any of` filter operator #2874

[DataGrid] Add `is any of` filter operator #2874

alexfauquette commented Oct 14, 2021 •

edited

flaviendelangle commented Oct 15, 2021 •

edited

alexfauquette commented Oct 19, 2021

alexfauquette Oct 19, 2021

flaviendelangle Oct 19, 2021

alexfauquette Nov 1, 2021

alexfauquette commented Oct 21, 2021

flaviendelangle commented Oct 21, 2021

github-actions bot commented Oct 22, 2021

flaviendelangle commented Oct 25, 2021

alexfauquette commented Oct 25, 2021

alexfauquette commented Dec 22, 2021

m4theushw commented Dec 22, 2021

alexfauquette commented Dec 22, 2021

m4theushw Dec 22, 2021

alexfauquette Dec 23, 2021

alexfauquette Dec 24, 2021

m4theushw left a comment

m4theushw Jan 7, 2022

alexfauquette Jan 10, 2022

github-actions bot commented Jan 10, 2022

alexfauquette commented Jan 10, 2022

github-actions bot commented Jan 11, 2022

flaviendelangle commented Jan 12, 2022

mui-bot commented Jan 14, 2022

	const currentValueOptions = React.useMemo(() => {
	const resolvedValueOptions = React.useMemo(() => {

[DataGrid] Add is any of filter operator #2874

[DataGrid] Add is any of filter operator #2874

Conversation

alexfauquette commented Oct 14, 2021 • edited

flaviendelangle commented Oct 15, 2021 • edited

alexfauquette commented Oct 19, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexfauquette commented Oct 21, 2021

flaviendelangle commented Oct 21, 2021

github-actions bot commented Oct 22, 2021

flaviendelangle commented Oct 25, 2021

alexfauquette commented Oct 25, 2021

alexfauquette commented Dec 22, 2021

m4theushw commented Dec 22, 2021

alexfauquette commented Dec 22, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m4theushw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 10, 2022

alexfauquette commented Jan 10, 2022

github-actions bot commented Jan 11, 2022

flaviendelangle commented Jan 12, 2022

mui-bot commented Jan 14, 2022

[DataGrid] Add `is any of` filter operator #2874

[DataGrid] Add `is any of` filter operator #2874

alexfauquette commented Oct 14, 2021 •

edited

flaviendelangle commented Oct 15, 2021 •

edited