Images for nodes

[Jumacasni]

Feature request template

I'm trying to use images for nodes like this as it is specified in this example

    graph.addNode(id, {
                        x: Math.random(),
                        y: Math.random(),
                        type: 'image',     
                        image: './image.svg',
                        size: 5,
                        label: "Label",
                        color: "#17AEFF" 
                     })

The problem is that when I specify type: 'image', I get this error

I've also tried using this settings:

 <SigmaContainer 
      settings={{ defaultNodeType: "image" }}>

Is there a way of using images for nodes? Am I missing something?

I think I should render Sigma container with the property nodeProgramClasses but I don't know if it is possible to access this property

[sim51]

What you missed, it's that you need to register the program "node image" on the sigma instance :

import getNodeProgramImage from "sigma/rendering/webgl/programs/node.image";

...

return (
    <SigmaContainer
      settings={{
        nodeProgramClasses: { image: getNodeProgramImage() }
      }}>
      ...

Take a look here -> https://github.com/sim51/react-sigma/blob/main/website/src/components/DemoGraph.tsx

[Jumacasni]

Oh... now it works, I didn't see that demo

Thank you!

[BaherZ]

Facing the same issue, but it seems adding

settings={{
        nodeProgramClasses: { image: getNodeProgramImage() }
      }}>

does not fix it for me, for reference, I have a network that should have both image and non-image nodes

code sample:

visibleNodes.forEach((node)=>{
        const attributes = {...node};

        if (node.isImage) {
            attributes.type='image';
            attributes.image = node.image.uri;
        }

        graph.addNode(node.id, attributes);
    });

<SigmaContainer
            settings={{
                nodeProgramClasses: {image: getNodeProgramImage()},
                defaultNodeType: 'image',
            }}
            style={{height: '500px', background: props.noBackground ? 'white' : mainBackgroundColor}}
        >

removing the defaultNodeType from settings doesn't do the trick either

[sim51]

Without the errors, I can't help you.

You don't need the defaultNodeType because you define it into the node's attributes. FYI, the circle program is always loaded, and is the default program. So what I see in your first code block is good

[BaherZ]

Exactly the same error as the one reported in this ticket:

Uncaught TypeError: Cannot read properties of undefined (reading 'process') at Sigma.process (sigma.js?2055:622:1) at Sigma._refresh (sigma.js?2055:698:1) at Sigma.refresh (sigma.js?2055:1191:1)

also I noticed this only happened in case of networks that have both image nodes and non-image nodes (just a circle of color )

this error does not happen when all nodes are images

[sim51]

Can you try to put attributes.type='circle; just before if (node.isImage) and see if it works ?

[BaherZ]

unfortunately didn't work

attributes.type='circle';

if (node.isImage) {
    attributes.type='image';
    attributes.image = node.image.uri;
}

[sim51]

Can you create a new ticket with a title like this "Display mixed node type doesn't work" and do a ref to this ticket ? It will be better for track our discussion. I will try to reproduce to make a codesandbox of such a use case