[DES] Filter Block

[ehynd]

Problem (Why)

Legacy UI has a flow for adding a filter panel - we need a filter block within the new UI. For the moment, this will be one block in the blocks menu. The right side "block settings" will then show the different options for the filter.

The block settings should match the same format as for all the visualizations. Under "Tools" display the text "No tools available".

Reference

Legacy settings for each filter type:

Checklist -

Dropdown -

Multi select - this is nearly the same as dropdown, but the selected values are displayed in the filter bar.

Slider -

Task Suggestions (What)

We are focused on the following four filter types and elements that each one needs.

• Checklist:
  -Select Frame
  -Select Column
  -Checkbox for "Searchable"
  -Filter Type: Default or Dynamic
  -Checkbox for Multiselect
  -Checkbox for "Restriction". Should default to not checked. When checked, this should open up two multi select
  dropdowns for "Restrict Filter to these Frames" and "Restrict Filter to these Blocks". The multi select will show
  available frames and blocks.
  -Unfilter button

• Dropdown:
  -Select Frame
  -Select Column
  -Checkbox for "Searchable"
  -Text input field for "Displayed Filter Label"
  -Filter Type: Default or Dynamic
  -Checkbox for Multiselect
  -Checkbox for "Restriction". Should default to not checked. When checked, this should open up two multi select
  dropdowns for "Restrict Filter to these Frames" and "Restrict Filter to these Blocks". The multi select will show
  available frames and blocks.
  -Unfilter button

• Multiselect:
  -Select Frame
  -Select Column
  -Checkbox for "Searchable"
  -Filter Type: Default or Dynamic
  -Checkbox for "Restriction". Should default to not checked. When checked, this should open up two multi select
  dropdowns for "Restrict Filter to these Frames" and "Restrict Filter to these Blocks". The multi select will show
  available frames and blocks.
  -Unfilter button

• Slider:
  -Select Frame
  -Select Column
  -Text input field for numbers for "Select Slider Sensitivity"
  -Filter Type: Default or Dynamic
  -Checkbox for "Restriction". Should default to not checked. When checked, this should open up two multi select
  dropdowns for "Restrict Filter to these Frames" and "Restrict Filter to these Blocks". The multi select will show
  available frames and blocks.
  -Unfilter button

[sayalibhagat-Kanini]

I designed a filter block and added in left side panel, where users can drag and drop it into the workspace. Then it will displays a Filter By heading with a placeholder prompting data selection from the right-side panel.
On the right side panel, users can choose a display type: Checklist, Dropdown, Multi-select, or Slider.

[sayalibhagat-Kanini]

As per Natalie's suggestion, I have made a few changes in the figma design. All changes are completed so I moving this ticket to the Done state.