Plotter: renderer user input state #2588

handeyeco · 2025-06-12T15:36:37Z

Summary:

See the parent PR for more context. Part of LEMS-3208.

In #2566 I add additional APIs to let widgets consume userInput from a parent and to update that parent state using handleUserInput, while also supporting the legacy way of storing user input (which was a combination of internal widget state and stashing state in a random blob in Renderer). This PR is part of a series of PRs that go widget-by-widget to use the new API.

This is a generic summary I'm putting on each PR and not every point will be applicable to every widget, but the common themes are:

I added a test for serialization to make sure we're still backwards compatible (see LEMS-3185), then implemented the helpers getSerializedState and getUserInputFromSerializedState to keep supporting the expected results.
I moved user input for the component into the new userInput state in Renderer. This means consuming userInput in the component and calling handleUserInput on change.
When transform did something to initialize user input state, I moved the logic to getStartUserInput.
When staticTransform did something to get correct state in static widgets, I moved the logic to getCorrectUserInput.
Editors that use a widget to collect answer data are changed to support the new API.

Please see the parent PR for more information.

PlotterEditor does use Plotter, so this will affect the editing experience

github-actions · 2025-06-12T15:38:48Z

Size Change: +42 B (+0.01%)

Total Size: 473 kB

Filename	Size	Change
`packages/perseus-editor/dist/es/index.js`	91.3 kB	+24 B (+0.03%)
`packages/perseus/dist/es/index.js`	201 kB	+18 B (+0.01%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.7 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	5.98 kB
`packages/math-input/dist/es/index.js`	98.6 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.js`	20.4 kB
`packages/perseus-linter/dist/es/index.js`	7.14 kB
`packages/perseus-score/dist/es/index.js`	9.22 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	7.56 kB
`packages/pure-markdown/dist/es/index.js`	1.22 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

github-actions · 2025-06-13T19:50:50Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR2588

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

./tools/bump_perseus_version.js -t PR2588

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

./dev/tools/bump_perseus_version.js -s n -t PR2588

SonicScrewdriver

Happy to approve! I only really had one question about the plotterProps

SonicScrewdriver · 2025-06-18T18:36:53Z

packages/perseus-editor/src/widgets/plotter-editor.tsx

@@ -285,10 +286,16 @@ class PlotterEditor extends React.Component<Props, State> {
            this.props.type,
        );
        const canChangeSnaps = !_.contains(["pic", "dotplot"], this.props.type);
-        const props = {
-            trackInteraction: () => {},
+        const plotterProps: any = {


Could we not set the type here instead of using any and then casting in the jsx?

I honestly can't figure out any other way to avoid an error besides ts-expect-error, which I removed because it's worse than any. Open to ideas though.

SonicScrewdriver · 2025-06-18T18:42:36Z

packages/perseus/src/widgets/plotter/plotter.tsx

+     *
+     * @internal
+     */
+    _testInsertUserInput(userInput: PerseusPlotterUserInput) {


Ooo interesting, I was wondering where this was coming from.

I think this makes sense for now, but I wonder if we shouldn't consider making a ticket to find a more holistic / standardized / better way to handle this. It seems like a possible idiosyncrasy that we'd wonder about in the future.

Maybe it's simply not worthwhile if our goal is to move away from Graphie anyway.

Plotter is a hidden widget, so I think it's fine to ignore the problem until it can be replaced with IG.

## Summary: Issue: [LEMS-3208](https://khanacademy.atlassian.net/browse/LEMS-3208) Edit see the ticket for full context. **tl;dr: I need user input to be outside the chunk of state that Renderer stores arbitrary widget state in** (currently it's a mash of render props, user input, and whatever else widgets want to shove in there). This ticket is the shared changes of this work - things that multiple widgets need. For the most part, I tried to have the other PRs _only_ affect things that are _specific_ to the individual widget. Anything outside of the immediate scope of the widget went into this PR. The main ideas: - Renderer now has `userInput` state which is a `UserInputMap` - `UniversalWidgetProps` now passes `userInput` and `handleUserInput` down to components for them to consume - `WidgetExports` has some new optional APIs: - `getUserInputFromSerializedState` for restoring serialized state - `getStartUserInput` for initializing user input - `getCorrectUserInput` for static widgets - Marked a bunch of things as deprecated Note that besides some cleanup, no tests were harmed in the making of this PR. It's backwards compatible with our old way of doing things. --- Reviewers: handeyeco, benchristel, SonicScrewdriver, jeremywiebe, ivyolamit, mark-fitzgerald, anakaren-rojas, nishasy Child PRs: - [Categorizer](#2572) - [CSProgram](#2584) - [Dropdown](#2568) - [Expression](#2569) - [FreeResponse](#2585) - [Grapher](#2596) - [IFrame](#2582) - [InputNumber](#2589) - [InteractiveGraph](#2598) - [LabelImage](#2577) - [Matcher](#2575) - [Matrix](#2581) - [MockWidget](#2586) - [NumberLine](#2573) - [NumericInput](#2571) - [Orderer](#2592) - [Plotter](#2588) - [Sorter](#2578) - [Table](#2587) [LEMS-3208]: https://khanacademy.atlassian.net/browse/LEMS-3208?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ Author: handeyeco Required Reviewers: Approved By: SonicScrewdriver, jeremywiebe Checks: ✅ 8 checks were successful Pull Request URL: #2566

This is an integration branch for landing approved PRs on. ## Summary: This PR includes the following commits: - Renderer: separate user input state from render props state (#2566) - Dropdown: renderer user input state. (#2568) - Expression: renderer user input state (#2569) - NumericInput: renderer user input state (#2571) - Categorizer: renderer user input state (#2572) - NumberLine: renderer user input state (#2573) - Matcher: renderer user input state (#2575) - Sorter: renderer user input state (#2578) - Matrix: renderer user input state (#2581) - IFrame: renderer user input state (#2582) - CSProgram: renderer user input state (#2584) - FreeResponse: renderer user input state (#2585) - MockWidget: renderer user input state (#2586) - Table: renderer user input state (#2587) - Plotter: renderer user input state (#2588) - InputNumber: renderer user input state (#2589) - Orderer: renderer user input state (#2592) - Grapher: renderer user input state (#2596) - InteractiveGraph: renderer user input state (#2598) - LabelImage: renderer user input state (#2577) - Clean up some change handler stuff (#2644) - LEMS-3247: NumberLine inequality regression (#2645) - Bugfix: Plotter dot graph crashing (#2651) - Bugfix: static switch not working in editor (#2652) - LEMS-3257: Fix IG regression regarding user input (#2654) - Bugfix: restore support for static in IG and Plotter (#2661) Issue: LEMS-3208 ## Test plan: Author: handeyeco Reviewers: SonicScrewdriver, ivyolamit, mark-fitzgerald, anakaren-rojas, nishasy, benchristel, Myranae Required Reviewers: Approved By: SonicScrewdriver Checks: ✅ 14 checks were successful Pull Request URL: #2642

@handeyeco

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@65.4.0 ### Minor Changes - [#2566](#2566) [`21f79b664`](21f79b6) Thanks [@handeyeco](https://github.com/handeyeco)! - Add support for `userInput` state in Renderer, new user input APIs for WidgetExport ### Patch Changes - [#2596](#2596) [`f15a4cc56`](f15a4cc) Thanks [@handeyeco](https://github.com/handeyeco)! - Grapher: use userInput/handleUserInput - [#2571](#2571) [`de05305b2`](de05305) Thanks [@handeyeco](https://github.com/handeyeco)! - NumericInput: use userInput/handleUserInput - [#2572](#2572) [`ff2cd2916`](ff2cd29) Thanks [@handeyeco](https://github.com/handeyeco)! - Categorizer: use userInput/handleUserInput - [#2575](#2575) [`f84722b44`](f84722b) Thanks [@handeyeco](https://github.com/handeyeco)! - Matcher: use userInput/handleUserInput - [#2661](#2661) [`4573c0476`](4573c04) Thanks [@handeyeco](https://github.com/handeyeco)! - Bugfix: restore support for static in IG and Plotter - [#2588](#2588) [`380720116`](3807201) Thanks [@handeyeco](https://github.com/handeyeco)! - Plotter: use userInput/handleUserInput - [#2589](#2589) [`e7353c696`](e7353c6) Thanks [@handeyeco](https://github.com/handeyeco)! - InputNumber: use userInput/handleUserInput - [#2577](#2577) [`e2ed14e58`](e2ed14e) Thanks [@handeyeco](https://github.com/handeyeco)! - LabelImage: use userInput/handleUserInput - [#2578](#2578) [`bcf4fd541`](bcf4fd5) Thanks [@handeyeco](https://github.com/handeyeco)! - Sorter: use userInput/handleUserInput - [#2569](#2569) [`1eadde57b`](1eadde5) Thanks [@handeyeco](https://github.com/handeyeco)! - Expression: use userInput/handleUserInput - [#2586](#2586) [`8b63ac0ed`](8b63ac0) Thanks [@handeyeco](https://github.com/handeyeco)! - MockWidget: use userInput/handleUserInput - [#2584](#2584) [`e175b8bc7`](e175b8b) Thanks [@handeyeco](https://github.com/handeyeco)! - CSProgram: use userInput/handleUserInput - [#2651](#2651) [`516aea734`](516aea7) Thanks [@handeyeco](https://github.com/handeyeco)! - Bugfix: Plotter dot graph crashing after user input refactor - [#2644](#2644) [`f51181adc`](f51181a) Thanks [@handeyeco](https://github.com/handeyeco)! - Cleanup some ChangeHandler and Changeable use - [#2573](#2573) [`3a3f5233b`](3a3f523) Thanks [@handeyeco](https://github.com/handeyeco)! - NumberLine: use userInput/handleUserInput - [#2585](#2585) [`4af4b1f23`](4af4b1f) Thanks [@handeyeco](https://github.com/handeyeco)! - FreeResponse: use userInput/handleUserInput - [#2592](#2592) [`091c25ee6`](091c25e) Thanks [@handeyeco](https://github.com/handeyeco)! - Orderer: use userInput/handleUserInput - [#2568](#2568) [`02af17299`](02af172) Thanks [@handeyeco](https://github.com/handeyeco)! - Dropdown: use userInput/handleUserInput - [#2652](#2652) [`508f4e5b1`](508f4e5) Thanks [@handeyeco](https://github.com/handeyeco)! - Bugfix: static switch not working in editor - [#2582](#2582) [`41fb2b215`](41fb2b2) Thanks [@handeyeco](https://github.com/handeyeco)! - IFrame: use userInput/handleUserInput - [#2654](#2654) [`3fcbddb71`](3fcbddb) Thanks [@handeyeco](https://github.com/handeyeco)! - Bugfix: IG regression related to user input and `getGradableGraph` - [#2581](#2581) [`52960e3b0`](52960e3) Thanks [@handeyeco](https://github.com/handeyeco)! - Matrix: use userInput/handleUserInput - [#2587](#2587) [`88a4f683d`](88a4f68) Thanks [@handeyeco](https://github.com/handeyeco)! - Table: use userInput/handleUserInput - [#2645](#2645) [`e3a636a73`](e3a636a) Thanks [@handeyeco](https://github.com/handeyeco)! - Bugfix: NumberLine inequality buttons didn't change inequality - [#2598](#2598) [`c58f12c72`](c58f12c) Thanks [@handeyeco](https://github.com/handeyeco)! - InteractiveGraph: use userInput/handleUserInput - Updated dependencies \[[`f15a4cc56`](f15a4cc), [`f84722b44`](f84722b), [`e2ed14e58`](e2ed14e), [`bcf4fd541`](bcf4fd5), [`f51181adc`](f51181a), [`21f79b664`](21f79b6), [`3a3f5233b`](3a3f523)]: - @khanacademy/perseus-core@16.1.1 - @khanacademy/perseus-score@7.1.10 - @khanacademy/keypad-context@3.0.23 - @khanacademy/kmath@2.0.23 - @khanacademy/math-input@26.0.12 - @khanacademy/perseus-linter@4.0.10 ## @khanacademy/keypad-context@3.0.23 ### Patch Changes - Updated dependencies \[[`f15a4cc56`](f15a4cc), [`f84722b44`](f84722b), [`e2ed14e58`](e2ed14e), [`bcf4fd541`](bcf4fd5), [`f51181adc`](f51181a), [`21f79b664`](21f79b6), [`3a3f5233b`](3a3f523)]: - @khanacademy/perseus-core@16.1.1 ## @khanacademy/kmath@2.0.23 ### Patch Changes - Updated dependencies \[[`f15a4cc56`](f15a4cc), [`f84722b44`](f84722b), [`e2ed14e58`](e2ed14e), [`bcf4fd541`](bcf4fd5), [`f51181adc`](f51181a), [`21f79b664`](21f79b6), [`3a3f5233b`](3a3f523)]: - @khanacademy/perseus-core@16.1.1 ## @khanacademy/math-input@26.0.12 ### Patch Changes - Updated dependencies \[[`f15a4cc56`](f15a4cc), [`f84722b44`](f84722b), [`e2ed14e58`](e2ed14e), [`bcf4fd541`](bcf4fd5), [`f51181adc`](f51181a), [`21f79b664`](21f79b6), [`3a3f5233b`](3a3f523)]: - @khanacademy/perseus-core@16.1.1 - @khanacademy/keypad-context@3.0.23 ## @khanacademy/perseus-core@16.1.1 ### Patch Changes - [#2596](#2596) [`f15a4cc56`](f15a4cc) Thanks [@handeyeco](https://github.com/handeyeco)! - Grapher: use userInput/handleUserInput - [#2575](#2575) [`f84722b44`](f84722b) Thanks [@handeyeco](https://github.com/handeyeco)! - Matcher: use userInput/handleUserInput - [#2577](#2577) [`e2ed14e58`](e2ed14e) Thanks [@handeyeco](https://github.com/handeyeco)! - LabelImage: use userInput/handleUserInput - [#2578](#2578) [`bcf4fd541`](bcf4fd5) Thanks [@handeyeco](https://github.com/handeyeco)! - Sorter: use userInput/handleUserInput - [#2644](#2644) [`f51181adc`](f51181a) Thanks [@handeyeco](https://github.com/handeyeco)! - Cleanup some ChangeHandler and Changeable use - [#2566](#2566) [`21f79b664`](21f79b6) Thanks [@handeyeco](https://github.com/handeyeco)! - Add support for `userInput` state in Renderer, new user input APIs for WidgetExport - [#2573](#2573) [`3a3f5233b`](3a3f523) Thanks [@handeyeco](https://github.com/handeyeco)! - NumberLine: use userInput/handleUserInput ## @khanacademy/perseus-editor@25.1.2 ### Patch Changes - [#2596](#2596) [`f15a4cc56`](f15a4cc) Thanks [@handeyeco](https://github.com/handeyeco)! - Grapher: use userInput/handleUserInput - [#2572](#2572) [`ff2cd2916`](ff2cd29) Thanks [@handeyeco](https://github.com/handeyeco)! - Categorizer: use userInput/handleUserInput - [#2588](#2588) [`380720116`](3807201) Thanks [@handeyeco](https://github.com/handeyeco)! - Plotter: use userInput/handleUserInput - [#2569](#2569) [`1eadde57b`](1eadde5) Thanks [@handeyeco](https://github.com/handeyeco)! - Expression: use userInput/handleUserInput - [#2644](#2644) [`f51181adc`](f51181a) Thanks [@handeyeco](https://github.com/handeyeco)! - Cleanup some ChangeHandler and Changeable use - [#2652](#2652) [`508f4e5b1`](508f4e5) Thanks [@handeyeco](https://github.com/handeyeco)! - Bugfix: static switch not working in editor - [#2581](#2581) [`52960e3b0`](52960e3) Thanks [@handeyeco](https://github.com/handeyeco)! - Matrix: use userInput/handleUserInput - [#2587](#2587) [`88a4f683d`](88a4f68) Thanks [@handeyeco](https://github.com/handeyeco)! - Table: use userInput/handleUserInput - [#2598](#2598) [`c58f12c72`](c58f12c) Thanks [@handeyeco](https://github.com/handeyeco)! - InteractiveGraph: use userInput/handleUserInput - Updated dependencies \[[`f15a4cc56`](f15a4cc), [`de05305b2`](de05305), [`ff2cd2916`](ff2cd29), [`f84722b44`](f84722b), [`4573c0476`](4573c04), [`380720116`](3807201), [`e7353c696`](e7353c6), [`e2ed14e58`](e2ed14e), [`bcf4fd541`](bcf4fd5), [`1eadde57b`](1eadde5), [`8b63ac0ed`](8b63ac0), [`e175b8bc7`](e175b8b), [`516aea734`](516aea7), [`f51181adc`](f51181a), [`21f79b664`](21f79b6), [`3a3f5233b`](3a3f523), [`4af4b1f23`](4af4b1f), [`091c25ee6`](091c25e), [`02af17299`](02af172), [`508f4e5b1`](508f4e5), [`41fb2b215`](41fb2b2), [`3fcbddb71`](3fcbddb), [`52960e3b0`](52960e3), [`88a4f683d`](88a4f68), [`e3a636a73`](e3a636a), [`c58f12c72`](c58f12c)]: - @khanacademy/perseus@65.4.0 - @khanacademy/perseus-core@16.1.1 - @khanacademy/perseus-score@7.1.10 - @khanacademy/keypad-context@3.0.23 - @khanacademy/kmath@2.0.23 - @khanacademy/math-input@26.0.12 - @khanacademy/perseus-linter@4.0.10 ## @khanacademy/perseus-linter@4.0.10 ### Patch Changes - Updated dependencies \[[`f15a4cc56`](f15a4cc), [`f84722b44`](f84722b), [`e2ed14e58`](e2ed14e), [`bcf4fd541`](bcf4fd5), [`f51181adc`](f51181a), [`21f79b664`](21f79b6), [`3a3f5233b`](3a3f523)]: - @khanacademy/perseus-core@16.1.1 ## @khanacademy/perseus-score@7.1.10 ### Patch Changes - [#2578](#2578) [`bcf4fd541`](bcf4fd5) Thanks [@handeyeco](https://github.com/handeyeco)! - Sorter: use userInput/handleUserInput - [#2644](#2644) [`f51181adc`](f51181a) Thanks [@handeyeco](https://github.com/handeyeco)! - Cleanup some ChangeHandler and Changeable use - [#2573](#2573) [`3a3f5233b`](3a3f523) Thanks [@handeyeco](https://github.com/handeyeco)! - NumberLine: use userInput/handleUserInput - Updated dependencies \[[`f15a4cc56`](f15a4cc), [`f84722b44`](f84722b), [`e2ed14e58`](e2ed14e), [`bcf4fd541`](bcf4fd5), [`f51181adc`](f51181a), [`21f79b664`](21f79b6), [`3a3f5233b`](3a3f523)]: - @khanacademy/perseus-core@16.1.1 - @khanacademy/kmath@2.0.23 ## @khanacademy/perseus-dev-ui@5.5.7 ### Patch Changes - Updated dependencies \[[`f15a4cc56`](f15a4cc), [`f84722b44`](f84722b), [`e2ed14e58`](e2ed14e), [`bcf4fd541`](bcf4fd5), [`f51181adc`](f51181a), [`21f79b664`](21f79b6), [`3a3f5233b`](3a3f523)]: - @khanacademy/perseus-core@16.1.1 - @khanacademy/kmath@2.0.23 - @khanacademy/math-input@26.0.12 - @khanacademy/perseus-linter@4.0.10 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

handeyeco self-assigned this Jun 12, 2025

handeyeco added the olc-5.0.373be label Jun 12, 2025

handeyeco changed the title ~~move user input state to props~~ Plotter: renderer user input state Jun 12, 2025

handeyeco mentioned this pull request Jun 12, 2025

Renderer: separate user input state from render props state #2566

Merged

handeyeco marked this pull request as ready for review June 16, 2025 16:23

handeyeco requested review from benchristel, nishasy and a team June 16, 2025 16:24

SonicScrewdriver approved these changes Jun 18, 2025

View reviewed changes

handeyeco changed the base branch from renderer-user-input-core to feature/renderer-user-input June 24, 2025 17:08

handeyeco requested review from ivyolamit, mark-fitzgerald and anakaren-rojas as code owners June 24, 2025 17:08

An error occurred while trying to automatically change base from renderer-user-input-core to feature/renderer-user-input June 24, 2025 17:08

handeyeco added 4 commits June 24, 2025 14:52

[rui-plotter] start plotter work

c44df7c

[rui-plotter] move user input state to props

9c44761

[rui-plotter] Fix editor

4cade6b

[rui-plotter] docs(changeset): Plotter: use userInput/handleUserInput

ab6d20f

handeyeco force-pushed the rui-plotter branch from ce12c41 to ab6d20f Compare June 24, 2025 19:52

handeyeco merged commit 3807201 into feature/renderer-user-input Jun 24, 2025
8 checks passed

handeyeco deleted the rui-plotter branch June 24, 2025 19:59

handeyeco mentioned this pull request Jun 24, 2025

Integration: separate user input from render props #2642

Merged

khan-actions-bot mentioned this pull request Jul 2, 2025

Version Packages #2671

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Plotter: renderer user input state #2588

Plotter: renderer user input state #2588

Uh oh!

handeyeco commented Jun 12, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 12, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 13, 2025 •

edited

Loading

Uh oh!

SonicScrewdriver left a comment

Uh oh!

SonicScrewdriver Jun 18, 2025

Uh oh!

handeyeco Jun 23, 2025

Uh oh!

SonicScrewdriver Jun 18, 2025

Uh oh!

handeyeco Jun 23, 2025

Uh oh!

Uh oh!

Uh oh!

Plotter: renderer user input state #2588

Plotter: renderer user input state #2588

Uh oh!

Conversation

handeyeco commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Uh oh!

github-actions bot commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

npm Snapshot: Published

Uh oh!

SonicScrewdriver left a comment

Choose a reason for hiding this comment

Uh oh!

SonicScrewdriver Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

handeyeco Jun 23, 2025

Choose a reason for hiding this comment

Uh oh!

SonicScrewdriver Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

handeyeco Jun 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

handeyeco commented Jun 12, 2025 •

edited

Loading

github-actions bot commented Jun 12, 2025 •

edited

Loading

github-actions bot commented Jun 13, 2025 •

edited

Loading