[Lens] Supports multi rows headers for the table visualization

[stratoula]

Summary

Closes #122965

It adds an extra setting for enabling multi rows for the table header.
The user can select among:

• single option (only 1 row)
• auto (show everything)
• custom (user sets the row lines)

It defaults to the single setting.

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[stratoula]

@MichaelMarcialis as you will see in the description, I added another set of settings for the datatable that concern the header rows.

The lines per row setting appear when you hit custom (same as the row height). I am not very satisfied with the result . Do you have any idea on how we can group them better? Or maybe if we change the labels somehow? 🤔

[flash1293]

FWIW I think it's an important case to have multi-line header without having multi line cells. There are quite some cases with long column names but small numeric values in the cells.

[flash1293]

It seems like specific line count is not respected if there is no header with that height which is different than the data row height behavior:

I see how this would be hard to fix, I don't think it's a blocker though, just something to point out.

LGTM otherwise, but I agree we can improve the look of the UI

[stratoula]

@flash1293 yes I agree on having separate settings. I just don't like the UI and I wonder if we can improve it a bit. To be more clear where each 'lines per row' refer to.

About your other comment on the header height not respected if there is no header with that height, I was thinking that it has the same behavior with the legend lines. Maybe 20 lines max for the header is a big number though. We could change it in 5 max, does it sound better?

[MichaelMarcialis]

@MichaelMarcialis as you will see in the description, I added another set of settings for the datatable that concern the header rows.

The lines per row setting appear when you hit custom (same as the row height). I am not very satisfied with the result . Do you have any idea on how we can group them better? Or maybe if we change the labels somehow? 🤔

Hey, @stratoula! Good question. My first instinct would be to make the following changes:

• Change the Row height label to be Cell row height.
• Change the Header height label to be Header row height.
• Rather than having the range sliders for header and cell row height appear within their own form row, can we migrate them to be within the header and cell row height form rows, but still positioned below their respective button group? The idea is to have the range sliders appear in the same position that you have them in currently, but as they would no longer be in their own form row, they wouldn't have their own separate label. Instead, they would appear to be an inset/nested part of the preceding button group.
• Make the new header row height group (both button group and range slider) appear before the cell row height group.

Rough idea:

Let me know if that makes sense. Thanks!

[stratoula]

I love it!

[stratoula]

@elasticmachine merge upstream

[stratoula]

To wrap up:

• I implemented @MichaelMarcialis 's suggestion (look much better now!)
• I used emotion
• I added a max of 5 lines per row for the header settings

[stratoula]

@elasticmachine merge upstream

[dej611]

Tested locally with Safari and it works as expected.

The only bug I found is this edge case where the last two chars falls below the menu arrow, but that looks more a EUI bug rather than something we can address here:

[stratoula]

@elasticmachine merge upstream

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: c852138
• Storybooks Preview
• Webpack Bundle Analyzer

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
lens	746	747	+1

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
lens	343	345	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
lens	1.1MB	1.1MB	+1.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
lens	43.0KB	43.1KB	+91.0B

Unknown metric groups

API count

id	before	after	diff
lens	395	397	+2

History

• 💚 Build #30969 succeeded 010dc53
• 💚 Build #30887 succeeded 9e93db3
• 💚 Build #29846 succeeded 0f413a2
• 💔 Build #29823 failed feeff1d
• 💚 Build #29328 succeeded 02da414

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream