[Image] | (DX) | Recheck height in Graphie to stop font position flakiness by nishasy · Pull Request #3506 · Khan/perseus

nishasy · 2026-04-16T22:22:56Z

Summary:

The ZoomClickedWithGraphieImage regression story keeps being reported by Chromatic as
having a ~2px difference from base.

In this PR, we're rechecking the height after the line height is corrected to make sure we're using the appropriate height for the Graphie labels.

Explanation from Claude:

Summary of the fix (graphie.ts:1767-1772): when the line-height correction inside
setLabelMargins updates height, it now also writes the corrected value back into
originalLabelSize. This means the ResizeObserver-driven _recalculateLabels path will
use the same corrected height on every subsequent call — eliminating the
non-deterministic 2.5 px flip between -16px and -18.5px.

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

Test plan:

Wait and see if anything gets reported in this PR. Continue monitoring after.

…e regression test The `ZoomClickedWithGraphieImage` regression story keeps being reported by Chromatic as having a ~2px difference from base. This seems to be happening due to a timing issue. Adding a delay to see if it stops getting flagged by Chromatic. Issue: https://khanacademy.atlassian.net/browse/LEMS-4053 Test plan: Wait and see if anything gets reported in this PR. Continue monitoring after.

…akey Graphie image regression test

github-actions · 2026-04-16T22:24:01Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-04-16T22:24:22Z

Size Change: -220 B (-0.04%)

Total Size: 502 kB

📦 View Changed

Filename	Size	Change
`packages/perseus-core/dist/es/index.js`	25.2 kB	-211 B (-0.83%)
`packages/perseus/dist/es/index.js`	198 kB	-9 B (0%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.6 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`	12 kB
`packages/perseus-editor/dist/es/index.js`	103 kB
`packages/perseus-linter/dist/es/index.js`	9.42 kB
`packages/perseus-score/dist/es/index.js`	9.78 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	8.46 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-16T22:24:29Z

🛠️ Item Splitting: No Changes ✅

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.}

github-actions · 2026-04-16T22:25:24Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3506

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

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

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

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

mark-fitzgerald

Fingers crossed.

nishasy · 2026-04-16T22:33:22Z

Nope 😭 Back to the drawing board

nishasy · 2026-04-28T19:18:46Z

Trying something new here. This is what Claude came up with after I started a new session and mentioned that the explore image modal story wasn't flakey like the zoom view one was.

★ Insight ─────────────────────────────────────
Why only ZoomClickedWithGraphieImage and not
LongDescriptionClickedStateWithGraphieImage? In the zoom modal the image fills the full
dialog width — so as the WonderBlocks FlexibleDialog animates open, the graphie
container changes size, triggering the ResizeObserver. In the long description modal,
the image sits in a fixed two-column panel; its container width is already stable by
the time MathJax finishes, so _recalculateLabels never fires post-correction and the
stale originalLabelSize is never read.
─────────────────────────────────────────────────

Summary of the fix (graphie.ts:1767-1772): when the line-height correction inside
setLabelMargins updates height, it now also writes the corrected value back into
originalLabelSize. This means the ResizeObserver-driven _recalculateLabels path will
use the same corrected height on every subsequent call — eliminating the
non-deterministic 2.5 px flip between -16px and -18.5px.

Edit: That didn't work

…roach with an explicit isFirstCall check, and move originalLabelSize storage to after line-height: normal so it always captures the corrected height.

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.}

mark-fitzgerald · 2026-04-29T16:46:56Z

-        //     then the height used for calculations should be updated.
-        // This can happen when the first label in the container calls this method,
-        //     and the line-height was different when the height measurement was originally referenced.
-        if (currentHeightMatchesProps && span.scrollHeight !== height) {


I'm having trouble seeing how this situation (line-height affecting the height) is handled by the new conditional involving just the "originnalLabelSize" data attribute, below. Can you verify the timing of this?

It looks like in the main code, the height gets set to the scroll height only if a change in the scroll height is detected. In the new code, the height gets set to the scroll height always on the first run. The timing on the two should be the same.

mark-fitzgerald

Graphie is always tricky. Thanks for diving into these anomalies.

@benchristel

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-core@26.0.0 ### Major Changes - [#3517](#3517) [`957970dfdb`](957970d) Thanks [@benchristel](https://github.com/benchristel)! - Breaking change: The deprecated `violatingWidgets` function has been removed. Callers should use `isItemAccessible` instead. `isItemAccessible` now checks for inaccessible widgets in hints as well as question content. ### Patch Changes - [#3415](#3415) [`e21c523f5d`](e21c523) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Removing Interactive Graph Builder and refactoring tests/storybook to use more standardized generator patterns. ## @khanacademy/perseus-editor@31.0.0 ### Major Changes - [#3568](#3568) [`896e869ef5`](896e869) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Remove unused `paths` field from `LinterContextProps` and the corresponding `contentPaths` prop from `EditorPage`, `ArticleEditor`, and `HintEditor`. The field was never read by any linter rule or renderer. ### Minor Changes - [#3532](#3532) [`3263332fe2`](3263332) Thanks [@benchristel](https://github.com/benchristel)! - The issue panels in the article editor now show only issues for their associated article section. Previously, each panel showed the full set of issues for the entire article. ### Patch Changes - [#3543](#3543) [`51ebddf119`](51ebddf) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Refactoring Start Coords for efficiency - [#3415](#3415) [`e21c523f5d`](e21c523) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Removing Interactive Graph Builder and refactoring tests/storybook to use more standardized generator patterns. - [#3538](#3538) [`8b95cdf6e3`](8b95cdf) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add Storybook MCP addon for AI-assisted UI development - Updated dependencies \[[`494f287541`](494f287), [`743ad9d5f4`](743ad9d), [`0bf97ee3b6`](0bf97ee), [`957970dfdb`](957970d), [`e21c523f5d`](e21c523), [`e5ddaef207`](e5ddaef), [`ce83363534`](ce83363), [`dee6ce680c`](dee6ce6), [`896e869ef5`](896e869), [`cf5147d61c`](cf5147d), [`afc4f33090`](afc4f33), [`8b95cdf6e3`](8b95cdf), [`1dbd5742dc`](1dbd574)]: - @khanacademy/perseus@77.3.2 - @khanacademy/perseus-core@26.0.0 - @khanacademy/perseus-linter@5.0.0 - @khanacademy/kmath@2.4.3 - @khanacademy/math-input@26.4.17 - @khanacademy/keypad-context@3.2.45 - @khanacademy/perseus-score@8.7.1 ## @khanacademy/perseus-linter@5.0.0 ### Major Changes - [#3568](#3568) [`896e869ef5`](896e869) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Remove unused `paths` field from `LinterContextProps` and the corresponding `contentPaths` prop from `EditorPage`, `ArticleEditor`, and `HintEditor`. The field was never read by any linter rule or renderer. ### Patch Changes - Updated dependencies \[[`957970dfdb`](957970d), [`e21c523f5d`](e21c523), [`cf5147d61c`](cf5147d)]: - @khanacademy/perseus-core@26.0.0 - @khanacademy/kmath@2.4.3 ## @khanacademy/keypad-context@3.2.45 ### Patch Changes - Updated dependencies \[[`957970dfdb`](957970d), [`e21c523f5d`](e21c523)]: - @khanacademy/perseus-core@26.0.0 ## @khanacademy/kmath@2.4.3 ### Patch Changes - [#3534](#3534) [`cf5147d61c`](cf5147d) Thanks [@marnikostman](https://github.com/marnikostman)! - Remove `underscore` and `jquery` as peer and dev dependencies. All usages have been replaced with native JavaScript equivalents. - Updated dependencies \[[`957970dfdb`](957970d), [`e21c523f5d`](e21c523)]: - @khanacademy/perseus-core@26.0.0 ## @khanacademy/math-input@26.4.17 ### Patch Changes - [#3572](#3572) [`afc4f33090`](afc4f33) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Bumped deps - Updated dependencies \[[`957970dfdb`](957970d), [`e21c523f5d`](e21c523)]: - @khanacademy/perseus-core@26.0.0 - @khanacademy/keypad-context@3.2.45 ## @khanacademy/perseus@77.3.2 ### Patch Changes - [#3293](#3293) [`494f287541`](494f287) Thanks [@benchristel](https://github.com/benchristel)! - Internal: remove unused default value for polygon graph point coordinates - [#3539](#3539) [`743ad9d5f4`](743ad9d) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Radio] Adjust styling to resolve an axe-core incomplete test result - [#3506](#3506) [`0bf97ee3b6`](0bf97ee) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (DX) | Add delay to flakey Graphie image regression test - [#3415](#3415) [`e21c523f5d`](e21c523) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Removing Interactive Graph Builder and refactoring tests/storybook to use more standardized generator patterns. - [#3521](#3521) [`e5ddaef207`](e5ddaef) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Allow the asymptote to be placed between points. Also allow for points to be on asymptote line so long as they don't overlap with the drag handle. - [#3567](#3567) [`ce83363534`](ce83363) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Fix interactive graph x-axis label overlapping with content below when y-range starts at 0 or higher - [#3435](#3435) [`dee6ce680c`](dee6ce6) Thanks [@Myranae](https://github.com/Myranae)! - Convert hardcoded color values to semantic tokens for label image - [#3538](#3538) [`8b95cdf6e3`](8b95cdf) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add Storybook MCP addon for AI-assisted UI development - [#3524](#3524) [`1dbd5742dc`](1dbd574) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Ensure that Ray and Linear points cannot overlap - Updated dependencies \[[`957970dfdb`](957970d), [`e21c523f5d`](e21c523), [`896e869ef5`](896e869), [`cf5147d61c`](cf5147d), [`afc4f33090`](afc4f33)]: - @khanacademy/perseus-core@26.0.0 - @khanacademy/perseus-linter@5.0.0 - @khanacademy/kmath@2.4.3 - @khanacademy/math-input@26.4.17 - @khanacademy/keypad-context@3.2.45 - @khanacademy/perseus-score@8.7.1 ## @khanacademy/perseus-score@8.7.1 ### Patch Changes - Updated dependencies \[[`957970dfdb`](957970d), [`e21c523f5d`](e21c523), [`cf5147d61c`](cf5147d)]: - @khanacademy/perseus-core@26.0.0 - @khanacademy/kmath@2.4.3 Issue: LEMS-4090 Author: khan-actions-bot Reviewers: claude[bot], jeremywiebe Required Reviewers: Approved By: jeremywiebe Checks: Pull Request URL: #3533

nishasy added 3 commits April 16, 2026 15:17

[image-flakey-test] docs(changeset):

48211c6

[image-flakey-test] docs(changeset): [Image] | (DX) | Add delay to fl…

896a3fc

…akey Graphie image regression test

nishasy self-assigned this Apr 16, 2026

nishasy added the olc-5.0.aff1e label Apr 16, 2026

nishasy requested a review from mark-fitzgerald April 16, 2026 22:25

nishasy marked this pull request as ready for review April 16, 2026 22:25

nishasy requested review from catandthemachines and ivyolamit as code owners April 16, 2026 22:25

claude Bot reviewed Apr 16, 2026

View reviewed changes

mark-fitzgerald approved these changes Apr 16, 2026

View reviewed changes

nishasy added 2 commits April 16, 2026 15:39

[image-flakey-test] Trying something else

ae13265

[image-flakey-test] trying another thing

b76b3fa

nishasy marked this pull request as draft April 16, 2026 22:57

nishasy added 3 commits April 28, 2026 12:05

[image-flakey-test] Merge branch 'main' into image-flakey-test

afee1c3

[image-flakey-test] reset to main

71a8085

[image-flakey-test] Try syncing the original size

e6bf0c0

nishasy added 2 commits April 28, 2026 12:37

[image-flakey-test] replace the fragile currentHeightMatchesProps app…

9ae6617

…roach with an explicit isFirstCall check, and move originalLabelSize storage to after line-height: normal so it always captures the corrected height.

[image-flakey-test] update comment to be more readable

99b3efb

nishasy changed the title ~~[Image] | (DX) | Add delay to flakey Graphie image regression test~~ [Image] | (DX) | Recheck height in Graphie to stop font position flakiness Apr 29, 2026

nishasy requested a review from mark-fitzgerald April 29, 2026 00:16

nishasy marked this pull request as ready for review April 29, 2026 00:16

claude Bot reviewed Apr 29, 2026

View reviewed changes

mark-fitzgerald reviewed Apr 29, 2026

View reviewed changes

nishasy requested a review from mark-fitzgerald April 29, 2026 18:53

mark-fitzgerald approved these changes Apr 29, 2026

View reviewed changes

nishasy merged commit 0bf97ee into main Apr 29, 2026
27 of 35 checks passed

nishasy deleted the image-flakey-test branch April 29, 2026 19:08

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

Version Packages #3533

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Image] | (DX) | Recheck height in Graphie to stop font position flakiness#3506

[Image] | (DX) | Recheck height in Graphie to stop font position flakiness#3506
nishasy merged 10 commits intomainfrom
image-flakey-test

nishasy commented Apr 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

claude Bot left a comment

Uh oh!

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

mark-fitzgerald left a comment

Uh oh!

nishasy commented Apr 16, 2026

Uh oh!

nishasy commented Apr 28, 2026 •

edited

Loading

Uh oh!

claude Bot left a comment

Uh oh!

mark-fitzgerald Apr 29, 2026

Uh oh!

nishasy Apr 29, 2026

Uh oh!

mark-fitzgerald left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

nishasy commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Test plan:

Uh oh!

github-actions Bot commented Apr 16, 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 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

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

Uh oh!

npm Snapshot: Published

Uh oh!

mark-fitzgerald left a comment

Choose a reason for hiding this comment

Uh oh!

nishasy commented Apr 16, 2026

Uh oh!

nishasy commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

mark-fitzgerald Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

mark-fitzgerald left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nishasy commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

nishasy commented Apr 28, 2026 •

edited

Loading