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(native-filters): improve native filter modal form performance #21821

Merged
merged 3 commits into from
Oct 30, 2022

Conversation

stephenLYZ
Copy link
Member

@stephenLYZ stephenLYZ commented Oct 15, 2022

SUMMARY

Improve native filter modal performance by adding memo or reduce rendering.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Test case : 30+ native filters, 20+ charts

- before after
re-rendering(counts) 538 4
opening time 15s 300 ms
flame graph image image

before

2022-10-16.2.23.33.mov

after

2022-10-16.2.27.48.mov

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

  • Has associated issue: perf(dashboard): Improve performance of the native filters config modal #21147
  • 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

@stephenLYZ stephenLYZ changed the title perf(native-filters): improve native filter modal performance perf(native-filters): improve native filter modal form performance Oct 15, 2022
@codecov
Copy link

codecov bot commented Oct 16, 2022

Codecov Report

Merging #21821 (4a8d89e) into master (f58227a) will increase coverage by 0.04%.
The diff coverage is 60.46%.

@@            Coverage Diff             @@
##           master   #21821      +/-   ##
==========================================
+ Coverage   66.84%   66.89%   +0.04%     
==========================================
  Files        1800     1805       +5     
  Lines       68951    69059     +108     
  Branches     7335     7372      +37     
==========================================
+ Hits        46092    46197     +105     
+ Misses      20965    20952      -13     
- Partials     1894     1910      +16     
Flag Coverage Δ
javascript 53.29% <60.46%> (+0.13%) ⬆️

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

Impacted Files Coverage Δ
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx 64.43% <54.28%> (+1.38%) ⬆️
...ters/FiltersConfigModal/FiltersConfigForm/utils.ts 77.77% <75.00%> (-4.58%) ⬇️
...Filters/FiltersConfigModal/FilterConfigurePane.tsx 100.00% <100.00%> (ø)
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx 59.50% <100.00%> (ø)
...ontrols/DateFilterControl/utils/dateFilterUtils.ts 39.39% <0.00%> (-60.61%) ⬇️
...nd/src/dashboard/components/gridComponents/Row.jsx 51.21% <0.00%> (-23.79%) ⬇️
.../CRUD/data/database/DatabaseModal/ExtraOptions.tsx 75.00% <0.00%> (-11.96%) ⬇️
.../explore/exploreUtils/getParsedExploreURLParams.ts 83.33% <0.00%> (-8.10%) ⬇️
...nts/controls/DateFilterControl/DateFilterLabel.tsx 35.71% <0.00%> (-5.70%) ⬇️
...iews/CRUD/data/dataset/AddDataset/Header/index.tsx 81.81% <0.00%> (-5.69%) ⬇️
... and 57 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

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.

Great work @stephenLYZ! Really improved the performance. Code LGTM.

During the tests, I found a small issue that may have been there the whole time. These are the steps to reproduce it:

  • Select Scoping in the first filter
  • Navigate to the second filter
  • Go back to the first filter
  • Select Settings
  • You will see that the panels are collapsed and you need to click twice to open them
Screen.Recording.2022-10-17.at.6.34.33.PM.mov

@michael-s-molina
Copy link
Member

michael-s-molina commented Oct 17, 2022

@jinghua-qa I tested the module but we'll definitely need your help here. Can you please book some time to test this PR?

@stephenLYZ
Copy link
Member Author

/testenv up

@github-actions
Copy link
Contributor

@stephenLYZ Ephemeral environment spinning up at http://34.210.29.66:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

Copy link
Member

@geido geido left a comment

Choose a reason for hiding this comment

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

Code LGTM. Looking for QA approval.

Copy link
Member

@zhaoyongjie zhaoyongjie left a comment

Choose a reason for hiding this comment

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

Test in my local. codes LGTM.

It's my first time reading the Filter Dependence Tree codes, IMO, the data structure of dependencyMap should be improved. Currently, we use a hashmap to maintain a hierarchical data structure, for instance, the type of buildDependencyMap is Map<string, string[]>, so the hasCircularDependency and getDependencySuggestion have to make recursion getting results.

const getInitialFilterOrder = () => Object.keys(filterConfigMap);

// State for tracking the re-ordering of filters
const [orderedFilters, setOrderedFilters] = useState<string[]>(
getInitialFilterOrder(),
);

// State for rendered filter to improve performance
const [renderedFilters, setRenderedFilters] = useState<string[]>([
Copy link
Member

Choose a reason for hiding this comment

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

nits: use Set for this case.

const [renderedFilters, setRenderedFilters] = useState<Set[]>([

@stephenLYZ
Copy link
Member Author

@jinghua-qa Can you please help to test this PR?

@stephenLYZ stephenLYZ merged commit bf00193 into apache:master Oct 30, 2022
@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.1.0 and removed 🚢 2.1.3 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 need:qa-review Requires QA review size/L 🚢 2.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants