fix(perf): dashboard performance issues

[kgabryje]

SUMMARY

Fix a few problems that were causing massive performance decrease on large dashboards/

1. Redux selectors - selecting a large, frequently changing object. For example, selecting state.dashboardState.chartStates in Chart.jsx caused every chart to rerender every time ANY chart in the dashboard changed its state. Selecting state.dashboardState.chartStates?.[props.id] reduces rerenders by ensuring that the chart rerenders only when its own state changes
2. Redux selectors - returning a non-memoized complex objects. Returning a complex object from selector (like for example a result of filtering an array from state) caused the component to rerender on each cycle. I introduced createSelector statements for those cases
3. Passing un-memoized objects as props

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

1. Create a large dashboard (like 50 charts for example)
2. In Chrome dev tools, performance tab, enable CPU throttling (4x or 6x should be enough).
3. Verify that your dashboard is usable

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[bito-code-review]

Code Review Agent Run #273280

Actionable Suggestions - 0

Review Details

• Files reviewed - 10 · Commit Range: 188c04e..188c04e

  • superset-frontend/src/dashboard/components/GroupByBadge/index.tsx
  • superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.jsx
  • superset-frontend/src/dashboard/components/nativeFilters/ChartCustomization/selectors.ts
  • superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
  • superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
  • superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
  • superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterDependencies.ts
  • superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
  • superset-frontend/src/dashboard/components/nativeFilters/state.ts
  • superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts
• Files skipped - 0
• Tools

  • Eslint (Linter) - ✔︎ Successful
  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[korbit-ai]

I've completed my review and didn't find any issues.

Files scanned

​

File Path	Reviewed
superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterDependencies.ts	✅
superset-frontend/src/dashboard/components/nativeFilters/ChartCustomization/selectors.ts	✅
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/state.ts	✅
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx	✅
superset-frontend/src/dashboard/components/GroupByBadge/index.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx	✅
superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts	✅
superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.jsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[villebro]

This seems like a huge perf improvement! Any before/after rendering stats? Beyond that, all the changes make sense, so LGTM. Only nit that came to mind is having all those duplicated EMPTY_ARRAYs. But I suppose that was needed due to the array types.