Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Aug 26, 2021

Conversation

kgabryje
Copy link
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

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
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!

@@ -152,7 +152,7 @@ const FilterFocusHighlight = React.forwardRef(
},
);

class ChartHolder extends React.Component {
export class ChartHolder extends React.Component {
Copy link
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?

@@ -77,7 +78,7 @@ Click here to edit [markdown](https://bit.ly/1dQOfRK)`;

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

class Markdown extends React.PureComponent {
export class Markdown extends React.PureComponent {
Copy link
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
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
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

@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 labels Mar 13, 2024
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants