kgabryje opened a new pull request #12257:
URL: https://github.com/apache/incubator-superset/pull/12257


   ### SUMMARY
   This PR fixes an issue described in a comment 
https://github.com/apache/incubator-superset/issues/11968#issuecomment-747945240
   I wrapped table components in React.memo and removed unnecessary rerenders 
of copy to clipboard button.
   However, the biggest change is adding virtualization (react-window) for 
react-table, which improves the performance drastically for tables with many 
rows.
   However, due to how react-window works (which is wrapping row components in 
2 divs) I had to stop using `<table>` and other table-related html tags in 
favour of divs, since the divs from `react-window` were breaking the table. 
Also, I needed to add a react-table plugin `useBlockLayout`, which requires the 
table cells to have fixed widths. The result is that we no longer benefit from 
cell widths being calculated by the browser, which is a huge bummer. I tried a 
few hacks to keep `<table>` tags (like wrapping divs generated by react-table 
in `<td>`), but all of them generated layout issues.
   I'd appreciate any suggestions on how I could improve this PR, especially 
when it comes to solving the issues with table layout!
   CC: @rusackas, @nytai, @ktmud 
   
   ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
   The changes are related only to the table.
   Before - super slow performance:
   
https://user-images.githubusercontent.com/15073128/103567566-5580e800-4ec4-11eb-8cfd-7ab4f82587e2.mov
   
   After:
   
https://user-images.githubusercontent.com/15073128/103567676-84975980-4ec4-11eb-8e51-c8541073be05.mov
   
   ### TEST PLAN
   <!--- What steps should be taken to verify the changes -->
   
   ### ADDITIONAL INFORMATION
   <!--- Check any relevant boxes with "x" -->
   <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
   - [ ] Has associated issue:
   - [ ] Changes UI
   - [ ] Requires DB Migration.
   - [ ] Confirm DB Migration upgrade and downgrade tested.
   - [ ] Introduces new feature or API
   - [ ] Removes existing feature or API
   
   Closes 
https://github.com/apache/incubator-superset/issues/11968#issuecomment-747945240


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

For queries about this service, please contact Infrastructure at:
[email protected]



---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to