Black Lives Matter. Please consider donating to Campaign Zero's mission of ending police violence in America.
https://www.joincampaignzero.org

An Interactive Graphviz Widget

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

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.

4 Likes

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

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

This is great stuff, thanks for sharing @jhsaunders!