[Lens] Drag within dimension group to reorder

[wylieconlon]

This is a smaller scope of work than dragging between two different dimension groups (#51739).

For example, the user should be able to rearrange columns within the data table by dragging within this section:

[elasticmachine]

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

[cchaos]

Moving some comments from Slack

@wylieconlon started off the conversation showing a POC of "swapping" and "replacing", but there's not currently an example of "reordering". The discussion continued into a when to do these operations topic.

@cchaos

Replacing works between some configurations, but in others it should be a re-order. This is how I see the [re-order].

@flash1293:

Within a dimension group, dragging is always reordering. This also implies changing the aggregation order for buckets. In case of the table: When attempting to mix buckets and metrics, the metrics will "snap back" after the last bucket. (In a later iteration we could even allow this by leveraging the "metrics on all levels", but we probably want to wait for #67525)

Table: Order of columns can be changed by drag/drop on the right side. No replace/overwrite, you have to use the delete button for that
Pie chart: Hierarchy of levels can be changed by drag and drop.
XY chart: Y axis metrics can be reordered, but it's not doing much (just changing order in the legend).

I think some of these operations will be much more common than others and we should focus mostly on getting the common cases as easy to understand as possible:
Table: Change order of buckets and change order of metrics
Pie chart: Change hierarchy of slice buckets

---

I think we're all pretty much on the same page about what happens within the dimension. That it is always just a re-order. At least for now and at least in its simplest implementation.

[flash1293]

Discussed offline

• There is no merged reorder/replace/swap behavior - within a dimension group, it's always reordering, cross dimension groups, it's always replace/swap
• Within a dimension group is just re-ordering (also changing the aggregation order, no replace/swap)
• Keeping buckets and metrics are kept separate for re-ordering (indicated in the UI - different groups)
  This will be implemented after swap/replace across different dimensions
• Technical solution: Either extend Lens drag/drop with reordering or try to wrap EUI reordering
• A11y has to be kept in mind - it shouldn't be super hard to do this without a mouse

[flash1293]

The next step is to build a prototype to see how to solve the technical difficulties (rewrite Lens to use EUI drag/drop, extend our own solution to support reordering, or do we use both at the same time)

[mbondyra]

We cannot easily (or moderately easy) use EUI drag and drop for the purposes we need.

The limitations come from react-beautiful-dnd (rbd) and not EUI, so they cannot be fixed unless we modify the library internally, which we probably don’t want to do.

Our custom implementation and react-beautiful-dnd cannot co-exist together, because react-beautiful-dnd doesn’t allow to propagate any events outside of it – so eg. once we have elements from EUI and our custom ones, our custom draggables cannot be thrown to EUI ones and vice versa.

To use eui dnd, we would require to completely rewrite all the functionalities we have written in custom way and that would a be a big effort. One problem I see and I cannot find a solution for is that parts of lens application live in different route so they cannot easily share context – with our custom implementation, we handle that with having a RootDragDropProvider in the root of application and a ChildDragDropProviders inside different routes. In rbd, we cannot do it as we don't have direct access to context to pass it down.

If we somehow overcome the problem of context across the routes, I think that right now all the functionalities we have, could be done on EUI dnd. Probably we would need to think about hiding some animations that rbd does by default and maybe for that we would need some hacking. However, I don’t see the way of creating the ones we are planning to do (like the custom drops appearing when we hover over droppable element) to swap or replace.