Scaling Issue in cosmograph/react on Safari and Chrome

[jonsch1]

Hi everyone,

Firstly, I want to express my gratitude for the fantastic work on this library. It's a great resource, and making it open-source is highly appreciated :)

I've been using cosmograph/react, and I've encountered a problem with how nodes and edges scale, specifically in Safari but also in Google Chrome. This issue doesn't occur in my default browser, Arc.

The problem becomes apparent when you zoom in or out on this CodeSandbox example in Safari: https://codesandbox.io/p/sandbox/cosmos-usage-example-forked-kwswkv?file=/src/index.ts

It seems that newer versions of cosmograph have fixed this issue, but the react binding is still on version 1.3.1, where the problem persists.

Could anyone offer some insights or solutions to this?

Thanks, Jonathan

[Stukova]

Thanks @jonsch1 !

Could you please share more details about the scaling issue you're encountering? As a potential solution, you could try using the beta version of the @cosmograph/react library, version 1.4.0-beta.0, which includes a newer version of the @cosmograph/cosmos library.

[jonsch1]

Thank you for the quick response! So, i tried the 1.4.0 beta version, but it didn't help. Here is a more detailed explanation and image of the scaling issue:

When zooming in from a high distance, nodes grow until they reach their maximum size. Further zooming in won't change the node size, as they shrink to maintain their relative size. However, when opening the visualization in Safari, it seems that the maximum node size is much larger, which reduces the visualization's effectiveness when zooming in to focus on a group of nodes.

[rokotyan]

@jonsch1 Thanks for providing the example!

Different hardware and browsers can have different maximum point size limit which makes it a bit difficult to adapt to. We're thinking about implementing a new point sizing strategy on zoom and will keep you posted. Most likely that will happen closer to summer.

[Stukova]

@jonsch1 You can alternatively disable the resizing of nodes on zoom by setting the config option zoomNodesOnZoom to false.

[jonsch1]

Thank you all for the answers!! @Stukova Thank you for the suggestion, although I wouldn't want to disable the resizing I think. The option zoomNodesOnZoom seems not to be available in the current react version (1.4.0 beta). In general if I want to have the quickest access to new features it probably makes sense to use the typescript vanilla version, right? :)

[Stukova]

@jonsch1 Sorry, my mistake, not zoomNodesOnZoom, but scaleNodesOnZoom 🤦‍♀️ Should work with react too.

[jonsch1]

That works, thanks!

[jonsch1]

So, setting scaleNodesOnZoom to false and setting nodeSize to 20 actually solves my cross-browser scaling issue. So i wouldn't mind if you close this issue. :)