anvaka / VivaGraphJS

Graph drawing library for JavaScript
Other
3.76k stars 425 forks source link

Node icon images turn to green when nodes number exceed 15,000. #268

Closed gavrielzarka closed 4 days ago

gavrielzarka commented 1 year ago

Hi @anvaka , First, thanks a lot for this amazing library! Long story short, I consume data and use the graphics.node to iterate over the graph nodes and assign images based on certain criteria. that said, I faced a challenge while rendering the graph when my network has more than 15,000 nodes. When the number exceeds 15,000, some of the nodes are painted in green squares and the image assigned to these nodes is not taking effect. I do see that the image has been assigned to the node but after rendering it is not showing the assigned image but rather the green square.

What is your view on this, is it something you have ever faced while loading nodes in such scales?

Here is where I do the logic of which image assign to a node: Perhaps there is a way of decreasing the CPU and GPU usage by loading in a more efficient way the images assigned to the nodes?

    graphics.node((node: VivaGraphNode) => {
        nodeTrieSearch.add(node);
        // If it's a root node - use the circle image
        let nodeIcon = 'nodeMachine.svg';
        const isBaseNode = node.id === node.links[0].fromId;

        if (isBaseNode) {
            const nodeRiskLevel = nodesData[node.id];
            const riskLevelStartCase = startCase(nodeRiskLevel).replaceAll(' ', '');
            nodeIcon = nodeRiskLevel ? `node${riskLevelStartCase}.svg` : 'nodeNotDetermined.svg';
        }
        return vivaGraphView.webglImage(5, '/nodeIcons/' + nodeIcon);
    });

Thanks in advance!