Flickering when using as widget

I am trying to animate a graph using ipywidgets but the output is flickering.

Is there a native way to embed the widget in ipywidgets? I am trying to figure it out from the docs, but they seem to be incomplete. The CytoscapeWidget has a callback to widgets, perhaps you can send me in the right direction?

from ipycytoscape import CytoscapeWidget
import networkx as nx
class Visualizer:
    def __init__(self, graph):
        self.graph = graph
        self.widget= CytoscapeWidget()
        self.widget.graph.add_graph_from_networkx(graph)
        self.update_nodes()
        style = [
        dict(selector = 'node',
              css = {
                  "background-color": "data(color)",
                  "text-outline-width" : 10
                    }),
        dict(selector = ':selected',
            css = {"background-color" : 'red',
                   "line-color" : "black",
                   "source-arrow-color" : "yellow",
                   "target-arrow-color" : "purple"})]
        self.widget.set_style(style)
    def update_nodes(self, data = None):
        if data:
            for idx, c in enumerate(data):
                node = self.widget.graph.nodes[idx]
                node.data['color'] = c
        else:
            for node in self.widget.graph.nodes:
                if np.random.rand() < .5:
                    node.data['color'] = 'red'  
                else:
                    node.data['color'] = 'blue'

g = nx.complete_graph(10)
v = Visualizer(g)
ts = iw.IntSlider(min = 0, max = 10, step = 1)
print(iw.widgets.interaction.__file__)
def callback(*args, **kwargs):
    kwargs.get('x')
    v.update_nodes()
display(v.widget)
plot = iw.interactive(callback, x = ts)
plot

[cvanelteren]

Ok I torched my env and reinstalled it. All is good now. Update looks good! Also saves the layout thanks a bundle!

[ianhi]

Just naively, I believe the issue is that the whole widget is being redrawn. Let me know if I can help!

@cvanelteren you’re spot on with the diagnosis. I think there are actually two redraws happening.

1. Becuase you use interactive ipywidgets will redraw the output
   • instead I would do: ts.observe(callback, names='value')
2. ipycytoscape was redrawing the graph every time
   • fixed by https://github.com/QuantStack/ipycytoscape/pull/109