iterative
Drag–and–Drop improvements
Motivation
The goal is to have a better user experience and performance.
- UX: It's in general preferable to have as less as possible unnecessary movements of the UI elements
- Performance: Fewer elements will change their positions, the faster will be the processing
Principles
- Do not change the composition before the user undersend where he wants to locate the object he is moving
- Move only the reflection of the dragged object
- Display the indicator that shows the exact place where the dragged object can be placed
- Only after the new place is found initiate the changes in the composition
- Be able to reset the workspace (will be added to the bar on top of the table #2075)
Apply these principles to following
- [ ] Table's header https://github.com/iterative/vscode-dvc/issues/2262#issuecomment-1228670872
- [ ] Table's body - EXPs (if we will like to have D&D for the EXPs)
- [ ] Plots sections
- [ ] Plots sections content
- [ ] Other? - where the Drag–and–Drop is used
Related
D&D interaction patterns study
Let's simplify and make a single checkbox with other improvements. The whole ticket can one checkbox please with performance as motivation.
There are also some bugs in DnD that we can do small tickets about or one with checkboxes - feedback is pretty bad still, no way to cancel DnD, almost no way to get back to the initial state while doing DnD - let's focus on these things first please.
For the "Table's header sections"
- We do not want to change the table content before the user undersend where he wants to locate the section. Only after the user is sure where he like to place the section we can initiate the changes in the table.
- We move only the reflection of the dragged cell (just a cell not the column!) + display the indicator that shows the exact place where the cell can be located. After the place is found we initiate the changes in the table including the column relocation. This also will help to have a better performance, while dragging the object, as we will be dealing just with a cell instead of an entire column without changing the layout of the view all the time the object changes its position. and moving just one object instead of changing the column's positions.
- The style of the indicator can be the same one as we are planning to use when resizing the header cell (the new style is in Figma)
For plots, isn't this already how it works? The only thing happening is that we hide the dragged plot and we have a drop section that moves. It is the exact same performance wise as an indicator that would be only one line it simply is more visible. The re-ordering is only applied once an item is dropped.
For plots, isn't this already how it works? The only thing happening is that we hide the dragged plot and we have a drop section that moves... The re-ordering is only applied once an item is dropped.
Do not think so. Maybe I am missing something. Motivation: UX. It's in general preferable to have as less as possible unnecessary movements of the UI elements. To achieve: Do not change the composition before the user undersend where he wants to locate the object he is moving. Only after the new place is found initiate the changes in the composition
Also, when testing D&D I got this:
- Start D&D of the Large plot from below Classic plots to on top
- Without dropping it put it back, the result below
For plots, isn't this already how it works? The only thing happening is that we hide the dragged plot and we have a drop section that moves... The re-ordering is only applied once an item is dropped.
Do not think so. Maybe I am missing something. Motivation: UX. It's in general preferable to have as less as possible unnecessary movements of the UI elements. To achieve: Do not change the composition before the user undersend where he wants to locate the object he is moving. Only after the new place is found initiate the changes in the composition
Nothing moves but the indicator that shows you where the item can be dropped.
Also, when testing D&D I got this:
- Start D&D of the Large plot from below Classic plots to on top
- Without dropping it put it back, the result below
Seems like the inverse of a bug recently fixed. Can you create another issue just for that please? It's a real bug and not an improvement.
Nothing moves but the indicator that shows you where the item can be dropped.
Not sure we are talking about the same thing. Please check the video below. By saying "Do not change the composition before the user undersend where he wants to locate the object he is moving" I mean we won't move anything before the drop target is found.
https://user-images.githubusercontent.com/98249521/187959395-a5b270c3-8175-495e-ad6b-21a64cd5d3cd.mov
Folks, this is assigned to me with p2. Let's not for now do anything here (except obvious bugs / improvements).
Nothing moves but the indicator that shows you where the item can be dropped.
Not sure we are talking about the same thing. Please check the video below. By saying "Do not change the composition before the user undersend where he wants to locate the object he is moving" I mean we won't move anything before the drop target is found.
Screen.Recording.2022-09-01.at.11.54.30.AM.mov
This is a bug, this is not how the drag and drop works. Try moving inside the same section, you'll see
I think we can close this and review plots DnD separately, I don't think we need to change there most of the things mentioned here, but there are quite a few other problems there that could be fixed one by one.