Add "node-size" SizingType to implement "zoom in" selected node

[SerhiiTsybulskyi]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Currently, when a selected node has a different size, then another node also decreases the size

Screen.Recording.2025-04-01.at.10.47.22.mov

What is the new behavior?

node-size mode, using the size property of the node without "Relatively scaling the sizes"

Screen.Recording.2025-04-01.at.10.34.06.mov

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[Copilot]

Pull Request Overview

This PR introduces a new sizing strategy "node-size" that directly uses a node's size property to implement a "zoom in" effect on the selected node.

• Added "node-size" to the supported sizing strategies
• Modified conditional checks in the nodeSizeProvider to account for "node-size"
• Updated demo stories to showcase the new "ZoomInSelected" behavior

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/sizing/nodeSizeProvider.ts	Integrated "node-size" strategy and updated conditional logic
docs/demos/Sizing.story.tsx	Added a new story ("ZoomInSelected") demonstrating the feature

[netlify]

✅ Deploy Preview for reagraph ready!

Name	Link
🔨 Latest commit	6bef224
🔍 Latest deploy log	https://app.netlify.com/sites/reagraph/deploys/67eb9aca814e8c000895aa46
😎 Deploy Preview	https://deploy-preview-316--reagraph.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[amcdnl]

Closing this because changing the node size (scale) upon selection in a network graph is generally a bad idea for several reasons:

1. Disrupts Spatial Layout and Readability

When a node suddenly grows larger, it shifts the surrounding elements, causing adjacent nodes and edges to reposition or overlap. This disrupts the carefully balanced layout, creating visual instability and confusion.

2. Introduces Unwanted Cognitive Load

Users rely on the stable positioning and relative size of nodes for quick visual scanning and cognitive mapping. Changing the node size breaks this spatial consistency, forcing users to mentally readjust and recalibrate each time a node is selected.

3. Creates Interaction Challenges

Increasing the node size upon selection can inadvertently obscure neighboring nodes or edges, making it more difficult to select or interact with them. This unintended occlusion worsens usability rather than improving it.

4. Misleading Interpretation of Data

If the node's visual scale typically corresponds to a meaningful data dimension (such as importance, connectivity, or frequency), dynamically resizing it upon selection can unintentionally misrepresent the underlying data. Users may incorrectly interpret the selected node as more significant than it actually is.

5. Performance Impact

Resizing elements dynamically may trigger unnecessary rendering computations, animations, or layout recalculations, negatively impacting performance, especially in larger graphs.