codeant-ai-for-open-source[bot] commented on code in PR #41079:
URL: https://github.com/apache/superset/pull/41079#discussion_r3545913721
##########
superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx:
##########
@@ -173,12 +194,33 @@ export default function ResizableContainer({
maxHeightMultiple = proxyToInfinity,
}: ResizableContainerProps) {
const [isResizing, setIsResizing] = useState<boolean>(false);
+ const [cursorLabel, setCursorLabel] = useState<{
+ x: number;
+ y: number;
+ height: number;
+ } | null>(null);
const handleResize = useCallback<ResizeCallback>(
(event, direction, elementRef, delta) => {
if (onResize) onResize(event, direction, elementRef, delta);
+ if (direction.toLowerCase().includes(BOTTOM_RESIZE_DIRECTION)) {
+ const clientX =
+ 'touches' in event
+ ? (event.touches[0]?.clientX ?? 0)
+ : (event as MouseEvent).clientX;
+ const clientY =
+ 'touches' in event
+ ? (event.touches[0]?.clientY ?? 0)
+ : (event as MouseEvent).clientY;
+ const snappedDelta = Math.round(delta.height / heightStep) *
heightStep;
+ const currentHeightPx = Math.max(
+ minHeightMultiple * heightStep,
+ heightMultiple * heightStep + snappedDelta,
+ );
+ setCursorLabel({ x: clientX, y: clientY, height: currentHeightPx });
Review Comment:
**Suggestion:** Updating `cursorLabel` state for every resize event causes
the entire resizable container (including its children) to re-render
continuously while dragging, which can make chart resizing janky under load.
Move cursor-position updates to a throttled path or to imperative DOM updates
so the heavy child subtree is not re-rendered on every pointer movement.
[performance]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Chart containers re-render on every bottom resize event.
- ⚠️ Resize tooltip may stutter on dashboards with heavy charts.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. In edit mode, render a chart inside `ChartHolder`, which wraps its
contents in
`ResizableContainer` with `adjustableHeight` enabled at
`superset-frontend/src/dashboard/components/gridComponents/ChartHolder/ChartHolder.tsx:15-27`
(snippet header “Showing lines 230 to 309”: `ResizableContainer` is
configured with
`adjustableHeight`, `heightStep`, and `heightMultiple` at lines 17-24).
2. `ChartHolder` receives `onResizeStart`, `onResize`, and `onResizeStop`
from
`DashboardComponent` and passes them directly to `ResizableContainer` (same
snippet), so
`ResizableContainer`’s `handleResize` callback at
`superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx:203-224`
is
invoked for each drag event from `re-resizable`.
3. During a bottom-edge drag (or bottom-right drag) of the chart,
`re-resizable` calls
`handleResize` repeatedly with `direction` containing `'bottom'`; the branch
at
`ResizableContainer.tsx:206-221` executes for every event, computing
`clientX`, `clientY`,
and `currentHeightPx`, and then calling `setCursorLabel({ x: clientX, y:
clientY, height:
currentHeightPx })` at line 220.
4. `cursorLabel` is component state defined at
`ResizableContainer.tsx:197-201` and used
in the returned JSX to conditionally render the height tooltip portal at
`ResizableContainer.tsx:366-371`. Each `setCursorLabel` call therefore causes
`ResizableContainer` to re-render along with its `StyledResizable` wrapper
and children
subtree (which, for charts and markdown components, includes the full chart
or markdown
content), so on dashboards with heavy components this per-event re-render
during drag can
make resize interactions feel janky.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=04c5229de29f4ed8b8fb07627a90a2d1&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=04c5229de29f4ed8b8fb07627a90a2d1&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/dashboard/components/resizable/ResizableContainer.tsx
**Line:** 220:220
**Comment:**
*Performance: Updating `cursorLabel` state for every resize event
causes the entire resizable container (including its children) to re-render
continuously while dragging, which can make chart resizing janky under load.
Move cursor-position updates to a throttled path or to imperative DOM updates
so the heavy child subtree is not re-rendered on every pointer movement.
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%2F41079&comment_hash=35130beda18e39cadf5726451ed510a1adaeafc59bbc85f16ab0e289d7765991&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F41079&comment_hash=35130beda18e39cadf5726451ed510a1adaeafc59bbc85f16ab0e289d7765991&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]
