Click on node image to find related lines in editor

[jbriales]

As an enhancement proposal, I thought it'd be an amazing plus while editing moderately complicated graphs would be to highlight related lines when clicking on elements in the visualization.
E.g. click on node and highlight line where node is defined AND related edges.

Possible approach (internally):

• Get node name upon click
• Search for that node name in the editor

I'm not super-familiar with javascript or front-end development, so not sure about the complexity of this under the hood. But I'm willing to do some minor work to start learning more about it. So happy to know about your thoughts and considerations on this! :)

[nikeee]

Cool idea!

I think with the current implementation, this would not be straight-forward. The rendered graph is an SVG generated by viz.js, which is the real GraphViz compiled for the web.

The solution that comes to my head is to inject code into the stuff that user has typed and render that instead. This can result in broken DOT code (and thus no graph output) if not done correctly.

I'll have a look if there is any easier solution for that.

[nikeee]

It seems that nodes get IDs in the order they are referenced in (node1 for the first node etc). Maybe we can leaverage this to do some "go to definition" by clicking on a node in the preview.