...

• The filter pane contains two areas: the filter bar and the content panel.

• On relevant pages, the filter bar is always shown.

• The content panel has two states:

  • Unpinned (default) - the panel overlays the content of the page, hiding everything behind it.

  • Pinned - the panel is shown next to the content of the page so nothing is hidden.

• Active filters are represented by chicklets, appearing at the top of the presented data (see below).

• A set of filters can behave in one of three ways:

  • Faceted - the filters are sorted by importance or popularity. Applying a filter affects the number of results shown on other filters (common).

  • Funnel - the filters are ordered by hierarchy. Applying a parent filter affects child filters, but applying a child filter does not affect parent filters (less common).

  • Independent - applying a filter does not affect other filters (not recommended).

• The filter pane can operate in one of two modes:

  • Discrete - the user applies the set of filters on each content content panel separately, by clicking the Apply button (common).
    An exception is a case where there is only one possible selection in the tab. In this case, the Apply button will be hidden, and performing that single selection will apply the filter and close the filter pane.

  • Combined - the user can set filters on multiple tabs, and then click the Apply All Filters button, which appears on each tab.

• An application may have a similar set of filters across related workspaces. In this case, applying a filter on one workspace will affect the same filter on all related workspaces.

• For more information see The Filter Bar, The Content Panel and The Chicklet Area below.

...

Opening a panel containing a form will set the focus to the first field of the form.

The Chicklet Area

Image RemovedImage Added

Fix chicklets width, crop the image to show only the tabs and the chicklet area, fix title size

General Guidelines

• Chicklets give the user an indication that the data is currently filtered by one or more filters.

• There are two types of chicklets:

  • Regular - deleting these chicklets will clear the corresponding filters.

  • Mandatory - deleting these chicklets will show an empty state, instructing the user to apply the mandatory filters (see below).

Image Modified

Fix chicklets width and title size

• In Discrete mode (see above), in most cases clicking Apply in the content panel creates a single chicklet. However, when the panel contains several distinct parameters, applying the filter may create several chicklets.

• In Combined mode, clicking Apply All Filters may create a single or multiple chicklets, depending on the number of filters that were changed.

...

State	Image	Comments
Regular	Image Modified
Hover	Image Modified
Active / Selected	Image Modified	Only one chicklet can be selected at any given time
Ghost	Image Added
Ghost, Hover	Image Added
Ghost, Active	<TBD>
Focused	Image Modified
Focused, Hover	Image Modified
Focused, Active	Image Modified

Fix chicklets width, add “ghost” chicklet

Structure

• Each chicklet contains:

  • an icon, which is a smaller version of the corresponding icon on the filter bar,

  • the chicklet text:

    • In case of a single selection - the selected value (e.g. “Last 24 hours”).

    • In case of a multiple selection - either the selected values, separated by commas (e.g. “APAC, EMEA”), or, if the text exceeds the maximum width of the chicklet, the name of the filter followed by the number of values in brackets (e.g. “Interactions (3)”).
      In this case, hovering the chicklet will show a tooltip with the full list of items,

  • a closing icon (x, showing on hover), allowing the user to clear the filter.

• The width of a chicklet will depend on its content, with a minimum and maximum limits.

• If the content of the chicklet exceeds the maximum width, the text will be truncated, ending with an ellipsis (…). In this case, hovering the chicklet will show a tooltip with the full text.

• A Clear All icon button will appear after the right chicklet.

...

• clears the corresponding filter,

• clears the blue indicator from the corresponding tab on the filter bar (unless there are more items related to that filter).

• In case of a regular chicklet - removes the chicklet, moving remaining chicklets to take the place of the chicklet that was removed.

• In case of a mandatory chicklet:

  • switches the chicklet to “ghost” state,

  • shows an empty state, instructing the user to add the mandatory filter (see above).

• If all chicklets were removed, an empty state will appear.

Clicking the Clear All button:

• shows a confirmation dialog (optional),

• removes all chicklets, except for “ghost” chicklets if, exists,

• clears all filters,

• clears the blue indicator from all tabs on the filter bar,

• Shows an empty state.

...