[Lens] Client side table sorting

[flash1293]

The table visualization in Lens should be sortable on the client side similar to the legacy data table visualization is handling that. Clicking on the table header will change the sorting and sort the existing rows by the clicked column, rendering an indicator how it's sorted at the moment. This client side sorting should only be available in the Lens editor, not on dashboards. The information about client side sorting is stored in the visualization state of the table.

Open questions / architecture changes:

• Pass the current context to the renderer (whether in edit mode or in dashboard mode) - see Make expression renderer aware of current context #77161
• Provide a channel back from the renderer to change state from within the visualization (could use the expression event system)

There is a separate issue about server side sorting which is pushed out for now: #55905

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[flash1293]

Proposal:

• Implement Make expression renderer aware of current context #77161 for expressions and pass the current mode through in embeddable, workspace panel and suggestions
• In table, allow clicking the column headers to sort client side when mode is set to edit
• When clicked, call handlers.event on the expression renderer with a custom event type ({ name: 'editAction', data: { action: 'sort', columnId, order: 'desc' } }). The name of the action will be defined at Lens editor frame level, while the specific visualization controls the private data payload. This way each visualization can use the mechanism to pass arbitrary events back to its own state handling
• Extend the Visualization interface by onEditAction?: (state: T, editAction: A) => T (A being a new optional type param)
• If the expression event handler is called with an editAction in the workspace and the currently active visualization includes an onEditAction, call it with the current state and the event payload and update the visualization state accordingly
• Use this newly introduced API in the table visualization to store the current client side sorting state as part of the regular visualization state
• In the toExpression function of the datatable visualization, use the current client side sorting state to write an expression using the existing canvas sort function: https://www.elastic.co/guide/en/kibana/master/canvas-function-reference.html#sort_fn
• Pass the client side sorting state to the render function as well to render triangle sorting indicators in the table
• Sorting is shown to the user as a "three state" toggle (this is how visualize and discover are doing it as well). Default: Not sorted by the column, 1 click: Sorted descending by the column, 2 clicks: Sorted ascending by the column, 3 clicks: Not sorted by the column again

Open questions about architecture:

• Does it make sense to use the expression level sort function or should the logic simply be inlined in the renderer as we need the same information there anyway? The implementation of sort is simply using sortBy from lodash: https://github.com/elastic/kibana/blob/b8bea5b8b2798dac2fe1546c53eded434d408a50/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.ts
• If we want to leverage the sort function, can/should we make the sorting order part of the data table column meta data to pass it to the visualization that way?
• Does the expression integration make sense? I can't think of a better way

Open questions about feature:

• Should it be possible to sort by multiple columns at once? Discover is doing it, Visualize is not doing it, so it's not really possible to stay consistent

[flash1293]

We will start only allowing single column sorting for now similar to the Visualize data table

[dej611]

Open specific issues for IP and range data types specific sorting