[Discover] Improve sidebar design

[andreadelrio]

Summary

In order to provide users a consistent experience across Kibana, we would like to improve the way we present fields in the left sidebar of Discover. To do so, we will align this feature to what we do in Lens to the extent where it is possible.

Target outcome

Improve the visuals of the Discover sidebar while providing a better experience which is consistent with a similar functionality that already exists in Lens.

Proposed changes - Phase 1

1. Use a popover instead of accordion to display field preview and the “Visualize” button.
2. Move the “Add” button to inside the popover as “Add as column”. (See no. 2 in “Potential challenges” below)
3. Use a more refined style of graph.
4. Use EUI’s plus and minus icons instead of zoom in and zoom out icons to represent “filter in” and “filter out”.
5. Use a compressed EuiSwitch inside the Filter menu and align copy with Lens.
6. If possible, allow for the selection of multiple field types from within the Filter menu.

Prototypes and mockups

Figma prototype

https://www.figma.com/proto/4b9NHbsHMrJyWV87vMr0PZ/Fields-list?node-id=69%3A3&viewport=122%2C-146%2C0.38255298137664795&scaling=min-zoom (open in Figma desktop app to get images loading properly)

Potential challenges

1. What about drag and drop?
   As the implementation of this functionality requires engineering resources that might not be available in the near future, we think this functionality could be implemented after Phase 1. For this reason, the styling of Discover and Lens should not be identical so as to not lead the user to believe that drag and drop is available in both applications.

2. Placing the Add button inside a popover would make it be one additional click away. As an alternative to this, we could keep the Add button to the right of the field name. Note that the one disadvantage of this is that it increases the chances of the field name having to wrap into multiple lines.

Phase 2

1. Drag and drop
2. Once we have implemented the use of EuiDataGrid in Discover we could get rid of the “Selected fields” section and use EuiDataGrid to remove fields from the table.

[elasticmachine]

Pinging @elastic/kibana-design (Team:Design)

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[timroes]

Related around improvements in the sidebar: #68270

[flash1293]

I created an issue for pulling out common components into a central place a while ago, the field list being one of them: #41108

Maybe some of the discussion is relevant for this.

[wylieconlon]

We are also planning on changing the field list in Lens to use an accordion: #67203

[andreadelrio]

Related

• Selected Fields - Display of Large / Long Values Discover Selected Fields - Display of Large / Long Values #4881

• Allow user to specify display names for fields [Discover] Allow user to specify display names for fields #47659

• UI warnings for using scripted fields UI warnings for using scripted fields #9175

• Discover rewrite to EUI [Meta] Discover rewrite to EUI #38646

• EuiDataGrid in Discover. Issues Feature flag to EuiDataGrid in Discover #60031 [Discover] Migrate Discover Table and Discover Saved Search to use EUIDataGrid component #61906, PR [Discover] EuiDataGrid Implementation #67259

[rayafratkina]

Thinking about this a bit more, I worry about this direction. In Lens, the primary purpose of the field list is informational - you do not take any action from the field list except dragging fields onto the editor space.

By contrast in Discover users configure data table from the field list. I think we should be careful to keep that in mind in design and make sure actions are not more complex. For example, I think pushing "add" button to select the field for table into a flyout is a mistake - it's always harder to click those.

[mdefazio]

Perhaps we could change the token icon to a plus icon for a quicker add action. It's possible there might be some confusion on the hit area though (does clicking the name add it as a column, or open the popout??). Maybe the popout then also needs to get triggered by an icon?

[rayafratkina]

The token icon carries information - it's different depending on the type of the field. But maybe it can change to a plus on hover?

[cchaos]

To reiterate some of @andreadelrio's thoughts:

We would only move the "Add as column" button to the popover IF we could implement drag and drop to add to add the fields to the table. Otherwise, yes we will still need to implement an "Add" button directly on the field name for quick adding them to the table.

I disagree that there are major differences between the Lens and Discover purposes of the fields list. Both:

1. Allow you to explore the fields by showing field statistics
2. Take action on a field by adding them to the content space whether it's the chart or table

The only extra action I see that Discover adds is the ability to "Visualize" which just starts a chart base on that field and not sure how often that is currently used today.

---

@mdefazio Your idea is intriguing. I think we still need to know that the primary action is for a field. Is it to see the field stats or add it to the table. Whichever it is should be the main click on the whole field item and the secondary option should be a button that appears on hover

[rayafratkina]

Thanks for clarifying @cchaos I think I missed the connection between drag and drop and the design of the list. That part makes sense to me.

To dial into the differences/similarities between Discover and Lens: I agree that those are 2 things user does in both cases, but I think the user's intent and the expectations we set with users are different between these tools. It's not obvious up front that you can add columns to Discover, but in Lens we built the UI around this concept and it is very clear.
How do you see the expectations that user has coming in play into these UI choices? Are you imagining more UI changes in Discover to align with the field list changes?

[kertal]

@mdefazio Your idea is intriguing. I think we still need to know that the primary action is for a field. Is it to see the field stats or add it to the table. Whichever it is should be the main click on the whole field item and the secondary option should be a button that appears on hover

My 2 cents here: for me the primary action is adding a column, I like the hover/focus change to a plus icon. This is a difference to the current behavior, but I think it it's an improvement. Would be very interesting to have some telemetry here.