Highlight edges

Hi!

I want to highlight edges after user input via some widgets. For this I defined a CSS class like:

#...
{
  "selector": "edge.highlighted",
  "css": {
    "line-color": "red"
  }
},
#....

I then have some widgets for input and also a cell which looks like this:

widget = ipycytoscape.CytoscapeWidget()
widget.set_style(precgraph_jupyterutil.graph_css)
widget.graph.add_graph_from_networkx(some_networkx_graph, directed=True)

btn = widgets.Button(description="apply", icon="check", disabled=False)

def btn_callback(b):
  for edge in widget.graph.edges:
    classes = set(edge.classes.split(" "))
    classes.add("highlighted")
    edge.classes = " ".join(classes)

btn.on_click(callback=btn_callback)
display(btn)

widget

However I cannot get the graph to update interactively. It renders at the beginning as it should, but updating the classes attribute has no effect. I also cannot find any update function or similar.

I verified that it works at all by adding another cell after the one posted above with:

widget

If I run this cell I can see the graph with all edges in red (which verifies that the CSS etc works as expected).

What is the intended way to update the visualization? I would really appreciate any help 😃

[marimeireles]

Unfortunately that’s exactly how it’s working. This is what we have for the current code, every time you make a change the whole graph is rerendered. I opened an issue so we could discuss solutions about that #105

[christiandreher]

Hi @marimeireles, awesome, thank you very much for the quick fix. I installed ipycytoscape via pip, so I think I’ll just wait for the release. Until then the quickfix works.

One question though, does this now trigger a redraw for each changed class? Because I planned to iterate over all edges and adjust the classes, which would be quite wasteful if it would be redrawn in each loop.