lilykuang opened a new issue, #26183: URL: https://github.com/apache/superset/issues/26183
## [SIP] Proposal for Alert & Report Modal with Dashboard Filters and Tabs ### Motivation We've identified a recurring request for enhanced capabilities in alert and report configurations specifically, the inclusion of more granular filters and tab details. To address this, we are considering updates to the user interface for creating alerts and reports. These updates are aimed at incorporating additional filter and tab options, and reorganizing field groupings to heighten modal clarity and simplify the setup process for users. ### Proposed Change For an overview of the proposed enhancements to Alert and Report Modal, please refer to the design mock-ups in [this Superset discussion](https://github.com/apache/superset/discussions/25729). Additionally, the proof of concept (POC) can be viewed in [this pull request](https://github.com/apache/superset/pull/26141). 1. **Refined User Interface:** We're addressing concerns of clutter in the current modal by introducing a design that emphasizes simplicity and order. The new layout will dispense with superfluous elements to reduce user confusion and streamline interaction. 2. **Intuitive Configuration Sequence:** The setup process will be restructured into a clear, step-by-step sequence. By guiding users through each phase methodically, we aim to simplify the creation of alerts and reports, thereby minimizing potential errors. 3. **Enhancements and New Functionalities:** - **Dashboard-Imported Filters/Tabs for Customization:** The latest system update introduces a variety of filters and tabs, all imported from the dashboard. This new functionality allows users to effectively customize their alerts and reports to meet specific requirements, enhancing the adaptability and precision of data handling and reporting. - **Provision for Test Report Deployment:** This new feature enables the dispatch of test reports, a crucial tool for validating report configurations. It ensures reliable and accurate delivery of these reports, operating independently of the standard report scheduling process. ### New or Changed Public Interfaces - **Dashboard State Management**: Upon user interaction with the dashboard dropdown, the **`useDashboard`** hook will be utilized to access the selected dashboard. New methods will be implemented to update the **`dataMask`** and **`nativeFilters`** states in the Redux store. This enhancement is aimed at facilitating the integration of dashboard-specific native filters and tab selections using established hooks like **`useNativeFiltersDataMask`** and **`useFilters`**. This strategy is designed to ensure a seamless and efficient integration within the existing system's framework. - **Native Filter Dropdown Integration:** Implement a searchable dropdown within this modal, exclusively listing the names of native filters imported from the dashboard. This design is crafted to ensure users have access to and can utilize only the pre-established native filters specific to the dashboard, thereby simplifying filter selection and maintaining a streamlined user experience. Additionally, the dropdown will remain hidden in cases where the dashboard does not possess any native filters, ensuring a clean and uncluttered interface. - **Enhanced Tab Selector:** Improve the tab selection interface by analyzing **`position_data`** to list all tab titles. We will develop a [utility function](https://github.com/apache/superset/blob/9476ec14671f13045998d1b3a291387574f2634b/superset-frontend/src/features/alerts/components/DashboardFiltersAndTabs.tsx#L115-L131): https://github.com/apache/superset/blob/9476ec14671f13045998d1b3a291387574f2634b/superset-frontend/src/features/alerts/components/DashboardFiltersAndTabs.tsx#L115-L131 It is designed to facilitate effortless navigation through the dashboard's tree-structured layout This function will provide users with a straightforward and intuitive way to select tabs, as exemplified in the given structure: ``` { ... ROOT_ID: { children: ['TABS-ALL'], id: 'ROOT_ID', type: 'ROOT', }, 'TAB-A': { children: ['ROW-03', 'ROW-04'], id: 'TAB-A', meta: { text: 'Overview', }, parents: ['ROOT_ID', 'TABS-ALL'], type: 'TAB', }, 'TAB-B': { children: ['ROW-01', 'ROW-02'], id: 'TAB-B', meta: { text: 'Exploratory', }, parents: ['ROOT_ID', 'TABS-ALL'], type: 'TAB', }, 'TABS-ALL': { children: ['TAB-A', 'TAB-B'], id: 'TABS-ALL', meta: {}, parents: ['ROOT_ID'], type: 'TABS', }, ... }; ``` - **Dynamic Permalink Generation:** Utilizing existing functionalities in [report/execute.py](https://github.com/apache/superset/blob/4f004048054776c3074dfa5b4d5fd684cced47f1/superset/commands/report/execute.py#L175-L180) https://github.com/apache/superset/blob/4f004048054776c3074dfa5b4d5fd684cced47f1/superset/commands/report/execute.py#L175-L180 to dynamically generate permalinks. By saving the **`dataMask`** and **`activeTabs`** in the **`extra`** JSON field of the **`reportSchedule`** model, the system can create a permalink that encapsulates the current state of the dashboard, including selected filters and selected tabs. - **Editing Modal Permalink Handling:** In the editing modal, **`extra`** JSON field will be employed to access the saved filters and tabs associated with the permalinks. In scenarios involving pre-existing alerts and reports, the system will default to no selected filter, and in instances where the dashboard includes tabs, it will automatically select the first tab(s). Importantly, if the dashboard does not feature any tabs, the tab dropdown will be hidden. This design is intended to pre-populate fields with existing configurations, thereby enhancing and simplifying the user's editing experience. ### Questions You Might Have **Q:** How do we handle a large number of filters? **A:** To manage a large number of filters effectively, the interface includes a searchable dropdown for the filters that are present on the dashboard. This allows users to quickly find and apply the filters they need. Additionally, if users have numerous filters, they have the option to apply them individually to tailor their search or view more precisely. **Q:** Some filters are only applicable to some tabs, which can make the setup complex. Do we show only the filter applicable to the default tab, or how do we handle this alongside the tab selector feature? **A:** We can add an informative message to the user if their filter(s) are not applicable to the tab they have selected for the report. Any selected filters that aren’t applicable to the tab would not have any impact on the report. **Q:** How should we handle filters that are dependent on the selection of another filter? What would be the best approach to reflect this interdependent behavior in our system? **A:** If filters values are dependent on another filter, if that filter is selected in reports, we can filter the dependent filter values accordingly. ### Rejected Alternatives 1. **Adding the Filters and Tabs to the Existing UI**: - **Pros**: - Direct integration with the current interface could make the feature more accessible and visible to users who are already familiar with the UI. - It could provide a more seamless user experience since users wouldn't have to navigate away from the main interface to use the new feature. - **Cons**: - If the existing UI is already cluttered, adding more elements could overwhelm the users and make the interface less intuitive. 2. **Creating a Permalink on the Dashboard and Copy/Pasting into the Report Modal**: - **Pros**: - This approach avoids further cluttering the existing UI, keeping it more streamlined. - It could be easier to implement from a technical standpoint, as it doesn't require major changes to the existing UI layout. - **Cons**: - This method might be less intuitive for users, as it requires multiple steps and navigation between different parts of the software. - Users may find it cumbersome to switch back and forth between creating a permalink and pasting it into a report. -- 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]
