feat: implement infinite scroll with dynamic height #39646
Conversation
…o feat/implement-infinite-scroll-with-dynamic-height
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis change set enhances the TableWidgetV2 by introducing dynamic row measurement and variable row sizing. The modifications update the Row component to use a new interface and measurement logic via hooks, adjust the VirtualList component to compute row sizes dynamically, and expand the TableBody context to manage measurement state with additional refs. Changes
Sequence Diagram(s)sequenceDiagram
participant Row as Row Component
participant Ref as useRef Hook
participant Effect as useEffect Hook
participant Context as BodyContext
participant VList as VirtualList Component
Row->>Ref: Create row DOM reference
Row->>Effect: Trigger measurement on mount/update
Effect->>Row: Calculate cell heights based on content and allowCellWrapping
Row->>Context: Update rowHeights and measurement flag
VList->>Context: Retrieve current rowHeights
VList->>VList: Compute item size via getItemSize
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
app/client/src/widgets/TableWidgetV2/component/TableBody/Row.tsx (1)
48-125: Refinement on error handling & optional chaining
The measuring logic is well-structured but silently catches all errors, which can obscure unexpected issues. Consider logging or handling them more specifically.
Meanwhile, applying an optional chain at line 124 aligns with safer property access:- rowNeedsMeasurement.current && (rowNeedsMeasurement.current[index] = false); + rowNeedsMeasurement.current?.[index] = false;🧰 Tools
🪛 Biome (1.9.4)
[error] 124-124: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/client/src/widgets/TableWidgetV2/component/TableBody/Row.tsx(3 hunks)app/client/src/widgets/TableWidgetV2/component/TableBody/VirtualList.tsx(4 hunks)app/client/src/widgets/TableWidgetV2/component/TableBody/index.tsx(5 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
app/client/src/widgets/TableWidgetV2/component/TableBody/Row.tsx
[error] 124-124: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (20)
app/client/src/widgets/TableWidgetV2/component/TableBody/Row.tsx (7)
2-2: Looks good.
This import is appropriate for the new hooks usage and poses no issues.
8-12: Constants import
Neat import of constants for table sizing and styling.
21-27: Clear interface definition
This interface addition keeps the cell props explicit, aiding readability.
31-31: Prop destructuring
Extracting props here promotes clarity.
37-37: Retrieving listRef
Grabbing the list reference from context is a clean approach for virtualization.
41-42: Context-based row measurements
Acquiring rowHeights and rowNeedsMeasurement from context effectively enables dynamic row resizing.
160-160: Ref assignment
Binding rowRef to the row DOM element is crucial for accurate height measurement.app/client/src/widgets/TableWidgetV2/component/TableBody/VirtualList.tsx (6)
2-9: Necessary imports
Bringing in the relevant types and hooks for variable-size virtualization.
11-13: BodyContext usage
Importing BodyContext aligns the virtual list with the dynamic row measurement paradigm.
42-42: Ref type update
Switching to React.Ref is consistent with the variable sizing approach.
57-57: Destructuring from context
Extracting listRef and rowHeights sets up the foundation for dynamic sizing logic.
59-89: Combining refs & computing item size
Merging the infiniteLoaderListRef and listRef is convenient, and the getItemSize callback nicely accommodates variable row heights.
92-110: VariableSizeList integration
Leveraging dynamic row sizing with an estimated item size is a solid choice for better rendering performance.app/client/src/widgets/TableWidgetV2/component/TableBody/index.tsx (7)
1-1: Imports
No issues; this suits the new hooks and effect usage.
7-7: Importing VariableSizeList
Needed to enable variable row height logic.
36-38: Enhancement to BodyContextType
Adding rowHeights, rowNeedsMeasurement, and listRef defines the backbone for measuring rows.
53-55: Default context initialization
Providing default ref objects ensures consistent behavior throughout.
142-145: Creating ref state
The useRef hooks for listRef, rowHeights, and rowNeedsMeasurement help centralize row dimension tracking.
147-149: Row measurement reset
Reinitializing rowNeedsMeasurement on row changes is a clean way to handle newly rendered rows.
182-185: Context provider additions
Populating rowHeights, rowNeedsMeasurement, and listRef in BodyContext completes the dynamic resizing infrastructure.
|
🔴🔴🔴 Cyclic Dependency Check: This PR has increased the number of cyclic dependencies by 1, when compared with the release branch. Refer this document to identify the cyclic dependencies introduced by this PR. You can view the dependency diff in the run log. Look for the check-cyclic-dependencies job in the run. |
…asurement - Added a new hook `useColumnVariableHeight` to manage dynamic row heights - Introduced a force update mechanism to trigger row height recalculation - Renamed `FixedInfiniteVirtualList` to `VariableHeightInfiniteVirtualList` for clarity - Improved error handling and type safety in row height measurement - Simplified cell wrapping detection logic
|
🔴🔴🔴 Cyclic Dependency Check: This PR has increased the number of cyclic dependencies by 1, when compared with the release branch. Refer this document to identify the cyclic dependencies introduced by this PR. You can view the dependency diff in the run log. Look for the check-cyclic-dependencies job in the run. |
Description
Tip
Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team).
Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR.
Fixes #
Issue Numberor
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags=""
🔍 Cypress test results
Warning
Tests have not run on the HEAD d645c32 yet
Wed, 12 Mar 2025 08:15:58 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit