How to handle layoustart and layoutstop when processing important volume of data on cytoscape.js?

Question

Using cytoscape.js library, I have important number of nodes and edges which could take 10 seconds to show the diagram. I need to inform users that process is on going and then completed. SO I am after a way to handle the starting and ending of processing data.

I did the below code but it doesnt trigger the console.log. What is the mistake on my code ?

CYCY = cytoscape({
container: document.getElementById('cy'),
style: myStyle,
elements: myData,
autolock:true,     //prevent user from Dragging/Moving all elements
wheelSensitivity: 0.5,
layout: layoutOptions,
}).on('cxttap', function(event) { });

CYCY.panzoom({
                // options here...
            });

CYCY.on('layoutstart', function () {
    // Triggered when the layout is ready to start processing data
    console.log('Layout is ready to start processing data');
});

CYCY.on('layoutstop', function () {
    // Triggered when the layout has completed processing data
    console.log('Layout stopped');
});

Answer 1

Actually I misread cytoscape documentation. Before using layoutstart and layoutstop, layout.run() needs to be launched first. I run CYCY.layout(layoutOptions).run();