[Lens] Enhance visualization modifier popup with layer palette

[dej611]

Summary

Fix #154349

This PR introduces some chart info API enhancements, used within the visualization modifier popup in a embeddable context.

For the specific scenario with a table with multiple color by value columns, the palette is omitted:

Sampling dashboard with many combinations:
sampling_testing_dashboard.ndjson.txt

Additional fixes:

• 💄 Fixes bottom padding in case of single layer info in the popup

Before:

• 💄 Fixes some styling issues of the visualization modifier icon with some visualization types (treemaps, metrics, tables)

Before:

After:

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
• Documentation was added for features that require explanation or tutorials
• 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)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

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

[stratoula]

This looks fantastic! Changes LGTM!

[drewdaemon]

🤩

[MichaelMarcialis]

Thanks for putting this together, @dej611. It looks wonderful. Leaving you a few small comments below for your initial review.

• Why did we change the previous popover header from Layers with reduced sampling to Sampling probability by layer? The reason I ask is because that sounds like an odd title for an area that only shows layers with reduced sampling (i.e. we don't show all layers, namely those with 100% sampling). Should we change it back?

• Would it be possible to apply a minimum width of 280px on the modifiers popover?

[stratoula]

Why did we change the previous popover header from Layers with reduced sampling to Sampling probability by layer? The reason I ask is because that sounds like an odd title for an area that only shows layers with reduced sampling (i.e. we don't show all layers, namely those with 100% sampling). Should we change it back?

@MichaelMarcialis I changed that after Sophie's request. As she said

Another thing that jumped out, is that the label "Layers with reduced sampling" is syntactically incorrect. It means that the sampling is reduced, rather than data is sampled. 

The title was a proposal from her.

[dej611]

Refactored info badge component into a shared component and added unit test for the shared codebase.

[MichaelMarcialis]

Thanks for making those changes, @dej611! This looks great. The only previously mentioned item remaining was setting a minimum width on the modifier popover of 280px. Would it be possible to address that?

Otherwise, aside from my small comments below, this looks good-to-go. Approving now so I don't hold you up.

[MichaelMarcialis]

Is this doing anything? If not, it can be removed.

Suggested change

	css={css`
	padding-right: 0;
	`}

[MichaelMarcialis]

May be better to set this to no margin to simplify your aside padding.

Suggested change

	{index ? <EuiHorizontalRule margin="s" /> : null}
	{index ? <EuiHorizontalRule margin="none" /> : null}

[MichaelMarcialis]

With the removal of the horizontal rule margin in the previous comment, you can simplify these styles.

Suggested change

	padding: ${!isFirstItem ? 0 : euiTheme.size.base} ${euiTheme.size.base}
	${bottomPadding};
	padding: ${euiTheme.size.base};

[MichaelMarcialis]

With your latest markup refactoring, I'd suggest the following changes for simplicity:

Suggested change

	<EuiFlexGroup justifyContent={hasColor ? 'center' : 'spaceBetween'} gutterSize="s">
	{hasColor ? (
	<EuiFlexItem grow={false}>
	<EuiIcon
	color={hasSingleColor ? palette[0] : undefined}
	type={iconType}
	css={css`
	margin-top: ${euiTheme.size.xxs};
	`}
	data-test-subj={`${dataTestSubjPrefix}-${index}-icon`}
	/>
	</EuiFlexItem>
	) : null}
	<EuiFlexItem grow={Boolean(palette)}>
	<EuiText size="s" data-test-subj={`${dataTestSubjPrefix}-${index}-title`}>
	{title}
	</EuiText>
	</EuiFlexItem>
	<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
	{hasColor ? (
	<EuiFlexItem grow={false}>
	<EuiIcon
	color={hasSingleColor ? palette[0] : undefined}
	type={iconType}
	data-test-subj={`${dataTestSubjPrefix}-${index}-icon`}
	/>
	</EuiFlexItem>
	) : null}
	<EuiFlexItem>
	<EuiText size="s" data-test-subj={`${dataTestSubjPrefix}-${index}-title`}>
	{title}
	</EuiText>
	</EuiFlexItem>

[MichaelMarcialis]

Rather than using an EuiFlexGroup with one of the two EuiFlexItem children housing an empty icon, would it be simpler to just house the EuiColorPaletteDisplay in a div element with some left padding for alignment?

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 9208f42

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
lens	910	912	+2

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	514	515	+1

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.3MB	1.3MB	+4.0KB

Page load bundle

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

id	before	after	diff
expressionGauge	14.6KB	14.5KB	-30.0B

Unknown metric groups

API count

id	before	after	diff
lens	610	611	+1

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	17	19	+2
securitySolution	399	402	+3
total			+5

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	18	20	+2
securitySolution	479	482	+3
total			+5

History

• 💛 Build #121890 was flaky a372d04
• 💚 Build #121662 succeeded 10fe021
• 💛 Build #121415 was flaky 00cae94
• 💚 Build #121142 succeeded 770f3f7

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