perf(native-filters): improve native filter modal form performance #21821

stephenLYZ · 2022-10-15T18:19:42Z

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

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

codecov · 2022-10-16T10:08:55Z

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

michael-s-molina

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 · 2022-10-17T21:42:38Z

@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 · 2022-10-21T03:14:41Z

/testenv up

github-actions · 2022-10-21T03:17:43Z

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

geido

Code LGTM. Looking for QA approval.

zhaoyongjie

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.

zhaoyongjie · 2022-10-24T06:47:24Z

...et-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx

  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[]>([


nits: use Set for this case.

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

stephenLYZ · 2022-10-26T12:58:16Z

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

github-actions · 2022-10-30T15:56:10Z

Ephemeral environment shutdown and build artifacts deleted.

perf(native-filters): improve native filter modal performance

c4a66cc

pull-request-size bot added the size/L label Oct 15, 2022

fix lint

431bbbe

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

fix test

4a8d89e

stephenLYZ requested review from michael-s-molina, jinghua-qa, kgabryje and villebro October 16, 2022 14:01

stephenLYZ added the need:qa-review Requires QA review label Oct 17, 2022

michael-s-molina reviewed Oct 17, 2022

View reviewed changes

stephenLYZ requested a review from zhaoyongjie October 19, 2022 14:43

geido approved these changes Oct 21, 2022

View reviewed changes

zhaoyongjie approved these changes Oct 24, 2022

View reviewed changes

stephenLYZ merged commit bf00193 into apache:master Oct 30, 2022

mistercrunch added the 🚢 2.1.3 label Feb 18, 2024

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf(native-filters): improve native filter modal form performance #21821

perf(native-filters): improve native filter modal form performance #21821

stephenLYZ commented Oct 15, 2022 •

edited

Loading

codecov bot commented Oct 16, 2022

michael-s-molina left a comment

michael-s-molina commented Oct 17, 2022 •

edited

Loading

stephenLYZ commented Oct 21, 2022

github-actions bot commented Oct 21, 2022

geido left a comment

zhaoyongjie left a comment •

edited

Loading

zhaoyongjie Oct 24, 2022

stephenLYZ commented Oct 26, 2022

github-actions bot commented Oct 30, 2022

perf(native-filters): improve native filter modal form performance #21821

perf(native-filters): improve native filter modal form performance #21821

Conversation

stephenLYZ commented Oct 15, 2022 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before

after

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Oct 16, 2022

Codecov Report

michael-s-molina left a comment

Choose a reason for hiding this comment

michael-s-molina commented Oct 17, 2022 • edited Loading

stephenLYZ commented Oct 21, 2022

github-actions bot commented Oct 21, 2022

geido left a comment

Choose a reason for hiding this comment

zhaoyongjie left a comment • edited Loading

Choose a reason for hiding this comment

zhaoyongjie Oct 24, 2022

Choose a reason for hiding this comment

stephenLYZ commented Oct 26, 2022

github-actions bot commented Oct 30, 2022

stephenLYZ commented Oct 15, 2022 •

edited

Loading

michael-s-molina commented Oct 17, 2022 •

edited

Loading

zhaoyongjie left a comment •

edited

Loading