[Start Coords] Fix the radius input in circle graph start coords UI

[nishasy]

Summary:

The Radius input in the Circle graph start coords UI is not allowing
people to type in non-numbers, even mid-typing a valid number.

For example, when typing "0" to start "0.5", it auto-updates to 2 (default radius),
and it doesn't allow typing "." to start ".5".

This is happening because the radius is only reading the prop updates and passing
the evaluated value instead of storing the state for the input.

Adding a React.useState in the start-coords-circle.tsx file to fix this.

Issue: https://khanacademy.atlassian.net/browse/LEMS-2244

Test plan:

yarn jest packages/perseus-editor/src/components/__tests__/start-coords-settings.test.tsx

Storybook

• Before: https://khan.github.io/perseus/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-circle
• After: http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-circle

Demos:

In both videos, I'm highlighting the input and typing in "0" and then pressing backspace.

Before

Notice that "0" auto-updates the field to "2" and backspacing does nothing.

Screen.Recording.2024-08-09.at.5.06.40.PM.mov

After

Typing in 0, ., and backspace work as expected.

Screen.Recording.2024-08-09.at.5.07.04.PM.mov

[github-actions]

Size Change: 0 B

Total Size: 856 kB

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.2 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-editor/dist/es/index.js	275 kB
packages/perseus-linter/dist/es/index.js	21.6 kB
packages/perseus/dist/es/index.js	414 kB
packages/perseus/dist/es/strings.js	3.29 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/light-islands-lick.md, packages/perseus-editor/src/components/start-coords-circle.tsx, packages/perseus-editor/src/components/__tests__/start-coords-settings.test.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.57%. Comparing base (3f9cc14) to head (f4dd691).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1509      +/-   ##
==========================================
+ Coverage   70.47%   70.57%   +0.10%     
==========================================
  Files         513      516       +3     
  Lines      106029   106087      +58     
  Branches     5471    10850    +5379     
==========================================
+ Hits        74721    74869     +148     
- Misses      31191    31218      +27     
+ Partials      117        0     -117     

Files	Coverage Δ
...seus-editor/src/components/start-coords-circle.tsx	100.00% <100.00%> (+6.66%)	⬆️

... and 125 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3f9cc14...f4dd691. Read the comment docs.