How to dynamically load images in SigmaJS React

35 views Asked by At

Is it possible to dynamically add images to React-SigmaJS, for example, through hover or when working on a zoom-in Graph? I am working on a large graph where which node has its images generated and stored in blob, instead of download, thus, I was trying to avoid generating 3000 images or more in one go.

So far I have tried hovering on nodes to dynamically add the URL and change the type:

if (hoveredNode) {
                if (node === hoveredNode || graph.neighbors(hoveredNode).includes(node)) {
                    newData.highlighted = true;
                    newData.size = 40
                    newData.type = 'image',
                    newData.image = '/logo.svg'
                } else {
                    newData.color = "#E2E2E2";
                    newData.highlighted = false;
                }
            }

        <SigmaContainer style={{ height: "600px", width: "100%" }} graph={graph} settings={{
            nodeProgramClasses: { image: getNodeProgramImage() },
            defaultNodeType : 'image',
        }}>
            <GraphEvents />
        </SigmaContainer>

But this does not show any image. Do I need to be precise with my image style? Or am I doing it wrong? Thanks for any help, and creating this beautiful library!

0

There are 0 answers