Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Controls] Switch options list suggestions to use a Map object #155073

Closed
Heenawter opened this issue Apr 17, 2023 · 1 comment · Fixed by #155207
Closed

[Controls] Switch options list suggestions to use a Map object #155073

Heenawter opened this issue Apr 17, 2023 · 1 comment · Fixed by #155207
Assignees
@Heenawter
Labels
Feature:Input Control Input controls visualization impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas

Comments

@Heenawter
Copy link
Contributor

Heenawter commented Apr 17, 2023 •
edited

Describe the feature:
When the keys of an object are numeric (including numeric strings), Javascript takes over the order of the keys and sorts them ascending numerically, regardless of what order you add the keys in - this goes against the behaviour for regular string keys, which always respect the order for which they were added. A good example of this can be found here.

This causes an issue where, when creating an options list control on a numeric keyword field, the sorting gives unexpected results since the ES sorting (which uses string sorting in this case) conflicts with the Javascript key sorting. This is especially obvious once you "load more" on a numeric keyword field that is sorted in descending order alphabetically - you'll notice that, once you load more, (a) the original results will be shuffled in comparison to the "load more" results and (b) the "load more" results will always be sorted ascending rather than descending:

Screen.Recording.2023-04-17.at.11.28.24.AM.mov

Describe a specific use case for the feature:
By switching to a map (which respects and preserves the order of the keys based on the order they were added), we will no longer see this bug. As an added bonus, it seems like using a Map object could also have some performance improvements for our use case:

when keys are (non-numeric) string, Map outperforms Object on all operations. ... when the number of entries is not really huge (under 100000), Map is twice as fast as Object on insertion speed, but as the size grows over 100000, the performance gap starts to shrink.

Map is faster than Object unless you have small integer, array-indexed keys, and it is more memory-efficient.

(Source: https://www.zhenghao.io/posts/object-vs-map#performance-extravaganza)

It also comes with some handy DX improvements - for example, you can call suggestions.keys() instead of Object.keys(suggestions) and suggestions.size() instead of Object.keys(suggestions).length
@Heenawter Heenawter added Feature:Input Control Input controls visualization Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas loe:medium Medium Level of Effort impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. labels Apr 17, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@Heenawter Heenawter self-assigned this Apr 17, 2023
@Heenawter Heenawter mentioned this issue Apr 25, 2023
Merged
3 tasks
Heenawter added a commit that referenced this issue Apr 26, 2023
@Heenawter
[Controls] Fix sorting of numeric keyword fields (#155207)
b3f65f7 
Closes #155073

## Summary

### Before

Previously, the options list suggestions were stored as a dictionary
(i.e. an object of key+value pairs) - while this worked for most fields,
unbeknownst to us, Javascript tries to sort numeric keys (regardless of
if they are of type `string` or `number`) based on their value.

This meant that, as part of the parsing process when using an options
list control for a numeric `keyword` field, the results returned by the
ES query were **always** sorted in ascending numeric order regardless of
the sorting method that was picked (note that this is especially obvious
once you "load more", which is what I did for the following
screenshots):


|                        | Ascending | Descending |
|--------------|-----------|------------|
| Alphabetical | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png"/>
|
| Doc count | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png"/>
|


### After

This PR converts the options list suggestions to be stored as an
**array** of key/value pairs in order to preserve the order returned
from Elasticsearch - now, you get the expected string-sorted ordering
when using numeric `keyword` fields in an options list control:

|                        | Ascending | Descending |
|--------------|-----------|------------|
| Alphabetical | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png"/>
|
| Doc count | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png"/>
|


Notice in the above that we are now using **string sorting** for the
numeric values when alphabetical sorting is selected, which means you
aren't getting the expected "numeric" sorting - so for example, when
sorted ascending, `"6" > "52"` because it is only comparing the first
character and `"6" > "5"`. This will be handled much better once
[numeric field support](#126795)
is added to options lists.


### 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] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
Heenawter added a commit to Heenawter/kibana that referenced this issue Apr 26, 2023
@Heenawter
[Controls] Fix sorting of numeric keyword fields (elastic#155207)
8b741d6 
Closes elastic#155073

## Summary

### Before

Previously, the options list suggestions were stored as a dictionary
(i.e. an object of key+value pairs) - while this worked for most fields,
unbeknownst to us, Javascript tries to sort numeric keys (regardless of
if they are of type `string` or `number`) based on their value.

This meant that, as part of the parsing process when using an options
list control for a numeric `keyword` field, the results returned by the
ES query were **always** sorted in ascending numeric order regardless of
the sorting method that was picked (note that this is especially obvious
once you "load more", which is what I did for the following
screenshots):

|                        | Ascending | Descending |
|--------------|-----------|------------|
| Alphabetical | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png"/>
|
| Doc count | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png"/>
|

### After

This PR converts the options list suggestions to be stored as an
**array** of key/value pairs in order to preserve the order returned
from Elasticsearch - now, you get the expected string-sorted ordering
when using numeric `keyword` fields in an options list control:

|                        | Ascending | Descending |
|--------------|-----------|------------|
| Alphabetical | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png"/>
|
| Doc count | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png"/>
|

Notice in the above that we are now using **string sorting** for the
numeric values when alphabetical sorting is selected, which means you
aren't getting the expected "numeric" sorting - so for example, when
sorted ascending, `"6" > "52"` because it is only comparing the first
character and `"6" > "5"`. This will be handled much better once
[numeric field support](elastic#126795)
is added to options lists.

### 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] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

(cherry picked from commit b3f65f7)

# Conflicts:
#	src/plugins/controls/public/options_list/embeddable/options_list_embeddable.tsx
Heenawter added a commit that referenced this issue Apr 26, 2023
@Heenawter
[8.7] [Controls] Fix sorting of numeric keyword fields (#155207) (#15…
167c328 
…5934)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Controls] Fix sorting of numeric keyword fields
(#155207)](#155207)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-04-26T18:19:46Z","message":"[Controls]
Fix sorting of numeric keyword fields (#155207)\n\nCloses
#155073
Summary\r\n\r\n### Before\r\n\r\nPreviously, the options list
suggestions were stored as a dictionary\r\n(i.e. an object of key+value
pairs) - while this worked for most fields,\r\nunbeknownst to us,
Javascript tries to sort numeric keys (regardless of\r\nif they are of
type `string` or `number`) based on their value.\r\n\r\nThis meant that,
as part of the parsing process when using an options\r\nlist control for
a numeric `keyword` field, the results returned by the\r\nES query were
**always** sorted in ascending numeric order regardless of\r\nthe
sorting method that was picked (note that this is especially
obvious\r\nonce you \"load more\", which is what I did for the
following\r\nscreenshots):\r\n\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png\"/>\r\n|\r\n\r\n\r\n###
After\r\n\r\nThis PR converts the options list suggestions to be stored
as an\r\n**array** of key/value pairs in order to preserve the order
returned\r\nfrom Elasticsearch - now, you get the expected string-sorted
ordering\r\nwhen using numeric `keyword` fields in an options list
control:\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png\"/>\r\n|\r\n\r\n\r\nNotice
in the above that we are now using **string sorting** for the\r\nnumeric
values when alphabetical sorting is selected, which means you\r\naren't
getting the expected \"numeric\" sorting - so for example,
when\r\nsorted ascending, `\"6\" > \"52\"` because it is only comparing
the first\r\ncharacter and `\"6\" > \"5\"`. This will be handled much
better once\r\n[numeric field
support](#126795 added to
options lists.\r\n\r\n\r\n### Checklist\r\n\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] This was
checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"b3f65f79e5017b70fe26e5aa1c2ee1085e68c138","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Feature:Input
Control","Team:Presentation","loe:days","impact:medium","backport:prev-minor","v8.8.0","v8.9.0"],"number":155207,"url":"#155207
Fix sorting of numeric keyword fields (#155207)\n\nCloses
#155073
Summary\r\n\r\n### Before\r\n\r\nPreviously, the options list
suggestions were stored as a dictionary\r\n(i.e. an object of key+value
pairs) - while this worked for most fields,\r\nunbeknownst to us,
Javascript tries to sort numeric keys (regardless of\r\nif they are of
type `string` or `number`) based on their value.\r\n\r\nThis meant that,
as part of the parsing process when using an options\r\nlist control for
a numeric `keyword` field, the results returned by the\r\nES query were
**always** sorted in ascending numeric order regardless of\r\nthe
sorting method that was picked (note that this is especially
obvious\r\nonce you \"load more\", which is what I did for the
following\r\nscreenshots):\r\n\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png\"/>\r\n|\r\n\r\n\r\n###
After\r\n\r\nThis PR converts the options list suggestions to be stored
as an\r\n**array** of key/value pairs in order to preserve the order
returned\r\nfrom Elasticsearch - now, you get the expected string-sorted
ordering\r\nwhen using numeric `keyword` fields in an options list
control:\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png\"/>\r\n|\r\n\r\n\r\nNotice
in the above that we are now using **string sorting** for the\r\nnumeric
values when alphabetical sorting is selected, which means you\r\naren't
getting the expected \"numeric\" sorting - so for example,
when\r\nsorted ascending, `\"6\" > \"52\"` because it is only comparing
the first\r\ncharacter and `\"6\" > \"5\"`. This will be handled much
better once\r\n[numeric field
support](#126795 added to
options lists.\r\n\r\n\r\n### Checklist\r\n\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] This was
checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"b3f65f79e5017b70fe26e5aa1c2ee1085e68c138"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/155207","number":155207,"mergeCommit":{"message":"[Controls]
Fix sorting of numeric keyword fields (#155207)\n\nCloses
#155073
Summary\r\n\r\n### Before\r\n\r\nPreviously, the options list
suggestions were stored as a dictionary\r\n(i.e. an object of key+value
pairs) - while this worked for most fields,\r\nunbeknownst to us,
Javascript tries to sort numeric keys (regardless of\r\nif they are of
type `string` or `number`) based on their value.\r\n\r\nThis meant that,
as part of the parsing process when using an options\r\nlist control for
a numeric `keyword` field, the results returned by the\r\nES query were
**always** sorted in ascending numeric order regardless of\r\nthe
sorting method that was picked (note that this is especially
obvious\r\nonce you \"load more\", which is what I did for the
following\r\nscreenshots):\r\n\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png\"/>\r\n|\r\n\r\n\r\n###
After\r\n\r\nThis PR converts the options list suggestions to be stored
as an\r\n**array** of key/value pairs in order to preserve the order
returned\r\nfrom Elasticsearch - now, you get the expected string-sorted
ordering\r\nwhen using numeric `keyword` fields in an options list
control:\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png\"/>\r\n|\r\n\r\n\r\nNotice
in the above that we are now using **string sorting** for the\r\nnumeric
values when alphabetical sorting is selected, which means you\r\naren't
getting the expected \"numeric\" sorting - so for example,
when\r\nsorted ascending, `\"6\" > \"52\"` because it is only comparing
the first\r\ncharacter and `\"6\" > \"5\"`. This will be handled much
better once\r\n[numeric field
support](#126795 added to
options lists.\r\n\r\n\r\n### Checklist\r\n\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] This was
checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"b3f65f79e5017b70fe26e5aa1c2ee1085e68c138"}},{"branch":"8.9","label":"v8.9.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
Heenawter added a commit to Heenawter/kibana that referenced this issue Apr 28, 2023
@Heenawter
[Controls] Fix sorting of numeric keyword fields (elastic#155207)
92362ec 
Closes elastic#155073

## Summary

### Before

Previously, the options list suggestions were stored as a dictionary
(i.e. an object of key+value pairs) - while this worked for most fields,
unbeknownst to us, Javascript tries to sort numeric keys (regardless of
if they are of type `string` or `number`) based on their value.

This meant that, as part of the parsing process when using an options
list control for a numeric `keyword` field, the results returned by the
ES query were **always** sorted in ascending numeric order regardless of
the sorting method that was picked (note that this is especially obvious
once you "load more", which is what I did for the following
screenshots):

|                        | Ascending | Descending |
|--------------|-----------|------------|
| Alphabetical | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png"/>
|
| Doc count | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png"/>
|

### After

This PR converts the options list suggestions to be stored as an
**array** of key/value pairs in order to preserve the order returned
from Elasticsearch - now, you get the expected string-sorted ordering
when using numeric `keyword` fields in an options list control:

|                        | Ascending | Descending |
|--------------|-----------|------------|
| Alphabetical | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png"/>
|
| Doc count | <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png"/>
| <img width="320px"
src="https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png"/>
|

Notice in the above that we are now using **string sorting** for the
numeric values when alphabetical sorting is selected, which means you
aren't getting the expected "numeric" sorting - so for example, when
sorted ascending, `"6" > "52"` because it is only comparing the first
character and `"6" > "5"`. This will be handled much better once
[numeric field support](elastic#126795)
is added to options lists.

### 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] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

(cherry picked from commit b3f65f7)
Heenawter added a commit that referenced this issue Apr 28, 2023
@Heenawter
[8.8] [Controls] Fix sorting of numeric keyword fields (#155207) (#15…
1d581aa 
…6197)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[Controls] Fix sorting of numeric keyword fields
(#155207)](#155207)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-04-26T18:19:46Z","message":"[Controls]
Fix sorting of numeric keyword fields (#155207)\n\nCloses
#155073
Summary\r\n\r\n### Before\r\n\r\nPreviously, the options list
suggestions were stored as a dictionary\r\n(i.e. an object of key+value
pairs) - while this worked for most fields,\r\nunbeknownst to us,
Javascript tries to sort numeric keys (regardless of\r\nif they are of
type `string` or `number`) based on their value.\r\n\r\nThis meant that,
as part of the parsing process when using an options\r\nlist control for
a numeric `keyword` field, the results returned by the\r\nES query were
**always** sorted in ascending numeric order regardless of\r\nthe
sorting method that was picked (note that this is especially
obvious\r\nonce you \"load more\", which is what I did for the
following\r\nscreenshots):\r\n\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png\"/>\r\n|\r\n\r\n\r\n###
After\r\n\r\nThis PR converts the options list suggestions to be stored
as an\r\n**array** of key/value pairs in order to preserve the order
returned\r\nfrom Elasticsearch - now, you get the expected string-sorted
ordering\r\nwhen using numeric `keyword` fields in an options list
control:\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png\"/>\r\n|\r\n\r\n\r\nNotice
in the above that we are now using **string sorting** for the\r\nnumeric
values when alphabetical sorting is selected, which means you\r\naren't
getting the expected \"numeric\" sorting - so for example,
when\r\nsorted ascending, `\"6\" > \"52\"` because it is only comparing
the first\r\ncharacter and `\"6\" > \"5\"`. This will be handled much
better once\r\n[numeric field
support](#126795 added to
options lists.\r\n\r\n\r\n### Checklist\r\n\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] This was
checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"b3f65f79e5017b70fe26e5aa1c2ee1085e68c138","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Feature:Input
Control","Team:Presentation","loe:days","impact:medium","backport:prev-minor","v8.8.0","v8.7.1","v8.9.0"],"number":155207,"url":"#155207
Fix sorting of numeric keyword fields (#155207)\n\nCloses
#155073
Summary\r\n\r\n### Before\r\n\r\nPreviously, the options list
suggestions were stored as a dictionary\r\n(i.e. an object of key+value
pairs) - while this worked for most fields,\r\nunbeknownst to us,
Javascript tries to sort numeric keys (regardless of\r\nif they are of
type `string` or `number`) based on their value.\r\n\r\nThis meant that,
as part of the parsing process when using an options\r\nlist control for
a numeric `keyword` field, the results returned by the\r\nES query were
**always** sorted in ascending numeric order regardless of\r\nthe
sorting method that was picked (note that this is especially
obvious\r\nonce you \"load more\", which is what I did for the
following\r\nscreenshots):\r\n\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png\"/>\r\n|\r\n\r\n\r\n###
After\r\n\r\nThis PR converts the options list suggestions to be stored
as an\r\n**array** of key/value pairs in order to preserve the order
returned\r\nfrom Elasticsearch - now, you get the expected string-sorted
ordering\r\nwhen using numeric `keyword` fields in an options list
control:\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png\"/>\r\n|\r\n\r\n\r\nNotice
in the above that we are now using **string sorting** for the\r\nnumeric
values when alphabetical sorting is selected, which means you\r\naren't
getting the expected \"numeric\" sorting - so for example,
when\r\nsorted ascending, `\"6\" > \"52\"` because it is only comparing
the first\r\ncharacter and `\"6\" > \"5\"`. This will be handled much
better once\r\n[numeric field
support](#126795 added to
options lists.\r\n\r\n\r\n### Checklist\r\n\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] This was
checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"b3f65f79e5017b70fe26e5aa1c2ee1085e68c138"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/155207","number":155207,"mergeCommit":{"message":"[Controls]
Fix sorting of numeric keyword fields (#155207)\n\nCloses
#155073
Summary\r\n\r\n### Before\r\n\r\nPreviously, the options list
suggestions were stored as a dictionary\r\n(i.e. an object of key+value
pairs) - while this worked for most fields,\r\nunbeknownst to us,
Javascript tries to sort numeric keys (regardless of\r\nif they are of
type `string` or `number`) based on their value.\r\n\r\nThis meant that,
as part of the parsing process when using an options\r\nlist control for
a numeric `keyword` field, the results returned by the\r\nES query were
**always** sorted in ascending numeric order regardless of\r\nthe
sorting method that was picked (note that this is especially
obvious\r\nonce you \"load more\", which is what I did for the
following\r\nscreenshots):\r\n\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png\"/>\r\n|\r\n\r\n\r\n###
After\r\n\r\nThis PR converts the options list suggestions to be stored
as an\r\n**array** of key/value pairs in order to preserve the order
returned\r\nfrom Elasticsearch - now, you get the expected string-sorted
ordering\r\nwhen using numeric `keyword` fields in an options list
control:\r\n\r\n| | Ascending | Descending
|\r\n|--------------|-----------|------------|\r\n| Alphabetical | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png\"/>\r\n|\r\n|
Doc count | <img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png\"/>\r\n|
<img
width=\"320px\"\r\nsrc=\"https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png\"/>\r\n|\r\n\r\n\r\nNotice
in the above that we are now using **string sorting** for the\r\nnumeric
values when alphabetical sorting is selected, which means you\r\naren't
getting the expected \"numeric\" sorting - so for example,
when\r\nsorted ascending, `\"6\" > \"52\"` because it is only comparing
the first\r\ncharacter and `\"6\" > \"5\"`. This will be handled much
better once\r\n[numeric field
support](#126795 added to
options lists.\r\n\r\n\r\n### Checklist\r\n\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] This was
checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"b3f65f79e5017b70fe26e5aa1c2ee1085e68c138"}},{"branch":"8.7","label":"v8.7.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/155934","number":155934,"state":"MERGED","mergeCommit":{"sha":"167c3285d8a94bfce14a7e5e0d89825e38ccef3a","message":"[8.7]
[Controls] Fix sorting of numeric keyword fields (#155207)
(#155934)\n\n# Backport\n\nThis will backport the following commits from
`main` to `8.7`:\n- [[Controls] Fix sorting of numeric keyword
fields\n(#155207)](https://github.com/elastic/kibana/pull/155207)\n\n<!---
Backport version: 8.9.7 -->\n\n### Questions ?\nPlease refer to the
[Backport
tool\ndocumentation](https://github.com/sqren/backport)\n\n<!--BACKPORT
[{\"author\":{\"name\":\"Hannah\nMudge\",\"email\":\"Heenawter@users.noreply.github.com\"},\"sourceCommit\":{\"committedDate\":\"2023-04-26T18:19:46Z\",\"message\":\"[Controls]\nFix
sorting of numeric keyword fields
(#155207)\\n\\nCloses\nhttps://github.com//issues/155073\\r\\n\\r\\n##\nSummary\\r\\n\\r\\n###
Before\\r\\n\\r\\nPreviously, the options list\nsuggestions were stored
as a dictionary\\r\\n(i.e. an object of key+value\npairs) - while this
worked for most fields,\\r\\nunbeknownst to us,\nJavascript tries to
sort numeric keys (regardless of\\r\\nif they are of\ntype `string` or
`number`) based on their value.\\r\\n\\r\\nThis meant that,\nas part of
the parsing process when using an options\\r\\nlist control for\na
numeric `keyword` field, the results returned by the\\r\\nES query
were\n**always** sorted in ascending numeric order regardless
of\\r\\nthe\nsorting method that was picked (note that this is
especially\nobvious\\r\\nonce you \\\"load more\\\", which is what I did
for the\nfollowing\\r\\nscreenshots):\\r\\n\\r\\n\\r\\n| | Ascending |
Descending\n|\\r\\n|--------------|-----------|------------|\\r\\n|
Alphabetical |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png\\\"/>\\r\\n|\\r\\n|\nDoc
count |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png\\\"/>\\r\\n|\\r\\n\\r\\n\\r\\n###\nAfter\\r\\n\\r\\nThis
PR converts the options list suggestions to be stored\nas
an\\r\\n**array** of key/value pairs in order to preserve the
order\nreturned\\r\\nfrom Elasticsearch - now, you get the expected
string-sorted\nordering\\r\\nwhen using numeric `keyword` fields in an
options list\ncontrol:\\r\\n\\r\\n| | Ascending |
Descending\n|\\r\\n|--------------|-----------|------------|\\r\\n|
Alphabetical |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png\\\"/>\\r\\n|\\r\\n|\nDoc
count |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png\\\"/>\\r\\n|\\r\\n\\r\\n\\r\\nNotice\nin
the above that we are now using **string sorting** for
the\\r\\nnumeric\nvalues when alphabetical sorting is selected, which
means you\\r\\naren't\ngetting the expected \\\"numeric\\\" sorting - so
for example,\nwhen\\r\\nsorted ascending, `\\\"6\\\" > \\\"52\\\"`
because it is only comparing\nthe first\\r\\ncharacter and `\\\"6\\\" >
\\\"5\\\"`. This will be handled much\nbetter once\\r\\n[numeric
field\nsupport](#126795
added to\noptions lists.\\r\\n\\r\\n\\r\\n###
Checklist\\r\\n\\r\\n\\r\\n- [x] [Unit
or\nfunctional\\r\\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\\r\\nwere\nupdated
or added to match the most common scenarios\\r\\n- [x] This was\nchecked
for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\\r\\n\\r\\n\\r\\n###\nFor
maintainers\\r\\n\\r\\n- [ ] This was checked for breaking API
changes\nand
was\n[labeled\\r\\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\",\"sha\":\"b3f65f79e5017b70fe26e5aa1c2ee1085e68c138\",\"branchLabelMapping\":{\"^v8.8.0$\":\"main\",\"^v(\\\\d+).(\\\\d+).\\\\d+$\":\"$1.$2\"}},\"sourcePullRequest\":{\"labels\":[\"bug\",\"release_note:fix\",\"Feature:Input\nControl\",\"Team:Presentation\",\"loe:days\",\"impact:medium\",\"backport:prev-minor\",\"v8.8.0\",\"v8.9.0\"],\"number\":155207,\"url\":\"https://github.com/elastic/kibana/pull/155207\",\"mergeCommit\":{\"message\":\"[Controls]\nFix
sorting of numeric keyword fields
(#155207)\\n\\nCloses\nhttps://github.com//issues/155073\\r\\n\\r\\n##\nSummary\\r\\n\\r\\n###
Before\\r\\n\\r\\nPreviously, the options list\nsuggestions were stored
as a dictionary\\r\\n(i.e. an object of key+value\npairs) - while this
worked for most fields,\\r\\nunbeknownst to us,\nJavascript tries to
sort numeric keys (regardless of\\r\\nif they are of\ntype `string` or
`number`) based on their value.\\r\\n\\r\\nThis meant that,\nas part of
the parsing process when using an options\\r\\nlist control for\na
numeric `keyword` field, the results returned by the\\r\\nES query
were\n**always** sorted in ascending numeric order regardless
of\\r\\nthe\nsorting method that was picked (note that this is
especially\nobvious\\r\\nonce you \\\"load more\\\", which is what I did
for the\nfollowing\\r\\nscreenshots):\\r\\n\\r\\n\\r\\n| | Ascending |
Descending\n|\\r\\n|--------------|-----------|------------|\\r\\n|
Alphabetical |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png\\\"/>\\r\\n|\\r\\n|\nDoc
count |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png\\\"/>\\r\\n|\\r\\n\\r\\n\\r\\n###\nAfter\\r\\n\\r\\nThis
PR converts the options list suggestions to be stored\nas
an\\r\\n**array** of key/value pairs in order to preserve the
order\nreturned\\r\\nfrom Elasticsearch - now, you get the expected
string-sorted\nordering\\r\\nwhen using numeric `keyword` fields in an
options list\ncontrol:\\r\\n\\r\\n| | Ascending |
Descending\n|\\r\\n|--------------|-----------|------------|\\r\\n|
Alphabetical |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png\\\"/>\\r\\n|\\r\\n|\nDoc
count |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png\\\"/>\\r\\n|\\r\\n\\r\\n\\r\\nNotice\nin
the above that we are now using **string sorting** for
the\\r\\nnumeric\nvalues when alphabetical sorting is selected, which
means you\\r\\naren't\ngetting the expected \\\"numeric\\\" sorting - so
for example,\nwhen\\r\\nsorted ascending, `\\\"6\\\" > \\\"52\\\"`
because it is only comparing\nthe first\\r\\ncharacter and `\\\"6\\\" >
\\\"5\\\"`. This will be handled much\nbetter once\\r\\n[numeric
field\nsupport](#126795
added to\noptions lists.\\r\\n\\r\\n\\r\\n###
Checklist\\r\\n\\r\\n\\r\\n- [x] [Unit
or\nfunctional\\r\\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\\r\\nwere\nupdated
or added to match the most common scenarios\\r\\n- [x] This was\nchecked
for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\\r\\n\\r\\n\\r\\n###\nFor
maintainers\\r\\n\\r\\n- [ ] This was checked for breaking API
changes\nand
was\n[labeled\\r\\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\",\"sha\":\"b3f65f79e5017b70fe26e5aa1c2ee1085e68c138\"}},\"sourceBranch\":\"main\",\"suggestedTargetBranches\":[\"8.9\"],\"targetPullRequestStates\":[{\"branch\":\"main\",\"label\":\"v8.8.0\",\"labelRegex\":\"^v8.8.0$\",\"isSourceBranch\":true,\"state\":\"MERGED\",\"url\":\"https://github.com/elastic/kibana/pull/155207\",\"number\":155207,\"mergeCommit\":{\"message\":\"[Controls]\nFix
sorting of numeric keyword fields
(#155207)\\n\\nCloses\nhttps://github.com//issues/155073\\r\\n\\r\\n##\nSummary\\r\\n\\r\\n###
Before\\r\\n\\r\\nPreviously, the options list\nsuggestions were stored
as a dictionary\\r\\n(i.e. an object of key+value\npairs) - while this
worked for most fields,\\r\\nunbeknownst to us,\nJavascript tries to
sort numeric keys (regardless of\\r\\nif they are of\ntype `string` or
`number`) based on their value.\\r\\n\\r\\nThis meant that,\nas part of
the parsing process when using an options\\r\\nlist control for\na
numeric `keyword` field, the results returned by the\\r\\nES query
were\n**always** sorted in ascending numeric order regardless
of\\r\\nthe\nsorting method that was picked (note that this is
especially\nobvious\\r\\nonce you \\\"load more\\\", which is what I did
for the\nfollowing\\r\\nscreenshots):\\r\\n\\r\\n\\r\\n| | Ascending |
Descending\n|\\r\\n|--------------|-----------|------------|\\r\\n|
Alphabetical |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234391308-6d3a23ee-3495-4eff-810f-216f758b3a58.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234391213-117163e2-ee97-4f9d-87fa-a63c8cc5459e.png\\\"/>\\r\\n|\\r\\n|\nDoc
count |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234391375-0ccdf72f-83c0-4a87-951e-c2e1e3223006.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234392997-fea42ffe-5d9d-4a11-968f-e1503f2c0e4f.png\\\"/>\\r\\n|\\r\\n\\r\\n\\r\\n###\nAfter\\r\\n\\r\\nThis
PR converts the options list suggestions to be stored\nas
an\\r\\n**array** of key/value pairs in order to preserve the
order\nreturned\\r\\nfrom Elasticsearch - now, you get the expected
string-sorted\nordering\\r\\nwhen using numeric `keyword` fields in an
options list\ncontrol:\\r\\n\\r\\n| | Ascending |
Descending\n|\\r\\n|--------------|-----------|------------|\\r\\n|
Alphabetical |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234394182-aa2bfdf4-fe41-441d-bdbf-917173c17627.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234393421-24cca3e3-0249-4607-9e16-daa274399bdd.png\\\"/>\\r\\n|\\r\\n|\nDoc
count |
<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234394599-dda01056-5446-497e-abe4-f3839aeb4dd0.png\\\"/>\\r\\n|\n<img\nwidth=\\\"320px\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/8698078/234394693-42544ef1-eb2b-4d52-8a78-c2ca7d2d7cfa.png\\\"/>\\r\\n|\\r\\n\\r\\n\\r\\nNotice\nin
the above that we are now using **string sorting** for
the\\r\\nnumeric\nvalues when alphabetical sorting is selected, which
means you\\r\\naren't\ngetting the expected \\\"numeric\\\" sorting - so
for example,\nwhen\\r\\nsorted ascending, `\\\"6\\\" > \\\"52\\\"`
because it is only comparing\nthe first\\r\\ncharacter and `\\\"6\\\" >
\\\"5\\\"`. This will be handled much\nbetter once\\r\\n[numeric
field\nsupport](#126795
added to\noptions lists.\\r\\n\\r\\n\\r\\n###
Checklist\\r\\n\\r\\n\\r\\n- [x] [Unit
or\nfunctional\\r\\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\\r\\nwere\nupdated
or added to match the most common scenarios\\r\\n- [x] This was\nchecked
for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\\r\\n\\r\\n\\r\\n###\nFor
maintainers\\r\\n\\r\\n- [ ] This was checked for breaking API
changes\nand
was\n[labeled\\r\\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\",\"sha\":\"b3f65f79e5017b70fe26e5aa1c2ee1085e68c138\"}},{\"branch\":\"8.9\",\"label\":\"v8.9.0\",\"labelRegex\":\"^v(\\\\d+).(\\\\d+).\\\\d+$\",\"isSourceBranch\":false,\"state\":\"NOT_CREATED\"}]}]\nBACKPORT-->"}},{"branch":"8.9","label":"v8.9.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Heenawter Heenawter

Labels
Feature:Input Control Input controls visualization impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Controls] Fix sorting of numeric keyword fields Heenawter/kibana
2 participants
@Heenawter @elasticmachine