kgabryje opened a new pull request #14933: URL: https://github.com/apache/superset/pull/14933
### SUMMARY On dashboards with tabs, native filters that are out of scope of currently focused tab should be hidden. When user opens a dashboard with top level tabs, the active top level tab is used as an initially focused tab. For dashboards without top level tabs, initially every filter is considered to be in scope, until the user clicks on a tab. Hidden filters are moved to a new collapsible section in the native filters panel. In order to prevent expensive rerendering of native filters when they are moved in and out of collapsible, I used `react-reverse-portal` library, which utilizes React portals to perform reparenting without unmounting and remounting the child. In our case, it was essential, as each native filter sends a request to backend on mount - if a user had many native filters with narrow scopes, we'd risk having lots of redundant API calls on each tab change. Moreover, I optimized finding charts and tabs in scope for each native filter. Before, functions that traverse the whole component tree in search for charts and tabs were called every time a native filter was focused. Now, they are called once for each filter when the filters are initialized (and then again when filter's scope or dashboard layout changes). Potential improvements: 1. Show currently focused tab's name. I'd love some **design input** on that, as I'm not sure where to put tab's name on the filter panel and how to make it consistent with the rest of the design. I believe that would improve user experience a lot, as it might be confusing for the user why some filters are marked as "out of scope". 2. Currently for dashboards without top level tabs, we start with every filter being considered to be in scope. After a user focuses on some tab, there is no way to return to the initial state. It might be problematic in cases when there are charts not attached to any tab group - after some tab has been focused, we can never return to the state where a chart outside of any tab group is "in scope". ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF https://user-images.githubusercontent.com/15073128/120353413-f0f67780-c301-11eb-8f5f-e4b0b9fd2167.mov ### TESTING INSTRUCTIONS 0. Set `DASHBOARD_NATIVE_FILTERS` feature flag to True. 1. Create a dashboard with tabs (try both top level tabs + grid level tabs and only grid level tabs) and add some native filters with different scopes. 2. Verify that when you change tabs, filters that are out of scope of current tab are moved to collapsed section. 3. Verify that native filters are not rerendered - when you switch tabs, there shouldn't be any new api calls related to native filters. ### ADDITIONAL INFORMATION <!--- Check any relevant boxes with "x" --> <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue --> - [ ] Has associated issue: - [ ] 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 - [ ] Introduces new feature or API - [ ] Removes existing feature or API CC: @junlincc @villebro -- 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]
