[Lens] Allow sorting on dashboard edit & view

[ghudgins]

Describe the feature:
Expose lens' client side table sorting controls on dashboard view and edit mode

Describe a specific use case for the feature:
When I am view-only looking at a large lens table on a dashboard
I need to interactively change the sort
So I can find interesting data in ways the author of the panel didn't anticipate

[elasticmachine]

Pinging @elastic/kibana-vis-editors (Team:VisEditors)

[ghudgins]

the decision point on this issue: we can implement something simple if it's okay that changing sorting on a dashboard in edit mode doesn't persist it (you have to edit the vis and change the sorting there to persist the sort). we could also not show the sorting options in dashboard edit but that's messing with user expectations. I think it's okay to proceed with including the controls in extra places even with this tradeoff as it's adding value to view mode...but is worth a 🤔 / discussion.

[flash1293]

Blocking this, please don't start working yet

[drewdaemon]

@flash1293 I have some ideas about this one, so maybe you can tell me if I'm on the right track.

UI Changes

Getting the actions to show up in the column dropdown menus is a matter of removing these isReadOnly checks.

Sort Functionality

Getting the sorting to actually work is trickier for a noob like me. I noticed that sorting options appear to be saved in the Lens application's state. Somehow, they are also being persisted (Saved Object?).

However, Graham says

we can implement something simple if it's okay that changing sorting on a dashboard in edit mode doesn't persist it

so, we're aiming for an ephemeral sort to occur when the user is interacting with this UI outside of the Lens editor (aka as an Embeddable).

The data-grid docs seem to suggest that the data-grid can handle sorting by itself (and it looks like we may already take advantage of that by generating sorting arguments and passing them down).

So, theoretically all we need to do is make sure the state is updated and the Embeddable is reloaded every time the user sorts something without persisting that sort config. I noticed that the Embeddable already sets up an observer on the Embeddable Input's attributes. I assume that this would cover the sort config since it lives at attributes.state.visualization.sorting. However, I didn't see a reload.

So, that led me to suspect that the sort event isn't being handled in the Embeddable class's handleEvent function. However, it doesn't even make it that far because of this check in the DatatableComponent. Once that check is removed, the Embeddable.handleEvent does get called but has no handler for an edit event.

I can add one easily enough, but all the other if branches in that handleEvent function trigger UI Actions, instead of mutating the chart's attributes, so I don't have an example to go on.

Hopefully you can point me in the right direction during our meeting tomorrow, but I wanted to update you on my thinking/exploring so that you know where I'm at!

[ghudgins]

+1 https://discuss.elastic.co/t/the-data-table-in-the-dashboard-does-not-support-click-sorting/288479/