Expand group node behavior is weird when request child data with ajax with cytoscape.js-expand-collapse

[Does666]

I'm learning [cytoscape.js][1] and its related extension [cytoscape.js-expand-collapse][2] and being attracted to its amazing features.

I tried to do a demo that when open a node, request the child nodes with ajax from server and expand the group.

I find the extension cytoscape.js-expand-collapse has a cue utility. When a node has child nodes, it will show a cue sign.

In my demo, I don't know the child nodes before expanding it. So I append a dummy node at initial status.

When expand a node, I have to remove the dummy node, request the real child nodes, append to the group and relayout the graph.

How do I to relayout ?

I find two ways. One way is to call expand API of the extension, the other way is to call cy.layout(). Neither method is satisfactory.

If I expand node with expand method of cytoscape.js-expand-collapse, the whole graph will always shift on the sceen or even fly out of the screen.

param.options.layoutBy = {
		name: 'cose-bilkent',
		fit: false,
		randomize: false,
		idealEdgeLength : 150
	};
api.expand(param.nodes, param.options);

If I expand node with cy.layout({name:'cose-bilkent'}), the layout looks good, but the cue sign is wrong. (When expand node, it should show a minus sign not a plus sign )

var layout = cy.layout({
	name: 'cose-bilkent',
	fit: false,
	randomize: false,
	idealEdgeLength : 150
});
layout.run();

What I need is to combine the advantages! When expand a node, the layout looks good and the cue sign is right.

See my demo.
https://codepen.io/Does666/pen/WPLjQq

You can click the cue signs one by one and then check the top checkbox to see the issue.