Skip to content

perf(dashboard): decouple redux props from dashboard components#16421

Merged
kgabryje merged 4 commits into
apache:masterfrom
kgabryje:perf/dashborad-rerenders
Aug 26, 2021
Merged

perf(dashboard): decouple redux props from dashboard components#16421
kgabryje merged 4 commits into
apache:masterfrom
kgabryje:perf/dashborad-rerenders

Conversation

@kgabryje
Copy link
Copy Markdown
Member

SUMMARY

In DashboardComponent (a parent component of dashboard components such as ChartHolder, Tabs, Column etc.) we had a large mapStateToProps function, which maps redux state to props. A lot of those props were used only in some components, but since they were passed to every component, each change triggered a rerender of all components instead of the ones that actually use the changed prop. This PR decouples those props from components that don't need them.
For example - directPathToChild is used only by ChartHolder and Tabs, but any change of that prop triggered a rerender of all components on dashboard.
This PR is the first of a series of PRs that will come soon - all related to reducing dashboard rerenders.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

No changes

TESTING INSTRUCTIONS

Every dashboard functionality should work as it did before

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

CC @junlincc @jinghua-qa

@codecov
Copy link
Copy Markdown

codecov Bot commented Aug 24, 2021

Codecov Report

Merging #16421 (526f65b) into master (970d762) will decrease coverage by 0.09%.
The diff coverage is 100.00%.

❗ Current head 526f65b differs from pull request most recent head 610ff19. Consider uploading reports for the commit 610ff19 to get more accurate results
Impacted file tree graph

@@            Coverage Diff             @@
##           master   #16421      +/-   ##
==========================================
- Coverage   76.64%   76.54%   -0.10%     
==========================================
  Files        1000     1000              
  Lines       53489    53494       +5     
  Branches     6816     6819       +3     
==========================================
- Hits        40996    40949      -47     
- Misses      12257    12307      +50     
- Partials      236      238       +2     
Flag Coverage Δ
javascript 70.69% <100.00%> (-0.20%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...d/src/dashboard/components/gridComponents/index.js 100.00% <ø> (ø)
...nd/src/dashboard/containers/DashboardComponent.jsx 100.00% <ø> (ø)
...ashboard/components/gridComponents/ChartHolder.jsx 69.30% <100.00%> (+0.62%) ⬆️
...c/dashboard/components/gridComponents/Markdown.jsx 83.16% <100.00%> (+0.34%) ⬆️
...d/src/dashboard/components/gridComponents/Tabs.jsx 86.48% <100.00%> (ø)
...ntend/src/dashboard/util/activeDashboardFilters.js 90.38% <100.00%> (ø)
...frontend/src/components/DatabaseSelector/index.tsx 66.66% <0.00%> (-26.05%) ⬇️
...et-frontend/src/components/TableSelector/index.tsx 61.29% <0.00%> (-22.97%) ⬇️
...et-frontend/src/components/OmniContainer/index.tsx 86.95% <0.00%> (-10.11%) ⬇️
...rontend/src/SqlLab/components/SqlEditorLeftBar.jsx 53.03% <0.00%> (-3.04%) ⬇️
... and 12 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 970d762...610ff19. Read the comment docs.

Copy link
Copy Markdown
Member

@villebro villebro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! One small nit/question, other than that LGTM!

);

class ChartHolder extends React.Component {
export class ChartHolder extends React.Component {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this export needed somewhere?

const MARKDOWN_ERROR_MESSAGE = t('This markdown component has an error.');

class Markdown extends React.PureComponent {
export class Markdown extends React.PureComponent {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

@stephenLYZ
Copy link
Copy Markdown
Member

LGTM !

@junlincc junlincc added #bug:performance Performance bugs dashboard:performance Related to Dashboard performance need:merge The PR is ready to be merged and removed #bug:performance Performance bugs labels Aug 25, 2021
@junlincc junlincc added test_priority:NA and removed need:merge The PR is ready to be merged labels Aug 25, 2021
Copy link
Copy Markdown
Member

@michael-s-molina michael-s-molina left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Copy Markdown

@graceguo-supercat graceguo-supercat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!!

@kgabryje kgabryje merged commit f422f1e into apache:master Aug 26, 2021
amitmiran137 pushed a commit to nielsen-oss/superset that referenced this pull request Aug 29, 2021
* upstream/master:
  fix: create example DB if needed (apache#16451)
  fix(native-filters): add handle undefined control value gracefully (apache#16468)
  Revert "chore: Changes the DatabaseSelector to use the new Select component (apache#16334)" (apache#16478)
  fix(explore): JS error for creating new metrics from columns (apache#16477)
  fix: queryEditor bug (apache#16452)
  docs: make code snippet usable with required imports (apache#16473)
  perf(dashboard): decouple redux props from dashboard components (apache#16421)
  perf(dashboard): reduce number of rerenders of Charts (apache#16444)
opus-42 pushed a commit to opus-42/incubator-superset that referenced this pull request Nov 14, 2021
…he#16421)

* perf(dashboard): decouple redux props from dashboard components

* Lint fix

* Dont make copy of filters object

* Remove unnecessary exports
QAlexBall pushed a commit to QAlexBall/superset that referenced this pull request Dec 28, 2021
…he#16421)

* perf(dashboard): decouple redux props from dashboard components

* Lint fix

* Dont make copy of filters object

* Remove unnecessary exports
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.4.0 First shipped in 1.4.0 labels Mar 13, 2024
qfcwell pushed a commit to qfcwell/superset that referenced this pull request May 12, 2026
…he#16421)

* perf(dashboard): decouple redux props from dashboard components

* Lint fix

* Dont make copy of filters object

* Remove unnecessary exports
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels dashboard:performance Related to Dashboard performance size/M test_priority:NA 🚢 1.4.0 First shipped in 1.4.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants