Skip to content

Conversation

@cherniavskii
Copy link
Member

@cherniavskii cherniavskii commented Nov 28, 2024

Closes #15481
Fixes #15962

Changelog

Breaking changes

  • The row selection model has been changed from GridRowId[] to { type: 'include' | 'exclude'; ids: Set<GridRowId> }.
    Using Set allows for a more efficient row selection management.
    The exclude selection type allows to select all rows except the ones in the ids set.

    This change impacts the following props:

    • rowSelectionModel
    • onRowSelectionModelChange
    • initialState.rowSelectionModel
    -const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>([]);
    +const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>({ type: 'include', ids: new Set() });

    This change also impacts the gridRowSelectionStateSelector selector.
    For convenience, use the gridRowSelectionManagerSelector selector to handle both selection types:

    -const rowSelection = gridRowSelectionStateSelector(apiRef);
    -const isRowSelected = rowSelection.includes(rowId);
    +const rowSelectionManager = gridRowSelectionManagerSelector(apiRef);
    +const isRowSelected = rowSelectionManager.has(rowId);

    There is also a createRowSelectionManager utility function that can be used to manage the row selection:

    const rowSelectionManager = createRowSelectionManager({
      type: 'include',
      ids: new Set(),
    });
    rowSelectionManager.select(rowId);
    rowSelectionManager.unselect(rowId);
    rowSelectionManager.has(rowId);
  • The selectedIdsLookupSelector selector has been removed. Use the gridRowSelectionManagerSelector or gridRowSelectionStateSelector selectors instead.

  • The selectedGridRowsSelector has been renamed to gridRowSelectionIdsSelector.

  • The selectedGridRowsCountSelector has been renamed to gridRowSelectionCountSelector.

@cherniavskii cherniavskii added breaking change Introduces changes that are not backward compatible. scope: data grid Changes related to the data grid. feature: Selection Related to the data grid Selection feature v8.x labels Nov 28, 2024
@mui-bot
Copy link

mui-bot commented Nov 28, 2024

Comment on lines 642 to 644
if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && applyAutoSelection) {
apiRef.current.selectRows({ type: 'exclude', ids: new Set() }, params.value, true);
} else {
Copy link
Member Author

Choose a reason for hiding this comment

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

The more corner cases I fix, the fewer opportunities for the exclude selection model 😅

Copy link
Contributor

Choose a reason for hiding this comment

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

AFAIU it would only be for "select all", but for large datasets it would improve that interaction substantially.

Copy link
Member Author

Choose a reason for hiding this comment

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

Correct, but there is a number of conditions for the exclude model to be used:

if (
  !props.isRowSelectable &&
  !props.checkboxSelectionVisibleOnly &&
  applyAutoSelection &&
  !hasFilters
) {
  apiRef.current.selectRows({ type: 'exclude', ids: new Set() }, params.value, true);
} else {
  const rowsToBeSelected = getRowsToBeSelected();
  apiRef.current.selectRows(
    { type: 'include', ids: new Set(rowsToBeSelected) },
    params.value,
  );
}

Copy link
Contributor

Choose a reason for hiding this comment

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

I would have thought that both models would be equivalent, assuming access to the full row id list (though that implies modifying the row list requires adjusting the selection model).

Copy link
Member Author

Choose a reason for hiding this comment

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

Ok, so { type: 'exclude', ids: new Set() } could be interpreted differently:

  1. All rows are selected (current approach)
  2. All selectable and visible rows are selected (this is what you meant, right?)

Do you see benefits in (2) compared to (1)?

Copy link
Member Author

Choose a reason for hiding this comment

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

On another thought, there's a difference between (1) and (2) when interpreting this model by the developers to perform operations on selected rows.
In (1), an empty exclude model means literally all rows.
In (2), an empty exclude model could mean different things depending on the data grid state. So developers would need to convert empty exclude into include (?) model to be able to perform actions on the dataset.

With the above, I think we should proceed with (1).
What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, I think (1) is the way to go. Both shapes of the model should be equivalent, which isn't the case for (2).

Copy link
Contributor

@romgrk romgrk Dec 5, 2024

Choose a reason for hiding this comment

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

The more corner cases I fix, the fewer opportunities for the exclude selection model

It's not that it's not usable for the conditions that you've guarded for, it's that some of them might require building a non-empty exclude model. You'd need an equivalent getRowsToBeSelectedAsExclude() function. And there are some cases in which it could make sense to do that work. For example, if there are filters applied that filter a small fraction (or none) of the total rows, using an exclude model would be much faster than building an include one.

Copy link
Member

Choose a reason for hiding this comment

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

In (1), an empty exclude model means literally all rows.

Does this mean that even if some rows are restricted to be selected by let's say isRowSelectable prop, they'd be selected but not de-selectable from the UI, similar to this?

(Based on the assumption that although we are discouraging the usage of exclude mode with isRowSelectable, we aren't forcing it.)

Copy link
Member Author

Choose a reason for hiding this comment

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

@MBilalShafi Yes, this is the current behavior:

Screen.Recording.2025-01-06.at.23.09.35.mov

@cherniavskii cherniavskii requested a review from a team December 2, 2024 12:39
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 3, 2024
@github-actions
Copy link

github-actions bot commented Dec 3, 2024

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

@github-actions
Copy link

github-actions bot commented Feb 5, 2025

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

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 5, 2025
@cherniavskii cherniavskii requested a review from a team February 11, 2025 13:13
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 19, 2025
@cherniavskii cherniavskii requested a review from romgrk February 20, 2025 17:17
@cherniavskii cherniavskii requested a review from a team February 20, 2025 21:07
@cherniavskii cherniavskii merged commit f663e70 into mui:master Feb 20, 2025
22 checks passed
@cherniavskii cherniavskii deleted the row-selection-model branch February 20, 2025 22:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change Introduces changes that are not backward compatible. feature: Selection Related to the data grid Selection feature scope: data grid Changes related to the data grid. v8.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[data grid] Select all checkbox crashes the browser in a large grid [data grid] Reshape row selection state model

5 participants