[Lens][Table] Add color by terms with color mappings #189895

nickofthyme · 2024-08-05T14:50:57Z

Summary

Adds support for coloring table cells by terms with color mappings assignments. Supported for both Rows and Metric dimensions.

Zight.Recording.2024-08-05.at.07.46.55.AM.mp4

closes #179322

Checklist

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

nickofthyme

@teresaalvarezsoler & @MichaelMarcialis - Mostly complete POC still tweaking and updating/adding tests.

See a-la-carte deployment here. You might get a 502 gateway error at first or need to bypass the security but it eventually worked for me.

packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx

teresaalvarezsoler · 2024-08-06T07:54:46Z

Hey @nickofthyme, thanks for creating the deployment, it looks great! I couldn't find any issues. One question, the fact that we apply the old color mappings by default, is it because we don't offer the new color mappings for numbers? (I think that's fine, just clarifying the reasoning behind)

packages/kbn-coloring/src/shared_components/color_mapping/color/rule_matching.ts

…-mapping-tables

teresaalvarezsoler

Everything looks good to me from the user perspective.

dej611

Had a first review pass, not much on the code side, but I think the default palette in this case should be changed.

src/plugins/chart_expressions/common/color_categories.ts

x-pack/plugins/lens/public/visualizations/datatable/components/dimension_editor.tsx

src/plugins/chart_expressions/common/color_categories.ts

nickofthyme · 2024-08-23T15:42:53Z

x-pack/plugins/lens/public/visualizations/datatable/visualization.tsx

+  getTelemetryEventsOnSave(state, prevState) {
+    const colorMappingEvents = state.columns.flatMap((col) => {
+      const prevColumn = prevState?.columns?.find((prevCol) => prevCol.columnId === col.columnId);
+      return getColorMappingTelemetryEvents(col.colorMapping, prevColumn?.colorMapping);
+    });
+
+    return colorMappingEvents;
+  },


@teresaalvarezsoler did you want to update these telemetry events to include the vis type they were used in? Currently all events are the same across xy, partition, tagcloud and now datatable. Example of the current events are...

lens_color_mapping_palette_eui_amsterdam_color_blind

lens_color_mapping_unassigned_terms_neutral

lens_color_mapping_colors_up_to_2

lens_color_mapping_avg_count_terms_per_color_1

jbudz

limits.yml

…-fix'

dej611

Tested again an no bugs found! 🎉

Left only a minor code nitpick which would be nice to address. For the rest great work @nickofthyme ! 🚀

x-pack/plugins/lens/public/visualizations/datatable/components/cell_value.tsx

Heenawter

Approving to unblock - still interested to see what @elastic/kibana-design says about the positioning of this tooltip icon, but definitely not worth blocking all this work 🙇

Current	Option 1 - keep style, vertically align	Option 2 - match style of controls tooltip icon

cc @MichaelMarcialis

mbondyra · 2024-08-26T14:17:51Z

packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx

@@ -15,22 +15,26 @@ import { Container } from './components/container/container';
 import { ColorMapping } from './config';


I observed this small bug when switching between categorical/numerical color palettes.

Create a datatable with a last value dimension and categorical color palette set.

switch to a numerical operation, like 'sum'

Click on the color palette - the palette input is not filled properly. I'll pass you the video in a PM (github limits won't allow me to do so)

Good catch, fixed this in 77cd409

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>

MichaelMarcialis

Thanks for making those changes, @nickofthyme. Everything looks great. I left two final nits below, but nothing worth holding you up over. Assuming you're able to address them, I'll approve now.

packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx

…-fix'

kibana-ci · 2024-08-28T01:07:07Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 472dd0f

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`lens`	1505	1513	+8

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
`@kbn/chart-expressions-common`	19	21	+2
`@kbn/coloring`	180	188	+8
`lens`	583	586	+3
total			+13

Async chunks

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

id	before	after	diff
`dashboard`	546.7KB	547.3KB	+643.0B
`expressionXY`	129.3KB	129.3KB	+62.0B
`lens`	1.5MB	1.5MB	+7.1KB
total			+7.8KB

Page load bundle

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

id	before	after	diff
`expressionPartitionVis`	29.0KB	29.1KB	+168.0B
`expressionTagcloud`	13.1KB	13.2KB	+168.0B
`expressionXY`	41.7KB	41.9KB	+168.0B
`fieldFormats`	63.0KB	63.1KB	+114.0B
`lens`	50.9KB	51.6KB	+764.0B
total			+1.3KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/chart-expressions-common`	23	25	+2
`@kbn/coloring`	217	227	+10
`lens`	685	688	+3
total			+15

ESLint disabled line counts

id	before	after	diff
`lens`	16	17	+1

Total ESLint disabled count

id	before	after	diff
`lens`	16	17	+1

History

💛 Build #229958 was flaky f0f0f47
💛 Build #229957 was flaky f0f0f47
💔 Build #229900 failed 034334a
💔 Build #229784 failed dee8b55
💛 Build #229532 was flaky 5f0b622
💔 Build #229521 failed 3be2d4f

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

## Summary Added a section with instructions for assigning colors to terms in a table. The technical preview warning will be removed in GA. Rel: #189895 Closes: [#559](elastic/platform-docs-team#559) --------- Co-authored-by: florent-leborgne <florent.leborgne@elastic.co>

## Summary Added a section with instructions for assigning colors to terms in a table. The technical preview warning will be removed in GA. Rel: elastic#189895 Closes: [elastic#559](elastic/platform-docs-team#559) --------- Co-authored-by: florent-leborgne <florent.leborgne@elastic.co> (cherry picked from commit b781c4e)

## Summary Added a section with instructions for assigning colors to terms in a table. The technical preview warning will be removed in GA. Rel: elastic#189895 Closes: [elastic#559](elastic/platform-docs-team#559) --------- Co-authored-by: florent-leborgne <florent.leborgne@elastic.co>

nickofthyme added 4 commits August 5, 2024 07:09

[Lens][Table] Add color by terms with color mappings

6c9ff96

Merge branch 'main' into color-mapping-tables

4dfb857

fix: cell style updates

1737e6d

fix initial palette when adding new dimension

160d3dd

nickofthyme added Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens release_note:feature Makes this part of the condensed release notes vis:table labels Aug 5, 2024

nickofthyme added 2 commits August 5, 2024 11:09

Add color mapping to row dimensions

b81bb4e

Style & copy tweaks to align with mockups

5471c2a

nickofthyme commented Aug 5, 2024

View reviewed changes

packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx Show resolved Hide resolved

packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx Show resolved Hide resolved

derive categories across all matching transposed columns

1c0c53a

nickofthyme commented Aug 6, 2024

View reviewed changes

packages/kbn-coloring/src/shared_components/color_mapping/color/rule_matching.ts Outdated Show resolved Hide resolved

nickofthyme added 4 commits August 6, 2024 15:37

Merge branch 'main' into color-mapping-tables

8dd3c34

fix i18n issues

5c2a577

Merge remote-tracking branch 'origin/color-mapping-tables' into color…

3c555cf

…-mapping-tables

Merge branch 'main' into color-mapping-tables

82bc97e

teresaalvarezsoler approved these changes Aug 7, 2024

View reviewed changes

nickofthyme added 10 commits August 8, 2024 10:00

fix type errors in datatable expression

020dd91

fix types and test errors

3613870

Merge branch 'main' into color-mapping-tables

ca97848

style: remove empty color when color is applied

369e020

fix legacy color sync on table palettes

fd5a754

test: add and fix unit tests

eb2cf04

Merge branch 'main' into color-mapping-tables

f3814f9

cleanup cell value merged logic

f4c1ab5

fix i18n error

a3ed882

Merge branch 'main' into color-mapping-tables

c27f325

dej611 reviewed Aug 20, 2024

View reviewed changes

chore: add colorMapping telemetry

df48141

nickofthyme requested a review from a team as a code owner August 23, 2024 15:39

nickofthyme commented Aug 23, 2024

View reviewed changes

jbudz approved these changes Aug 23, 2024

View reviewed changes

nickofthyme and others added 2 commits August 23, 2024 08:50

Merge branch 'main' into color-mapping-tables

3be2d4f

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

5f0b622

…-fix'

dej611 approved these changes Aug 26, 2024

View reviewed changes

x-pack/plugins/lens/public/visualizations/datatable/components/cell_value.tsx Outdated Show resolved Hide resolved

Merge branch 'main' into color-mapping-tables

dee8b55

Heenawter approved these changes Aug 26, 2024

View reviewed changes

mbondyra reviewed Aug 26, 2024

View reviewed changes

nickofthyme and others added 2 commits August 26, 2024 13:24

chore: apply code review changes

034334a

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>

chore: fix linting errors

f0f0f47

MichaelMarcialis approved these changes Aug 26, 2024

View reviewed changes

packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx Show resolved Hide resolved

nickofthyme and others added 4 commits August 27, 2024 16:47

fix: palette issue on datasource update

77cd409

fix: design styles for padding and icon coloring

fed3089

Merge branch 'main' into color-mapping-tables

5a873fa

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

472dd0f

…-fix'

nickofthyme merged commit a994629 into elastic:main Aug 28, 2024
20 checks passed

kibanamachine added v8.16.0 backport:skip This commit does not require backporting labels Aug 28, 2024

teresaalvarezsoler mentioned this pull request Sep 5, 2024

[Visualization] Add Status Indicators #183432

Open

nickofthyme mentioned this pull request Sep 24, 2024

[Lens][Datatable] Fix non-numeric default cell text alignment #193886

Merged

1 task

wajihaparvez mentioned this pull request Nov 6, 2024

[Docs] Add section for assigning colors to terms #199241

Merged

mbondyra mentioned this pull request Nov 7, 2024

[Lens] Color by term on metric vis last value #197054

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens][Table] Add color by terms with color mappings #189895

[Lens][Table] Add color by terms with color mappings #189895

nickofthyme commented Aug 5, 2024 •

edited

Loading

nickofthyme left a comment

teresaalvarezsoler commented Aug 6, 2024

teresaalvarezsoler left a comment

dej611 left a comment

nickofthyme Aug 23, 2024

jbudz left a comment

dej611 left a comment

Heenawter left a comment •

edited

Loading

mbondyra Aug 26, 2024

nickofthyme Aug 27, 2024

MichaelMarcialis left a comment

kibana-ci commented Aug 28, 2024

API count

ESLint disabled line counts

Total ESLint disabled count

		@@ -15,22 +15,26 @@ import { Container } from './components/container/container';
		import { ColorMapping } from './config';

[Lens][Table] Add color by terms with color mappings #189895

[Lens][Table] Add color by terms with color mappings #189895

Conversation

nickofthyme commented Aug 5, 2024 • edited Loading

Summary

Checklist

nickofthyme left a comment

Choose a reason for hiding this comment

teresaalvarezsoler commented Aug 6, 2024

teresaalvarezsoler left a comment

Choose a reason for hiding this comment

dej611 left a comment

Choose a reason for hiding this comment

nickofthyme Aug 23, 2024

Choose a reason for hiding this comment

jbudz left a comment

Choose a reason for hiding this comment

dej611 left a comment

Choose a reason for hiding this comment

Heenawter left a comment • edited Loading

Choose a reason for hiding this comment

mbondyra Aug 26, 2024

Choose a reason for hiding this comment

nickofthyme Aug 27, 2024

Choose a reason for hiding this comment

MichaelMarcialis left a comment

Choose a reason for hiding this comment

kibana-ci commented Aug 28, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

ESLint disabled line counts

Total ESLint disabled count

History

nickofthyme commented Aug 5, 2024 •

edited

Loading

Heenawter left a comment •

edited

Loading