[Lens] Add option to color all terms in new color mapping UX

[timductive]

The 10 color limitation of the new color mappings design creates a confusing visualization for charts with many terms.

Proposal:
For now, we should add a switch to toggle between auto-assigning colors to every term, and the current "highlight mode" where all other terms are grouped into a selected neutral color.

If we assign colors to every term we should repeat the palette after the available colors. When view the manual assignment UX, it should show multiple terms per color as they were auto-assigned.

Stretch goal: Be able to reduce opacity per color to create 20 possible distinct colors before re-using colors (possible set this as another configuration option to turn on or off).

We will likely need some design/ux help on this config ux.

Long-term: We should consider creating additional permutations via textures on top of colors and additional help text/modals to encourage better understanding of color usage.
@gvnmagni @MichaelMarcialis @ninoslavmiskovic @stratoula @markov00

[MichaelMarcialis]

Proposal:
For now, we should add a switch to toggle between auto-assigning colors to every term, and the current "highlight mode" where all other terms are grouped into a selected neutral color.

If the team has come to the consensus to avoid applying the gray "All other terms" color when auto-assign is on (which it is by default) to prevent users from thinking their visualization is broken, I'm not convinced this proposal to split the auto-assignment behavior would be the best course of action. Would it be a better experience to simply change the current auto-assign behavior to utilize the capabilities of the provided term comboboxes to allow visualizations with terms greater than 10 to loop multiple times through the available color assignments? I think this would be a far less confusing user experience versus providing another switch that toggles between two different auto-assignment behaviors. With this suggestion, we would remove the "All other terms" assignment row altogether when auto-assign is on. If auto-assign is turned off, the "All other terms" assignment would reappear. Thoughts?

Again, this of course assumes we're all comfortable with the fact that auto-assign will no longer try to guide/educate users to visualization best practices by preventing users from creating visualizations with color assignments that may not be optimal.

[timductive]

This could also work @MichaelMarcialis although we can also consider what it looks like if we remove the auto-assign switch completely (Teresa's suggestion) and then maybe find a way to give the user control over "color-mode" vs "highlight-mode" or whatever we call these things.

[gvnmagni]

Personally, I wouldn't consider the possibility the remove this limit of 10 colors. At the same time we need to have a proper conversation around the role of automapping, which I believe should not be an alternative mode to manual association of terms, while more like a button that users can click to speed up the process of writing all terms into text fields (and what happens when users click on that button, do we loop all terms into our 10 colors or only the first ten terms? do we envision the possibility for users to replicate the current mode where all series can be colored if that is wanted?)

At the moment it's all a little complex because at the same time we have the legacy mode and the new mode of dealing with colors, so there is a lot of overlapping that makes it articulated

[ninoslavmiskovic]

I am also not a big fan of two toggles, but perhaps explore the idea of having specific highlighting mode.

I would also consider using other "neutral colors" then grey, because grey is often used for empty stages. This could be one of the reason why users feel it is "broken". If the colors were let's say green neutral like our regular default colors, then it might not look as broken, but more dimmed down.

Maybe even okay with playing with the saturation or hue.

Something to think about also would be to consider "highlighting" as a post "creating the chart" flow . So 1) the user creates the chart with new mappings 2) the user wants to highlight specific terms and downplay rest of them, then the user selects the one to highlight and rest of them turns into neutral colors.

Something like this (but as a separate flow) :

[gvnmagni]

Very good point about greys, @MichaelMarcialis we can see together what options we have for this since the whole kibana neutral colors are greys with a little tendency to blue, but even with it really look disabled. (This was on me, I am the one who picked those greys 😎 )

[timductive]

Updated Proposal:

1. We only have 1 toggle, auto-map. Automap only maps new terms (once they are assigned a color it persists). We loop the colors for more than 10 terms.
2. If you turn off automap, you get the neutral bucket of grays and all unmapped terms use the neutral color. Transitioning from auto to manual keeps the term assignments until the user changes them.
3. If you change a color or term mapping, it switches to manual mode.

In the future we can:

1. Determine when/how we educate users to limit their colors to 10.
2. Investigate adding textures/permutations to colors.
3. Research how we can merge this experience with the Maps color mapping tool.

[markov00]

@timductive what do you mean by persist in this context?

Automap only maps new terms (once they are assigned a color it persists)

Does automap assign a color to terms the first time you create a visualization and persist this configuration after subsequent rerender?
If a new term comes up when using the visualization in a dashboard, are we saving/persist this color assignment too?

[timductive]

@markov00 Yes, in this case we are hoping that we can make it where the automap assignment stays the same on every rerender. For example if "US" is assigned blue, and the chart is filtered the "US" series stays blue (currently it would adopt the first color in the palette). If a new term comes up then we would assign the color and save/persist it in the same way.