User-defined links do not provide access to link source & target until user interacts with the graph about react-force-graph

[vasturiano]

@alico-cra I'm unable to reproduce your issue. Could you make a simple example on https://codesandbox.io/ that clearly shows the problem you're describing?

And if you try this example you'll notice that the custom links are visible immediately, not when the user interacts with the graph. Do you observe a different behaviour?

[alico-cra]

@vasturiano Here is the link to an example codesandbox displaying the issue.
Essentially, the issue is present when I am rendering some default data that is not fetched, then once the data I wish to display has been fetched, the UI is re-rendered with said new graph. In this example, there is a "Load Data" button which will simulate fetching data that is not initially rendered.

• Click on the Load Data button
• Next, you should see 4 nodes present. Notice that there are NO VISIBLE LINKS between them.
• Now, move your cursor in the area between 2 nodes.
• Only once the cursor hovers across a non-visible link do all the links become visible.
• Once the links become interacted with/visible, they follow the appropriate hover opacity & color logic I have set up in this example.

This only occurs when defining linkThreeObject. I would expect that as soon as the button is pressed & refresh occurs, the links would be present along with the nodes. However, it seems like something is conflicting between the initial linkOpacity={0} and the opacity for links set in linkThreeObject. A link must be physically interacted with by the mouse in order to be rendered visible with linkThreeObject in this example.
Am I missing something simple? Thanks in advance for the input.

[cramatt]

As @alico-cra noted, I'm able to recreate this issue if I define a custom node AND link. With link only example (the text-label @vasturiano pointed to) I don't see the issue.

I do notice that @vasturiano uses linkPositionUpdate to set link position while @alico-cra we are setting it in the linkThreeObject code - maybe this change would help?

I started a new sandbox but was not able to fully replicate, although I do have other issues with the links not positioning correctly which are maybe related?

https://codesandbox.io/p/sandbox/purple-morning-ntr2zf?file=%2Fsrc%2FForceGraph.jsx%3A57%2C9

[alico-cra]

@cramatt Yes that is a good point worth clarifying. The text-label example does work for me as well.

However the difference in that example vs what I noted in this bug is that the issue seems to be present when newer content is present after initial render, and after a refresh occurs, the new links are present in the canvas but not visible. They almost seem to be defaulting to the linkOpacity={0} rather than the styling dictated in linkThreeObject.

[vasturiano]

Thanks for creating those examples.

Like @cramatt already mentioned, the issue is that you're not implementing the linkPositionUpdate method. This method is essential when you have custom links because the module has no way to know how to generically do that. The method linkThreeObject gets invoked only at object creation, but linkPositionUpdate gets invoked at every frame in which there is node movement.

You can see an example of that implementation here:

react-force-graph/example/text-links/index-3d.html

Lines 33 to 40 in ac46439

	linkPositionUpdate={(sprite, { start, end }) => {
	const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
	[c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
	})));
	// Position sprite
	Object.assign(sprite.position, middlePos);
	}}