[Lens] Add value labels to Heatmap

[dej611]

Summary

Fixes #105410

Creates the menu to control the value labels visibility option in the Heatmap.

• Add Visual Options popup
  • Adjust groupPosition
  • Refactor ValueLabel component as shared and reuse in both Heatmap and XY
  • do some i18n cleanup
• Write tests
  • Unit
  • Functional currently blocked by [Heatmap] Add value label visibility/drawing state in debug data elastic-charts#1436

Notes:

Value labels visibily dynamically changes based on the cell space.
I've set the min/max font size to 8/18 (different from XY) because, given the heatmap context I thought it may make sense for smaller text. But it can be easily changed.

When labels won't fit in the cell, even scaling down to the minFontSize, then it will be hidden:

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

[dej611]

@elasticmachine merge upstream

[kibanamachine]

merge conflict between base and head

[dej611]

Waiting on #111991 to be merged to unblock this PR.

[dej611]

@elasticmachine merge upstream

[dej611]

@elasticmachine merge upstream

[dej611]

@elasticmachine merge upstream

[kibanamachine]

merge conflict between base and head

[dej611]

@elasticmachine merge upstream

[elasticmachine]

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

[dej611]

@elasticmachine merge upstream

[kibanamachine]

💛 Build succeeded, but was flaky

• continuous-integration/kibana-ci/pull-request
• Commit: 8892be0
• Storybooks Preview
• Documentation Changes
• Flaky suites:
  • xpack-kibana-ciGroup6

---

Test Failures

Kibana Pipeline / general / X-Pack API Integration Tests.x-pack/test/api_integration/apis/ml/jobs/categorization_field_examples·ts.apis Machine Learning jobs Categorization example endpoint - invalid, too many tokens.

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has not failed recently on tracked branches

[00:00:00]     │
[00:00:00]       └-: apis
[00:00:00]         └-> "before all" hook in "apis"
[00:10:20]         └-: Machine Learning
[00:10:20]           └-> "before all" hook in "Machine Learning"
[00:10:20]           └-> "before all" hook in "Machine Learning"
[00:10:20]             │ debg creating role ft_ml_source
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_ml_source]
[00:10:20]             │ debg creating role ft_ml_source_readonly
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_ml_source_readonly]
[00:10:20]             │ debg creating role ft_ml_dest
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_ml_dest]
[00:10:20]             │ debg creating role ft_ml_dest_readonly
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_ml_dest_readonly]
[00:10:20]             │ debg creating role ft_ml_ui_extras
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_ml_ui_extras]
[00:10:20]             │ debg creating role ft_default_space_ml_all
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_default_space_ml_all]
[00:10:20]             │ debg creating role ft_default_space1_ml_all
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_default_space1_ml_all]
[00:10:20]             │ debg creating role ft_all_spaces_ml_all
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_all_spaces_ml_all]
[00:10:20]             │ debg creating role ft_default_space_ml_read
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_default_space_ml_read]
[00:10:20]             │ debg creating role ft_default_space1_ml_read
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_default_space1_ml_read]
[00:10:20]             │ debg creating role ft_all_spaces_ml_read
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_all_spaces_ml_read]
[00:10:20]             │ debg creating role ft_default_space_ml_none
[00:10:20]             │ info [o.e.x.s.a.r.TransportPutRoleAction] [node-01] added role [ft_default_space_ml_none]
[00:10:20]             │ debg creating user ft_ml_poweruser
[00:10:20]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_poweruser]
[00:10:20]             │ debg created user ft_ml_poweruser
[00:10:20]             │ debg creating user ft_ml_poweruser_spaces
[00:10:21]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_poweruser_spaces]
[00:10:21]             │ debg created user ft_ml_poweruser_spaces
[00:10:21]             │ debg creating user ft_ml_poweruser_space1
[00:10:21]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_poweruser_space1]
[00:10:21]             │ debg created user ft_ml_poweruser_space1
[00:10:21]             │ debg creating user ft_ml_poweruser_all_spaces
[00:10:21]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_poweruser_all_spaces]
[00:10:21]             │ debg created user ft_ml_poweruser_all_spaces
[00:10:21]             │ debg creating user ft_ml_viewer
[00:10:21]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_viewer]
[00:10:21]             │ debg created user ft_ml_viewer
[00:10:21]             │ debg creating user ft_ml_viewer_spaces
[00:10:21]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_viewer_spaces]
[00:10:21]             │ debg created user ft_ml_viewer_spaces
[00:10:21]             │ debg creating user ft_ml_viewer_space1
[00:10:21]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_viewer_space1]
[00:10:21]             │ debg created user ft_ml_viewer_space1
[00:10:21]             │ debg creating user ft_ml_viewer_all_spaces
[00:10:21]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_viewer_all_spaces]
[00:10:21]             │ debg created user ft_ml_viewer_all_spaces
[00:10:21]             │ debg creating user ft_ml_unauthorized
[00:10:21]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_unauthorized]
[00:10:21]             │ debg created user ft_ml_unauthorized
[00:10:21]             │ debg creating user ft_ml_unauthorized_spaces
[00:10:21]             │ info [o.e.x.s.a.u.TransportPutUserAction] [node-01] added user [ft_ml_unauthorized_spaces]
[00:10:21]             │ debg created user ft_ml_unauthorized_spaces
[00:14:36]           └-: jobs
[00:14:36]             └-> "before all" hook in "jobs"
[00:14:36]             └-: Categorization example endpoint - 
[00:14:36]               └-> "before all" hook for "valid with good number of tokens"
[00:14:36]               └-> "before all" hook for "valid with good number of tokens"
[00:14:36]                 │ info [x-pack/test/functional/es_archives/ml/categorization] Loading "mappings.json"
[00:14:36]                 │ info [x-pack/test/functional/es_archives/ml/categorization] Loading "data.json.gz"
[00:14:36]                 │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [ft_categorization] creating index, cause [api], templates [], shards [1]/[0]
[00:14:36]                 │ info [x-pack/test/functional/es_archives/ml/categorization] Created index "ft_categorization"
[00:14:36]                 │ debg [x-pack/test/functional/es_archives/ml/categorization] "ft_categorization" settings {"index":{"number_of_replicas":"0","number_of_shards":"1"}}
[00:14:37]                 │ info [x-pack/test/functional/es_archives/ml/categorization] Indexed 1501 docs into "ft_categorization"
[00:14:37]                 │ debg applying update to kibana config: {"dateFormat:tz":"UTC"}
[00:14:38]               └-> valid with good number of tokens
[00:14:38]                 └-> "before each" hook: global before each for "valid with good number of tokens"
[00:14:38]                 └- ✓ pass  (144ms)
[00:14:38]               └-> invalid, too many tokens.
[00:14:38]                 └-> "before each" hook: global before each for "invalid, too many tokens."
[00:14:38]                 │ info [r.suppressed] [node-01] path: /_analyze, params: {}
[00:14:38]                 │      org.elasticsearch.transport.RemoteTransportException: [node-01][127.0.0.1:63241][indices:admin/analyze[s]]
[00:14:38]                 │      Caused by: java.lang.IllegalStateException: The number of tokens produced by calling _analyze has exceeded the allowed maximum of [10000]. This limit can be set by changing the [index.analyze.max_token_count] index level setting.
[00:14:38]                 │      	at org.elasticsearch.action.admin.indices.analyze.TransportAnalyzeAction$TokenCounter.increment(TransportAnalyzeAction.java:397) ~[elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.action.admin.indices.analyze.TransportAnalyzeAction.simpleAnalyze(TransportAnalyzeAction.java:229) ~[elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.action.admin.indices.analyze.TransportAnalyzeAction.analyze(TransportAnalyzeAction.java:204) ~[elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.action.admin.indices.analyze.TransportAnalyzeAction.analyze(TransportAnalyzeAction.java:122) ~[elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.action.admin.indices.analyze.TransportAnalyzeAction.shardOperation(TransportAnalyzeAction.java:110) ~[elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.action.admin.indices.analyze.TransportAnalyzeAction.shardOperation(TransportAnalyzeAction.java:62) ~[elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.action.support.single.shard.TransportSingleShardAction.lambda$asyncShardOperation$0(TransportSingleShardAction.java:99) ~[elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.action.ActionRunnable.lambda$supply$0(ActionRunnable.java:47) [elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.action.ActionRunnable$2.doRun(ActionRunnable.java:62) ~[elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.common.util.concurrent.ThreadContext$ContextPreservingAbstractRunnable.doRun(ThreadContext.java:737) [elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at org.elasticsearch.common.util.concurrent.AbstractRunnable.run(AbstractRunnable.java:26) [elasticsearch-8.0.0-SNAPSHOT.jar:8.0.0-SNAPSHOT]
[00:14:38]                 │      	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1136) [?:?]
[00:14:38]                 │      	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:635) [?:?]
[00:14:38]                 │      	at java.lang.Thread.run(Thread.java:833) [?:?]
[00:14:38]                 └- ✖ fail: apis Machine Learning jobs Categorization example endpoint -  invalid, too many tokens.
[00:14:38]                 │       Error: expected 'partially_valid' to sort of equal 'invalid'
[00:14:38]                 │       + expected - actual
[00:14:38]                 │ 
[00:14:38]                 │       -partially_valid
[00:14:38]                 │       +invalid
[00:14:38]                 │       
[00:14:38]                 │       at Assertion.assert (/dev/shm/workspace/parallel/24/kibana/node_modules/@kbn/expect/expect.js:100:11)
[00:14:38]                 │       at Assertion.eql (/dev/shm/workspace/parallel/24/kibana/node_modules/@kbn/expect/expect.js:244:8)
[00:14:38]                 │       at Context.<anonymous> (test/api_integration/apis/ml/jobs/categorization_field_examples.ts:302:44)
[00:14:38]                 │       at runMicrotasks (<anonymous>)
[00:14:38]                 │       at processTicksAndRejections (node:internal/process/task_queues:96:5)
[00:14:38]                 │       at Object.apply (/dev/shm/workspace/parallel/24/kibana/node_modules/@kbn/test/target_node/functional_test_runner/lib/mocha/wrap_function.js:87:16)
[00:14:38]                 │ 
[00:14:38]                 │ 

Stack Trace

Error: expected 'partially_valid' to sort of equal 'invalid'
    at Assertion.assert (/dev/shm/workspace/parallel/24/kibana/node_modules/@kbn/expect/expect.js:100:11)
    at Assertion.eql (/dev/shm/workspace/parallel/24/kibana/node_modules/@kbn/expect/expect.js:244:8)
    at Context.<anonymous> (test/api_integration/apis/ml/jobs/categorization_field_examples.ts:302:44)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at Object.apply (/dev/shm/workspace/parallel/24/kibana/node_modules/@kbn/test/target_node/functional_test_runner/lib/mocha/wrap_function.js:87:16) {
  actual: 'partially_valid',
  expected: 'invalid',
  showDiff: true
}

---

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
lens	834	835	+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	235	236	+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.0MB	1.0MB	+513.0B

Unknown metric groups

API count

id	before	after	diff
lens	253	254	+1

History

• 💛 Build #162841 was flaky 34725e1
• 💔 Build #162725 failed 8d0f5cd
• 💔 Build #162712 failed 2e97c77
• 💔 Build #162698 failed 5f21476
• 💔 Build #162578 failed f129dac

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

[stratoula]

Code LGTM! I like this addition and personally I am fine with the selected font sizes, I couldn't find any case that these font sizes are not ideal. :)

[mbondyra]

Looks good to me. Tested on FF and works as expected!

[dej611]

@elasticmachine merge upstream

[kibanamachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 72382da
• Storybooks Preview

Test Failures

• [job] [logs] Default CI Group #6 / apis SecuritySolution Endpoints hosts Make sure that we get Last Seen for a Host with docValueFields

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
lens	834	835	+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	235	236	+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.0MB	1.0MB	+513.0B

Unknown metric groups

API count

id	before	after	diff
lens	253	254	+1

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

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 106406 or prevent reminders by adding the backport:skip label.

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 106406 or prevent reminders by adding the backport:skip label.

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 106406 or prevent reminders by adding the backport:skip label.

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 106406 or prevent reminders by adding the backport:skip label.

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 106406 or prevent reminders by adding the backport:skip label.