[Lens][Table] Add color by terms with color mappings#189895
[Lens][Table] Add color by terms with color mappings#189895nickofthyme merged 50 commits intoelastic:mainfrom
Conversation
nickofthyme
left a comment
There was a problem hiding this comment.
@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
Show resolved
Hide resolved
packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx
Show resolved
Hide resolved
|
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
Show resolved
Hide resolved
teresaalvarezsoler
left a comment
There was a problem hiding this comment.
Everything looks good to me from the user perspective.
dej611
left a comment
There was a problem hiding this comment.
Had a first review pass, not much on the code side, but I think the default palette in this case should be changed.
x-pack/plugins/lens/public/visualizations/datatable/components/dimension_editor.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
| @@ -15,22 +15,26 @@ import { Container } from './components/container/container'; | |||
| import { ColorMapping } from './config'; | |||
There was a problem hiding this comment.
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)
Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
MichaelMarcialis
left a comment
There was a problem hiding this comment.
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
Show resolved
Hide resolved
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
Unknown metric groupsAPI count
ESLint disabled line counts
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: |
## 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> (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>
## Summary In #189895 we added logic to the `getColorCategories` util function to handle transpose columns. This mistakenly assumed the first row of the datatable would include all transposed column ids (i.e. `${value}---${columnId}`). After closer analysis this case is only present the in datatable rendering (i.e. `table_basic.tsx`), but in this context we also have the original non-transposed datatable. So to simplify this we revert this logic to not care about transposed datatables. Now the color mappings are correctly assigned across **split by** columns. <img width="720" alt="image" src="https://github.com/user-attachments/assets/c588930e-53b9-409f-a257-2c5be35aaa38" /> Fixes #208555 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ## Release note Fixes an issue in Lens (#208555) Table where a split-by metric on a terms rendered incorrect colors in table cells. --------- Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
…#208623) ## Summary In elastic#189895 we added logic to the `getColorCategories` util function to handle transpose columns. This mistakenly assumed the first row of the datatable would include all transposed column ids (i.e. `${value}---${columnId}`). After closer analysis this case is only present the in datatable rendering (i.e. `table_basic.tsx`), but in this context we also have the original non-transposed datatable. So to simplify this we revert this logic to not care about transposed datatables. Now the color mappings are correctly assigned across **split by** columns. <img width="720" alt="image" src="https://github.com/user-attachments/assets/c588930e-53b9-409f-a257-2c5be35aaa38" /> Fixes elastic#208555 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ## Release note Fixes an issue in Lens (elastic#208555) Table where a split-by metric on a terms rendered incorrect colors in table cells. --------- Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> Co-authored-by: Marco Liberati <dej611@users.noreply.github.com> (cherry picked from commit a93aaee)
…#208623) ## Summary In elastic#189895 we added logic to the `getColorCategories` util function to handle transpose columns. This mistakenly assumed the first row of the datatable would include all transposed column ids (i.e. `${value}---${columnId}`). After closer analysis this case is only present the in datatable rendering (i.e. `table_basic.tsx`), but in this context we also have the original non-transposed datatable. So to simplify this we revert this logic to not care about transposed datatables. Now the color mappings are correctly assigned across **split by** columns. <img width="720" alt="image" src="https://github.com/user-attachments/assets/c588930e-53b9-409f-a257-2c5be35aaa38" /> Fixes elastic#208555 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ## Release note Fixes an issue in Lens (elastic#208555) Table where a split-by metric on a terms rendered incorrect colors in table cells. --------- Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
…208623) (#209927) # Backport This will backport the following commits from `main` to `8.x`: - [[Lens][Datatable] Fix color mapping of transposed datatables (#208623)](#208623) <!--- Backport version: 9.6.4 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Nick Partridge","email":"nicholas.partridge@elastic.co"},"sourceCommit":{"committedDate":"2025-02-05T06:07:26Z","message":"[Lens][Datatable] Fix color mapping of transposed datatables (#208623)\n\n## Summary\r\n\r\nIn #189895 we added logic to the `getColorCategories` util function to\r\nhandle transpose columns. This mistakenly assumed the first row of the\r\ndatatable would include all transposed column ids (i.e.\r\n`${value}---${columnId}`). After closer analysis this case is only\r\npresent the in datatable rendering (i.e. `table_basic.tsx`), but in this\r\ncontext we also have the original non-transposed datatable.\r\n\r\nSo to simplify this we revert this logic to not care about transposed\r\ndatatables. Now the color mappings are correctly assigned across **split\r\nby** columns.\r\n\r\n<img width=\"720\" alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/c588930e-53b9-409f-a257-2c5be35aaa38\"\r\n/>\r\n\r\nFixes #208555\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n## Release note\r\n\r\nFixes an issue in Lens (#208555) Table where a split-by metric on a\r\nterms rendered incorrect colors in table cells.\r\n\r\n---------\r\n\r\nCo-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>\r\nCo-authored-by: Marco Liberati <dej611@users.noreply.github.com>","sha":"a93aaeee97d018c3e20c9cd1e26b8bc596986a58","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Visualizations","Feature:Lens","backport:prev-major","v9.1.0"],"title":"[Lens][Datatable] Fix color mapping of transposed datatables","number":208623,"url":"https://github.com/elastic/kibana/pull/208623","mergeCommit":{"message":"[Lens][Datatable] Fix color mapping of transposed datatables (#208623)\n\n## Summary\r\n\r\nIn #189895 we added logic to the `getColorCategories` util function to\r\nhandle transpose columns. This mistakenly assumed the first row of the\r\ndatatable would include all transposed column ids (i.e.\r\n`${value}---${columnId}`). After closer analysis this case is only\r\npresent the in datatable rendering (i.e. `table_basic.tsx`), but in this\r\ncontext we also have the original non-transposed datatable.\r\n\r\nSo to simplify this we revert this logic to not care about transposed\r\ndatatables. Now the color mappings are correctly assigned across **split\r\nby** columns.\r\n\r\n<img width=\"720\" alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/c588930e-53b9-409f-a257-2c5be35aaa38\"\r\n/>\r\n\r\nFixes #208555\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n## Release note\r\n\r\nFixes an issue in Lens (#208555) Table where a split-by metric on a\r\nterms rendered incorrect colors in table cells.\r\n\r\n---------\r\n\r\nCo-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>\r\nCo-authored-by: Marco Liberati <dej611@users.noreply.github.com>","sha":"a93aaeee97d018c3e20c9cd1e26b8bc596986a58"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208623","number":208623,"mergeCommit":{"message":"[Lens][Datatable] Fix color mapping of transposed datatables (#208623)\n\n## Summary\r\n\r\nIn #189895 we added logic to the `getColorCategories` util function to\r\nhandle transpose columns. This mistakenly assumed the first row of the\r\ndatatable would include all transposed column ids (i.e.\r\n`${value}---${columnId}`). After closer analysis this case is only\r\npresent the in datatable rendering (i.e. `table_basic.tsx`), but in this\r\ncontext we also have the original non-transposed datatable.\r\n\r\nSo to simplify this we revert this logic to not care about transposed\r\ndatatables. Now the color mappings are correctly assigned across **split\r\nby** columns.\r\n\r\n<img width=\"720\" alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/c588930e-53b9-409f-a257-2c5be35aaa38\"\r\n/>\r\n\r\nFixes #208555\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n## Release note\r\n\r\nFixes an issue in Lens (#208555) Table where a split-by metric on a\r\nterms rendered incorrect colors in table cells.\r\n\r\n---------\r\n\r\nCo-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>\r\nCo-authored-by: Marco Liberati <dej611@users.noreply.github.com>","sha":"a93aaeee97d018c3e20c9cd1e26b8bc596986a58"}}]}] BACKPORT--> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
…208623) (#209924) # Backport This will backport the following commits from `main` to `9.0`: - [[Lens][Datatable] Fix color mapping of transposed datatables (#208623)](#208623) <!--- Backport version: 9.6.4 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Nick Partridge","email":"nicholas.partridge@elastic.co"},"sourceCommit":{"committedDate":"2025-02-05T06:07:26Z","message":"[Lens][Datatable] Fix color mapping of transposed datatables (#208623)\n\n## Summary\r\n\r\nIn #189895 we added logic to the `getColorCategories` util function to\r\nhandle transpose columns. This mistakenly assumed the first row of the\r\ndatatable would include all transposed column ids (i.e.\r\n`${value}---${columnId}`). After closer analysis this case is only\r\npresent the in datatable rendering (i.e. `table_basic.tsx`), but in this\r\ncontext we also have the original non-transposed datatable.\r\n\r\nSo to simplify this we revert this logic to not care about transposed\r\ndatatables. Now the color mappings are correctly assigned across **split\r\nby** columns.\r\n\r\n<img width=\"720\" alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/c588930e-53b9-409f-a257-2c5be35aaa38\"\r\n/>\r\n\r\nFixes #208555\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n## Release note\r\n\r\nFixes an issue in Lens (#208555) Table where a split-by metric on a\r\nterms rendered incorrect colors in table cells.\r\n\r\n---------\r\n\r\nCo-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>\r\nCo-authored-by: Marco Liberati <dej611@users.noreply.github.com>","sha":"a93aaeee97d018c3e20c9cd1e26b8bc596986a58","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Visualizations","Feature:Lens","backport:prev-major","v9.1.0"],"title":"[Lens][Datatable] Fix color mapping of transposed datatables","number":208623,"url":"https://github.com/elastic/kibana/pull/208623","mergeCommit":{"message":"[Lens][Datatable] Fix color mapping of transposed datatables (#208623)\n\n## Summary\r\n\r\nIn #189895 we added logic to the `getColorCategories` util function to\r\nhandle transpose columns. This mistakenly assumed the first row of the\r\ndatatable would include all transposed column ids (i.e.\r\n`${value}---${columnId}`). After closer analysis this case is only\r\npresent the in datatable rendering (i.e. `table_basic.tsx`), but in this\r\ncontext we also have the original non-transposed datatable.\r\n\r\nSo to simplify this we revert this logic to not care about transposed\r\ndatatables. Now the color mappings are correctly assigned across **split\r\nby** columns.\r\n\r\n<img width=\"720\" alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/c588930e-53b9-409f-a257-2c5be35aaa38\"\r\n/>\r\n\r\nFixes #208555\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n## Release note\r\n\r\nFixes an issue in Lens (#208555) Table where a split-by metric on a\r\nterms rendered incorrect colors in table cells.\r\n\r\n---------\r\n\r\nCo-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>\r\nCo-authored-by: Marco Liberati <dej611@users.noreply.github.com>","sha":"a93aaeee97d018c3e20c9cd1e26b8bc596986a58"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208623","number":208623,"mergeCommit":{"message":"[Lens][Datatable] Fix color mapping of transposed datatables (#208623)\n\n## Summary\r\n\r\nIn #189895 we added logic to the `getColorCategories` util function to\r\nhandle transpose columns. This mistakenly assumed the first row of the\r\ndatatable would include all transposed column ids (i.e.\r\n`${value}---${columnId}`). After closer analysis this case is only\r\npresent the in datatable rendering (i.e. `table_basic.tsx`), but in this\r\ncontext we also have the original non-transposed datatable.\r\n\r\nSo to simplify this we revert this logic to not care about transposed\r\ndatatables. Now the color mappings are correctly assigned across **split\r\nby** columns.\r\n\r\n<img width=\"720\" alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/c588930e-53b9-409f-a257-2c5be35aaa38\"\r\n/>\r\n\r\nFixes #208555\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n## Release note\r\n\r\nFixes an issue in Lens (#208555) Table where a split-by metric on a\r\nterms rendered incorrect colors in table cells.\r\n\r\n---------\r\n\r\nCo-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>\r\nCo-authored-by: Marco Liberati <dej611@users.noreply.github.com>","sha":"a93aaeee97d018c3e20c9cd1e26b8bc596986a58"}}]}] BACKPORT--> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>



Summary
Adds support for coloring table cells by terms with color mappings assignments. Supported for both
RowsandMetricdimensions.Zight.Recording.2024-08-05.at.07.46.55.AM.mp4
closes #179322
Checklist