Directed Edges not working with CustomNode

[AlexejPenner]

Bug report

Extending the code for https://ipycytoscape.readthedocs.io/en/latest/examples/networkx.html#Custom-networkx-Node-Objects-that-inherit-from-ipycytoscape.Node by adding the directed=True flag does not add the arrow to the resulting visualized graph.

import ipycytoscape
import networkx as nx

class CustomNode(ipycytoscape.Node):
    def __init__(self, name, classes=''):
        super().__init__()
        self.data['id'] = name
        self.classes = classes

n1 = CustomNode("node 1", classes='class1')
n2 = CustomNode("node 2", classes='class2')

G = nx.MultiDiGraph()

G.add_node(n1)
G.add_node(n2)

G.add_edge(n1, n2)

custom_inherited = ipycytoscape.CytoscapeWidget()
custom_inherited.graph.add_graph_from_networkx(G, directed=True)
custom_inherited.set_style([
                        {
                            'selector': 'node.class1',
                            'css': {
                                'background-color': 'green'
                            }
                        },
                        {
                            'selector': 'node.class2',
                            'css': {
                                'background-color': 'red'
                            }
                        }])
custom_inherited

Actual outcome

Expected outcome

Version Info

• ipycytoscape version : 1.2.2
• Python version: 3.8
• jupyter core version: 4.7.1

[marimeireles]

Hey @AlexejPenner thank you for opening this issue. I'll move the discussion to https://github.com/cytoscape/ipycytoscape/issues/56. I'm having a look on it, but not sure how much time I can spend on it. Contributions are welcome and I'm around if you or anyone else have questions! Thanks for opening the issue. I really dislike this bug and want to fix it =)

[AlexejPenner]

Thanks @marimeireles - in the meantime for anyone else running into this it seems pretty easy to get the arrow behavior by explicitly defining it like in #56

import ipycytoscape
import networkx as nx

class CustomNode(ipycytoscape.Node):
    def __init__(self, name, classes=''):
        super().__init__()
        self.data['id'] = name
        self.classes = classes

n1 = CustomNode("node 1", classes='class1')
n2 = CustomNode("node 2", classes='class2')

G = nx.MultiDiGraph()

G.add_node(n1)
G.add_node(n2)

G.add_edge(n1, n2)

custom_inherited = ipycytoscape.CytoscapeWidget()
custom_inherited.graph.add_graph_from_networkx(G, directed=True)
custom_inherited.set_style([
                        {
                            'selector': 'node.class1',
                            'css': {
                                'background-color': 'green'
                            }
                        },
                        {
                            'selector': 'node.class2',
                            'css': {
                                'background-color': 'red'
                            }
                        },{
                            "selector": "edge.directed",
                            "style": {
                                "curve-style": "bezier",
                                "target-arrow-shape": "triangle"
                            }
                        }])
custom_inherited