Allow sorting on multiple columns in Discover #41918

Bargs · 2019-07-24T18:18:50Z

Summary

Fixes #696

I took a crack at this previously and got pretty far, the only thing that blocked me was #16324. Lukas took over that PR and finished it in #33453. So I dug up my old work and merged in the latest from master. After some quick testing everything seems to be working so I'm submitting this PR.

This commit enables sorting on multiple columns in Discover and in saved search panels on dashboards. The UI is simple and should be familiar based on the way multi-sort works in other common applications like file explorers. Each sortable column has a sort icon indicating which way it is sorted (or unsorted, in the case of two arrows pointing both up and down). Sort priority is determined by which column was clicked most recently, with the most recent being the lowest priority.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

~~- [ ] This was checked for cross-browser compatibility, including a check against IE11~~
~~- [ ] 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
This was checked for keyboard-only and screenreader accessibility

For maintainers

~~- [ ] This was checked for breaking API changes and was labeled appropriately~~

This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-07-24T18:18:53Z

Pinging @elastic/kibana-app

Bargs · 2019-07-24T18:19:39Z

@AlonaNadler @timroes I've submitted a PR with the old work I mentioned during our meeting today.

elasticmachine · 2019-07-24T19:16:48Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-07-24T22:39:12Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-07-24T23:50:40Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

TinaHeiligers

Code looks good.

I tested this in Chrome and Safari and it works as expected.

In addition, I tested an imported saved search and the sort order was maintained.

A few small things:

I keep expecting the sort order to be maintained in the order in which I added the sort (first one most important and the orders being inner/nested sorting fields). We might want to consider adding some visual indicator of the sorting precedence later on.
The icons are really small and it would be nice to make them more obvious at a later stage but that requires more real estate in table headers.

# Conflicts: # src/legacy/core_plugins/kibana/public/discover/doc_table/__tests__/lib/rows_headers.js # src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js

Bargs · 2019-07-25T16:18:29Z

Hold off on review, need to resolve conflicts caused by #41259

Bargs · 2019-07-25T18:01:28Z

Alright, conflicts are resolved and this is ready for review again. @TinaHeiligers would you mind rechecking? I basically had to reimplement the multi-sort UI in the new react table header so I think it's worth another look.

elasticmachine · 2019-07-25T18:57:54Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

AlonaNadler · 2019-07-25T20:34:37Z

@kertal @timroes how does this effort will work with our refactoring plans and the new table component?

elasticmachine · 2019-07-25T21:27:57Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

TinaHeiligers

Code LGTM.
Tested in Chrome, Safari and Firefox. All still works as expected!

TinaHeiligers · 2019-07-26T16:57:04Z

...ore_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx

  const btnSortClassName =
    sortDirection !== '' ? btnSortIcon : `kbnDocTableHeader__sortChange ${btnSortIcon}`;

+  const handleChangeSortOrder = () => {
+    // Cycle goes Unsorted -> Asc -> Desc -> Unsorted


The sort order cycle is not obvious in the UI. Perhaps we should consider adding a tooltip or some other indicator of what the cycle is.

Bargs · 2019-07-31T18:38:03Z

I don't think we should invest too much time into gold plating the UI since the doc table will be rewritten soon anyway. I think the pattern I've implemented is pretty standard in most software. Click once, sort in one direction, click a second time, sort in the other direction, click again and it removes the sort.

This popular table component does the same thing. The only difference is that it requires the user to hold shift to do multi-sort. I think that's worse because it introduces a magic key combo and it also conflicts with a native browser behavior (selecting a block of text).

elasticmachine · 2019-07-31T19:20:35Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

kertal

Code LGTM, tested locally in Chrome, I think also @elastic/kibana-design should take a look at it because of UI & usability and the transformation to the new grid component. I think we should align this intermediate step

kertal · 2019-08-01T12:59:07Z

Here's a quick suggestion how we could display the sorted fields in the current layout, also it would allow an easier removal of sorted fields:

It would add information about the order of the sorted fields, also you would see, if you click 5 different fields without removing one, that you're build up a kind of sorted fields stack (maybe we should also limit the number of fields you can sort by)

ryankeairns · 2019-08-01T16:26:01Z

I'll start this up and take a quick look. I get where @Bargs is coming from and, as long as it fits common UI interaction patterns, then it seems a valuable (small, yet impactful) change that need not get bogged down by too much UI work at this stage.

ryankeairns · 2019-08-01T16:52:12Z

Here are a few (hopefully small) things I would recommend changing:

Make the currently sorted columns more apparent: change the color of the icon (when activated) from the light gray to another EUI color (primary blue, secondary green, or the accent pink).

Make the tooltip text more informative: I see there is a 'dynamic' aria-label on the button element that would be great to use in the tool tip as it provides specific wording on the next sort action (e.g. Sort taxful_total_price ascending):

Consider flipping the sort priority.
For me, I feel like the first sort I do should be the highest priority, then each subsequent sort is a sort within that set. For example, if I sort by make of car, then by number of doors, I'd like that to be a sort by/within the make. While working with sample data, I found my self doing a second sort, then having to go back and re-do my initial sort.

For future reference, we may be heading towards a more robust search that looks something like these examples, both of which also keep the initial sort the top priority:

Airtable sorting

Google Sheets sorting

kertal · 2019-08-02T06:47:38Z

@ryankeairns "For future reference, we may be heading towards a more robust search that looks something like these examples, both of which also keep the initial sort the top priority"

it might be a weird kind of i18n or that my morning caffein doesn't work, but I've got the impression, that in case of Airtable, always the latest click gets highest priority?

Bargs · 2019-08-02T15:12:30Z

Thanks for the suggestions @ryankeairns, I think they're all good ones and I've implemented them all.

Sort buttons now have an active color
Tool tips are more descriptive
Most recently clicked sort button now has lowest priority

elasticmachine · 2019-08-02T16:12:23Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

This commit enables sorting on multiple columns in Discover and in saved search panels on dashboards. The UI is simple and should be familiar based on the way multi-sort works in other common applications like file explorers. Each sortable column has a sort icon indicating which way it is sorted (or unsorted, in the case of two arrows pointing both up and down). Sort priority is determined by which column was clicked most recently, with the most recent being the lowest priority.

…-or-edit-existing-rollup-job * 'master' of github.com:elastic/kibana: (67 commits) [TSVB] Shim new platform (elastic#39169) [Metric Vis] Shim new platform (elastic#42240) [Tag Cloud] Shim new platform (elastic#42348) Disable flaky request lib tests. Add es_ui_shared plugin to CODEOWNERS. Add disk space percentage to node listing (elastic#42145) [SIEM] Add chart interactions - update date picker after brush selection on charts (elastic#42440) Document HTTP service (elastic#42331) [Reporting] Sanitize 409 error log message (elastic#42495) [docs][skip ci] Maps read only access (elastic#35561) [x-pack/ftr] refactor types to be more accurate/consistent wit… (elastic#42407) [DOCS] Updates images and content in Dashboard docs (elastic#42500) Allow sorting on multiple columns in Discover (elastic#41918) [Infra UI][Logs UI] Fix autocomplete to use proper derived index pattern (elastic#42287) [ftr/cheerio] improve cheerio types to include test subject me… (elastic#42534) Upgraded EUI 13.0.0 -> 13.1.1 (elastic#42298) Increase max-old-space-size for builds (elastic#42218) [Infra UI] Add cloud metrics and cloud/host info to metadata endpoint (elastic#41836) [Logs UI][a11y] Announce name of column on remove column button (elastic#41695) Inspector 👉 New Platform (elastic#42164) Make alerting properly space aware (elastic#42081) ...

…s_autocomplete * 'master' of github.com:elastic/kibana: (189 commits) [TSVB] Shim new platform (elastic#39169) [Metric Vis] Shim new platform (elastic#42240) [Tag Cloud] Shim new platform (elastic#42348) Disable flaky request lib tests. Add es_ui_shared plugin to CODEOWNERS. Add disk space percentage to node listing (elastic#42145) [SIEM] Add chart interactions - update date picker after brush selection on charts (elastic#42440) Document HTTP service (elastic#42331) [Reporting] Sanitize 409 error log message (elastic#42495) [docs][skip ci] Maps read only access (elastic#35561) [x-pack/ftr] refactor types to be more accurate/consistent wit… (elastic#42407) [DOCS] Updates images and content in Dashboard docs (elastic#42500) Allow sorting on multiple columns in Discover (elastic#41918) [Infra UI][Logs UI] Fix autocomplete to use proper derived index pattern (elastic#42287) [ftr/cheerio] improve cheerio types to include test subject me… (elastic#42534) Upgraded EUI 13.0.0 -> 13.1.1 (elastic#42298) Increase max-old-space-size for builds (elastic#42218) [Infra UI] Add cloud metrics and cloud/host info to metadata endpoint (elastic#41836) [Logs UI][a11y] Announce name of column on remove column button (elastic#41695) Inspector 👉 New Platform (elastic#42164) Make alerting properly space aware (elastic#42081) ...

This commit enables sorting on multiple columns in Discover and in saved search panels on dashboards. The UI is simple and should be familiar based on the way multi-sort works in other common applications like file explorers. Each sortable column has a sort icon indicating which way it is sorted (or unsorted, in the case of two arrows pointing both up and down). Sort priority is determined by which column was clicked most recently, with the most recent being the lowest priority.

darshakkakkad · 2020-07-22T22:05:37Z

Hello, from which release of Kibana is this feature available?

nickofthyme · 2020-07-23T13:29:03Z

@darshakkakkad released with 7.4.0

Allow sorting on multiple columns in Discover

140b0f4

Bargs added release_note:enhancement Feature:Discover Discover Application Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.0.0 v7.4.0 labels Jul 24, 2019

Bargs requested review from lukasolson and TinaHeiligers July 24, 2019 18:18

Bargs added 3 commits July 24, 2019 16:44

Merge remote-tracking branch 'upstream/master' into multiSortNew

0d59224

Update functional test

037bf03

Fix row header tests

4e8bd68

Update getSort unit tests

3312d7e

TinaHeiligers approved these changes Jul 25, 2019

View reviewed changes

Merge remote-tracking branch 'upstream/master' into multiSortNew

d7ababe

# Conflicts: # src/legacy/core_plugins/kibana/public/discover/doc_table/__tests__/lib/rows_headers.js # src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js

Bargs added 2 commits July 25, 2019 13:41

reimplement multi sort in new react doc table header

8d1c62e

update jest tests

ff428a9

TinaHeiligers self-requested a review July 25, 2019 19:33

Merge remote-tracking branch 'upstream/master' into multiSortNew

c8b325d

Bargs requested a review from kertal July 26, 2019 17:25

TinaHeiligers approved these changes Jul 26, 2019

View reviewed changes

kertal reviewed Aug 1, 2019

View reviewed changes

Bargs added 3 commits August 2, 2019 10:39

Merge remote-tracking branch 'upstream/master' into multiSortNew

8c9d2b8

Give sort button an active color and a more descriptive tooltip

93d0ddb

Most recently clicked sort column will have lowest priority now

e4fd2a8

Bargs requested a review from a team as a code owner August 2, 2019 15:09

Bargs merged commit f6cb00a into elastic:master Aug 2, 2019

Bargs mentioned this pull request Aug 9, 2019

Migrate legacy sort arrays on saved searches #43038

Merged

1 task

kertal mentioned this pull request Nov 19, 2019

Discover sorting is inconsistent #49050

Closed

wylieconlon mentioned this pull request May 12, 2020

Discover does not use tiebreaker sort order #32221

Closed

kertal mentioned this pull request Jul 1, 2020

Incorrect sorting on numeric columns in Discover #69109

Closed

This was referenced Sep 9, 2020

[Discover] Column sort URL parameters are broken in 7.8+ #76705

Closed

[Discover] Convert legacy sort to be compatible with multi sort #76986

Merged

ppf2 mentioned this pull request Jul 6, 2021

Ability to toggle on/off multiple-sort capability in Discover #104532

Open

kertal mentioned this pull request Sep 20, 2021

When I click the order by timestamp triangle not all entries are ordered #112510

Closed

romain-chanu mentioned this pull request May 25, 2022

Sorting does not work in Document Explorer when using a legacy link #132892

Closed

kertal mentioned this pull request Jun 24, 2022

[Discover] Fix legacy sort parameter provided by URL #134447

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow sorting on multiple columns in Discover #41918

Allow sorting on multiple columns in Discover #41918

Bargs commented Jul 24, 2019 •

edited

Loading

elasticmachine commented Jul 24, 2019

Bargs commented Jul 24, 2019

elasticmachine commented Jul 24, 2019

elasticmachine commented Jul 24, 2019

elasticmachine commented Jul 24, 2019

TinaHeiligers left a comment •

edited

Loading

Bargs commented Jul 25, 2019

Bargs commented Jul 25, 2019

elasticmachine commented Jul 25, 2019

AlonaNadler commented Jul 25, 2019

elasticmachine commented Jul 25, 2019

TinaHeiligers left a comment

TinaHeiligers Jul 26, 2019

Bargs commented Jul 31, 2019

elasticmachine commented Jul 31, 2019

kertal left a comment

kertal commented Aug 1, 2019 •

edited

Loading

ryankeairns commented Aug 1, 2019 •

edited

Loading

ryankeairns commented Aug 1, 2019

kertal commented Aug 2, 2019

Bargs commented Aug 2, 2019

elasticmachine commented Aug 2, 2019

darshakkakkad commented Jul 22, 2020

nickofthyme commented Jul 23, 2020

Allow sorting on multiple columns in Discover #41918

Allow sorting on multiple columns in Discover #41918

Conversation

Bargs commented Jul 24, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Jul 24, 2019

Bargs commented Jul 24, 2019

elasticmachine commented Jul 24, 2019

💔 Build Failed

elasticmachine commented Jul 24, 2019

💔 Build Failed

elasticmachine commented Jul 24, 2019

💚 Build Succeeded

TinaHeiligers left a comment • edited Loading

Choose a reason for hiding this comment

Bargs commented Jul 25, 2019

Bargs commented Jul 25, 2019

elasticmachine commented Jul 25, 2019

💔 Build Failed

AlonaNadler commented Jul 25, 2019

elasticmachine commented Jul 25, 2019

💚 Build Succeeded

TinaHeiligers left a comment

Choose a reason for hiding this comment

TinaHeiligers Jul 26, 2019

Choose a reason for hiding this comment

Bargs commented Jul 31, 2019

elasticmachine commented Jul 31, 2019

💚 Build Succeeded

kertal left a comment

Choose a reason for hiding this comment

kertal commented Aug 1, 2019 • edited Loading

ryankeairns commented Aug 1, 2019 • edited Loading

ryankeairns commented Aug 1, 2019

Airtable sorting

Google Sheets sorting

kertal commented Aug 2, 2019

Bargs commented Aug 2, 2019

elasticmachine commented Aug 2, 2019

💚 Build Succeeded

darshakkakkad commented Jul 22, 2020

nickofthyme commented Jul 23, 2020

Bargs commented Jul 24, 2019 •

edited

Loading

TinaHeiligers left a comment •

edited

Loading

kertal commented Aug 1, 2019 •

edited

Loading

ryankeairns commented Aug 1, 2019 •

edited

Loading