Update Polygon graphs to have weighted lines only after focus from keyboard

[Myranae]

Summary:

Previously, Polygon had its shape weighted upon hover and after clicking in the shape. This is not how circle is currently working. To bring them into alignment, this changes Polygon to become weighted only when the shape is tabbed to by the keyboard or if the shape is moved via keyboard after the user clicks on it.

Before

Screen.Recording.2024-07-26.at.2.20.56.PM.mov

After

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

Issue: LEMS-2200

Test plan:

• Checkout the associated branch
• Run yarn dev
• On the gallery page, turn on the flag for polygon and circle
• Confirm Polygon does not have weighted lines on hover or when dragging. After clicking the shape, confirm the shape becomes weighted when you move it with the arrow keys. Confirm the lines return to normal after clicking outside of the shape.
• Confirm this functionality matches Circle graphs

[github-actions]

Size Change: +327 B (+0.04%)

Total Size: 852 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	413 kB	+327 B (+0.08%)

ℹ️ 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-editor/dist/es/index.js	272 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 96.55172% with 1 line in your changes missing coverage. Please review.

Project coverage is 70.46%. Comparing base (ae8f208) to head (603fc30).

Files	Patch %	Lines
.../src/widgets/interactive-graphs/graphs/polygon.tsx	96.55%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1455      +/-   ##
==========================================
+ Coverage   69.94%   70.46%   +0.51%     
==========================================
  Files         509      512       +3     
  Lines      105417   105477      +60     
  Branches     7579    10745    +3166     
==========================================
+ Hits        73736    74326     +590     
+ Misses      31495    31151     -344     
+ Partials      186        0     -186     

Files	Coverage Δ
...tive-graphs/graphs/components/angle-indicators.tsx	89.15% <ø> (-0.27%)	⬇️
.../src/widgets/interactive-graphs/graphs/polygon.tsx	90.47% <96.55%> (+0.82%)	⬆️

... and 144 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 ae8f208...603fc30. Read the comment docs.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/cyan-seals-yawn.md, packages/perseus/src/widgets/interactive-graphs/graphs/polygon.test.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx

---

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

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1455

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

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

[benchristel]

I see that it works, but I don't fully understand how it works. It seems like this relies on the order in which events fire? (onMouseDown, onFocus, onMouseUp)? The focused line weight does not appear if you hold down the mouse button while tabbing through the elements. I don't know if that's a real problem, though.

I prototyped an alternative implementation that I think covers all the same use cases: #1458. It uses :focus-visible, so it will use the the browser's logic for deciding when focus should be shown. What do you think about this approach?

[Myranae]

Thanks, @benchristel ! I'm not so comfortable with refs here, but that is exactly what I needed! I don't think I would have known about jsdom not supporting :focus-visible even if I had used a ref, so thanks for sharing that try/catch block in the function you shared. Going to try to add in a test before finalizing this, unless you don't think that's necessary. Updated this PR with your suggestion ❤️

[Myranae]

@benchristel I was able to use your idea, but I had to add some more logic around user actions to get it to do everything we need it to do. Would you mind taking another look and letting me know what you think? It seems like the main issue might be getting the line weighting / shape to re-render when certain changes occur (like blur or tabbing). I used state to do that, but would love another suggestion more in-line with your alternative approach.

[benchristel]

Looks great! I think I like this better than my original approach.