[Interactive Graph Editor] Add white as a fill option for locked ellipses and polygons

[nishasy]

Summary:

We got a request from content authors to add a "white" fill type for locked ellipses
and polygons. Adding that here.

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

Test plan:

Storybook

• http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--mafs-with-locked-figures-m-2-b-flag
• Go through all the fill options for locked ellipses and locked polygons
• Confirm that the swatch in the summary also updates corrently

Demo:

Screen.Recording.2024-08-01.at.5.26.12.PM.mov

[github-actions]

Size Change: +115 B (+0.01%)

Total Size: 852 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	272 kB	+11 B (0%)
packages/perseus/dist/es/index.js	413 kB	+104 B (+0.03%)

ℹ️ 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/perseus/dist/es/strings.js	3.23 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

Attention: Patch coverage is 86.66667% with 4 lines in your changes missing coverage. Please review.

Project coverage is 70.59%. Comparing base (942b0a9) to head (a8335b4).
Report is 5 commits behind head on main.

Files	Patch %	Lines
...components/graph-locked-figures/ellipse-swatch.tsx	75.00%	1 Missing ⚠️
...components/graph-locked-figures/polygon-swatch.tsx	75.00%	1 Missing ⚠️
...teractive-graphs/locked-figures/locked-ellipse.tsx	90.90%	1 Missing ⚠️
...teractive-graphs/locked-figures/locked-polygon.tsx	90.90%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1478      +/-   ##
==========================================
+ Coverage   69.86%   70.59%   +0.72%     
==========================================
  Files         509      512       +3     
  Lines      105417   105501      +84     
  Branches     7576    10803    +3227     
==========================================
+ Hits        73654    74475     +821     
+ Misses      31573    31026     -547     
+ Partials      190        0     -190     

Files	Coverage Δ
...components/graph-locked-figures/ellipse-swatch.tsx	98.48% <75.00%> (-1.52%)	⬇️
...components/graph-locked-figures/polygon-swatch.tsx	98.43% <75.00%> (-1.57%)	⬇️
...teractive-graphs/locked-figures/locked-ellipse.tsx	97.22% <90.90%> (-2.78%)	⬇️
...teractive-graphs/locked-figures/locked-polygon.tsx	97.87% <90.90%> (-2.13%)	⬇️

... and 152 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 942b0a9...a8335b4. Read the comment docs.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/gentle-roses-pump.md, packages/perseus/src/perseus-types.ts, packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts, packages/perseus/src/widgets/__tests__/interactive-graph.test.tsx, packages/perseus-editor/src/components/graph-locked-figures/ellipse-swatch.tsx, packages/perseus-editor/src/components/graph-locked-figures/polygon-swatch.tsx, packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-ellipse.tsx, packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-polygon.tsx

---

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

[Myranae]

Looks good to me! Not sure how you could make codecov happy with these changes, but everything else looks great :D

[nishasy]

Added tests for the rendering of the actual polygons/ellipses on the graph. I didn't test the swatch color in the editor summary because it seemed like overkill.

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1478

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

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