...

• The filter bar contains one or more tabs.

• Each tab consists of an icon and a title (e.g. Employees).

• Once a filter has been applied, a blue dot shown on the left side of the relevant tab.

...

• stick to the left side of the page, beside the main workspace.,

• have a fixed width.,

• always fill the vertical space, from beneath the VerinTop to the bottom of the page.,

• have the selectable group of tabs aligned to the top of the bar.

...

Interaction

• Clicking a tab selects :

  • Selects it,

  unselecting

  • unselects any other tab

  .

  • ,

  If the content

  • when panel is pinned

  : shows

  • - updates the

  relevant

  • content

  in

  • of the

  content panel.If the content

  • panel to correspond with the selected tab,

  • when panel is unpinned

  :

  • - opens the corresponding panel. When the

  content

  • panel

  in overlay mode, hiding everything behind

  • is open, clicking the tab closes it.

The Content Panel

Structure

...

Interaction

• Clicking the pin icon switches :

  • Toggles the icon state between pinned and unpinned

  states

  • .

  • When unpinned, the content of the page stretches to its full width, being partially hidden by the filter panel.

  • When pinned, the content of the page narrows to be shown next to the panel, so nothing is hidden.

• Clicking the help icon opens a relevant help page in a new browser window.

• Changing the content of the panel enables the Apply / Apply All Filters, Cancel, and Clear buttons, where they exist.

• Clicking the Apply / Apply All Filters button:

  • applies the filter (or filters).

  • disables the button.

  • enables the Clear button, where it exists.

  • shows a blue indicator next to the relevant tab (or tabs) on the filter bar.

  • adds a chicklet (or chicklets) to the chicklet area (see The Chicklet Area below), unless otherwise specified.

  • If unpinned, closes the content panel.

• Clicking the Cancelbutton:

  • cancels any unapplied changes made to the content.

  • disables the Apply / Apply All Filters and Cancel buttons.

  • If unpinned, closes the content panel.

  • If pinned, sets the focus to the first field of the content panel.

• Clicking the Clear button:

  • Resets all fields in the content panel to their default states (either blank or with default selections).
    (The Clear button is only shown if Chicklets are not being used).

  • Sets the focus to the first field of the content panel.

• Clicking outside the content panel:

  • The content panel closes if:

    • the panel is unpinned. (When pinned, the panel always stays open).

    • no unapplied changes have been made.

  • If changes have been made to the content but have not been applied, a Popup may appear, allowing the user to either:

    • close the panel without applying the filter, or

    • continue editing.

...

• Chicklets are indicators of the currently applied filters.

• There are two types of chicklets:

  • Regular.Deleting these chicklets will clear the corresponding filters.

  • Mandatory.Each mandatory chicklet will have a default value.Deleting a mandatory chicklet will show an empty state, instructing the user to apply the mandatory filters Amandatory chicklets cannot be deleted, only be reset to its default (see below).

• In rare cases, a filter pane can be used without chicklets. In this case, a Clear button should be included in the content panel.

...

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

• Each chicklet contains:

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

  • chicklet text.

    • For a single selection, the selected value will be shown (e.g. Last 24 hours).

    • For multiple selections, it can show 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 Close a close icon button (for regular chicklets) or a reset icon button (Xfor mandatory chicklets), shown on hover.

  In some cases, an additional action will appear:

• If no mandatory chicklets were defined, a Clear All icon button will appear after the last chicklet, allowing users to clear all filters.

• If at least one mandatory chicklet was defined,

  and the user changed its default value or added more chicklets,

  a Reset to default icon button will appear

  . Clicking the button will reset all mandatory chicklets to their default values and remove all other chicklets

  after the last chicklet.

• The Reset to default button will be disabled by default. Changing the default value or adding more chicklets will enable the button.

...

Placement and Positioning

• The chicklet area appears in the main workspace, above the corresponding data.

• When no filters are applied, the chicklet area will be hidden. Adding the first chicklet will push all the content down, below the chicklet area.

• Mandatory chicklets will be the first items. Other chicklets will appear in the order they were added.

• In case the set of chicklets (including the Clear All button) exceeds the width of the chicklet area, they will wrap on to the next row, pushing the page content down. There can be up to three rows: beyond that point, a scrollbar will appear.

Interaction

Hovering a chicklet

• Regular chicklet - shows an X icon inside the chicklet, allowing the user to remove it.

• Mandatory chicklet - shows a reset icon inside the chicklet, allowing the user to reset the chicklet to its default value.

Clicking a chicklet

• When the content panel is pinned - shows the relevant content in the content panel.

• When unpinned - opens the relevant content panel.

Hovering a chicklet will show an X icon button, allowing the user to remove it.

...

Clicking the chicklet x icon

• removes the chicklet. Any remaining chicklets will move to close the gap, if exists,

• 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. Any remaining chicklets will move to close the gap.

• In case of a mandatory chicklet:

  • switches the chicklet to a “ghost” state.

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

...

Clicking the chicklet reset icon

• resets the chicklet to its default value,

• applies the corresponding filter.

Clicking the Clear all button

• shows a confirmation dialog (if needed),

• removes all chicklets,

• removes the Clear all button,

• clears all filters,

• removes the blue indicator from all tabs.

Clicking the Reset to default button

• shows a confirmation dialog (optionalif needed).,

• removes all regular chicklets, except for “ghost” chicklets, where they exist.

• clears all filters.

• clears

• resets all mandatory chicklets to their default values,

• disables the Reset to default button,

• applies the default filter,

• removes the blue indicator from all tabs on the filter barexcept for mandatory filters.

Note: in complex scenarios, behaviour may vary (see Common Examples below).

...