[Batch Viewer] Zoom and drag improvements

[alongoni]

Summary

Closes #42

To Test

1. <> Open the batch viewer

[coveralls]

Pull Request Test Coverage Report for Build 2437367374

Warning: This coverage report may be inaccurate.

We've detected an issue with your CI configuration that might affect the accuracy of this pull request's coverage report.
To ensure accuracy in future PRs, please see these guidelines.
A quick fix for this PR: rebase it; your next report should be accurate.

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 44.121%

---

Totals
Change from base Build 2437175687:	0.0%
Covered Lines:	2172
Relevant Lines:	4190

---

💛 - Coveralls

[github-actions]

• 🔭 Explorer: Explorer test app
• 🔒 Safe Swap App: Trade test app (add to your safe apps)
• 📈 Trade: Trade test app
• 📚 Storybook: Component stories

[ramirotw]

@alongoni I'm comparing the same tx in the preview app as well as in barn and both look identical, why is that?

Preview app: https://pr103--explorer.review.gnosisdev.com/tx/0xc2eb04b549d68c770062591e2561c5b1534ea665c6179d33a779c52376c9161d/?tab=graph

Barn (should have the issue): https://barn.explorer.cow.fi/tx/0xc2eb04b549d68c770062591e2561c5b1534ea665c6179d33a779c52376c9161d?tab=graph

[alongoni]

@alongoni I'm comparing the same tx in the preview app as well as in barn and both look identical, why is that?

Preview app: https://pr103--explorer.review.gnosisdev.com/tx/0xc2eb04b549d68c770062591e2561c5b1534ea665c6179d33a779c52376c9161d/?tab=graph

Barn (should have the issue): https://barn.explorer.cow.fi/tx/0xc2eb04b549d68c770062591e2561c5b1534ea665c6179d33a779c52376c9161d?tab=graph

hey @ramirotw. Yes, they look identical, but in this PR we prevent the nodes overlapping when a user moves a node over other.
https://www.loom.com/share/62e1b73daae34155beb9248460851be0

[ramirotw]

thanks for the video!

[alongoni]

regarding point 1) of #42

This will be mitigated by the addition of the reset button (#100). I think if we don't allow moving the nodes outside the BV area, it could cause a conflict with the zoom. WDYT @ramirotw @henrypalacios @elena-zh

[henrypalacios]

I tried something to deal with this but it doesn't work so well. It effectively causes a conflict with the zoom 😆

@alongoni while I was trying to build something I came across this cytoscape-automove, it could be used to solved that point.

I think we should move on and leave it as a low priority.

[ramirotw]

This will be mitigated by the addition of the reset button (#100). I think if we don't allow moving the nodes outside the BV area, it could cause a conflict with the zoom. WDYT @ramirotw @henrypalacios @elena-zh

Agreed @alongoni.

Nice work!

[elena-zh]

Looks good to me even with elements outside the frame, due to now we have a Reset button that can return the diagram to the default state.