[Lens] Enhance layer presentation on Visualization modifiers popup

[dej611]

Describe the feature:

On Embeddable panels the new visualization modifier menu presents layers is a way that can be hard to distinguish when there are multiples.
Adding colour palettes should make it easier to distinguish them, as shown in this prototype:

The basic logic is:

• if a layer has a single metric with a single color, show the swatch item with that single colour
• if a layer has multiple metrics where each metric has a color assigned, show the palette indicator with such colours + the icon on the left
• if a layer has a palette assigned (i.e. breakdown dimension) then use the icon + palette indicator

The only missing case when multiple metric within a layer are using color by value: in this case multiple palettes can belong to a single layer... any idea about representing this case? Currently only table exposes this problem, so perhaps even no showing any color can be temporary ok.
cc @MichaelMarcialis

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

[MichaelMarcialis]

The only missing case when multiple metric within a layer are using color by value: in this case multiple palettes can belong to a single layer... any idea about representing this case? Currently only table exposes this problem, so perhaps even no showing any color can be temporary ok.

Good catch. Ideally, I'd like to avoid a situation where we have to show multiple palettes to help users identify a single layer. I think it would distract too heavily from the purpose of this section in the popover (which is to inform users of the sampling percentage, not overwhelm them with color information). That said, I'm inclined to take one of two directions:

1. Revert back to the original designs that displayed each layers' data view name, instead of color. It's less noisy/overwhelming overall, and is meta information that is directly related to the sampling percentage. We can allow the layer names to be the means in which users can identify with (rather than color). The only concern with this approach is that there is the potential for multiple layers of the same name.

2. For layers that use multiple colors or multiple palettes, we house that color information in a tooltip that is triggered when hovering the color icon, allowing us to stack that information in a tooltip without having it always showing in the popover and overwhelming users. Layers with a single color will continue to be show in the popover with a color swatch.

Thoughts on either of these approaches? CCing @stratoula, @ninoslavmiskovic, @timductive.

[dej611]

Given the restricted context of the problem (only with datatable atm which supports only a single layer) I might propose to just not render the palette if the specific scenario is detected. Would that work for you @MichaelMarcialis ?

[stratoula]

I am fine with doing what Marco proposes for now. I think it is good to use the coloring as they indicate much better the sampled series.

[ninoslavmiskovic]

I also agree on using colours is the best approach, and also fine with @dej611 a short term proposal.

I have previously used a multicoloured color swatch icon to indicate palettes. Perhaps that would be less noice and the design would align better. The color line as mentioned before triggers me GK click it because it is similar to the color palette selector.

WDYT : @MichaelMarcialis

Example :

[MichaelMarcialis]

Given the restricted context of the problem (only with datatable atm which supports only a single layer) I might propose to just not render the palette if the specific scenario is detected. Would that work for you @MichaelMarcialis ?

Great point. That works for me. Thanks, @dej611!

I have previously used a multicoloured color swatch icon to indicate palettes. Perhaps that would be less noice and the design would align better. The color line as mentioned before triggers me GK click it because it is similar to the color palette selector.

That's a very interesting idea, @ninoslavmiskovic! I instantly like it visually because of its compact nature and ability to align nicely with the solid color swatches (something the current color palette strip doesn't allow us to do). The only concern I'd have with such a direction is that it would be a bit more difficult for users to identify the individual colors being use, between the reduced size and the fact that it uses a radial gradient (which will ultimately show colors that aren't actually being represented in the visualization). If we're not worried about users identifying colors and just want to let them know that multiple colors are in use, I really like this direction. However, if we want users to be able to visually identify one or more colors being used in the visualization, this might prove problematic. Thoughts?

[ninoslavmiskovic]

@MichaelMarcialis - Can we add the color palette as a hover ? This way we inform the user on the colors ?

[MichaelMarcialis]

@MichaelMarcialis - Can we add the color palette as a hover ? This way we inform the user on the colors ?

That's an interesting idea! I'll play around with it for future iterations of this and also in the Lens layer panels (as the same pattern could theoretically be used there).