Kibana: [Canvas] Add filters information to the UI

[ryankeairns]

Describe the feature:
Filters in Canvas are confusing at times and it's not obvious how to filter specific elements. There is a lot that could be done to improve this experience, especially as we begin embedding content from other Kibana applications, but let's start with clarifying which filters are being applied.

Describe a specific use case for the feature:
As a user, I want to click on an element and easily see which filters are being applied.

Additionally, Canvas filters are applied globally by default but often I to apply filters per element(s). Filter groups allow you to achieve this behavior, but this feature is not very discoverable and could be clarified in the UI.

Phase 1 filter improvements

• Display global filters in the side bar
• Display element filters in the side bar

In a future phase these will be interactive, but for this first pass let's simply show users which filters are being applied to a workpad/element and provide a link to documentation regarding filter groups.

Note
One way to view filters, currently, is by this expression filters | render as=debug. This initial phase would essentially add that information directly to the UI.

Meta
This work is a subset of https://github.com/elastic/kibana/issues/50985

[elasticmachine]

Pinging @elastic/kibana-canvas (Team:Canvas)

[ryankeairns]

@andreadelrio when you have the time, please add a couple of screenshots to his issue. Maybe one for the element view and one for the workpad view. You can also link to the Figma doc/prototype for people to get more information. Thanks

[andreadelrio]

Workpad view - Dropdown option

Figma prototype: https://www.figma.com/proto/Y1eiYAj9in7fRo7N60harh/canvas_filters_tab_v2?node-id=40%3A305&scaling=min-zoom

Workpad view - Button group option

Figma prototype: https://www.figma.com/proto/Y1eiYAj9in7fRo7N60harh/canvas_filters_tab_v2?node-id=143%3A3004&scaling=min-zoom

Element view - Dropdown option (for a reference of the "button group" option see above)

[ryankeairns]

@andreadelrio these looks great. Two small pieces of feedback:

• I prefer the 'select' input as the button group feels a bit too tight for that space
• To align with the element name, please change the 'Exactly' accordion to 'Dropdown'. That is the name of the element the user sees when adding this type of filter to their workpad. For other one, 'Time' is correct (see below).

Thanks!

[andreadelrio]

Updated the Figma links replacing 'Exactly' with 'Dropdown'.

[ryankeairns]

@timductive @shaunmcgough @clintandrewhall @crob611

The phase 1 design work for displaying filter information is ready from the design side.

Thanks @andreadelrio !

[maggieghamry]

@ryankeairns can you please provide the latest UI design (if there are differences from https://www.figma.com/proto/Y1eiYAj9in7fRo7N60harh/canvas_filters_tab_v2?node-id=141%3A1080&scaling=min-zoom)?

I do have some questions about the aforementioned mockup, provided that is the latest:

• In your comment Filter groups allow you to achieve this behavior, but this feature is not very discoverable and could be clarified in the UI- can you please let me know how to discover the Filter groups you mentioned here?
• Are there any mockups for the "selected element" filter tab display(s)?
• Is there any documented logic for the different menus?
• What should Learn about filters in Canvas link to?
• On each of the options; Filter group, Filter type, and Column, the data displays are very similar, and I could use some help understanding how the right hand menu selections should render differently in the UI, or where some of the values come from (for example: Project , Value, Type that are populated in the filter menus. Can you help me decipher these?
  
  
  

cc @cqliu1 @crob611 @timductive

[ryankeairns]

@maggieghamry the last image in Andrea's post shows when an element is selected (it adds a third tab in the sidebar for Filters):

The Figma mockup is here: https://www.figma.com/file/Y1eiYAj9in7fRo7N60harh/canvas_filters_tab_v2?node-id=143%3A3652

Here is a screenshot snippet from that link:

[maggieghamry]

Thank you @ryankeairns !

[ryankeairns]

@maggieghamry I've updated the mockups to be more accurate (they now show actual filter elements :) ):

Updated mockups

The 'Group by' dropdown is hooked up and you can collapse/expand the bottom accordion in each view (for simplicity's sake, the top accordion does not expand/collapse in the prototype). If you collapse the bottom accordion, you'll also be able to see the 'View filter docs' link which also now takes you to the actual docs site.

https://www.figma.com/proto/Y1eiYAj9in7fRo7N60harh/canvas_filters_tab_v2?node-id=40%3A305&viewport=-2421%2C2694%2C0.4273872673511505&scaling=min-zoom

Screenshot from Figma link

[maggieghamry]

Awesome, thanks so much for this @ryankeairns!