Lead:  Liav Nadler Asaf Ben-Oved  

...

A filter pane is a panel located on the left side of a page, allowing users to filter the presented data by a variety of parameters

...

Image Added

Basic Flow

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

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

• The filter panel has two states:

  • Unpinned (default) - the panel overlays the content

  • Pinned - the panel pushes the content so nothing is hidden

• In some cases, active filters are represented by chicklets, appearing at the top of the data set (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 will affect child filters, but applying a child filter will not affect parents filters (less common)

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

• 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 the related workspaces

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

...

Default State

• In most cases, no tabs are selected by default

...

• The filter panel contains the following elements:

  • At the top:

    • A title, similar to the title on the filter bar

    • A pin icon, allowing the user to switch between pinned and unpinned states

    • A help icon (optional)

  • The area under the title is the main content area of the panel. See content below

  • The bottom of the panel may contain the following elements:

    • An Apply button:

      • This button is mandatory, unless the panel contains only one possible selection

      • The button is disabled until the content of the panel is changed

    • An indicator showing the number of selected items (e.g. 4 queues selected)

    • A Cancel button:

      • The button is disabled until the content of the panel is changed

    • A Reset button (TBD)

      • The button is disabled until the filter was applied

...

Structure

• Each chicklet contains:

  • An icon, similar to the relevant icon on the filter bar

  • A label, showing the filter value (e.g. Last 24 hours). In case of multiple selection the chicklet will show the name of the filter, followed by the number of items 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

...