[Interactive Graph] Fix Asymptote Drag Handle Blocked by Curve Line for Logarithm and Exponential by ivyolamit · Pull Request #3489 · Khan/perseus

ivyolamit · 2026-04-13T21:21:31Z

Summary:

Reorder SVG elements in logarithm and exponential graphs so the asymptote drag handle renders above the curve line
Update visual regression stories to capture this layering behavior alongside the focus state

Details

The asymptote drag handle was visually hidden behind the curve line (Plot.OfX), making it appear
unclickable when the curve crossed the drag handle area. This was a rendering order issue — in SVG,
later elements in the DOM render on top of earlier ones.

Root cause: Both logarithm.tsx and exponential.tsx rendered elements in this order:

<MovableAsymptote> (includes drag handle)
<Plot.OfX> (the curve) — rendered on top, blocking the drag handle
<MovablePoint> components

Fix: Swap the order of Plot.OfX and MovableAsymptote so the curve renders first (behind),
and the asymptote + drag handle renders on top of it. The final SVG layering is now:

<Plot.OfX> (curve — bottom layer)
<MovableAsymptote> (asymptote line + drag handle — above the curve)
<MovablePoint> components (points — top layer)

Files changed:

packages/perseus/src/widgets/interactive-graphs/graphs/logarithm.tsx — moved <Plot.OfX> before
<MovableAsymptote> in the JSX
packages/perseus/src/widgets/interactive-graphs/graphs/exponential.tsx — same reorder

Regression stories added:

New file: packages/perseus/src/widgets/interactive-graphs/__docs__/interactive-graph-asymptote-regression.stories.tsx
Storybook path: "Widgets/Interactive Graph/Visual Regression Tests/Asymptote Drag Handle"
8 stories total (4 exponential, 4 logarithm), each showing a distinct drag handle state:
- *DragHandleDefault — inactive handle visible above the curve (curve overlaps handle area)
- *DragHandleFocused — focus ring + active pill with grip dots above the curve (via play function)
- *PointFocusedHandleInactive — point has focus ring, handle stays small/inactive (via play function)
- *DragHandleNoOverlap — baseline with asymptote away from curve for comparison
Uses play functions to programmatically focus elements so states are visible in both Storybook UI
and Chromatic snapshots
Uses tags: ["!autodocs"] to show only individual stories without a Docs page (matches radio
interactions pattern)

Technical notes updated:

packages/perseus/src/widgets/interactive-graphs/__docs__/notes/logarithm.md — rewrote from
research/POC format to a technical reference documenting all expected behavior, architecture,
decisions, and implementation notes. Added SVG rendering order and drag handle focus behavior
as documented expected behavior. Intended as context for future Claude Code sessions.

Co-Authored by Claude Code (Opus)

Issue: LEMS-4037

Test plan:

Navigate to exponential graph
Plot the asymptote x = 0 and points in (3, 1)(5, 5)
Click the drag handle and confirm that the curve line is not blocking the asymptote
Navigate to logarithm graph
Plot the asymptote y = 0 and points in (1, 3)(5, 5)
Click the drag handle and confirm that the curve line is not blocking the asymptote

…ractive Graph: Fix Asymptote Drag Handle Blocked by Curve Line for Logarithm and Exponential

…ix Asymptote Drag Handle Blocked by Curve Line for Logarithm and Exponential

github-actions · 2026-04-13T21:22:40Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-04-13T21:23:07Z

Size Change: -2 B (0%)

Total Size: 499 kB

📦 View Changed

Filename	Size	Change
`packages/perseus/dist/es/index.js`	195 kB	-2 B (0%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.5 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	6.36 kB
`packages/math-input/dist/es/index.js`	98.5 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.item-splitting.js`	11.9 kB
`packages/perseus-core/dist/es/index.js`	25.1 kB
`packages/perseus-editor/dist/es/index.js`	102 kB
`packages/perseus-linter/dist/es/index.js`	9.3 kB
`packages/perseus-score/dist/es/index.js`	9.7 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	8.27 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

github-actions · 2026-04-13T21:23:11Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2026-04-13T21:23:46Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3489

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3489

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3489

ivyolamit · 2026-04-13T21:23:56Z

After doing 2 bug fixes I realized that I keep repeating myself giving Claude the context of what a logarithm is, so I decided to update the notes to record the expected behavior of the logarithm graph so it can be used as the context moving forward. Since we were done with the implementation having the technical research didn't make sense anymore, but still had the link to the revision for traceability.

Let me know if you have any thoughts about this because previously we discussed that we will eventually delete this file and move all decision in confluence page.

ivyolamit · 2026-04-13T21:25:17Z

    },
 };

-/* Asymptote drag handle regression tests */


remove these, instead created a different visual regression stories specific for the drag handle states in packages/perseus/src/widgets/interactive-graphs/__docs__/interactive-graph-asymptote-regression.stories.tsx

ivyolamit · 2026-04-13T21:25:44Z

@claude review once

claude

LGTM — the SVG element reorder is correct and clearly fixes the drag handle z-ordering issue.

Extended reasoning...

Overview

This PR fixes a rendering order bug in and where (including the drag handle) was rendered before (the curve) in the JSX, causing the curve's SVG path to visually occlude the drag handle. The fix swaps these two elements so the curve renders first (bottom layer) and the drag handle renders on top. Additionally, two old asymptote-focused stories are removed from the general regression file and replaced by a new dedicated stories file with 8 stories covering all drag handle states.

Security risks

None. This change only affects SVG rendering order in UI components and adds/modifies Storybook stories and documentation. There are no auth, data handling, or permission changes.

Level of scrutiny

Low. The production code change is a one-line JSX reorder in each of two files — there is no logic change, no new behavior, and no new API surface. SVG stacking order is determined purely by DOM order, so placing Plot.OfX before MovableAsymptote is exactly the correct fix.

Other factors

A bug was flagged in the new regression stories: the coordinates for the Default and NoOverlap stories appear to be inverted, meaning the stories labeled as demonstrating curve-handle overlap don't actually have overlap, and vice versa. This is a nit in the visual regression test coverage — the core fix is unaffected, and the focused-state stories (which use play functions) would still catch a reversion of the SVG order change. The mislabeled stories reduce confidence in the inactive-handle visual regression baseline but do not affect production behavior.

… comment

claude

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

catandthemachines

Looks good to me. Thanks Ivy!

@jeremywiebe

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/perseus-editor@30.3.0 ### Minor Changes - [#3474](#3474) [`b78e2ce5c3`](b78e2ce) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Add typed preview message protocol with message types, validators, and tests ### Patch Changes - Updated dependencies \[[`2f2724d244`](2f2724d), [`27e66ce3a6`](27e66ce), [`b8ed10349d`](b8ed103)]: - @khanacademy/perseus-core@24.1.1 - @khanacademy/perseus@77.2.2 - @khanacademy/keypad-context@3.2.43 - @khanacademy/kmath@2.4.1 - @khanacademy/math-input@26.4.14 - @khanacademy/perseus-linter@4.9.4 - @khanacademy/perseus-score@8.6.1 ## @khanacademy/keypad-context@3.2.43 ### Patch Changes - Updated dependencies \[[`2f2724d244`](2f2724d)]: - @khanacademy/perseus-core@24.1.1 ## @khanacademy/kmath@2.4.1 ### Patch Changes - Updated dependencies \[[`2f2724d244`](2f2724d)]: - @khanacademy/perseus-core@24.1.1 ## @khanacademy/math-input@26.4.14 ### Patch Changes - Updated dependencies \[[`2f2724d244`](2f2724d)]: - @khanacademy/perseus-core@24.1.1 - @khanacademy/keypad-context@3.2.43 ## @khanacademy/perseus@77.2.2 ### Patch Changes - [#3491](#3491) [`27e66ce3a6`](27e66ce) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Interactive Graph: Fix Asymptote Line Thickness on Keyboard Focus for exponential and logarithm - [#3489](#3489) [`b8ed10349d`](b8ed103) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Interactive Graph: Fix Asymptote Drag Handle Blocked by Curve Line for Logarithm and Exponential - Updated dependencies \[[`2f2724d244`](2f2724d)]: - @khanacademy/perseus-core@24.1.1 - @khanacademy/keypad-context@3.2.43 - @khanacademy/kmath@2.4.1 - @khanacademy/math-input@26.4.14 - @khanacademy/perseus-linter@4.9.4 - @khanacademy/perseus-score@8.6.1 ## @khanacademy/perseus-core@24.1.1 ### Patch Changes - [#3480](#3480) [`2f2724d244`](2f2724d) Thanks [@benchristel](https://github.com/benchristel)! - Hide exports that aren't used in frontend from the documentation. ## @khanacademy/perseus-linter@4.9.4 ### Patch Changes - Updated dependencies \[[`2f2724d244`](2f2724d)]: - @khanacademy/perseus-core@24.1.1 - @khanacademy/kmath@2.4.1 ## @khanacademy/perseus-score@8.6.1 ### Patch Changes - Updated dependencies \[[`2f2724d244`](2f2724d)]: - @khanacademy/perseus-core@24.1.1 - @khanacademy/kmath@2.4.1

ivyolamit added 2 commits April 13, 2026 14:06

[LEMS-4037/fix-point-line-blocking-asymptote-2] docs(changeset): Inte…

d88b4e8

…ractive Graph: Fix Asymptote Drag Handle Blocked by Curve Line for Logarithm and Exponential

[LEMS-4037/fix-point-line-blocking-asymptote-2] [Interactive Graph] F…

c33c2ab

…ix Asymptote Drag Handle Blocked by Curve Line for Logarithm and Exponential

ivyolamit self-assigned this Apr 13, 2026

ivyolamit added the olc-5.0.f97a8 label Apr 13, 2026

ivyolamit mentioned this pull request Apr 13, 2026

[Interactive Graph] Fix Asymptote Drag Handle Blocked by Curve Line for Logarithm and Exponential #3484

Closed

ivyolamit commented Apr 13, 2026

View reviewed changes

claude bot reviewed Apr 13, 2026

View reviewed changes

Comment thread ...s/src/widgets/interactive-graphs/__docs__/interactive-graph-asymptote-regression.stories.tsx

[LEMS-4037/fix-point-line-blocking-asymptote-2] address claude review…

8d939a6

… comment

ivyolamit marked this pull request as ready for review April 13, 2026 21:56

claude bot reviewed Apr 13, 2026

View reviewed changes

ivyolamit requested review from SonicScrewdriver and catandthemachines April 13, 2026 21:56

catandthemachines approved these changes Apr 13, 2026

View reviewed changes

ivyolamit merged commit b8ed103 into main Apr 13, 2026
11 checks passed

ivyolamit deleted the LEMS-4037/fix-point-line-blocking-asymptote-2 branch April 13, 2026 22:53

khan-actions-bot mentioned this pull request Apr 13, 2026

Version Packages #3490

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Interactive Graph] Fix Asymptote Drag Handle Blocked by Curve Line for Logarithm and Exponential#3489

[Interactive Graph] Fix Asymptote Drag Handle Blocked by Curve Line for Logarithm and Exponential#3489
ivyolamit merged 3 commits intomainfrom
LEMS-4037/fix-point-line-blocking-asymptote-2

ivyolamit commented Apr 13, 2026

Uh oh!

github-actions bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

ivyolamit Apr 13, 2026

Uh oh!

ivyolamit Apr 13, 2026

Uh oh!

ivyolamit commented Apr 13, 2026

Uh oh!

claude bot left a comment

Uh oh!

Uh oh!

claude bot left a comment

Uh oh!

catandthemachines left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ivyolamit commented Apr 13, 2026

Summary:

Details

Test plan:

Uh oh!

github-actions bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗄️ Schema Change: No Changes ✅

Uh oh!

github-actions bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

github-actions bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

ivyolamit Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

ivyolamit Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

ivyolamit commented Apr 13, 2026

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Overview

Security risks

Level of scrutiny

Other factors

Uh oh!

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

catandthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Apr 13, 2026 •

edited

Loading

github-actions bot commented Apr 13, 2026 •

edited

Loading

github-actions bot commented Apr 13, 2026 •

edited

Loading

github-actions bot commented Apr 13, 2026 •

edited

Loading