An Interactive Graphviz Widget

Dash Python
,
1

Just as an FYI to the community I have built an interactive Graphviz viewer for dash. You can see it at https://github.com/BusinessOptics/dash_interactive_graphviz. It uses viz.js (via d3-graphviz) on the client side to do the layout and will animate between states, while rendering pretty much the entire language (great thanks to the d3-graphviz maintainers).

Screenshot from 2020-01-14 11-57-00
Screenshot from 2020-01-14 11-57-00421Ă—694 38.1 KB

Usage is reasonably straight forward

import dash_interactive_graphviz

dot_source = """
digraph  {
  node[style="filled"]
  a ->b->d
  a->c->d
}
"""

dash_interactive_graphviz.DashInteractiveGraphviz(
    id="graph",
    dot_source=dot_source
)

It also exposes a selected property which will change when you click on a node.

@app.callback(
    Output( ..., ...),
    [Input('graph', 'selected')]
)
def change_my_view(selected):
    # Do something with selected

This allows you to alter the rendering to say highlight the selected node, but importantly the behaviour is all up to you in lovely python code.

The widget itself allows for zooming and panning, as well as a reset button.

I have always found Graphviz to be extremely useful, I hope someone else finds this useful.

5 Likes
2

Hi @jhsaunders the github link you sent does not work, is the repo public?

3

AHHH!! Sorry I had left ii private. I have made it public now, here is the link again: https://github.com/BusinessOptics/dash_interactive_graphviz

4

This is great stuff, thanks for sharing @jhsaunders!

1 Like
5

Great work @jhsaunders and super useful!

I was wondering, how do we pass in image references so that nodes with images can get rendered properly? Do you have any suggestions?

For example, the following .dot “script”:

digraph { a[image=“images/first.png”]; b[image=“images/second.png”]; a → b }

will not render and because d3-graphviz needs

.addImage(“images/first.png”, “400px”, “300px”)
.addImage(“images/second.png”, “400px”, “300px”)

to be added before .renderDot() is called, according to d3-graphviz docs (if i understand them correctly).

Is there a mechanism to do this with dash_interactive_graphviz?

thank you!