UI - pan/zoom enhancements

[vgheo]

Currently

• Zoom is done with mouse wheel
• panning is done by dragging the background (purple surface)
• + drag - defines a selection rectangle, but nothing happens on mouse up

Issue is that if we have a large module and a close zoom, it cannot be panned as there's no background in the current view.

PROPOSALS

Panning mode

Hold + mouse drag - always zooms

Alternative: introduce a toolbox ( Pan Mode / Select Mode )

Zoom by selection

• +drag - define rectangle
• zoom to that rectangle on mouse-up

Reset view

Button: "Reset view"

• resets view to initial state - all fits

NOTE: New buttons - added in line with existing "Save Graph"

@im2nguyen - please tell us your thoughts

[vgheo]

Currently there already is "Save Graph" button on top-left.
I see two options to add new buttons ( ie "Reset View", maybe others... )

A/ add buttons in row with "Save Graph"
B/ move them as buttons in a "toolbox"

• icons+tooltips
• top-right, vertical placement / other?

[vgheo]

Actually - having the "show relations" mode active by default and on mouse over is pretty annoying.
User intent should be to select a resource so that they see details, but currently the UI hides most of the diagram if i move the pointer - so i must refrain from moving.

Could we change to

• by default - panning mode
• "show relations" - activated by keypress (eg )
  • OR - on click ? (but that currently also doing "show in details box")

[im2nguyen]

Hey @vgheo, your proposals seems good! I think having different modes (panning, selecting, zooming) as well as reseting the view will improve the usability.

I currently don't have the bandwidth to implement this right now, but if you open up a PR with this implementation, I'll be more than happy to review and merge it 😄

[vgheo]

@im2nguyen - I want to contribute this change - just want to make sure that you agree with the functionality

[vgheo]

PROPOSAL - v2

Panning mode

Mouse drag (with no key pressed) - panning

Highlight and select mode

( Currently this mode is active by default)

Hold Ctrl

• on mouse over - highlight relations
• on click - select element

Zoom by selection

• Ctrl+drag - define rectangle
• zoom to that rectangle on mouse-up

Reset view

Button: "Reset view"

• resets view to initial state - all fits

NOTE: New buttons - added in line with existing "Save Graph"

[vgheo]

rover is using vue-cytoscape integration for the graph rendering

Components API | vue-cytoscape

pan/zoom logic is likely to be configured on the component

https://github.com/im2nguyen/rover/blob/main/ui/src/components/Graph/Graph.vue#L399