[Interactive Graph] Refactor movable-line by ivyolamit · Pull Request #3718 · Khan/perseus

ivyolamit · 2026-06-03T22:06:54Z

Summary:

No behavior and logic change. This PR refactors the movable-line since the file is getting longer containing multiple components and util functions.

Props → MovableLineProps — pure rename. The old name was too generic to live in its own file; MovableLineProps names what it's the props for.
type → interface for both prop shapes — the pattern you asked me to apply.
(Internal component) Line and its props are now exported — strictly required by the split, because movable-line.tsx has to import Line from ./line.tsx. The index.ts does NOT re-export Line or LineProps, so they remain effectively private to the folder; the rest of the codebase can't see them.

Issue: LEMS-4203

Test plan:

Confirm that the Linear / Ray / Linear System graphs still works as expected.

github-actions · 2026-06-03T22:09:00Z

Size Change: -6 B (0%)

Total Size: 508 kB

📦 View Changed

Filename	Size	Change
`packages/perseus/dist/es/index.js`	200 kB	-6 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.32 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.1 kB
`packages/perseus-core/dist/es/index.js`	26.3 kB
`packages/perseus-editor/dist/es/index.js`	105 kB
`packages/perseus-linter/dist/es/index.js`	9.65 kB
`packages/perseus-score/dist/es/index.js`	10.2 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	8.6 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-06-03T22:09:23Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3718

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

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

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

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

…Graph] Refactor movable-line

ivyolamit · 2026-06-06T00:19:34Z

+        disableKeyboardInteraction,
+        interactiveColor,
+    } = useGraphConfig();
+


Below is from recent changes in this commit: https://github.com/Khan/perseus/pull/3717/changes#diff-7cfcf845fd99b9b03265584441d83279f6e535c7c77876ee52761ce1a84119ebR172

ivyolamit · 2026-06-06T00:20:42Z

+        grabHandleAriaLabel?: string;
+    };
+    // Extra graph information to be read by screen readers
+    ariaDescribedBy?: string;


Below is the recent change from this commit: https://github.com/Khan/perseus/pull/3683/changes#diff-7cfcf845fd99b9b03265584441d83279f6e535c7c77876ee52761ce1a84119ebR28

ivyolamit · 2026-06-06T00:21:42Z

+                ref={line}
+                tabIndex={disableKeyboardInteraction ? -1 : 0}
+                aria-label={ariaLabel}
+                aria-describedby={ariaDescribedBy}


Below is the recent change from this commit: https://github.com/Khan/perseus/pull/3674/changes#diff-7cfcf845fd99b9b03265584441d83279f6e535c7c77876ee52761ce1a84119ebR189

ivyolamit · 2026-06-06T00:23:35Z

The code here should be the same logic in main https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-line.tsx#L143

except for changing the use of type to interface in line 17

ivyolamit · 2026-06-06T00:24:22Z

Content of this file should be the same in main https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-line.tsx#L19

except for the change of type to interface in line 12

ivyolamit · 2026-06-06T00:24:58Z

The contents of this file should be the same util functions in main https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-line.tsx#L263

…ovable-line

handeyeco

Yep, confirmed this is moving around existing logic into a more organized structure. Thanks!

@nishasy

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@77.11.0 ### Minor Changes - [#3742](#3742) [`d15912407c`](d159124) Thanks [@nishasy](https://github.com/nishasy)! - [Image] Remove gif flag, make gif controls permanent - [#3725](#3725) [`9c601da23f`](9c601da) Thanks [@EmiliaPalaghita](https://github.com/EmiliaPalaghita)! - Add new JSON field "showPointLabels" for interactive graphs. When set, every movable point gets a visible on-canvas label driven by the matching `pointLabels[i]` entry. `pointLabels` is required whenever `showPointLabels` is true (enforced by the interactive-graph-widget-error lint rule). ### Patch Changes - [#3678](#3678) [`5d4625eb73`](5d4625e) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Add WB Announcer to Quadratic Graph - [#3718](#3718) [`7ba77bb3e5`](7ba77bb) Thanks [@ivyolamit](https://github.com/ivyolamit)! - [Interactive Graph] Refactor movable-line - [#3732](#3732) [`40491377ee`](4049137) Thanks [@Evelas78](https://github.com/Evelas78)! - Added role="figure" to the mafs-graph - [#3729](#3729) [`fcd76e42c0`](fcd76e4) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add test to catch typo in translation e.g. %(word) -> \\$(word)s - [#3701](#3701) [`7ccf7fbc8f`](7ccf7fb) Thanks [@Myranae](https://github.com/Myranae)! - Migrate sortable fonts and colors to semantic tokens and add regression stories - [#3703](#3703) [`5d00f57022`](5d00f57) Thanks [@Myranae](https://github.com/Myranae)! - Convert expression widget related files to use semantic tokens - [#3733](#3733) [`6f711cfcf9`](6f711cf) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Use WB Announcer in Absolute Value graph. - [#3736](#3736) [`1cd01a4550`](1cd01a4) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Use WB Announcer in Exponential graph. - [#3735](#3735) [`dcc83bdbf8`](dcc83bd) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Use WB Announcer in Logarithm graph. - [#3734](#3734) [`b4d94b3c09`](b4d94b3) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph] Use WB Announcer in Tangent graph. - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d), [`5d00f57022`](5d00f57)]: - @khanacademy/perseus-core@27.4.0 - @khanacademy/perseus-linter@5.1.0 - @khanacademy/math-input@26.4.33 - @khanacademy/keypad-context@3.2.61 - @khanacademy/kmath@2.4.19 - @khanacademy/perseus-score@8.11.3 ## @khanacademy/perseus-core@27.4.0 ### Minor Changes - [#3725](#3725) [`9c601da23f`](9c601da) Thanks [@EmiliaPalaghita](https://github.com/EmiliaPalaghita)! - Add new JSON field "showPointLabels" for interactive graphs. When set, every movable point gets a visible on-canvas label driven by the matching `pointLabels[i]` entry. `pointLabels` is required whenever `showPointLabels` is true (enforced by the interactive-graph-widget-error lint rule). ### Patch Changes - [#3742](#3742) [`d15912407c`](d159124) Thanks [@nishasy](https://github.com/nishasy)! - [Image] Remove gif flag, make gif controls permanent - [#3726](#3726) [`ec0ce8d61a`](ec0ce8d) Thanks [@handeyeco](https://github.com/handeyeco)! - Copy data that was once shared into perseus-parser ## @khanacademy/perseus-linter@5.1.0 ### Minor Changes - [#3725](#3725) [`9c601da23f`](9c601da) Thanks [@EmiliaPalaghita](https://github.com/EmiliaPalaghita)! - Add new JSON field "showPointLabels" for interactive graphs. When set, every movable point gets a visible on-canvas label driven by the matching `pointLabels[i]` entry. `pointLabels` is required whenever `showPointLabels` is true (enforced by the interactive-graph-widget-error lint rule). ### Patch Changes - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 - @khanacademy/kmath@2.4.19 ## @khanacademy/keypad-context@3.2.61 ### Patch Changes - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 ## @khanacademy/kmath@2.4.19 ### Patch Changes - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 ## @khanacademy/math-input@26.4.33 ### Patch Changes - [#3703](#3703) [`5d00f57022`](5d00f57) Thanks [@Myranae](https://github.com/Myranae)! - Convert expression widget related files to use semantic tokens - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 - @khanacademy/keypad-context@3.2.61 ## @khanacademy/perseus-editor@32.3.2 ### Patch Changes - [#3722](#3722) [`e751a37c67`](e751a37) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - BUGFIX: Fix cursor positioning after pasting widget content, or after inserting a widget via the "Add a widget…" dropdown, in the markdown editor (was jumping to the end of the content always). - [#3742](#3742) [`d15912407c`](d159124) Thanks [@nishasy](https://github.com/nishasy)! - [Image] Remove gif flag, make gif controls permanent - Updated dependencies \[[`5d4625eb73`](5d4625e), [`7ba77bb3e5`](7ba77bb), [`d15912407c`](d159124), [`40491377ee`](4049137), [`fcd76e42c0`](fcd76e4), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d), [`7ccf7fbc8f`](7ccf7fb), [`5d00f57022`](5d00f57), [`6f711cfcf9`](6f711cf), [`1cd01a4550`](1cd01a4), [`dcc83bdbf8`](dcc83bd), [`b4d94b3c09`](b4d94b3)]: - @khanacademy/perseus@77.11.0 - @khanacademy/perseus-core@27.4.0 - @khanacademy/perseus-linter@5.1.0 - @khanacademy/math-input@26.4.33 - @khanacademy/keypad-context@3.2.61 - @khanacademy/kmath@2.4.19 - @khanacademy/perseus-score@8.11.3 ## @khanacademy/perseus-score@8.11.3 ### Patch Changes - Updated dependencies \[[`d15912407c`](d159124), [`9c601da23f`](9c601da), [`ec0ce8d61a`](ec0ce8d)]: - @khanacademy/perseus-core@27.4.0 - @khanacademy/kmath@2.4.19

ivyolamit self-assigned this Jun 3, 2026

ivyolamit added the olc-5.0.f429d label Jun 3, 2026

ivyolamit mentioned this pull request Jun 3, 2026

[Interactive Graph] Fix line ends bending in for Linear / Ray interactive graphs #3717

Merged

Base automatically changed from LEMS-4203/linear-goes-oprah to main June 4, 2026 20:49

ivyolamit force-pushed the LEMS-4203/linear-goes-oprah-refactor branch from a41a22c to 48d81c6 Compare June 6, 2026 00:12

[LEMS-4203/linear-goes-oprah-refactor] docs(changeset): [Interactive …

386a054

…Graph] Refactor movable-line

ivyolamit force-pushed the LEMS-4203/linear-goes-oprah-refactor branch from 48d81c6 to 17d6dfa Compare June 6, 2026 00:14

ivyolamit commented Jun 6, 2026

View reviewed changes

[LEMS-4203/linear-goes-oprah-refactor] [Interactive Graph] Refactor m…

a475827

…ovable-line

ivyolamit force-pushed the LEMS-4203/linear-goes-oprah-refactor branch from 17d6dfa to a475827 Compare June 6, 2026 00:30

ivyolamit marked this pull request as ready for review June 6, 2026 00:32

ivyolamit requested review from catandthemachines and handeyeco June 6, 2026 00:33

handeyeco approved these changes Jun 8, 2026

View reviewed changes

ivyolamit merged commit 7ba77bb into main Jun 8, 2026
13 checks passed

ivyolamit deleted the LEMS-4203/linear-goes-oprah-refactor branch June 8, 2026 15:20

khan-actions-bot mentioned this pull request Jun 8, 2026

Version Packages #3739

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Interactive Graph] Refactor movable-line#3718

[Interactive Graph] Refactor movable-line#3718
ivyolamit merged 2 commits into
mainfrom
LEMS-4203/linear-goes-oprah-refactor

ivyolamit commented Jun 3, 2026

Uh oh!

github-actions Bot commented Jun 3, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 3, 2026 •

edited

Loading

Uh oh!

ivyolamit Jun 6, 2026

Uh oh!

ivyolamit Jun 6, 2026

Uh oh!

ivyolamit Jun 6, 2026

Uh oh!

ivyolamit Jun 6, 2026

Uh oh!

ivyolamit Jun 6, 2026

Uh oh!

ivyolamit Jun 6, 2026

Uh oh!

handeyeco left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ivyolamit commented Jun 3, 2026

Summary:

Test plan:

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

npm Snapshot: Published

Uh oh!

ivyolamit Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

ivyolamit Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

ivyolamit Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

ivyolamit Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

ivyolamit Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

ivyolamit Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

handeyeco 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 Jun 3, 2026 •

edited

Loading

github-actions Bot commented Jun 3, 2026 •

edited

Loading