onClickLink needs link information

[tusharkr]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe your use case Write about what you're building and why do you need this feature.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

[antoninklopp]

Hi @tusharkr ,

Looking at the documentation, could the onClickLink property be useful to your problem?

[tusharkr]

Thank you for your reply. Yes, onClickLink will be useful to my problem.

However, according to the documentation onClickLink only accepts two arguments (source & target node). I would like to get the edge label as well.

[antoninklopp]

Maybe more information about the link could be added to the callback indeed.

In the mean time, I think that you can retrieve this information by finding in the links list in your data the link with the source and target returned by the onClickLink function.

What do you think?

[tusharkr]

Yes, If link information can be added to onClickLink, it would be useful.

Unfortunately, In my case, searching the edge-list with source and target will not work. This is because, my use-case allows multiple edges between two nodes. Therefore, it might not be possible to arrive at the exact edge the user clicked on.

[antoninklopp]

OK, I see.

I have tried to add multiple links between nodes (example in this codesandbox) but I have the impression that this is not behaving well and that react-d3-graph is not really meant to be used with several links between nodes for now.

I will tag this as feature-request anyway, which is: adding more information about the link in the onClickLink callback. Can I change the name of your issue?

[tusharkr]

Yes. You can change the name according to your convenience. Thank you

[antoninklopp]

I think that there is two ways to go here:

• Not support multiple links between the same source and target and enforce it but as shown in this issue, there seems to be usecases for multiple links
• Support multiple links, which means:
  • Better handling onHover on multiple links (example in this sandbox, if you hover one link between node 1 and 2, the two links get highlighted, maybe only the one hovered should be)
  • Add the label id in the onClickLink callback the API could be like: onClickLink = function(source, target, labelId) (or function(labelId, sourceNode, targetNode) which would make more sense in my opinion but would be a breaking change). We should also add the label id in other links callback methods.

What do you think @tusharkr @danielcaldas @LonelyPrincess @terahn ?

[tusharkr]

In my opinion, multiple links should be supported. I already see a lot of applications where this will be useful. E.g. in Biology, where knowledge graphs are used to depict relationship between molecules/proteins/genes, there is already multiple kind of relationships between a pair of proteins or genes. Therefore, modifying the onClickLink to take an extra argument of labelId would make more sense. Although, this would be a major change, I feel that, this would benefit a lot of future use-cases. Of course, this would also mean handling the onHover on multiple links as well. Perhaps if the these multiple links between two nodes are rendered in a non-overlapping manner, then hovering over them is easier?