[DataGridPremium] Fix expanded groups being collapsed after calling updateRows

[cherniavskii]

Fixes #8580
Before: https://codesandbox.io/s/kind-lamarr-ofjvim
After: https://codesandbox.io/s/wild-http-h2gfjq

Fixes #8853
Before: https://codesandbox.io/s/cocky-sunset-f7qkjg
After: https://codesandbox.io/s/frosty-bassi-1hwexf

---

The issue comes down to this part where we update the row tree:

mui-x/packages/grid/x-data-grid-pro/src/utils/tree/updateRowTree.ts

Lines 61 to 63 in 1099111

	const { id, path } = params.nodes.modified[i];
	const pathInPreviousTree = getNodePathInTree({ tree, id });
	const isInSameGroup = isDeepEqual(pathInPreviousTree, path);

Here we compare path and pathInPreviousTree. But isInSameGroup always equals false, even if the groups have not been changed. Here are example values that are being compared:

[{ field: undefined, key: "1" }, { field: 14, key: 14 }] // pathInPreviousTree
[{ key: 14, field: "age" }, { key: "1", field: null }] // path

There are two differences between pathInPreviousTree and path:

1. In path, the null value is used when the field is missing, but in pathInPreviousTree, undefined is used instead.
   This issue comes from a bug in getNodePathInTree
   

   mui-x/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts

   Line 38 in 4d4fcb4

   field: (node as GridGroupNode).groupingField,

   
   Leaf nodes do not have groupingField property, therefore field should be set to null here. TS didn't warn about this because of the as GridGroupNode assertion.

   -field: (node as GridGroupNode).groupingField,
   +field: node.type === 'leaf' ? null : node.groupingField,

2. The order of items in the array is different, therefore deepEqual returns false.
   The order comes from getNodePathInTree as well, where Array.push is being used:
   

   mui-x/packages/grid/x-data-grid-pro/src/utils/tree/utils.ts

   Line 37 in 4d4fcb4

   path.push({

   
   The fix is to use Array.unshift to reverse the order of items.

TODO:

• Explain the changes

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-8823--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	647	1,160.3	1,160.3	930.7	206.104
Sort 100k rows	ms	735.5	1,325.1	1,284.1	1,103.8	210.556
Select 100k rows	ms	278.8	570.1	310.2	372.46	106.109
Deselect 100k rows	ms	241.1	385.9	294.2	297.6	53.407

Generated by 🚫 dangerJS against 7838728

[cherniavskii]

On second thought, I'm going to keep .push and just reverse the array later, because it looks like unshift is ~70% slower even for short arrays: https://jsperf.app/wisoqe

[cherniavskii]

It also fixes #8853
Before: https://codesandbox.io/s/cocky-sunset-f7qkjg
After: https://codesandbox.io/s/frosty-bassi-1hwexf

[MBilalShafi]

Thank you, it is a nice stability improvement. 🙏

[MBilalShafi]

Optional Nice to have (possibly in a follow-up): It'd be nice to have a small test case covering #8853 too

[cherniavskii]

Good idea, I'll add a regression test in a follow-up PR

[cherniavskii]

Added in #8870