[DataGrid] Dynamic virtualization range #12353
Conversation
romgrk
added
the
component: data grid
| const dy = scrollPosition.current.top - previousScroll.current.top; | ||
| const dx = scrollPosition.current.left - previousScroll.current.left; | ||
| scrollCache.buffer = { | ||
| top: dimensions.rowHeight * 10, | ||
| left: 50 * 3, | ||
| }; |
There was a problem hiding this comment.
I tried predicting* the optimal buffer size but failed, so I just put a static 10 rows or 3 columns buffer.
*I had code in place to collect scroll points as event, which I hoped we could run some math on to figure out where the next scroll event would be. I tried linear regression, polynomial regression, and even a small (<1kb) ML model (simple perceptron architecture) with synaptic.js, but the problem is the data. One would expect scroll events to mostly fit to a bell curve. Which they do as a whole. But the intervals and delta values are just too irregular from one point to the next to be able to predict the next point in a sequence. I have gathered some data (me scrolling the grid) and plotted it here, the last graph is an example of "generally like a bell curve but unpredictable from one point to the next". Maybe with wheel events added in the mix we could get a better error rate (best I could get was 50% error on average), but that will take some more research.
There was a problem hiding this comment.
I can't access the link attached. Could you update the permissions?
| enum ScrollDirection { | ||
| NONE, | ||
| UP, | ||
| DOWN, | ||
| LEFT, | ||
| RIGHT, | ||
| } | ||
|
|
||
| const EMPTY_SCROLL_CACHE = { | ||
| direction: ScrollDirection.NONE, | ||
| lastTimestamp: -1, | ||
| lastPosition: { top: 0, left: 0 }, | ||
| buffer: { top: 0, left: 0 }, | ||
| }; | ||
| type ScrollCache = typeof EMPTY_SCROLL_CACHE; |
There was a problem hiding this comment.
The general idea for the logic is that scroll events trigger right after a new frame has been rendered, so too late for us to prevent white areas that way. If we want to prevent white areas, we need to diplay enough rows/columns so that there is enough of them to cover the area from the current viewport to where the viewport will be at the next scroll event.
As mentioned above predicting by how much the user will have scrolled at the next scroll event is a problem is itself, but by having a substantially large buffer in one direction we try to ensure users see as few white areas as possible.
packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
Outdated
Show resolved
Hide resolved
docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
Outdated
Show resolved
Hide resolved
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
removed
the
PR: out-of-date
packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
Show resolved
Hide resolved
…nto feat-virtualization-range
github-actions
bot
removed
the
PR: out-of-date
packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
Show resolved
Hide resolved
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
removed
the
PR: out-of-date
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
removed
the
PR: out-of-date
Signed-off-by: Rom Grk <romgrk@users.noreply.github.com> Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
Closes #11344
Implement both improvements proposed in the linked issue. Read the comments below for more implementation details.
Before: https://deploy-preview-12349--material-ui-x.netlify.app/x/react-data-grid/#pro-plan
After: https://deploy-preview-12353--material-ui-x.netlify.app/x/react-data-grid/#pro-plan
Before/After:
Kooha-2024-03-10-20-48-32.webm