sim51 / react-sigma

Sigma React component
https://sim51.github.io/react-sigma/
Other
158 stars 27 forks source link

Updating the edge size causes the edges to dissapear #39

Closed BaherZ closed 1 year ago

BaherZ commented 1 year ago

Example bug report

Modification of the node default color in the settings has no effect

React-sigma-v2 version: ^3.0.3" Sigma.js version : "^2.3.1" Graphology version : "^0.25.0" Operating system: Ubuntu 20.04 **Web browser: chrome 106.0.5249.103 (64-bit)

Steps to reproduce

what I am trying to do is to change the size of the edge using a formula that we have, where it depends on minEdgeSize and maxEdgeSize

const size = minEdgeSize + (maxEdgeSize - minEdgeSize) * (e.weight?e.weight:0); now the problem is,this causes the edges to disappear for some reason

this useEffect causes edges to disappear:

useEffect(()=>{
        const {minEdgeSize, maxEdgeSize} = graphSettings;
        graph.updateEachEdgeAttributes((edgeId, e)=>{
            const size = minEdgeSize + (maxEdgeSize - minEdgeSize) * (e.weight?e.weight:0);

            return {
                ...e,
                size,
            };
        });
    }, [graphSettings.minEdgeSize, graphSettings.maxEdgeSize]);

and yes, the size here is a valid integer value

initially, here's how I add edges to the network:

visibleEdges.forEach((edge)=>{
        graph.addDirectedEdge(edge.source, edge.target, {type: 'arrow', color: 'rgb(94, 91, 91)', size: edge.size?edge.size:1});
    });

here's the sigma container:

<SigmaContainer
            settings={{
                nodeProgramClasses: {image: getNodeProgramImage(), circle: CircleNodeProgram},
                edgeProgramClasses: {
                    arrow: ArrowEdgeProgram,
                },
                ...graphSettings,
            }}
            style={{height: '500px', background: props.noBackground ? 'white' : mainBackgroundColor}}
        >

and I get the arrow program from here:

import ArrowEdgeProgram from 'sigma/rendering/webgl/programs/edge.arrow';

Expected behavior

Edges sizes get modified

Actual behavior

Edges disappear when I just add this useEffect to the code

sim51 commented 1 year ago

I just tested it, and it works : https://codesandbox.io/s/react-sigma-issue-39-73zxx1

If you can reproduce your issue on codesandbox by forking this one above, I will be able to help you.

BaherZ commented 1 year ago

The problem was that I didn't initialize weight when I added the edge, this seems to cause the issue for some reason when updating the size