[FEATURE] GUI Node and Label Dragging Issues

[SamuelZheng11]

Describe the bug
When a user clicks and drags the labels attached to the nodes or the nodes themselves on the main screen, then entities can be dragged freely but quickly resets to its original position with a slight offset. To a user, the rubber-banding of the entities is very jarring and may not provide good UX. The slight offset is also not in the same direction that the user drags it in.

If the user clicks and drags the root node, it does not move around freely and rubber band back to the original position, but still, has a slight offset applied when the user lets go

To reproduce
Steps to reproduce the behavior:

1. npm start VisualGit
2. Open a repository (preferably one with two or more commits, and at least one branch on one of them)
3. click and drag either a non-leaf/root node or branch label
4. See the node or branch entity rubberband back to its original position with a slight offset

Expected behavior / Acceptance criteria

• All nodes must behave the same when clicked and dragged
• Introduce a non-intrusive way to explain that the user cannot release the node/label at the specified location as it is not a valid action (maybe include what they can do)

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome

Additional context

Related issues
#58

[Ravid12]

Approved! I can also recreate this issue on windows 10

[rmberriman]

Approved! Can recreate on windows 10

[hhagenson28]

Approved

[liamtbrand]

After doing some digging it would seem this might not be a bug but more a feature. The dragging is needed to allow actions such as dragging two branches together to merge. It would seem that the intent was to drag nodes together to merge them, and therefore the dragging is enabled. However there is functionality to reset the position that is triggered when no nodes are dragged together. The application also has significant code pertaining to the ordering and layout of the graph. I would guess the snap back is used to prevent messing up the graph. See graphSetup.ts lines 245 to 265 in 896ad61. What we do about this if anything is an interesting question. I don't think fixing the nodes in place is a good idea because we break existing functionality by doing that. On the contrary letting the user drag around nodes as they please could become very messy for large repositories. My suggestion is that we add some popup when the drag and snapback occurs to notify the user of why it is occurring. Thoughts? @SamuelZheng11 @Ravid12 @rmberriman @hhagenson28 ?

[rmberriman]

That sounds like a valid idea, perhaps not a popup per se, with a popup that you have to close would be cumbersome if it popped up everytime you moved the nodes about. Maybe an unobtrusive popup in the corner of the screen that faded away or could be closed in the user wanted to get rid of it asap. What are your thoughts @liamtbrand @SamuelZheng11 @hhagenson28 @Ravid12 ?

[SamuelZheng11]

Yep Im good with that idea, ill update the acceptance criteria

[liamtbrand]

Sounds good to me :)

[rmberriman]

Do you think the bug label should be removed and replaced with an enhancement label?