Perf: panel rerenders

[ahrefabhi]

📄 Summary

Fixes performance issues causing unnecessary re-renders of dashboard panels on user interactions. Stabilizes click handlers and optimizes component memoization to eliminate rendering lag across dashboards, metrics views, and graph components.

---

✅ Changes

Core Performance Fixes:

• Wrapped PanelWrapper with React.memo using deep equality comparison (isEqual) to prevent re-renders when props have identical content
• Memoized chartData in UplotPanelWrapper to avoid recalculation on every render
• Used useRef in useResolveQuery to stabilize mutateAsync callback dependencies

Dashboard Widgets (WidgetGraphComponent):

• Memoized initial graphVisibility state and derived flags
• Wrapped handlers in useCallback: onDelete, onClone, onView, modal toggles, graphClickHandler
• Unified click handler logic with stable clickHandler reference

Graph Components:

• Celery Task Graph: Memoized onGraphClick and created dedicated handlers per state (onAllStateClick, onFailedStateClick, onRetryStateClick, onSuccessStateClick)
• Metrics External Tab: Extracted and memoized 4 graph-specific click handlers (error %, duration, RPS, duration by address)
• Messaging Queues: Memoized onClickHandler with stable callback

---

Note

Stabilizes graph click handlers and memoizes heavy computations to reduce re-renders across dashboard widgets, panel wrapper, and Celery/Metrics/Messaging Queues graphs.

• Core performance:
  • Memoize PanelWrapper via React.memo with custom arePropsEqual using deep isEqual for widget and queryResponse.data.payload.
  • Memoize chartData in UplotPanelWrapper with useMemo to avoid repeated getUPlotChartData work.
  • Stabilize query execution in useResolveQuery by referencing mutateAsync with useRef.
• Dashboard widgets (frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx):
  • Wrap handlers with useCallback (onDelete, onClone, onView, modal toggles, graphClickHandler).
  • Memoize isGraphClickButtonEnabled and unify click handling via stable clickHandler.
• Graphs:
  • CeleryTaskBar: memoized onGraphClick and added per-state click handlers (onAllStateClick, onFailedStateClick, onRetryStateClick, onSuccessStateClick).
  • MetricsApplication/Tabs/External.tsx: extracted and memoized click handlers for error %, duration, RPS by address, and duration by address.
  • MessagingQueues/MQGraph: memoized onClickHandler and reused across GridCard.

^{Written by Cursor Bugbot for commit c0bd545. This will update automatically on new commits. Configure here.}

[cursor]

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on December 3

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[srikanthccv]

Checking...

[srikanthccv]

it seems to behaving differently on test data vs real-world data, we are testing more about it.

[srikanthccv]

Disregard my last comment. Took a latest pull and reviewing again.

[srikanthccv]

We will get this merged. I have noted some questions about the hooks and their current functionality and implications on perf but we will come back to them later.