Add Zooming Controls to Visualizer #762
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
NEW DESCRIPTION (after commit 84893cc)
PR follows the mock up described by Mackenzie Bennett. Happy to act on suggestions to improve UI/code quality.
After clicking button is below. Zoom can also be adjusted by zooming on the keypad.
OLD DESCRIPTION (before commit 84893cc)
Note: In the UI that we discussed with Mackenzie Bennett, the plan was for the Zoom to be in the Navbar like so:
This may be down to my low experience in React but when I tried to make the zoom state accessible from the cytoscape renderer in the navbar (tried several things: callback functions, moving the state to the common parent - I didn't try a childRef but I thought that would have the same result) it broke the zooming on the cytoscape graph i.e. when you expanded on the keypad, the zoom would bounce around through random incorrect values and the graph would rotate - not ideal. Hence for now, I have done this:
Below shows what happens when you click one of the buttons. You can zoom by clicking buttons or using your keypad.
Please feel free to provide me guidance, or suggest edits, if you want to see UI improvements such as moving the Zoom to the navbar.