multinet-app / multilink

A node-link visualization built to work with the multinet ecosystem.
https://multinet.app
Apache License 2.0
4 stars 2 forks source link

Use vueuse to fix relative mouse movements, resize handling. Fix sidebar styling #365

Closed JackWilb closed 1 year ago

JackWilb commented 1 year ago

Does this PR close any open issues?

Closes #357 Closes #358

Give a longer description of what this PR addresses and why it's needed

This PR addresses several usability issues with the sidebar. The panel would overlay the vis before this fix, but now pushes the vis over to the right. This required changes to how we deal with the mouse events in the multilink component, but we were able to simplify using a relative mouse handler from vueuse.

Since we added vueuse, it made sense to use their handlers for page resizing, instead of trying to use the tacky vuetify way.

As a part of this fix, @JakeWags and I figured out that if we generate the positions for nodes before we convert the network to a vue ref, we no longer need to use force update.

Provide pictures/videos of the behavior before and after these changes (optional)

Collapsed:

Screenshot 2023-04-23 at 5 31 40 PM

Expanded Layout Options:

Screenshot 2023-04-23 at 5 32 04 PM

Expanded Attribute Options:

Screenshot 2023-04-23 at 5 32 27 PM

Are there any additional TODOs before this PR is ready to go?

No

netlify[bot] commented 1 year ago

Deploy Preview for next-multilink ready!

Name Link
Latest commit 9c6cf6682cc01652d99362ee64fe8f90e9d8113a
Latest deploy log https://app.netlify.com/sites/next-multilink/deploys/6445c017dbe6db00084d974f
Deploy Preview https://deploy-preview-365--next-multilink.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 settings.