Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Limit pan in network visualization (#18) #28

Merged
merged 2 commits into from
Oct 8, 2024
Merged

Limit pan in network visualization (#18) #28

merged 2 commits into from
Oct 8, 2024

Conversation

daud99
Copy link
Contributor

@daud99 daud99 commented Oct 6, 2024 •
edited by vincerubinetti
Loading

Closes #18

  • limit pan in network viz to content

Limit pan in network visualization (JRaviLab#18)
48327a7 
Fixing the JRaviLab#18

Problem: Users could pan graphs infinitely in any direction, sometimes losing
the graph completely from view. We needed different handling for small graphs
(that fit viewport) vs large graphs (that exceed viewport).

Solution:
1. For small graphs that fit viewport:
   - Keep graph fully visible at all times
   - Snap back with animation if user tries to pan outside bounds
   - Center graph if no valid position is found

2. For large graphs that exceed viewport:
   - Calculate graph's center and dimensions relative to viewport
   - Allow panning up to 10px beyond graph edges in any direction
   - Use center-based math to ensure uniform panning limits on all sides
   - Add smooth animations when bringing graph back into valid position
   - Fallback to centering if graph somehow gets completely hidden

The solution ensures users never lose track of their graphs while still
maintaining fluid pan interactions. The uniform 10px edge padding gives just
enough peek space without letting users pan too far.
@netlify Netlify
Copy link

netlify bot commented Oct 6, 2024 •
edited
Loading

✅ Deploy Preview for molevolvr ready!

Name Link
🔨 Latest commit 037f117
🔍 Latest deploy log https://app.netlify.com/sites/molevolvr/deploys/6704c45218bf180008a2314c
😎 Deploy Preview https://deploy-preview-28--molevolvr.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@daud99
Copy link
Contributor Author

daud99 commented Oct 6, 2024

@jananiravi @vincerubinetti

I found it a bit tricky since there wasn't a straightforward solution available online. Most of the related issues are either still open or not pointing in the right direction.

I believe the solution I developed successfully places limits on the panning that users can do. I've tested it with various types of network, and it’s working well for me.

Could you kindly test it and share your feedback? I would love to know your thoughts.

Regards

@vincerubinetti
Copy link
Collaborator

vincerubinetti commented Oct 8, 2024 •
edited
Loading

Thank you for your effort on this. Here are my thoughts.

  • I didn't explicitly say this upfront, but the value/impact of this issue is low enough that it wouldn't warrant writing and maintaining 100+ lines of code.
  • I found some oddities in the behavior. It can get stuck beyond the bounds sometimes. Also if someone wants to zoom into a particular node at the edge of the content bbox, it's a little bit harder.
  • This is maybe a subjective thing, but for such a continuous thing like this, I'd prefer to not have an animation. It felt weird/sluggish to be constantly trying to animate back to center when dragging.

See what I replaced the behavior with. I think this is simpler and has better UX. The code handles just one case, more consistently, and it limits the pan immediately and gives the user more freedom.

There are a couple other small stylistic things in your original solution that could be improved which I'll also comment on briefly, in your first commit.

@vincerubinetti vincerubinetti merged commit 1e9e71c into JRaviLab:main Oct 8, 2024
4 checks passed
@daud99
Copy link
Contributor Author

daud99 commented Oct 8, 2024

@vincerubinetti Thankyou so much for taking out your time and reviewing it. You're right. You have really made it quite minimal and optimal. Thanks for sharing it.

:)

Regards

@vincerubinetti
Copy link
Collaborator

Thanks for your work here. You were on the right track, and as you said, it was not very straightforward. Really this should be something that is built into Cytoscape.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vincerubinetti vincerubinetti vincerubinetti approved these changes

@falquaddoomi falquaddoomi Awaiting requested review from falquaddoomi

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Limit pan in network visualization
2 participants
@daud99 @vincerubinetti