timkpaine / ipydagred3

ipywidgets library for drawing directed acyclic graphs in jupyterlab using dagre-d3

ipydagred3

ipywidgets library for drawing directed acyclic graphs in jupyterlab using dagre-d3

Installation

You can install using pip:

pip install ipydagred3

Features

• Dynamically create and modify graphs from python
• Change color, shape, tooltip, etc
• Click events (click on node or edge and get event in ipywidget indicating source, good for node inspector tools)

Tooltips and Click events

Examples

Network example from the first gif Network Example

Tooltip Example from the second gif Tooltip Example

ipydagred3's Issues

tslint -> eslint

node colores not showing when code is imported into another jupyter notebook

I have a function like this:

def graph_of_claims(claims): ... ... return graphwidget

when this function is run in a jupyter notebook with voila the nodes appear with the corresponding color

but:

when I import that function into another jupyter notebook
from pyutils import graph_of_claims as mygraph

and run voila the graph is shown without colours.

some idea?

Allow for different text when hovering over a node.

Hi.

I am experimenting with ipydagred3 and it is really great. so little code and "voila" integrated in Jupyter.

Would it be possible that when hovering over the nodes in the graph a different text can be displayed that the text contained in the node itself (to offer the user extra information rather)

Thanks.

Please include the gif examples as jupyter notebooks

Title says it all.
I was having a look to the gifs as the "documentation". If you upload the jupyter notebooks you will make us all a favour.

thanks.

add to jupyter.org

https://github.com/jupyter/jupyter.github.io

Move to GHA

Remove superfluous render calls, makes it difficult to send updates at high speeds

Is it possible to export the graph as jpeg or png?

Is it possible to export the graph as jpeg or png?

if the answer is no, is there any plan?

thanks

Bump JupyterLab support for 3.0 now that it is released

add edge tooltips

Choose graph direction

Is your feature request related to a problem? Please describe.
I'd like to produce a graph with left-to-right direction. In dagre, this is achieved using layout option rankdir="LR" (docs). Can you please provide an example usage (if this is already possible)? If not, then this is a feature request.

Describe the solution you'd like
I noticed your javascript has these lines:
https://github.com/timkpaine/ipydagred3/blob/d07e15e0c0de02761469d727b33f87a1e0d686ba/js/src/view.js#L45-L51C8

So I tried initializing the graph like:

import ipydagred3 as dd3
graph = dd3.Graph(attrs={"rankdir": "LR"})

However, this did not have the desired behavior.

Describe alternatives you've considered
Following your data model, I think it should also be possible to set the attribute directly like graph.attrs["rankdir"] = "LR".

Additional context
None.

please include the code of the .gif in the example 2.

Hi,

being able to run a method when clikcing in a node seems to be a powerfull thing.

Could you please (as you did with example 1) include the code of the .gif in another example?

thanks.

JupyterLab 4

jupyterlab/jupyterlab#14590

how to plot from within a function

When writing the example code showed in GitHub within a function and calling the function jupyter notebook disconnects from kernel all the time. Does it have to do with ipydagred3?

here the code:

# Instantiate new graph
def doit():

    g = dd3.Graph()

    states = ["CLOSED", "LISTEN", "SYN RCVD", "SYN SENT",
              "ESTAB", "FINWAIT-1", "CLOSE WAIT", "FINWAIT-2",
              "CLOSING", "LAST-ACK", "TIME WAIT"]

    for state in states:
        g.setNode(state)


    g.setEdge("CLOSED",     "LISTEN",     label="open")
    g.setEdge("LISTEN",     "SYN RCVD",   label="rcv SYN")
    g.setEdge("LISTEN",     "SYN SENT",   label="send")
    g.setEdge("LISTEN",     "CLOSED",     label="close")
    g.setEdge("SYN RCVD",   "FINWAIT-1",  label="close")
    g.setEdge("SYN RCVD",   "ESTAB",      label="rcv ACK of SYN")
    g.setEdge("SYN SENT",   "SYN RCVD",   label="rcv SYN")
    g.setEdge("SYN SENT",   "ESTAB",      label="rcv SYN, ACK")
    g.setEdge("SYN SENT",   "CLOSED",     label="close")
    g.setEdge("ESTAB",      "FINWAIT-1",  label="close")
    g.setEdge("ESTAB",      "CLOSE WAIT", label="rcv FIN")
    g.setEdge("FINWAIT-1",  "FINWAIT-2",  label="rcv ACK of FIN")
    g.setEdge("FINWAIT-1",  "CLOSING",    label="rcv FIN")
    g.setEdge("CLOSE WAIT", "LAST-ACK",   label="close")
    g.setEdge("FINWAIT-2",  "TIME WAIT",  label="rcv FIN")
    g.setEdge("CLOSING",    "TIME WAIT",  label="rcv ACK of FIN")
    g.setEdge("LAST-ACK",   "CLOSED",     label="rcv ACK of FIN")
    g.setEdge("TIME WAIT",  "CLOSED",     label="timeout=2MSL");

    widget = dd3.DagreD3Widget(graph=g)

    # Add some custom colors based on state
    g.setNode('CLOSED', style="fill: #f77")
    g.setNode('ESTAB', style="fill: #7f7")
    g.setNode('TIME WAIT', style="fill: #b8c79c")

    # Add new nodes
    g.setNode("test")
    g.setNode("test2")

    # Add new edges
    g.setEdge("test", "test2")
    
   return(widget)

mygraph= doit()
print(my graph)

this code would not output anything in voila.

add tooltips

add edge click events

Example of use

https://github.com/timkpaine/tributary

Clean up inter-relation with dagre-d3-lite

https://github.com/timkpaine/dagre-d3-lite

add click events

Add support for prebuilt extension

Migrate to dagre-es

maintainers of dagre/dagre-d3 have been unresponsive and i've not been able to get write access, so we should move to https://github.com/tbo47/dagre-es

dagrejs/dagre-d3#410
tbo47/dagre-es#5
mermaid-js/mermaid#3712

remove `ensure_python`

support widgets in tooltips

Option to disable mousewheel zoom

Is your feature request related to a problem? Please describe.
I'd like the ability to create a graph widget where the zoom functionality is disabled. The motivation is that sometimes the user can accidentally trigger the zoom action, which can make the page more difficult to navigate. This option would render the graph more statically, though tooltips and click hooks would remain available.

Describe the solution you'd like
This could be a constructor argument (e.g., dd3.DagreD3Widget(zoom=False)), since this is not passed as a dagre graph attribute.

Describe alternatives you've considered
I'm not sure if there are alternative ways to disable zoom via javascript.