[EuiSuperDatePicker] Usability and implementation considerations

[ryankeairns]

EuiSuperDatePicker is a complete component. Let's collect periodic feedback and discuss what, if any, sorts of changes we can make to improve its usability.

Things we've heard...

Request for usability and a11y assessments

• [EuiSuperDatePicker] Design discussion #2511 (comment)
• [EuiDatePicker] Time selection has accessibility issues #2161

Request to hide refresh button / use multiple in a single UI

• [Profiling] Hide refresh button in comparison mode kibana#140010
• For starters, can we improve docs around how to use the refresh button with the date picker? (cc:/ @miukimiu )

[elizabetdev]

Request to hide refresh button / use multiple in a single UI

Right now is possible to hide the refresh button. But we're not providing any examples in our docs. And the last example seems wrong to me. It means to represent what Kibana is today. So the refresh button should react to the KQL bar updates.

Any updates in the EuiSuggest should also trigger the refresh button to "update":

[rockdaboot]

Given that the "Refresh" action is very expensive, would it be good to wait for a manual click ? E.g. when the user first picks a filter on two KQL elements, then adjusts the from and to times on two different date pickers, and finally (and only now) the user wants to "Refresh" ?

This example is a pattern for Universal Profiling, where we have differential views and where each refresh may take 10s-20s and more (depends on cluster configuration and on user's bandwidth).

[ryankeairns]

There are several opportunities to improve this key component.
I propose we start with a recent example that aligns to an old example seen in #2511 , above.

In that Discussion, there is a link to this Discuss post that captures the number of clicks needed around selecting and changing time periods. Its ripe for improvement.

👉 More specifically, we make an attempt to decrease the number of clicks, specifically, when changing dates after running the first time. Point being, you set some values, and we do a better job of handling that so that subsequent changes are simpler.

For example, this could be accomplished by adding 'smart' assumptions such as:

• time element does not change
• use a singular calendar popup
• auto-move to end time when a new start date is selected

[ryankeairns]

Some explorations by @MichaelMarcialis
Expand and zoom :)