codeant-ai-for-open-source[bot] commented on code in PR #34562:
URL: https://github.com/apache/superset/pull/34562#discussion_r2771800601
##########
superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx:
##########
@@ -85,6 +87,8 @@ export const SingleQueryResultPane = ({
isPaginationSticky
showRowCount={false}
small
+ initialPageIndex={0}
+ key={filterText}
Review Comment:
**Suggestion:** Using the full `filterText` as the `key` for `TableView`
causes the table component to fully unmount and remount on every keystroke
while typing in the filter, which repeatedly resets pagination and sorting
state and can lead to noticeable performance degradation for large tables, even
though a remount is only needed when toggling between filtered and unfiltered
states. [performance]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Table view remounts on every filter keystroke.
- ⚠️ Visible UI jank for large datasets while typing.
- ⚠️ Extra work for browser and React reconciliation.
- ❌ Not functionally breaking; prevents pagination error currently.
```
</details>
```suggestion
{/* key changes when filter presence toggles, resetting TableView
pagination
only when switching between filtered and unfiltered states to
avoid
unnecessary remounts on every keystroke */}
<TableView
columns={columns}
size={TableSize.Small}
data={filteredData}
pageSize={dataSize}
noDataText={t('No results')}
emptyWrapperType={EmptyWrapperType.Small}
className="table-condensed"
isPaginationSticky
showRowCount={false}
small
initialPageIndex={0}
key={filterText ? 'filtered' : 'unfiltered'}
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open a Mixed Chart and choose "View as Table" (UI path that renders
SingleQueryResultPane at
superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx).
The TableView is rendered in this file (see lines 77-92).
2. Type into the table search box (the input handled by handleInputChange
which sets
filterText in this file). Each keystroke updates filterText state (useState
at top of the
same file) and re-renders SingleQueryResultPane.
3. Because TableView's React key is the exact filterText (key={filterText}
at line 92),
every change to filterText unmounts and remounts TableView. Confirmed by the
presence of
key={filterText} on the TableView element in the file.
4. Observe behavior on large tables: each keystroke forces a full TableView
remount which
resets internal pagination/sorting and can cause noticeable UI jank or extra
work in the
browser (re-render and reinitialization every key press). The reported PR
fix prevents
"currentPage > totalPages" by remounting, but using full filterText causes
repeated
remounts while typing.
Note: This reproduction is based on the actual component and state usage
found in
SingleQueryResultPane.tsx where filterText is the state directly used as the
TableView key
(lines 64-92).
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx
**Line:** 77:91
**Comment:**
*Performance: Using the full `filterText` as the `key` for `TableView`
causes the table component to fully unmount and remount on every keystroke
while typing in the filter, which repeatedly resets pagination and sorting
state and can lead to noticeable performance degradation for large tables, even
though a remount is only needed when toggling between filtered and unfiltered
states.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
