[Treantjs]: collapsable - Error when there is a lot of json data

[egor-progger]

Description from treantjs issue

examples/collapsable/collapsable.js var chart_config = { chart: { container: "#collapsable-example",

        animateOnInit: true,
        
        node: {
            collapsable: true
        },
        animation: {
            nodeAnimation: "easeOutBounce",
            nodeSpeed: 700,
            connectorsAnimation: "bounce",
            connectorsSpeed: 700
        }
    },
    nodeStructure: {
        image: "img/malory.png",
        children: [
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                image: "img/lana.png",
                collapsed: true,
                children: [
                    {
                        image: "img/figgs.png"
                    }
                ]
            },
            {
                image: "img/sterling.png",
                childrenDropLevel: 1,
                children: [
                    {
                        image: "img/woodhouse.png"
                    }
                ]
            },
            {
                pseudo: true,
                children: [
                    {
                        image: "img/cheryl.png"
                    },
                    {
                        image: "img/pam.png"
                    }
                ]
            }
        ]
    }
};

/* Array approach var config = { container: "#collapsable-example",

    animateOnInit: true,
    
    node: {
        collapsable: true
    },
    animation: {
        nodeAnimation: "easeOutBounce",
        nodeSpeed: 700,
        connectorsAnimation: "bounce",
        connectorsSpeed: 700
    }
},
malory = {
    image: "img/malory.png"
},

lana = {
    parent: malory,
    image: "img/lana.png"
}

figgs = {
    parent: lana,
    image: "img/figgs.png"
}

sterling = {
    parent: malory,
    childrenDropLevel: 1,
    image: "img/sterling.png"
},

woodhouse = {
    parent: sterling,
    image: "img/woodhouse.png"
},

pseudo = {
    parent: malory,
    pseudo: true
},

cheryl = {
    parent: pseudo,
    image: "img/cheryl.png"
},

pam = {
    parent: pseudo,
    image: "img/pam.png"
},

chart_config = [config, malory, lana, figgs, sterling, woodhouse, pseudo, pam, cheryl];

*/ New Recording - 7/20/2022, 4:12:22 PM

Treantjs issue link

fperucic/treant-js#172