krmmkr opened a new pull request, #44216:
URL: https://github.com/apache/superset/pull/44216
Introduces the Filter Card layout element to the dashboard builder, allowing
native filters to be placed directly on the dashboard canvas in rows or columns.
Key Changes:
- Layout & Component Types: Registered FILTER_TYPE in grid componentLookup,
isValidChild, isDashboardEmpty, newComponentFactory, componentIsResizable, and
getDetailedComponentWidth.
- Canvas Filter Component (FilterHolder): Connects native filters with Redux
dataMask, supporting instant and manual apply modes, in-canvas staging, and
label/button placement configuration.
- Grid & Resizing: Supports vertical and horizontal resizing in ROW and
COLUMN containers with dedicated bottom drag handles and isolated DnD
dragSourceRef on HoverMenu.
- FilterBar Synchronization: Excludes canvas-bound filters from FilterBar
rendering while preserving all dividers, 'Clear all' lifecycle behavior, and
required filter gating.
- State Sanitization: Strips UI-only validateStatus before dispatching to
Redux.
- Feature Flag: Gated behind DASHBOARD_NATIVE_FILTERS_ON_CANVAS (disabled by
default in development lifecycle).
- Tests: Added comprehensive unit test coverage across FilterHolder,
useFilterControlFactory, NewFilterComponent, BuilderComponentPane, and resizing
utilities.
### SUMMARY
This PR introduces the **Filter Card** dashboard layout element, allowing
native filters to be placed directly on the dashboard canvas alongside charts,
inside rows, columns, or tabs.
#### Key Capabilities & Architecture:
1. **Canvas Filter Card (`FilterHolder`)**:
- Connects to native filters and `dataMask` Redux stores.
- Supports both `Instant` and `Manual (Button)` apply modes with
in-canvas staging.
- Configurable label positioning (`Top` vs `Left`) and button placement
(`Bottom`, `Right Inline`, `Right Stacked`).
2. **Grid Layout & Resizing**:
- Registered `FILTER` in layout utilities (`componentIsResizable`,
`getDetailedComponentWidth`, `isValidChild`, `isDashboardEmpty`,
`newComponentFactory`).
- Supports vertical height resizing in `COLUMN` containers and dual-axis
resizing in `ROW` containers.
- Isolates HTML5 DnD drag handle to `HoverMenu` to prevent drag hijacking
of resize handles.
3. **FilterBar Synchronization & Lifecycle Integrity**:
- Canvas-bound filters are excluded from FilterBar rendering to avoid
visual duplication, while all `<FilterDivider>` elements are preserved.
- "Clear all" clears data masks across both FilterBar and canvas filters.
- Required initial filters bound to canvas properly gate dashboard
rendering until selected.
4. **State Sanitization**:
- UI-only `validateStatus` is sanitized before reaching Redux.
5. **Feature Flag**:
- Gated behind `DASHBOARD_NATIVE_FILTERS_ON_CANVAS` (default `False`,
lifecycle `development`).
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
- **Before**: Native filters could only be placed in the FilterBar (sidebar
or topbar).
- **After**: A new "Filter Card" component in the builder pane allows
dropping native filters directly onto canvas rows and columns.
### ADDITIONAL INFORMATION
- [X] Has associated issue: 41498
- [X] Required feature flags: DASHBOARD_NATIVE_FILTERS_ON_CANVAS
- [ ] 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
- [ ] 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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
