Description

This fixes a gnarly performance issue when the number of node or edge types is large (roughly over 20). The browser would essentially lock up and be nearly unuseable.

The problem was that the effect that watch for the Input value change was being fired way too often, including the initial render, and the state update is very slow.

The fix was to properly debounce the value change and also compare to previous value. This led to another fix in the usePrevious hook where it didn't always have the correct value.

And finally, I did some cleanup in the SingleEdgeStyling and SingleNodeStyling components to lean on Recoil selectors to simplify the logic.

Changelog

I accidentally pushed the changelog update to main directly. Since it is a non-destructive change, I'm just going to leave it there rather than revert it and add it to this PR.

fc0a0e5

Validation

• Tested changing display name in Input in sidebar
• Tested changing preferences in customize popup
• Tested resetting styles in customize popup

Related Issues

• Resolves Fix slow rendering in node/edge styling #541

Check List

• I confirm that my contribution is made under the terms of the Apache 2.0
  license.
• I have run pnpm checks to ensure code compiles and meets standards.
• I have run pnpm test to check if all tests are passing.
• I have covered new added functionality with unit tests if necessary.
• I have added an entry in the Changelog.md.