Improve drag and drop feedback in plots comparison table

[mattseddon]

This follows on from the work done in

• Drag and drop placeholder position #1543
• Drag and drop feedback for comparison table #1551
• Dragging feedback to other section #1572
• Fix dragging between plot sections #1594

The current feedback for dragging and dropping an entire column looks like this:

Screen.Recording.2022-04-11.at.11.07.10.AM.mov

We received this feedback as part of the UX review in #1565:

We need to add further feedback to the column to let the user know which column they are currently working with.

Feedback figmajam.

[shcheklein]

I would add to this that DnD feels differently depending on what direction you are moving a column header. If it's to the right it almost immediately reacts, if to the left you have to drag for pretty long time to get the reaction. I would double-check and optimize those thresholds.

[mattseddon]

@sroy3 would any ideas on how long this one would take? Could it be considered low hanging fruit or is it more involved?

[sroy3]

It is a little more involved than just being able to fix it in a day. I had previously commented with this in a Slack thread (copying this here seems more appropriate)

1. Conditional hiding of the dragged element
2. Change the drop target for the comparison table (simple line and position absolute to not shift the layout)
3. Style the dragged item (the one that is transparent and stays in position). The column dragged will need to be passed to the rows to be styled as well
4. Style the ghost image of the dragged element. This is a little more challenging.

These can all be done separately and I don't think it'll look weird if we end up having 1 and 2 only (which could be done quickly) while still aiming to get the other 2 steps in.

I can start on the direction threshold and then start my way down those 4 checkboxes.

[sroy3]

I would add to this that DnD feels differently depending on what direction you are moving a column header. If it's to the right it almost immediately reacts, if to the left you have to drag for pretty long time to get the reaction. I would double-check and optimize those thresholds.

I was wondering why you thought the threshold did not feel natural. Turns out there is a bug that must have been introduced later. See the video, like you said it almost immediately reacts. The original behaviour is also shown in the video, but you kind of have to move left a little while dragging the header for it to work (definitely not what we want).

Screen.Recording.2022-05-24.at.10.45.42.AM.mov

While changing the drag and drop feedback style in the comparison table would fix this (first checkbox would take care of that), the bug is also present in the drag and drop of plots. I'll open an other issue for it and fix it.