codeant-ai-for-open-source[bot] commented on code in PR #42097:
URL: https://github.com/apache/superset/pull/42097#discussion_r3592011134
##########
superset-frontend/src/visualizations/TimeTable/TimeTable.tsx:
##########
@@ -16,16 +16,19 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { useMemo, ReactNode } from 'react';
+import { useMemo, useRef, useState, useEffect, ReactNode } from 'react';
import { InfoTooltip, TableView } from '@superset-ui/core/components';
import { t } from '@apache-superset/core/translation';
import { styled } from '@apache-superset/core/theme';
import { sortNumberWithMixedTypes, processTimeTableData } from './utils';
import { ValueCell, LeftCell, Sparkline } from './components';
import type { TimeTableProps } from './types';
+const RESIZE_DEBOUNCE_MS = 300;
+
// @z-index-above-dashboard-charts + 1 = 11
-const TimeTableStyles = styled.div<{ height?: number }>`
+const TimeTableStyles = styled.div<{ height?: number; hideTable?: boolean }>`
+ ${props => props.hideTable && 'display: none;'}
Review Comment:
**Suggestion:** The resize optimization is incomplete: this only hides the
table via CSS but still keeps `TableView` mounted, so expensive table internals
can continue running during resize and the intended “skip rendering while
resizing” behavior is not actually guaranteed. Render `TableView` conditionally
based on `isSizeStable` so it is unmounted during active resize and remounted
after the debounce window. [incomplete implementation]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
⚠️ TimeTable resize optimization does not fully unmount TableView.
⚠️ Dashboards with TimeTable may still jank on resize.
⚠️ Unnecessary TableView work during continuous browser window resizing.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Render the TimeTable component as done in
`superset-frontend/src/visualizations/TimeTable/TimeTable.test.tsx:66-78`,
where
`render(<TimeTable {...defaultProps} />)` mounts the component.
2. When the window is resized in a real browser, the `useEffect` hook in
`TimeTable` at
`superset-frontend/src/visualizations/TimeTable/TimeTable.tsx:56-71`
registers
`handleResize`, which sets `isSizeStable` to `false` and starts a debounce
timer.
3. While `isSizeStable` is `false`, `TimeTable` re-renders and passes
`hideTable={!isSizeStable}` to `TimeTableStyles` at `TimeTable.tsx:158-163`,
causing only
the wrapper div to get `display: none` via the styled rule at
`TimeTable.tsx:30-33`.
4. Despite `hideTable` being true, the `TableView` JSX at
`TimeTable.tsx:165-171` is
always rendered unconditionally, so the `TableView` component remains
mounted and
continues to run its internals during resize instead of being unmounted,
meaning the
intended “skip rendering while resizing” behavior is not fully achieved.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=4233468f45ea467a8daeca75c63a1b52&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
[](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=4233468f45ea467a8daeca75c63a1b52&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:** superset-frontend/src/visualizations/TimeTable/TimeTable.tsx
**Line:** 30:31
**Comment:**
*Incomplete Implementation: The resize optimization is incomplete: this
only hides the table via CSS but still keeps `TableView` mounted, so expensive
table internals can continue running during resize and the intended “skip
rendering while resizing” behavior is not actually guaranteed. Render
`TableView` conditionally based on `isSizeStable` so it is unmounted during
active resize and remounted after the debounce window.
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.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42097&comment_hash=e62ae28919460a10ec8b1d72146b8209f579b313ecacd52c0250e48896eb9b0a&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42097&comment_hash=e62ae28919460a10ec8b1d72146b8209f579b313ecacd52c0250e48896eb9b0a&reaction=dislike'>👎</a>
--
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]
