Adding the ability to completely freeze the graph

[BradleyBrown19]

I'm very pleased with this library so far!

I was wondering if it was possible to completely freeze the graph, including it's position.

Static graph does everything except it still lets the user drag the entire graph to different positions. I was wondering if it was possible to disable this?

[grabczak]

I'm also wondering if it is possible. It would be nice to prevent users from unexpected behaviours related to graph dragging.

[danielcaldas]

Hello @BradleyBrown19 @grabczak, from the official docs:

staticGraph (boolean = false) 🔗when setting this value to true the graph will be completely static, thus all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be rendered with the initial provided x and y coordinates (links positions will be automatically set from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.

staticGraphWithDragAndDrop (boolean?) 🔗 exactly the same as above staticGraph , but it will allow users to drag&drop nodes. Note : If staticGraph is set to true , then staticGraphWithDragAndDrop will not produce the desired behaviour, make sure to set only one of them to true .

You'll probably want to look at these two configs.

[lynamemi]

I am running into this issue as well. staticGraph and staticGraphWithDragAndDrop are useful props, but as the other two mention, the entire graph still drags. I think this "graph drag" functionality we're talking about is coming from d3-zoom - the "panning" functionality. I thought the panAndZoom: boolean prop might work to turn pan on and off, but it does something different.

So does it makes sense to prevent pan and zoom for the existing static graph props? Or maybe panAndZoom becomes an enum with a "freeze" option? Or is a new prop needed?

[danielcaldas]

It seems that is is quite a requested feature. Let me know what you think of this approach. In order to keep things retro-compatible, I was thinking of having a new property freezeAllDragEvents that would completely disable drag events on the entire graph.

Would this be something that you would use? @lynamemi @grabczak @BradleyBrown19

[grabczak]

It seems that is is quite a requested feature. Let me know what you think of this approach. In order to keep things retro-compatible, I was thinking of having a new property freezeAllDragEvents that would completely disable drag events on the entire graph.

Would this be something that you would use? @lynamemi @grabczak @BradleyBrown19

This is exactly what suits my needs :)

[lynamemi]

It seems that is is quite a requested feature. Let me know what you think of this approach. In order to keep things retro-compatible, I was thinking of having a new property freezeAllDragEvents that would completely disable drag events on the entire graph.

Would this be something that you would use? @lynamemi @grabczak @BradleyBrown19

Yes, that sounds great!

[danielcaldas]

Assigning normal priority to officialize the feature request. Currently, I don't have the bandwidth to look into this, as always PRs as welcome 🙂. If any of you wants to jump in help this should be a good challenge, the execution would look like:

1. Adding new property to graph.config.js called freezeAllDragEvents
2. Using that property in our main component Graph.jsx to prevent the d3 drag events from being set. In detail, prevent _graphNodeDragConfig from being called by _graphBindD3ToReactComponent when this property is set to true.

With these 2 steps, we should be able to completely freeze the graph.

I hope these small steps encourage you to contribute!

Cheers!

[Antrikshy]

I implemented this in #388, but while the property does freeze the nodes, the graph still can be panned around and zoomed into. Was the idea to block those drag events as well?

[Devlin556]

Hi! I really need this prop :D In my case - graph should be completed freeze and react only to clicking on nodes. I created a family tree and located nodes like a tree graph, freeze their positions but I still can move this tree. How can I prevent this?
Here is my tree.

[Antrikshy]

I believe I got it working! (PR #388 updated). If folks on this thread want to check behavior before it's merged, clone my fork, switch to this branch, flip the default to true in src/components/graph/graph.config.js, line 250, run npm dev and open the sandbox in the browser. A sample graph should render with freezeAllDragEvents set to true.

[danielcaldas]

The PR #388 closes this issue. Will go out in the next release.