Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Focus view on a node #107
By default, the graph will be centered on the selected node, but the graph scale will not change. However, there's a new
The sandbox example has been updated to preview this new feature. When the user clicks on a node, it will immediatly become the focused node.
It is now possible to set a "focusedNodeId" to the graph, which will result in the selected node appearing on the center of the displayed area of the graph. Optionally, aside from centering the view on it, a certain zoom can be applied while the node is focused on screen. No zoom is applied by default, but that behaviour can be configured by using the new "focusZoom" parameter in the config object. This setting should receive a number with the zoom level to apply, so the larger it is, the bigger the node will appear on screen.
Thanks for checking it out, @danielcaldas !
I've just tried it again, and I can see the effect in the default sandbox example. When you click on a node, that one is selected as the focused one and the animation triggers. Since there are so many nodes there, it's easier to see if you set the
The current implementation seems to have some trouble in the
The problem is that the id of the node received by the
Since I was using
In order to avoid those kind of data type issues, I'd probably have to convert both ids to string when performing the search. I'll try it and upload a patch right away.
This actually works quite nicely when setting
Take into consideration this comments for the near future, because before merging this there is a bug that needs to be fixed, regarding nodes animation reset, this is being triggered in moments that it shouldn't, I'll take a look at this.
Again thanks for the amazing contribution!
Instead of being a prop on its own, the 'focusedNodeId' must now be included as part of the 'data' object received by the Graph component. The sandbox code has been update to reflect this change.
The 'getCenterAndZoomTransformation' has been rellocated to the graph helper file, instead of being part of the Graph component.
No more comments to add, just check the snapshot test for the graph component (
Please check whether
Thanks! I tried and you are right:
I'll keep looking into it and upload a fix as soon as possible.
Hi there! Sorry for the delay, @danielcaldas ! It's gonna take a while longer to merge this PR in, as I haven't been able to fix this yet.
The reason why the collapsible nodes are not working as expected in the Sandbox example (and also in the tests) is that the graph data is been overriden when we call
I suspected this may be related to the custom handler and the default
I thought that ensuring both handlers run in order could help, so I tried using the
With this change, the links with the
The nodes which should be collapsed, however, did not disappear. The
Fixing this issue is proving to be kind of tricky, but I'll keep looking into it when I have the time. If something clicked to you while reading this, don't hesitate to let me know what you think.
Thanks for the detailed report!
Indeed the call to
Maybe when I merge the branch you could update this one and check again whether the problem is going to be there at that time (my hope is that it should go away
Good job, @danielcaldas ! Those directional links are looking nice!
I merged the changes and tried again, but unfortunately it seems we're still facing issues here.
I'll have to look further into it before giving you a more detailed report, but after trying things out in the Sandbox, this is the current situation:
The link matrix was not been properly updated when the collapsible setting was enabled. This is because when obtaining its values it didn't check whether the different links were hidden or not. This change fixes the issue and prevents the link matrix from containing wrong values which cause orphan nodes are not hidden properly during collapse.
I think I finally got it!
The issue with the nodes not been hidden when they should was caused by the
I modified the function
When you have the time to, could you try it out and confirm that the sandbox example works fine now?
PS: I submitted another PR fixing a small bug in your new branch. Merge that one in before trying this, because the custom
Could not relicate those two (tried master and your branch on the commit has
Also overall the feature looks nice but there are two things that need our attention:
Rather than that I'm very happy with this new feature
Oh, you're right! I cloned my branch and what I mentioned before do not happen to me either. There must have been something messed up in my local branch, though I can't really tell what it was.
I'm experiencing both of these issues in my newly downloaded branch now, so I'll take a look and them as soon as possible.
To be honest, I hadn't noticed it because I didn't try to make zoom normally. Thanks for letting me know!
That is due to the
We have two choices here:
What do you think? How would you like it done?
I've just updated my remote branch by merging it with the current master in this repository. The zoom and focus animation was not working with the
This leaves us only with the transition duration issue, so I'll be awaiting your feedback before getting into that.
It would be awesome. Another thing that I notice aside of this zooming issue is that the drag&drop functionality for the whole graph seems a bit off, could you take a look into that as well?
The transition duration property was been applied to the graph container at all times, which affected to every other transformations that triggered on it. This included the default zoom or the drag and drop functionality, among others. In order to fix this, that transition duration value is set back to zero after the focus and zoom animation has finished. Some actions on the node do also cancel the animation in case it's still ongoing, like trying to drag a node. With this change, there's no longer a delay when moving a node to another location or while performing a zoom.
I know it's been a while, but I'm still not done with this. Sorry!
The issue with the transition duration should be fixed by now. Whenever the animation finishes, its value resets to zero. With this change, the normal zoom should be done at its usual speed and not be affected by the focus animation duration.
I've been looking into this, and the
The latest changes I submitted seem to have introduced some other errors in the Travis build, so I'll have to check that as well.
There was an issue with the drag and drop feature when used along the focus and zoom transformation. The problem was that we were recalculating the transformation everytime the page was rendered, which meant that a new transform value would be created anytime the node moved to a new position. This issue only affected the focused node itself, since the `getCenterAndZoomTransformation` did only depend on that node coordinates. To avoid abnormal behaviours, the transformation is only obtained when the graph receives props. By doing this, the current view position is preserved until a new focused node is set. If the user drags the node around, current zoom and position will be unaffected by it. This matches the default behaviour we encounter in any other scenario, when moving any other nodes or not having activated the focus and zoom feature.
The `enableFocusAnimation` property in Graph' state is now set to `false` in the `dragStart` event instead of during `dragMove`. This change should have a positive impact in the application's perfomance, as the `enableFocusAnimation` value will only checked once instead of being read in every position change during a drag operation.
One of the latest changes broke the focus feature in certain scenarios. When a focus zoom different from one was applied, the view was not properly centered in the selected node. The transformation obtained in the 'getCenterAndZoomTransformation' did not work as expected. Applying a single translate before scaling didn't seem to do the trick, and the second translate is necessary for the view to display the selected node in the center after scaling the graph.
Hi there, @danielcaldas ! Sorry for not answering earlier, I had a pretty busy week and wasn't able to look into this.
I managed to replicate the behaviour you mentioned only when the focus zoom was set to a value different from zero. It seems I messed things up in my latest commit by removing one of the
I changed it back to how it was before. After scaling the view, I apply the transformation to center the view on the selected node. Check it out when you have the time and let me know if it's working for you now.