adaptive size not applied

[taehun-choi]

I tried to set the same maximum size for the nodes when zooming in using nodeReducer, but updating the size isn't working. Here is a sample of the code.

• Sigma.js version : 3.0.0-beta.32
• Graphology version : 0.25.4
• Operating system: max os sonoma 14.6.1
• Web browser: safari
• Steps to reproduce

1. render topology
2. zoom in

• Expected behavior : max size of node should be fixed as 4

• Actual behavior : actual node size is keep growing as zooming in

• sample code

     this.graph = graph;

        // Initialize the Sigma instance
        this.sigma = new Sigma(graph, document.getElementById(this.container), {
            nodeProgramClasses: {
                image: createNodeImageProgram(),
            },
            renderEdgeLabels: true,
            nodeReducer: (node, data) => {
                if (this.sigma) {
                    const camera = this.sigma.getCamera();
                    // Adjust size based on zoom level
                    let adjustedSize = SIZE_NODE / camera.ratio;
                    adjustedSize = Math.min(adjustedSize, SIZE_NODE);

                    return {
                        ...data,
                        size: adjustedSize,
                    };
                } else {
                    return {
                        ...data,
                        size: SIZE_NODE,
                    };
                }
            },
            edgeReducer: (edge, data) => {
                if (this.sigma) {
                    const camera = this.sigma.getCamera();
                    // Adjust size based on zoom level
                    let adjustedSize = SIZE_EDGE / camera.ratio;
                    adjustedSize = Math.min(adjustedSize, SIZE_EDGE);

                    return {
                        ...data,
                        size: adjustedSize,
                    };
                } else {
                    return {
                        ...data,
                        size: SIZE_EDGE,
                    };
                }
            },
            // Override hover rendering
            defaultDrawNodeHover: (context, data, settings) => {
                this.customDrawNodeHover(context, data, settings);
            },
            // Override label rendering to draw custom round boxes with text
            defaultDrawNodeLabel: (context, data, settings) => {
                this.customDrawNodeLabel(context, data, settings);
            },
        });

        const fa2Layout = new FA2Layout(graph, {
            settings: {
                barnesHutOptimize: true,
                iterations: 100,
                gravity: 0.2,
                scalingRatio: 2,
                strongGravityMode: true,
                slowDown: 2,
                edgeWeightInfluence: 0.5,
            },
        });

        fa2Layout.start();

[jacomyal]

Hi @taehun-choi,

Thanks for that report. There is one misunderstanding in your code: The node and edge reducers are not re-executed on camera updates. It is on purpose, though: Recalling the reducers means that sigma needs to reindex (or process, as we use internally, see the lifecycle doc) the data , which is expensive. Instead, when the camera is updated, sigma only needs to give to the WebGL programs the new camera position, and it remains quite efficient.

So, using the camera state in the reducers will not work as you expect.

I think the zoomToSizeRatioFunction setting might help you, though:

• You can set zoomToSizeRatioFunction to () => 1, to get nodes and edges sizes remain unchanged when the user zooms in or out
• You can set zoomToSizeRatioFunction to (x) => Math.max(1, x) to allow nodes and edges to shrink when the user zooms out, but they will not exceed their initial size when the user zooms in too much

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.