EUI: Filter Flyout modifications

[LibbyUX]

EUI: Filter Flyout modifications

2023-05-02_13-45-31.mp4

• The filter flyout must be responsive to varying breakpoints.
• The filter flyout must scroll vertically.
• The filter flyout needs new headers for each filter section.
• The filter flyout needs information icons for hover cards after each section header. Content for informational hover cards is still being written as of March 28, 2023, but the structure of the UI component can be found elsewhere in the Figma design file. Keep in mind that the text will change.
• The filters flyout has a new Biological Structure section. This section allows users to search for specific AS, CT, and B. See more in the Biological Structures section below.
• The filters flyout needs updated reset & apply filters buttons at the bottom of the component. These buttons are always visible when the user scrolls through the filter content (see above video).

Biological Structures section details

• This section needs single-select and multi-select segmented buttons.
• This section is similar to the ASCT+B Reporter Search Structures component and business logic.
• Biomarkers need to be labeled in the list by their specific biomarker category, such as gene biomarker, protein biomarker, metabolite, proteoform biomarker, and lipid biomarker.
• This section needs to have a search input that filters down the list based on the user's text input.
• By default, the single-select button "Select Biological Structures" is selected when the user opens the filter flyout. Users make selections with this list.
• When the user makes a selection by using the checkbox pattern, their selections begin to collect in a separate listing. They may view their current selections by choosing the single-select button "View Current Selections." Clicking this button switches the list to their selections.
• Select All button selects all available options.
• Deselect All button removes all available options.
• Users may remove individual selections by deselecting an AS, CT, or B's checkbox.

To Do

• Implement new filters flyout.

Resources

• Figma design file: EUI PBI zone
• Figma design file: EUI filters flyout in the interface example