[GitHub] [superset] justinpark opened a new pull request, #20877: perf(sqllab): Rendering perf improvement using immutable state

[GitBox]

justinpark opened a new pull request, #20877:
URL: https://github.com/apache/superset/pull/20877

   ### SUMMARY
   
   The main rendering in SqlLab is managed by the `queryEditors` state from 
redux(state machine).
   Each queryEditor state has been updated whenever an editor configuration has 
updated.
   
   Since most components observes entire queryEditor state not specific 
attributes, any queryEditor updates trigger multiple repainting even if no 
visual changes impacted.
   
   For example, when a user types any single character in the ace(sql) editor, 
it triggers the update for `selectedText` value in the active queryEditor 
state. This single change will trigger the following components repainted 
(though this change won't impact the left and bottom panels at all)
   
   <img width="1057" alt="Screen_Shot_2022-07-26_at_3_10_16_PM" 
src="https://user-images.githubusercontent.com/1392866/181122038-84caef40-9f52-4bdd-83c6-1d473a7c011c.png";>
   
   This unrelated repainting job causes the performance delay especially when 
table list is humongous.
   
   <img width="1055" alt="Screen_Shot_2022-07-26_at_3_24_05_PM" 
src="https://user-images.githubusercontent.com/1392866/181122746-8f5b4ae4-6d04-4c25-8289-bbde0e668bc3.png";>
   
   The delay can be found in the following performance analysis due to the 
unnecessary repainting/redux post processes.
   
   <img width="1786" alt="Screen_Shot_2022-07-25_at_4_08_35_PM" 
src="https://user-images.githubusercontent.com/1392866/181123341-7d082ac9-302d-4a32-8219-bade95846908.png";>
   
   This commit fixes this performance issue by optimizing observers in each 
component to subscribe only related items.
   To minimize the existing persistence state, this commit keeps the existing 
`queryEditors` state but make it immutable during the tab is active and only 
updates when the tab is switched. It introduces `unsavedQueryEditor` state 
which stores all these active changes.
   
   With this update, the page rendering performance improved 3.5x faster(from 
4.5s to 1.3s) and verified all unnecessary tasks cleaned.
   
   <img width="1816" alt="Screen Shot 2022-07-25 at 4 18 45 PM" 
src="https://user-images.githubusercontent.com/1392866/181124253-e9d4e4d7-5ea6-4c60-b328-4786277e8583.png";>
   
   ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
   
   Before (4.5s):
   
   
https://user-images.githubusercontent.com/1392866/181118443-f8949bc1-1d07-4dcb-8a65-aec1ff024fee.mov
   
   After (1.3s):
   
   <img width="1814" alt="Screen_Shot_2022-07-25_at_4_19_14_PM" 
src="https://user-images.githubusercontent.com/1392866/181118409-b876d22d-2402-4a1f-9634-4e99c1473ca3.png";>
   
   
   ### TESTING INSTRUCTIONS
   
   1. Go to SqlLab
   2. Choose a database and a schema that includes a large set of table list
   3. Open chrome console > Performance tab
   4. Select Caption settings on right menu
   5. Change CPU throttling to 6x slowdown
   6. type a string in the sql editor and then watch the refresh icon on the 
left panel (it will blink during repainting)
   
   ### ADDITIONAL INFORMATION
   - [ ] Has associated issue:
   - [ ] Required feature flags:
   - [ ] Changes UI
   - [ ] Includes DB Migration (follow approval process in 
[SIP-59](https://github.com/apache/superset/issues/13351))
     - [ ] Migration is atomic, supports rollback & is backwards-compatible
     - [ ] Confirm DB migration upgrade and downgrade tested
     - [ ] Runtime estimates and downtime expectations provided
   - [x] Introduces new feature or API
   - [x] Removes existing feature or API
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org