[Mosaic] Lengthy Column Labels Are Omitted

[MichaelMarcialis]

Is your feature request related to a problem? Please describe.

For mosaic visualizations in Lens, if the second “Group by” dimension values are overly lengthy, the visualization’s column labels appear to be omitted entirely. This makes the visualization more difficult to parse and requires users hover the visualization to understand what each column represents.

Describe the solution you'd like

My initial instinct is to simply ask that we support label truncation rather than complete omission.

Describe alternatives you've considered

Another alternative could be supporting line breaks for lengthy column labels, though that may not look as nice in all situations and/or may require additional controls for allowing users to define the number of lines to show before truncation (similar to how Lens does for legends).

CCing @gvnmagni, @markov00, @flash1293, @ghudgins.

[markov00]

The text truncation/clipping is already available using the clipText configuration on the first most layer.

The truncation is a pure clipping, and it doesn't add an ellipsis in the text.

If you instead, don't clip, the text can go to multi-line already but depends on the minFontSize configured because it needs to shrink to be rendered in the same space.

Currently, there isn't an optimized way between these configuration: go multiline until is not possible and then start clipping, but we can think about it.

[flash1293]

@markov00 Something is not working right with clipText - this is how it looks in Lens when using clipText: true:

This is clipText: false:

Do you have an idea what this could be caused by?

go multiline until is not possible and then start clipping

It's more complex, but this sounds like the best approach to me

[markov00]

To use clipText the minFontSize and maxFontSize should be configured to be the same, if not the font scale reduction algo kicks in

[flash1293]

Makes sense - @ghudgins @gvnmagni how should we configure mosaic for Lens and is the current elastic-charts behavior sufficient?

[gvnmagni]

I would suggest to have, by default, a fixed font-size and to clip labels according to their column size. This seems to be a behaviour well used by other tools as well and it seems to me the best default option.

It would guarantee that labels are readable even if I know that small columns will always clip labels really early, unfortunately it's a compromise that we have to do.

One interesting thing would be to allow the labels to go on two lines if we want to create a little bit more of space but I wouldn't allow unlimited number of lines, I suggest to be a little rigid in this case and decide internally how many we want.

[flash1293]

@markov00 How can minFontSize be configured? I can't find it in the types (only for wordcloud)

[markov00]

Is a property of the root layer in the fillLabel

layers={[
          {
            groupByRollup: (d: Datum) => d.sitc1,
            nodeLabel: (d: Datum) => productLookup[d].name,
            fillLabel: {
              fontWeight: 100,
              fontStyle: 'italic',
              minFontSize: 10,
              maxFontSize: 10,
              clipText: true,
              valueFont: {
                fontFamily: 'Menlo',
                fontStyle: 'normal',
                fontWeight: 900,
              },
            },

[markov00]

Close as the configuration is now used in Kibana