[Question] - How to set target-arrow-shape style

[meisam-sorkhabi]

Could someone help me figure out how to set the target-arrow-shape style?

The below snippet doesn't seem to work:

const elements = [
            { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },
            { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } },
            {
                data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' },
                style: {'target-arrow-shape': 'triangle'}
            }
        ];

<CytoscapeComponent elements={elements} layout={layout} cy={cy => this._cy(cy)}
                                        style={{position: 'absolute', width: '100%', height: '100%'}}/>

Above just shows:

I've found out that if any of the source or target nodes are compound nodes themselves, then the triangle arrow head is displayed properly. Sample:

const elements = [
            { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },
            { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } },
            { data: { id: 'three', label: 'Node 3', parent: 'two' }, position: { x: 200, y: 0 } },
            {
                data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' },
                style: {'target-arrow-shape': 'triangle'}
            }
        ];

Now the arrow head is displayed:

Any help you can give me on why it works like this is appreciated!