Fix Graphie toFront crash from undefined elements in test data by jeremywiebe · Pull Request #3844 · Khan/perseus

jeremywiebe · 2026-06-29T18:47:08Z

Summary:

createSimpleClass in graphie-classes.ts has a toFront() method that iterates over this._elements and calls elem.toFront() on each one. The null check only guarded against elem.toFront not being a function, but didn't guard against elem itself being undefined — causing a crash when the elements array contained a sparse entry.

The root cause was test data in all-widgets.testdata.ts using labelStyle: "integer", which is not a valid value. The number line's _label() function returns undefined for unrecognised styles, pushing undefined into the elements array and triggering the crash when toFront() was called. This PR fixes the null guard in graphie-classes.ts to be defensive against undefined elements, and corrects the test data to use labelStyle: "decimal" with a valid numDivisions.

And the fixed rendering:

Issue: none

Test plan:

pnpm test
Open Storybook and load the editors/EditorPage story with editing disabled — confirm the number line widget renders without crashing

github-actions · 2026-06-29T18:48:43Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3844

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

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

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

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

github-actions · 2026-06-29T18:49:01Z

Size Change: +2 B (0%)

Total Size: 517 kB

📦 View Changed

Filename	Size	Change
`packages/perseus/dist/es/index.js`	204 kB	+2 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.31 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.9 kB
`packages/perseus-core/dist/es/index.js`	27.6 kB
`packages/perseus-editor/dist/es/index.js`	104 kB
`packages/perseus-linter/dist/es/index.js`	9.79 kB
`packages/perseus-score/dist/es/index.js`	9.86 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	12.4 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

jeremywiebe · 2026-06-29T18:51:16Z

            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
            nestedMap(this._elements, (elem) => {
-                if (_.isFunction(elem.toFront)) {
+                if (elem && _.isFunction(elem.toFront)) {


This follows the pattern we see above in remove() where it guards against "falsey" elements being in this._elements.

jeremywiebe · 2026-06-29T21:03:29Z

                isTickCtrl: false,
                isInequality: false,
                divisionRange: [1, 12],
+                numDivisions: 5,


Our data-schema.ts doesn't properly model the requirements of the number-line. We require tickStep or numDivisions, but we don't support both being omitted.

jeremywiebe · 2026-06-29T21:03:55Z

                initialX: 2,
                correctX: 2,
                labelRange: [-5, 5],
-                labelStyle: "integer",


This is not even a supported labelStyle. See #3843

…ements in test data

…data

…mers when a labelStyle is used that is invalid (causing an 'undefined' entity to be added to Graphi'es tracking list of entities - resulting in a call to `.toFront()` on this `undefined` entity).

…change

jeremywiebe · 2026-07-02T17:31:33Z

/snapshot

jeremywiebe · 2026-07-02T17:32:19Z

/snapshot

@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@80.0.0 ### Major Changes - [#3843](#3843) [`47f9f11`](47f9f11) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - [number-line] Narrow `labelStyle` type to the supported list of styles: "decimal", "improper", "mixed", and "non-reduced". Also removes legacy code for long-removed label style `"decimal ticks"`. ### Patch Changes - [#3849](#3849) [`45fbde7`](45fbde7) Thanks [@nishasy](https://github.com/nishasy)! - [ColorSync][Plotter] Add Plotter visual regression stories - [#3753](#3753) [`cbd7ea7`](cbd7ea7) Thanks [@catandthemachines](https://github.com/catandthemachines)! - Re-organize interactive graph string files to centralize string patterns and streamline testing. - [#3844](#3844) [`86593cf`](86593cf) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Fix crash in Graphie consumers when a labelStyle is used that is invalid (causing an 'undefined' entity to be added to Graphi'es tracking list of entities - resulting in a call to `.toFront()` on this `undefined` entity). - [#3856](#3856) [`387df6c`](387df6c) Thanks [@nishasy](https://github.com/nishasy)! - [ColorSync][Interactive Graph] Use semantic tokens in the Interactive Graph widget - [#3870](#3870) [`15bdd71`](15bdd71) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Fix thin border around the interactive graph - [#3771](#3771) [`024ef46`](024ef46) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Fix table (and block math) text not scaling with the device font scale on mobile: Zoomable now fits content to the zoom-adjusted container width instead of cancelling out the CSS zoom applied for font enlargement - Updated dependencies \[[`b5f7a73`](b5f7a73), [`47f9f11`](47f9f11)]: - @khanacademy/perseus-core@31.0.0 - @khanacademy/math-input@26.6.0 - @khanacademy/keypad-context@3.2.73 - @khanacademy/kmath@2.4.32 - @khanacademy/perseus-linter@5.1.13 - @khanacademy/perseus-score@8.12.5 ## @khanacademy/perseus-core@31.0.0 ### Major Changes - [#3843](#3843) [`47f9f11`](47f9f11) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - [number-line] Narrow `labelStyle` type to the supported list of styles: "decimal", "improper", "mixed", and "non-reduced". Also removes legacy code for long-removed label style `"decimal ticks"`. ### Minor Changes - [#3862](#3862) [`b5f7a73`](b5f7a73) Thanks [@handeyeco](https://github.com/handeyeco)! - Add support for subscript in the MathInput keypad ## @khanacademy/math-input@26.6.0 ### Minor Changes - [#3862](#3862) [`b5f7a73`](b5f7a73) Thanks [@handeyeco](https://github.com/handeyeco)! - Add support for subscript in the MathInput keypad ### Patch Changes - Updated dependencies \[[`b5f7a73`](b5f7a73), [`47f9f11`](47f9f11)]: - @khanacademy/perseus-core@31.0.0 - @khanacademy/keypad-context@3.2.73 ## @khanacademy/keypad-context@3.2.73 ### Patch Changes - Updated dependencies \[[`b5f7a73`](b5f7a73), [`47f9f11`](47f9f11)]: - @khanacademy/perseus-core@31.0.0 ## @khanacademy/kmath@2.4.32 ### Patch Changes - Updated dependencies \[[`b5f7a73`](b5f7a73), [`47f9f11`](47f9f11)]: - @khanacademy/perseus-core@31.0.0 ## @khanacademy/perseus-editor@34.2.1 ### Patch Changes - [#3870](#3870) [`15bdd71`](15bdd71) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Fix thin border around the interactive graph - [#3827](#3827) [`4ca460f`](4ca460f) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - Moves issues panel out of item editor into editor - Updated dependencies \[[`45fbde7`](45fbde7), [`b5f7a73`](b5f7a73), [`cbd7ea7`](cbd7ea7), [`86593cf`](86593cf), [`387df6c`](387df6c), [`15bdd71`](15bdd71), [`47f9f11`](47f9f11), [`024ef46`](024ef46)]: - @khanacademy/perseus@80.0.0 - @khanacademy/perseus-core@31.0.0 - @khanacademy/math-input@26.6.0 - @khanacademy/keypad-context@3.2.73 - @khanacademy/kmath@2.4.32 - @khanacademy/perseus-linter@5.1.13 ## @khanacademy/perseus-linter@5.1.13 ### Patch Changes - Updated dependencies \[[`b5f7a73`](b5f7a73), [`47f9f11`](47f9f11)]: - @khanacademy/perseus-core@31.0.0 - @khanacademy/kmath@2.4.32 ## @khanacademy/perseus-score@8.12.5 ### Patch Changes - Updated dependencies \[[`b5f7a73`](b5f7a73), [`47f9f11`](47f9f11)]: - @khanacademy/perseus-core@31.0.0 - @khanacademy/kmath@2.4.32 Author: khan-actions-bot Reviewers: jeremywiebe Required Reviewers: Approved By: jeremywiebe Checks: ✅ 11 checks were successful Pull Request URL: #3871

jeremywiebe self-assigned this Jun 29, 2026

jeremywiebe added the olc-5.0.eea6e label Jun 29, 2026

jeremywiebe commented Jun 29, 2026

View reviewed changes

jeremywiebe force-pushed the jer/fix-graphie-tofront branch from b7fe5c1 to f29deca Compare June 29, 2026 19:16

jeremywiebe commented Jun 29, 2026

View reviewed changes

jeremywiebe force-pushed the jer/fix-graphie-tofront branch 2 times, most recently from 3f01156 to a3716a4 Compare July 1, 2026 00:50

jeremywiebe marked this pull request as ready for review July 1, 2026 00:51

jeremywiebe added 6 commits July 2, 2026 10:20

[jer/fix-graphie-tofront] Fix Graphie toFront crash from undefined el…

fc05f4a

…ements in test data

[jer/fix-graphie-tofront] Fix invalid labelStyle in all-widgets test …

623f3dc

…data

[jer/fix-graphie-tofront] docs(changeset): Fix crash in Graphie consu…

7aa8346

…mers when a labelStyle is used that is invalid (causing an 'undefined' entity to be added to Graphi'es tracking list of entities - resulting in a call to `.toFront()` on this `undefined` entity).

[jer/fix-graphie-tofront] docs(changeset): a

975c636

[jer/fix-graphie-tofront] Remove unneeded changeset

cff8fba

[jer/fix-graphie-tofront] Update snapshots for all-widgets test data …

7b80fe6

…change

jeremywiebe force-pushed the jer/fix-graphie-tofront branch from aed7728 to 7b80fe6 Compare July 2, 2026 17:20

jeremywiebe requested review from a team July 9, 2026 22:35

handeyeco approved these changes Jul 10, 2026

View reviewed changes

jeremywiebe merged commit 86593cf into main Jul 10, 2026
10 checks passed

jeremywiebe deleted the jer/fix-graphie-tofront branch July 10, 2026 17:54

khan-actions-bot mentioned this pull request Jul 10, 2026

Version Packages #3871

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix Graphie toFront crash from undefined elements in test data#3844

Fix Graphie toFront crash from undefined elements in test data#3844
jeremywiebe merged 6 commits into
mainfrom
jer/fix-graphie-tofront

jeremywiebe commented Jun 29, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 29, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 29, 2026

Uh oh!

jeremywiebe Jun 29, 2026

Uh oh!

jeremywiebe Jun 29, 2026

Uh oh!

jeremywiebe Jun 29, 2026 •

edited

Loading

Uh oh!

jeremywiebe commented Jul 2, 2026

Uh oh!

jeremywiebe commented Jul 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

jeremywiebe commented Jun 29, 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 Jun 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

github-actions Bot commented Jun 29, 2026

Uh oh!

jeremywiebe Jun 29, 2026

Choose a reason for hiding this comment

Uh oh!

jeremywiebe Jun 29, 2026

Choose a reason for hiding this comment

Uh oh!

jeremywiebe Jun 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeremywiebe commented Jul 2, 2026

Uh oh!

jeremywiebe commented Jul 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jeremywiebe commented Jun 29, 2026 •

edited

Loading

github-actions Bot commented Jun 29, 2026 •

edited

Loading

jeremywiebe Jun 29, 2026 •

edited

Loading