Parent / child relation is not rendered when child is added before parent

Bug report

Bug summary

Rendering of parent child relationship depends on the order of nodes being added

Code for reproduction

Consider the following CustomNode class which sets an optional parent child relationship

from typing import Optional

import ipycytoscape

class CustomNode(ipycytoscape.Node):
    """
    A node class that contains the correct information for visualization
    with ipycytoscape
    """

    def __init__(self, name: str, classes: str = "", parent: Optional[str] = None):
        super().__init__()
        self.data["id"] = name
        if parent is not None:
            self.data["parent"] = parent
        self.classes = classes

If I create a graph manually adding first the parent and then the child

graphwidget = ipycytoscape.CytoscapeWidget()
graphwidget.graph.add_nodes([CustomNode(name="node1", parent=None), CustomNode(name="node2", parent="node1")])
graphwidget

This correctly renders the parent child relation ship

However if I add the nodes in the reverse order:

graphwidget = ipycytoscape.CytoscapeWidget()
graphwidget.graph.add_nodes([CustomNode(name="node2", parent="node1"), CustomNode(name="node1", parent=None)])
graphwidget

The parent child relationship is not shown

Actual outcome

Parent child relationship is only shown when parent is added to the graph before child.

Expected outcome

Parent Child relationships is independent of the order of the nodes being added.

Version Info

• ipycytoscape version (import ipycytoscape; print(ipycytoscape.__version__)) : 1.3.2
• Python version: 3.8.12 and 3.10.0
• Jupyter(Lab) version: jupyterlab 3.2.8

[ianhi]

can you try adding the following to the end your custom node init:

self.send_state("data")

[jenshnielsen]

Note: I tried reproducing this by modifying https://cytoscape.org/cytoscape.js-cola/demo-compound.html and here

        elements: [
        { group: 'nodes', data: { id: 'n1', parent: 'n0'} },
        { group: 'nodes', data: { id: 'n0' } },
        ]

renders identically to

        elements: [
        { group: 'nodes', data: { id: 'n0' } },
        { group: 'nodes', data: { id: 'n1', parent: 'n0'} },
        ]