[ Interactive Graph | Exponential Graph ] PR3: Rendering Logic#3393
[ Interactive Graph | Exponential Graph ] PR3: Rendering Logic#3393SonicScrewdriver merged 11 commits intomainfrom
Conversation
🗄️ Schema Change: No Changes ✅ |
|
Size Change: +1.98 kB (+0.4%) Total Size: 493 kB
ℹ️ View Unchanged
|
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (77c478b) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3393If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3393If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3393 |
🛠️ Item Splitting: No Changes ✅ |
ivyolamit
left a comment
There was a problem hiding this comment.
@SonicScrewdriver implementation looks logical to me, i just have few non-blocking suggestions.
There was a problem hiding this comment.
Can we add a test for this component especially it has 2 behavior depending on the orientation.
There was a problem hiding this comment.
Sure! It seemed simple enough that I wasn't sure it was worth the test bloat, but I can add one!
| ); | ||
| } | ||
|
|
||
| // Horizontal drag handle — wide pill with horizontal dot grid. |
There was a problem hiding this comment.
do we still need this comment?
| // Horizontal drag handle — wide pill with horizontal dot grid. |
| r: 1.25px; | ||
| } | ||
|
|
||
| .MafsView .movable-asymptote-handle-focus-ring { |
There was a problem hiding this comment.
suggestion: Group these and add a comment that these are all used for the asymptote for exponent and logarithm
There was a problem hiding this comment.
these new styling are specific to the drag handle and movable asymptote, do we want these here or close to the component?
There was a problem hiding this comment.
This is where all the component styles are, so I think it makes sense to keep it in this file. If we want to move all the styles, it'd make more sense to move them collectively later.
| } | ||
|
|
||
| .MafsView .movable-asymptote-handle-ring { | ||
| fill: #fff; |
There was a problem hiding this comment.
| fill: #fff; | |
| fill: var(--wb-semanticColor-core-border-knockout-default); |
| } | ||
|
|
||
| .MafsView .movable-asymptote-handle-dot { | ||
| fill: #fff; |
There was a problem hiding this comment.
| fill: #fff; | |
| fill: var(--wb-semanticColor-core-border-knockout-default); |
|
|
||
| .MafsView .movable-asymptote-handle-dot { | ||
| fill: #fff; | ||
| r: 1px; |
There was a problem hiding this comment.
| r: 1px; | |
| r: var(--wb-sizing-size_010); |
6a28c3d to
58a0135
Compare
…Exponential Graph
8b31dc5 to
77c478b
Compare
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.0.0 ### Major Changes - [#3332](#3332) [`604b3a6c25`](604b3a6) Thanks [@benchristel](https://github.com/benchristel)! - The `options` parameter of the `serialize` method of `EditorPage` and `Editor` has been removed. - [#3386](#3386) [`7e76fbbc2f`](7e76fbb) Thanks [@benchristel](https://github.com/benchristel)! - The `serialize` methods of classes in `@khanacademy/perseus-editor` no longer use arrow function syntax. Callers should not unbind them from the class instance. Additionally, the `Editor` component no longer accepts a `replace` prop (used for hints), and its serialize method no longer returns `replace`. The `replace` prop was only used in `serialize`. Users of the `Editor` component should manage hints' `replace` setting themselves. ### Minor Changes - [#3395](#3395) [`97223334ea`](9722333) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Implementation of Editor support for Exponential Graph - [#3352](#3352) [`b681e00a4f`](b681e00) Thanks [@handeyeco](https://github.com/handeyeco)! - Add editor support for AbsoluteValue - [#3348](#3348) [`b1557c2a73`](b1557c2) Thanks [@handeyeco](https://github.com/handeyeco)! - Add schema for AbsoluteValue graph - [#3345](#3345) [`dde985f3b5`](dde985f) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent type definitions, this is the initial implementation for supporting Tangent graph in Interactive Graph - [#3358](#3358) [`8c503171b1`](8c50317) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent graph option in the Interactive Graph Editor - [#3376](#3376) [`8aa0a77886`](8aa0a77) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of new Types, Schema, and Kmath utilities for Exponential Graph ### Patch Changes - [#3396](#3396) [`35fa9133db`](35fa913) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Add a linter warning for images with no size - [#3390](#3390) [`d22c50dc2a`](d22c50d) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Make the 125 character alt text warning less aggressive - [#3372](#3372) [`3cdb09813d`](3cdb098) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Upscale Graphies within Explore Image Modal - [#3391](#3391) [`2f285ee161`](2f285ee) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Add character counter to alt text field - [#3374](#3374) [`cd73c99ba3`](cd73c99) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Remove incorrect usage of the feature flag setting in one of the test - Updated dependencies \[[`f18c0d9b6f`](f18c0d9), [`a022e751d6`](a022e75), [`35fa9133db`](35fa913), [`54db3fd4bd`](54db3fd), [`97223334ea`](9722333), [`027a5edbda`](027a5ed), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`3cdb09813d`](3cdb098), [`afcff9f96f`](afcff9f), [`75f184e5a7`](75f184e), [`4b2a7c85db`](4b2a7c8), [`5e1acd01f8`](5e1acd0), [`b681e00a4f`](b681e00), [`d99f1c0259`](d99f1c0), [`54eee35d65`](54eee35), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`56e7dbe9a2`](56e7dbe), [`85f9cd46fc`](85f9cd4), [`8c503171b1`](8c50317), [`3aca3dcdf4`](3aca3dc), [`9f29bc7161`](9f29bc7), [`7034844845`](7034844), [`8aa0a77886`](8aa0a77), [`003aca7612`](003aca7)]: - @khanacademy/perseus-linter@4.9.0 - @khanacademy/perseus-score@8.4.0 - @khanacademy/perseus-core@23.7.0 - @khanacademy/perseus@76.1.0 - @khanacademy/kmath@2.3.0 - @khanacademy/keypad-context@3.2.40 - @khanacademy/math-input@26.4.10 ## @khanacademy/kmath@2.3.0 ### Minor Changes - [#3351](#3351) [`005e13d784`](005e13d) Thanks [@handeyeco](https://github.com/handeyeco)! - Add scoring for AbsoluteValue - [#3347](#3347) [`d99f1c0259`](d99f1c0) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add the tangent math utilities to kmath for supporting Tangent graph in Interactive Graph - [#3376](#3376) [`8aa0a77886`](8aa0a77) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of new Types, Schema, and Kmath utilities for Exponential Graph ### Patch Changes - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 ## @khanacademy/perseus@76.1.0 ### Minor Changes - [#3350](#3350) [`75f184e5a7`](75f184e) Thanks [@handeyeco](https://github.com/handeyeco)! - Implement AbsoluteValue rendering - [#3354](#3354) [`4b2a7c85db`](4b2a7c8) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Created the tangent graph visual component, add Storybook coverage, SR strings, and equation string for supporting Tangent graph in Interactive Graph - [#3353](#3353) [`5e1acd01f8`](5e1acd0) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent graph state management and reducer for supporting Tangent graph in Interactive Graph - [#3352](#3352) [`b681e00a4f`](b681e00) Thanks [@handeyeco](https://github.com/handeyeco)! - Add editor support for AbsoluteValue - [#3348](#3348) [`b1557c2a73`](b1557c2) Thanks [@handeyeco](https://github.com/handeyeco)! - Add schema for AbsoluteValue graph - [#3345](#3345) [`dde985f3b5`](dde985f) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent type definitions, this is the initial implementation for supporting Tangent graph in Interactive Graph - [#3349](#3349) [`56e7dbe9a2`](56e7dbe) Thanks [@handeyeco](https://github.com/handeyeco)! - Add state management for AbsoluteValue - [#3377](#3377) [`85f9cd46fc`](85f9cd4) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Implementation of state management logic for new Exponential graph - [#3358](#3358) [`8c503171b1`](8c50317) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent graph option in the Interactive Graph Editor - [#3393](#3393) [`9f29bc7161`](9f29bc7) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Rendering logic for new Exponential Graph - [#3376](#3376) [`8aa0a77886`](8aa0a77) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of new Types, Schema, and Kmath utilities for Exponential Graph ### Patch Changes - [#3329](#3329) [`027a5edbda`](027a5ed) Thanks [@Myranae](https://github.com/Myranae)! - Fix image bug by batching setState calls in setupGraphie - [#3372](#3372) [`3cdb09813d`](3cdb098) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Upscale Graphies within Explore Image Modal - [#3365](#3365) [`afcff9f96f`](afcff9f) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Improve ordering of Props type for `Renderer` component - [#3367](#3367) [`54eee35d65`](54eee35) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Show image in explore modal even when size is undefined - [#3407](#3407) [`3aca3dcdf4`](3aca3dc) Thanks [@Myranae](https://github.com/Myranae)! - Improve a11y with graded group set - [#3385](#3385) [`003aca7612`](003aca7) Thanks [@Myranae](https://github.com/Myranae)! - Small fix to prevent pip duplication in Graded Group Sets - Updated dependencies \[[`f18c0d9b6f`](f18c0d9), [`a022e751d6`](a022e75), [`35fa9133db`](35fa913), [`54db3fd4bd`](54db3fd), [`97223334ea`](9722333), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`d99f1c0259`](d99f1c0), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`7034844845`](7034844), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-linter@4.9.0 - @khanacademy/perseus-score@8.4.0 - @khanacademy/perseus-core@23.7.0 - @khanacademy/kmath@2.3.0 - @khanacademy/keypad-context@3.2.40 - @khanacademy/math-input@26.4.10 ## @khanacademy/perseus-core@23.7.0 ### Minor Changes - [#3405](#3405) [`54db3fd4bd`](54db3fd) Thanks [@benchristel](https://github.com/benchristel)! - `@khanacademy/perseus-core` now exports a `removeOrphanedWidgetsFromPerseusItem` function, which removes unreferenced widgets from a `PerseusItem`'s question and hints. - [#3351](#3351) [`005e13d784`](005e13d) Thanks [@handeyeco](https://github.com/handeyeco)! - Add scoring for AbsoluteValue - [#3348](#3348) [`b1557c2a73`](b1557c2) Thanks [@handeyeco](https://github.com/handeyeco)! - Add schema for AbsoluteValue graph - [#3345](#3345) [`dde985f3b5`](dde985f) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent type definitions, this is the initial implementation for supporting Tangent graph in Interactive Graph - [#3376](#3376) [`8aa0a77886`](8aa0a77) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of new Types, Schema, and Kmath utilities for Exponential Graph ### Patch Changes - [#3357](#3357) [`ae0538d0a7`](ae0538d) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Improve code documentation for all data-schema and user-input types ## @khanacademy/perseus-linter@4.9.0 ### Minor Changes - [#3381](#3381) [`f18c0d9b6f`](f18c0d9) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - Adds new linters for parsed objects - [#3395](#3395) [`97223334ea`](9722333) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Implementation of Editor support for Exponential Graph ### Patch Changes - [#3396](#3396) [`35fa9133db`](35fa913) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) | Add a linter warning for images with no size - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`d99f1c0259`](d99f1c0), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 - @khanacademy/kmath@2.3.0 ## @khanacademy/perseus-score@8.4.0 ### Minor Changes - [#3356](#3356) [`a022e751d6`](a022e75) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tangent graph scoring to support the Tangent graph in Interactive Graph - [#3351](#3351) [`005e13d784`](005e13d) Thanks [@handeyeco](https://github.com/handeyeco)! - Add scoring for AbsoluteValue - [#3394](#3394) [`7034844845`](7034844) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Implementation of new scoring logic for Exponential Graph ### Patch Changes - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`d99f1c0259`](d99f1c0), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 - @khanacademy/kmath@2.3.0 ## @khanacademy/keypad-context@3.2.40 ### Patch Changes - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 ## @khanacademy/math-input@26.4.10 ### Patch Changes - Updated dependencies \[[`54db3fd4bd`](54db3fd), [`ae0538d0a7`](ae0538d), [`005e13d784`](005e13d), [`b1557c2a73`](b1557c2), [`dde985f3b5`](dde985f), [`8aa0a77886`](8aa0a77)]: - @khanacademy/perseus-core@23.7.0 - @khanacademy/keypad-context@3.2.40
### Summary: _This PR was created with the help of AI, albeit with heavy oversight and review. We had to make a new PR because the original history was fully messed up._ This is part of a series of PRs implementing the exponential graph type for the Interactive Graph widget: PR1 – type definitions and schema PR2 – state management▶️ PR3 – rendering & accessibility (this PR) PR4 – scoring PR5 – editor support **Issue:** LEMS-3711 - Added rendering and accessibility support for the exponential graph type - Implements the full interactive rendering of the exponential graph, including draggable curve points, a draggable asymptote line, the plotted curve, and screen reader descriptions. Also extracts two reusable components (`MovableAsymptote` and `AsymptoteDragHandle`) intended to be shared with the upcoming logarithm graph type. ### Changes: - **graphs/exponential.tsx** — New file implementing `renderExponentialGraph`. Renders two `MovablePoint` components for the curve, a draggable asymptote line via `useDraggable`, and a `Plot` of f(x) = a·eᵇˣ + c using coefficients from `getExponentialCoefficients`. Caches the last valid coefficients via a ref to handle transient invalid states mid-drag. Dispatches `actions.exponential.movePoint` and `actions.exponential.moveCenter` on interaction. - **graphs/components/asymptote-drag-handle.tsx** — New reusable visual component rendering the asymptote pill handle with orientation dots. Accepts `orientation: "horizontal" | "vertical"` for reuse with future vertical-asymptote graph types (e.g. logarithm). - **graphs/components/movable-asymptote.tsx** — New reusable interactive component wrapping `SVGLine` and `AsymptoteDragHandle` with full drag, hover, and keyboard support via `useDraggable`. Exports `constrainAsymptoteKeyboard` for testability. - **mafs-styles.css** — Adds `.movable-asymptote-handle*` CSS classes for the asymptote pill styling. - **mafs-graph.tsx** — Wires up `renderExponentialGraph` in `renderGraphElements`, replacing the "Not implemented" stub from PR1. - **interactive-graph.tsx** — Implements `getExponentialEquationString`, replacing the empty-string stub from PR1. - **interactive-graph-ai-utils.ts** — Adds `ExponentialGraphOptions`, `ExponentialUserInput`, and wires them into `getGraphOptionsForProps` / `getUserInput`. - **strings.ts** — Adds i18n strings for exponential graph screen reader descriptions (graph label, point descriptions, asymptote description). - **interactive-graph.stories.tsx** — Adds an exponential graph story. - **graphs/exponential.test.tsx** — Tests for rendering, dragging curve points, asymptote dragging, keyboard movement, and screen reader output. - **graphs/components/movable-asymptote.test.tsx** — Tests for `MovableAsymptote` rendering and `constrainAsymptoteKeyboard` behavior. ### Test plan: - [ ] `pnpm test packages/perseus` — all new rendering and component tests pass - [ ] `pnpm tsc` — no new type errors - [ ] `pnpm lint` — no lint errors - [ ] Exponential graph renders and is interactive in Storybook - [ ] Screen reader descriptions are correct - [ ] No existing interactive graph tests regress Author: SonicScrewdriver Reviewers: claude[bot], ivyolamit, SonicScrewdriver Required Reviewers: Approved By: ivyolamit Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3393
Summary:
This PR was created with the help of AI, albeit with heavy oversight and review. We had to make a new PR because the original history was fully messed up.
This is part of a series of PRs implementing the exponential graph type for
the Interactive Graph widget:
PR1 – type definitions and schema
▶️ PR3 – rendering & accessibility (this PR)
PR2 – state management
PR4 – scoring
PR5 – editor support
Issue: LEMS-3711
Added rendering and accessibility support for the exponential graph type
Implements the full interactive rendering of the exponential graph, including
draggable curve points, a draggable asymptote line, the plotted curve, and
screen reader descriptions. Also extracts two reusable components
(
MovableAsymptoteandAsymptoteDragHandle) intended to be shared withthe upcoming logarithm graph type.
Changes:
renderExponentialGraph.Renders two
MovablePointcomponents for the curve, a draggable asymptoteline via
useDraggable, and aPlotof f(x) = a·eᵇˣ + c using coefficientsfrom
getExponentialCoefficients. Caches the last valid coefficients via aref to handle transient invalid states mid-drag. Dispatches
actions.exponential.movePointandactions.exponential.moveCenteroninteraction.
component rendering the asymptote pill handle with orientation dots.
Accepts
orientation: "horizontal" | "vertical"for reuse with futurevertical-asymptote graph types (e.g. logarithm).
component wrapping
SVGLineandAsymptoteDragHandlewith full drag,hover, and keyboard support via
useDraggable. ExportsconstrainAsymptoteKeyboardfor testability..movable-asymptote-handle*CSS classes forthe asymptote pill styling.
renderExponentialGraphinrenderGraphElements, replacing the "Not implemented" stub from PR1.getExponentialEquationString,replacing the empty-string stub from PR1.
ExponentialGraphOptions,ExponentialUserInput, and wires them intogetGraphOptionsForProps/getUserInput.descriptions (graph label, point descriptions, asymptote description).
points, asymptote dragging, keyboard movement, and screen reader output.
MovableAsymptoterendering andconstrainAsymptoteKeyboardbehavior.Test plan:
pnpm test packages/perseus— all new rendering and component tests passpnpm tsc— no new type errorspnpm lint— no lint errors