[data grid] `gridFilteredDescendantCountLookupSelector` is not sufficient to complete user story

[ashburnham]

Summary

Current behavior
if you have a parent group which has two rows inside that are in the same group, then it will count this as 3 descendants (it counts the 2 rows and then adds another for the group).

This is confusing for the user who only sees 2 descendant rows which just happen to be grouped.

Expected behavior
if you have a parent group which has two rows inside that are in the same group, then I should be able to show the user the number of rows rather than the number of nodes. i.e. it should only show 2 descendants because there are only 2 descendant rows.

Examples

this is an example of trying to use gridFilteredDescendantCountLookupSelector and only being able to deliver something nonsensical to the user

There should be a new feature like gridFilteredDescendantCountLookupSelector but different that allows me to show there are 5 items. Maybe gridFilteredUltimateDescendantCountLookupSelector

Motivation

just want the numbers to add up so it makes sense to the user

Search keywords: gridFilteredDescendantCountLookupSelector, tree data
Order ID: 92825

[michelengelen]

Hey @ashburnham and thanks for opening this.
The most logical step here would be to include a parameter to the selector to exclude grouping rows. Not sure if the state structure allows for something like that tough. 🤔

[michelengelen]

I just checked myself and can achieve this with a simple added param to the getTreeNodeDescendants util:

diff --git a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts
index b088a3fb6..8dc4f943a 100644
--- a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts
+++ b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts
@@ -210,6 +210,7 @@ export const getTreeNodeDescendants = (
   tree: GridRowTreeConfig,
   parentId: GridRowId,
   skipAutoGeneratedRows: boolean,
+  skipParentRows = false,
 ) => {
   const node = tree[parentId];
   if (node.type !== 'group') {
@@ -219,7 +220,11 @@ export const getTreeNodeDescendants = (
   const validDescendants: GridRowId[] = [];
   for (let i = 0; i < node.children.length; i += 1) {
     const child = node.children[i];
-    if (!skipAutoGeneratedRows || !isAutogeneratedRowNode(tree[child])) {
+    const childNode = tree[child];
+    if (
+      !(skipParentRows && childNode.type === 'group') &&
+      !(skipAutoGeneratedRows && isAutogeneratedRowNode(tree[child]))
+    ) {
       validDescendants.push(child);
     }
     const childDescendants = getTreeNodeDescendants(tree, child, skipAutoGeneratedRows);

Usage:

const descendantsWithoutParentRows = getTreeNodeDescendants(gridRowTreeSelector(apiRef), id, true, true);

[michelengelen]

We might want to consider putting the last parameters into a new options object:

type GetTreeNodeDescendantOptions = {
  skipAutoGeneratedRows?: boolean;
  skipParentRows?: boolean;
};

export const getTreeNodeDescendants = (
  tree: GridRowTreeConfig,
  parentId: GridRowId,
  options: GetTreeNodeDescendantOptions = {
    skipAutoGeneratedRows: false,
    skipParentRows: false,
  },
) => {
...

Thoughts @mui/xgrid ?

[ashburnham]

This would be really nice and seems an easy enough improvement @mui/xgrid

Can it be implemented?