cytoscape.js dagre layout segment edges - cytoscape.js

Question

see below cytoscape.js vs dagre-d3.js for same set of data.
cytoscape : https://jsfiddle.net/bababalcksheep/m40m5mmx/6/
dagre-d3: http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
How can I make cytoscape.js edges same like dagre ?
Any help will be much appreciated !!!
should not cytoscape-dagre pick points from dagre ?
see from example https://jsfiddle.net/bababalcksheep/55cmk117/3/
where after dagre.layout(g); dagre has points in edges data which could be consumed by cytoscape segment edges.
$(function () { // on dom ready
var cy = cytoscape({
container: $('#cy')[0],
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'dagre'
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'padding-left': '10px',
'padding-right': '10px',
'padding-top': '10px',
'padding-bottom': '10px',
'shape': 'roundrectangle',
'width': 'label',
'background-color': ' #fff',
'color': 'black',
'border-width': '1px',
'border-color': '#333',
'font-size': 14,
'font': ' 300 14px "Helvetica Neue", Helvetica'
})
.selector('edge')
.css({
'label': 'data(label)',
'target-arrow-shape': 'triangle',
'target-arrow-color': 'black',
'source-arrow-color': 'black',
'edge-text-rotation': 'autorotate',
'line-color': '#333',
'width': 1.5,
'curve-style': 'segments'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black',
'text-outline-color': 'black'
}),
elements: {
'nodes': [{
'data': {
'id': 'CLOSED',
'name': 'CLOSED'
}
}, {
'data': {
'id': 'LISTEN',
'name': 'LISTEN'
}
}, {
'data': {
'id': 'SYN RCVD',
'name': 'SYN RCVD'
}
}, {
'data': {
'id': 'SYN SENT',
'name': 'SYN SENT'
}
}, {
'data': {
'id': 'ESTAB',
'name': 'ESTAB'
}
}, {
'data': {
'id': 'FINWAIT-1',
'name': 'FINWAIT-1'
}
}, {
'data': {
'id': 'CLOSE WAIT',
'name': 'CLOSE WAIT'
}
}, {
'data': {
'id': 'FINWAIT-2',
'name': 'FINWAIT-2'
}
}, {
'data': {
'id': 'CLOSING',
'name': 'CLOSING'
}
}, {
'data': {
'id': 'LAST-ACK',
'name': 'LAST-ACK'
}
}, {
'data': {
'id': 'TIME WAIT',
'name': 'TIME WAIT'
}
}],
'edges': [{
'data': {
'source': 'CLOSED',
'target': 'LISTEN',
'label': 'open'
}
}, {
'data': {
'source': 'LISTEN',
'target': 'SYN RCVD',
'label': 'rcv SYN'
}
}, {
'data': {
'source': 'LISTEN',
'target': 'SYN SENT',
'label': 'send'
}
}, {
'data': {
'source': 'LISTEN',
'target': 'CLOSED',
'label': 'close'
}
}, {
'data': {
'source': 'SYN RCVD',
'target': 'FINWAIT-1',
'label': 'close'
}
}, {
'data': {
'source': 'SYN RCVD',
'target': 'ESTAB',
'label': 'rcv ACK of SYN'
}
}, {
'data': {
'source': 'SYN SENT',
'target': 'SYN RCVD',
'label': 'rcv SYN'
}
}, {
'data': {
'source': 'SYN SENT',
'target': 'ESTAB',
'label': 'rcv SYN, ACK'
}
}, {
'data': {
'source': 'SYN SENT',
'target': 'CLOSED',
'label': 'close'
}
}, {
'data': {
'source': 'ESTAB',
'target': 'FINWAIT-1',
'label': 'close'
}
}, {
'data': {
'source': 'ESTAB',
'target': 'CLOSE WAIT',
'label': 'rcv FIN'
}
}, {
'data': {
'source': 'FINWAIT-1',
'target': 'FINWAIT-2',
'label': 'rcv ACK of FIN'
}
}, {
'data': {
'source': 'FINWAIT-1',
'target': 'CLOSING',
'label': 'rcv FIN'
}
}, {
'data': {
'source': 'CLOSE WAIT',
'target': 'LAST-ACK',
'label': 'close'
}
}, {
'data': {
'source': 'FINWAIT-2',
'target': 'TIME WAIT',
'label': 'rcv FIN'
}
}, {
'data': {
'source': 'CLOSING',
'target': 'TIME WAIT',
'label': 'rcv ACK of FIN'
}
}, {
'data': {
'source': 'LAST-ACK',
'target': 'CLOSED',
'label': 'rcv ACK of FIN'
}
}, {
'data': {
'source': 'TIME WAIT',
'target': 'CLOSED',
'label': 'timeout=2MSL'
}
}]
}
});
cy.on('tap', 'node', function () {
try { // your browser may block popups
window.open(this.data('href'));
} catch (e) { // fall back on url change
window.location.href = this.data('href');
}
});
}); // on dom ready

Answer 1

Segments were added in 2.6. The Dagre extension would need to be updated, but this is only practical after 2.7. This feature is already in the roadmap. See https://github.com/cytoscape/cytoscape.js-dagre/issues/5