Combined (border+image) Program Node Rendering Issue

[oda79]

Combined (border+image) Program Node Rendering Issue

Description

When using a combined program (node-image and node-border) for rendering nodes, overlapping nodes appear messy. The nodes' borders are rendered separately and on a different layer from their images, resulting in a 'transparent background effect' or incorrect clipping areas. This issue is critical for large graphs, as graphology lacks collision layout, leading to massive node overlap.

Details

• Sigma.js version: 3.0.0-beta.18
• Graphology version: 0.25.4
• Operating system: Windows 11
• Web browser: Google Chrome Version 124.0.6367.202 (Official Build) (64-bit)

Steps to Reproduce

1. Visit the live example: Codesandbox Example
2. Observe the rendering of overlapping nodes.

Expected Behavior

When nodes overlap, their borders should be clipped accordingly, similar to the node 'B' in the reference image below:

Actual Behavior

Nodes' borders are displayed regardless of the nodes' z-position, leading to visual artifacts and a cluttered appearance:

Additional Information

This issue becomes more noticeable and problematic for large graphs due to the lack of collision layout in Graphology, causing significant node overlap.

[jacomyal]

@oda79 Thanks for that report!

I totally get this issue, and that's bad, and I have no idea how to solve it yet. Maybe something with z indexing, I'll try as soon as I can.

About collision layout in Graphology though, you can use graphology-layout-noverlap. It was not working properly with sigma.js before because we reinterpolated node sizes before, but since v3 you can use zoomToSizeRatioFunction and itemSizesReference (like in this example) to render sizes exactly as they are in the data, which allows graphology-layout-noverlap to work properly.

I hope this helps, until I find how to solve the initial problem.