jacomyal / sigma.js

A JavaScript library aimed at visualizing graphs of thousands of nodes and edges
https://www.sigmajs.org
MIT License
11.22k stars 1.59k forks source link

Node scaling issue on MacOS with NodeBorderProgram and NodePointProgram #1409

Closed gdotv closed 6 months ago

gdotv commented 6 months ago

Issue encountered: Node size scales should scale adequately as viewport is zoomed in (or out) Actual behavior: The node doesn't scale (though the hover label does) and looks smaller and smaller as the user zooms in.

See screenshot below highlighting the issue:

image

I've attempted reproducing this issue on a Windows device and found that it doesn't occur. One interesting observation I've made in my investigation is that Node programs that use the sizing calculation method relying on u_correctionRatio (e.g. NodeImageProgram, NodeCircleProgram) do not display the issue. I'm unclear on where the difference is but this appears to be a significant difference between the programs that could explain this bug - I'm also under the impression that size calculation if nothing else is where the issue lies in the GLSL programs.

jacomyal commented 6 months ago

Thanks for the detailed report, it is very weird indeed. I have one more intuition though: It could be the hard limit on WebGLRenderingContext.POINTS programs, maybe. Does this issue occur with WebGLRenderingContext.TRIANGLES programs as well?

gdotv commented 6 months ago

Hey, that's a good point - after testing, I can confirm this is only occurring on .POINTS programs

jacomyal commented 6 months ago

OK, that is some good news: Basically, nodes drawn with the POINTS method cannot have a size larger than 100px. And since the sigma stage is often scaled to match the devicePixelRatio, on Retina displays, this limit can become 50 or sometimes even less I think.

Originally, the node.point program was used by default because it was way more efficient than node.circle in terms of memory. Now that we use instanced rendering, it is no longer true. Also, the new @sigma/node-image uses TRIANGLES, while the old node.image was based on the POINTS method.

We are discussing right now with @Yomguithereal about switching the default node program to node.circle. That could be a good solution.

gdotv commented 6 months ago

Thanks @jacomyal, that sounds great. Truly glad SigmaJS is run so expertly! I think incidentally the v2 NodeImageProgram had the same issue as it was using POINTS and so that's been fixed as part of the v3 move!

jacomyal commented 6 months ago

The latest beta version uses NodeCircleProgram as the default node renderer. I had to fix it a bit, because it was drawing nodes slightly larger than NodePointProgram does, but it's all good now.

I'm closing the issue now, as we can't do more on sigma's side. Thanks again for the report!

gdotv commented 6 months ago

Thanks @jacomyal, just a quick question, where does that leave the NodeBorderProgram? I know it's not part of the main suite of programs but it's definitely a useful one, I'm not sure if NodeCircleProgram offers border configurations.

jacomyal commented 6 months ago

It will be developed in this repository as @sigma/node-border as soon as I have time (but I won't wait for it before releasing v3).

The tricky part is that I need a factory that can return a program that draws 1 to N colored borders (because I've had use-cases with 2 borders in the past). Also, there are strict pixel borders and relative percent borders, and this new package will need to handle both.

gdotv commented 6 months ago

Makes sense, thanks!

Arthur Bigeard Founder of gdotv https://gdotv.com

On Thu, 21 Mar 2024 at 15:47, Alexis Jacomy @.***> wrote:

It will be developed in this repository as @sigma/node-border as soon as I have time (but I won't wait for it before releasing v3).

The tricky part is that I need a factory that can return a program that draws 1 to N colored borders (because I've had use-cases with 2 borders in the past). Also, there are strict pixel borders and relative percent borders, and this new package will need to handle both.

— Reply to this email directly, view it on GitHub https://github.com/jacomyal/sigma.js/issues/1409#issuecomment-2012720940, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWX7SBS72XYNY7NNBW6ESPLYZL6IJAVCNFSM6AAAAABE4JQXRSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJSG4ZDAOJUGA . You are receiving this because you authored the thread.Message ID: @.***>