onClick event handler with graphviz-react

[noblekid96]

I've been using this react library for a few weeks so far and I think it's just as great for rendering DOT graphs as the vanilla d3-graphviz library. However, one question I have regarding this library is whether it has the ability to support onClick events. Is it possible to achieve click interactivity with this library alone or do I have to use React's D3 library? If so, do enlighten me on how click interactivity can be achieved. Thanks!

[DomParfitt]

HI @noblekid96, glad you like the package.

What kind of thing did you have in mind for the onClick events?

Currently there is no direct support in the package for them, i.e. you can't pass an onClick handler to the Graphviz component, but if there's a desire for it and it's feasible then I will definitely consider adding it in.

[noblekid96]

Hi @DomParfitt,

What I had in mind for the onClick events is similar to this demonstration of d3-graphviz at http://bl.ocks.org/magjac/b2bf6da945e725a605e0d077781457b2

The user is able to trigger events by clicking on the nodes in the graphs, add dataflows or remove nodes as well. This is achieved in the vanilla d3-graphviz package using D3. I was wondering if it would be possible to achieve this in graphviz-react as well?

[DomParfitt]

Thanks @noblekid96, I'll put together a proof-of-concept implementation when I get a moment to see how feasible it is but it seems like it should be doable.

[noblekid96]

Thanks @DomParfitt ! Looking forward to the new features.

[nebula2311]

@DomParfitt thanks, I would love to see this feature in the future releases.

[DomParfitt]

I've marked this as up-for-grabs.

I've had a little look but haven't had a proper chance to put an implementation together. It is slightly more complicated than it first appears due to how React's virtual DOM works and how d3-graphviz interacts with the DOM. It would be trivial to add an onClick handler to the component itself via an exposed prop but the interaction with the rendered graph isn't particularly intuitive. For example, passing a function that sets the click target's fill property to a particular colour won't actually display this change because, as far as React is concerned, nothing on the component has changed and, therefore, it does not re-render. This feels a bit too much like an implementation detail so I would rather the exposed API be a bit higher level and therefore more intuitive to end users.

@noblekid96 @Nbody231 if either of you (or anyone else) feel up to attempting an implementation then please feel free to do so (and open a PR to merge it back in). I will keep looking at it but can't make any promises in terms of time frame at the moment and it may benefit from another set of eyes on the problem 🙂.

[nicolas-despres]

Hi, Thanks @DomParfitt for the work I first started to use this library and got the same requirement.

I was able to implement it with a react hook and a call back when an element is clicked Here is a quick demo: https://codesandbox.io/s/nameless-cloud-cvsle?file=/package.json

It might be a naive implementation but it resolved my use case. Maybe it can help others. Regards

[DomParfitt]

Hi, Thanks @DomParfitt for the work I first started to use this library and got the same requirement.

I was able to implement it with a react hook and a call back when an element is clicked Here is a quick demo: https://codesandbox.io/s/nameless-cloud-cvsle?file=/package.json

It might be a naive implementation but it resolved my use case. Maybe it can help others. Regards

Hi @nicolas-despres,

Thanks for looking at this. If you have an implementation that works would you be able to open a PR for it?

[nicolas-despres]

No as I used another approach with hooks