search

nikeee / edotor.net

Your favourite Graphviz editor
https://edotor.net
MIT License
179 stars 22 forks source link

Click on node image to find related lines in editor #22

Open jbriales opened 5 years ago

jbriales commented 5 years ago

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):

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 commented 5 years ago

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 commented 2 years ago

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.