[Hint Mode: Start Coords] Add start coords UI for polygon graphs (snap to grid only)

[nishasy]

Summary:

Add the UI to specify start coords for Polygon graph type (not unlimited, snap to grid only)

• Add the polygon graph type go start-coords-settings.tsx
  • No need to create a separate start-coord-polygon.tsx file because
    it's identical to start-coord-point.tsx. Reusing that component.
• Update the selection logic in interactive-graph-editor.tsx so it
  properly updates the graph with the new snapTo value. (It was stuck
  on the previously selected value before.)
• Add the start coords UI polygon flag
• Update the flag tests so they actually test what they're supposed to

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

Test plan:

yarn jest

Storybook

• Polygon story without default graph settings
  • http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-polygon
• For default graph settings, go to a different story and select polygon from the dropdown
  • http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-point

[nishasy]

I'm so embarrassed by how broken these tests were. They basically weren't even testing anything! 😬

[github-actions]

Size Change: +326 B (+0.04%)

Total Size: 853 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	273 kB	+134 B (+0.05%)
packages/perseus/dist/es/index.js	413 kB	+135 B (+0.03%)
packages/perseus/dist/es/strings.js	3.29 kB	+57 B (+1.77%)

ℹ️ 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.8 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-linter/dist/es/index.js	21.6 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/unlucky-lamps-draw.md, packages/perseus/src/index.ts, packages/perseus/src/types.ts, packages/perseus-editor/src/__stories__/flags-for-api-options.ts, packages/perseus-editor/src/components/start-coords-settings.tsx, packages/perseus-editor/src/components/util.ts, packages/perseus-editor/src/widgets/interactive-graph-editor.tsx, packages/perseus-editor/src/components/__tests__/start-coords-settings.test.tsx, packages/perseus-editor/src/components/__tests__/util.test.ts, packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx, packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts

---

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.24%. Comparing base (0b625f5) to head (18e9c85).
Report is 10 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1488      +/-   ##
==========================================
+ Coverage   70.12%   70.24%   +0.12%     
==========================================
  Files         510      513       +3     
  Lines      105591   105684      +93     
  Branches     7653    11427    +3774     
==========================================
+ Hits        74042    74240     +198     
- Misses      31360    31444      +84     
+ Partials      189        0     -189     

Files	Coverage Δ
...us-editor/src/components/start-coords-settings.tsx	98.69% <100.00%> (+4.13%)	⬆️
packages/perseus-editor/src/components/util.ts	85.07% <100.00%> (+0.95%)	⬆️
...us-editor/src/widgets/interactive-graph-editor.tsx	91.28% <100.00%> (+0.03%)	⬆️
packages/perseus/src/index.ts	100.00% <100.00%> (ø)
...teractive-graphs/reducer/initialize-graph-state.ts	81.44% <100.00%> (-12.22%)	⬇️

... and 158 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 0b625f5...18e9c85. Read the comment docs.

[Myranae]

Question: Is it best practice to still have both of these (arrange and act) and to have them separate like this if arrange is empty? Just curious as I usually combine them and want to make sure I do it the best way 😅

[nishasy]

Looks like there's no style guide for this, but there's a preference among folks to leave the comments on separate lines.

https://khanacademy.slack.com/archives/CJSB0D3BN/p1722962522758789

[Myranae]

Super exciting! Changes look good, but when running through the test plan, what should be different about the two stories (after changing the second one to a polygon graph)? They both have the start coords ui and the use default coords button works for both. Also confirmed the start coords ui goes away when snapTo is set to angles or sides. Looks like it's working! :)

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (18e9c85) and published it to npm. You
can install it using the tag PR1488.

Example:

yarn add @khanacademy/perseus@PR1488

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1488

[nishasy]

@Myranae ah, I should have clarified. The difference between the two cases in the test plan is that one make sure that the UI shows up when start coords have already been passed in, and the other makes sure the UI shows up by default when freshly initializing a graph. I had an issue during development where one worked and the other didn't, so I wanted to add that to the test plan explicitly.