Cfrgtkky

I am working with cytoscape and jquery with large data. My html code is

<script src="jquery.js"></script>

<script src="jquery.qtip.js"></script>

<script src="cytoscape.js"></script>

<script src="cytoscape-qtip.js"></script>

<script src="my_java_script.js"></script>`

My java script code is

$(function(){ // 

var cy = cytoscape({

container: document.getElementById('cy'),

boxSelectionEnabled: false,

autounselectify: true,

style: cytoscape.stylesheet()

.selector('node')

.css({'label': 'data(label)',

'width': '60px','height': '60px',      })

.selector('edge')

.css({'width': '10px','line-color':'#000000'})



.selector("#22").css({"line-color":"red"})

.selector("#44").css({"line-color":"red"})

.selector("#55").css({"line-color":"red"})

I have almost 20000 selectors. Because of such large data I am getting following error in Chrome 70 browser:

Uncaught RangeError: Maximum call stack size exceeded

at k (jquery.js:2)

at Object.fireWith [as resolveWith] (jquery.js:2)

at Function.ready (jquery.js:2)

at HTMLDocument.D (jquery.js:2)

How can I get rid of this ?

Consider using classes for your selectors and not unique id's, the way you use them is not the way you are supposed to do that. Especially if the selectors are just a line color, you can always define the selector with a more dynamic option:

style: [

    {

        selector: 'node',

        style: {

            'shape': 'data(faveShape)',

            'content': 'data(DisplayName)',

            'height': 'data(faveHeight)',

            'width': 'data(faveWidth)',

            'background-color': 'data(faveColor)',

            'line-color': 'data(faveLineColor)',

            'font-family': 'data(faceFontFam)',

            'font-size': 'data(faveFontSize)'

       }

    },

    ...

]

And when you add nodes/edges, use the logic from your python code and get the color of the element, after that, just put that variable in the cy.add() and you are good to go:

cy.add({

    data: {

        id: 'yourId',

        ...

        faveLineColor: 'yourLineColor',

        ...



    },

    ...

});