[Interactive Graph] Add tangent graph state management and reducer by ivyolamit · Pull Request #3353 · Khan/perseus

ivyolamit · 2026-03-13T20:07:32Z

Summary:

PR series to add tangent graph support to the Interactive Graph widget:

This is the third PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3955). It wires up the state management layer — the reducer, initialization, actions, and gradable graph serialization.

Add tangent graph state management and reducer for supporting Tangent graph in Interactive Graph

Exports TangentGraphState and adds it to the InteractiveGraphState union
Adds tangent.movePoint action and reducer case with same-x constraint (prevents division by zero in getTangentCoefficients)
Adds real tangent initialization in initializeGraphState via getTangentCoords() (default coords [[0.5, 0.5], [0.75, 0.75]])
Adds tangent case to getGradableGraph for scoring serialization
Adds withTangent() builder method and TangentGraphConfig class for test data construction
Adds tangentQuestion and tangentQuestionWithDefaultCorrect test data
Adds tangent serialization in mafsStateToInteractiveGraph
13 new tests across 5 test files

Implementation notes

InteractiveGraphState union update. Adding TangentGraphState to the union triggers UnreachableCaseError in renderGraphElements (mafs-graph.tsx). A placeholder case returns null (no rendering) — replaced with real rendering in PR 4.

Same-x constraint. The doMovePoint tangent case rejects moves that would place both control points on the same vertical line. This mirrors the sinusoid constraint and prevents getTangentCoefficients from producing Infinity for angularFrequency (since it divides by p2[0] - p1[0]).

getTangentCoords() is not exported. It's only called within initialize-graph-state.ts. It will be exported in PR 6 (editor) when start-coords/util.ts needs it.

mafsStateToInteractiveGraph tangent case is the real implementation (not a placeholder) — it simply returns { ...originalGraph, coords: state.coords }, same as sinusoid.

References

Co-Authored by Claude Code (Opus)

Issue: LEMS-3955

Test plan:

pnpm tsc — no type errors
pnpm lint — no lint errors
pnpm prettier . --check — formatting clean
pnpm knip — no unused exports
Initialization tests pass (given coords, startCoords, defaults)
Reducer tests pass (same-x rejection, out-of-bounds rejection, valid move)
getGradableGraph tangent test passes
mafsStateToInteractiveGraph tangent serialization test passes
Tangent renders in parameterized "should render" tests

…ph state management and reducer for supporting Tangent graph in Interactive Graph

…graph state management and reducer

github-actions · 2026-03-13T20:08:12Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-03-13T20:08:41Z

🛠️ Item Splitting: No Changes ✅

ivyolamit · 2026-03-13T20:08:43Z

Summary of the tangent implementation

PR	Scope	Note
1	Foundation — Add tangent graph type definitions and data schema #3345	for review
2	Math layer — Add tangent math utilities to kmath #3347	base PR (for review)
3	State management — Reducer, actions, initialization, and test data #3353	this PR
4	Rendering — The tangent graph component, Storybook story, and AI utils	🔜
5	Scoring — Add tangent scoring to the scoring package	🔜
6	Editor — Add tangent to answer type	🔜

github-actions · 2026-03-13T20:08:49Z

Size Change: +63 B (+0.01%)

Total Size: 486 kB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	187 kB	+63 B (+0.03%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.8 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	6.03 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`	11.9 kB
`packages/perseus-core/dist/es/index.js`	25 kB
`packages/perseus-editor/dist/es/index.js`	100 kB
`packages/perseus-linter/dist/es/index.js`	8.82 kB
`packages/perseus-score/dist/es/index.js`	9.26 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	7.47 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-03-13T20:09:42Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3353

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

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

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

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

claude

LGTM — mechanical extension of the sinusoid pattern to tangent across all state management layers, with good test coverage.

Extended reasoning...

Overview

This PR adds tangent graph state management as part 3 of a 6-PR series (LEMS-3955). It touches 15 files across the interactive graph widget: type definitions (types.ts), actions (interactive-graph-action.ts), reducer (interactive-graph-reducer.ts), initialization (initialize-graph-state.ts), gradable graph serialization (interactive-graph-state.ts), state-to-graph conversion (mafs-state-to-interactive-graph.ts), a placeholder rendering case (mafs-graph.tsx), test data builders (interactive-graph-question-builder.ts, interactive-graph.testdata.ts), and 5 test files with 13 new tests.

Security risks

None. This is UI graph widget code with no auth, network, or data-handling changes. The same-x guard prevents a division-by-zero in getTangentCoefficients, which is a correctness concern rather than a security one.

Level of scrutiny

Low scrutiny is appropriate. Every tangent addition is a direct copy of the existing sinusoid pattern — TangentGraphConfig mirrors SinusoidGraphConfig, the reducer tangent case mirrors the sinusoid case, getTangentCoords mirrors getSinusoidCoords, etc. The PR makes no novel architectural decisions; it extends an established, well-tested system.

Other factors

The one bug found (bounding-rejection test passing for the wrong reason) is a minor test quality nit — it does not affect production behavior, and the direct same-x test at line 280 properly covers the guard. The identical issue pre-exists in the sinusoid tests. The bundle size impact is negligible (+63 bytes). All CI checks (schema, item splitting, size) passed. No CODEOWNERS file appears to gate these paths.

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts

handeyeco · 2026-03-16T15:39:45Z

.changeset/kind-rats-talk.md

+"@khanacademy/kmath": minor
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-core": minor
+"@khanacademy/perseus-editor": minor


Suggested change

"@khanacademy/kmath": minor

"@khanacademy/perseus": minor

"@khanacademy/perseus-core": minor

"@khanacademy/perseus-editor": minor

"@khanacademy/perseus": minor

Only @khanacademy/perseus changes in this PR.

handeyeco · 2026-03-16T15:48:39Z

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-state.test.ts

        expect(result.coords).toEqual([[5, 0]]);
    });
+
+    it("returns tangent graph coords when interacted with", () => {


This doesn't really seem like a super useful test, but, even if it is, its name is confusing: it makes it sound like this is some kind of UI test that's interacting with the graph but really it's just testing a getter function. Maybe it would be better:

If the name was more specific to what we're trying to accomplish

There was a test for when hasBeenInteractedWith is false - is the behavior any different?

handeyeco · 2026-03-16T16:03:56Z

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts

    ],
 };

+const baseTangentGraphState: InteractiveGraphState = {


Seems like we should be using generateIGTangentGraph instead here. The other tests in these files should similarly be using their generator functions.

handeyeco · 2026-03-16T16:05:51Z

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts

    });

-    it("does not allow moving an endpoint of a sinusoid if the bounding logic would result in an invalid graph", () => {
+    it("rejects a sinusoid move when bounding clamps the point to the same x as the other point", () => {


Why did this test need to change?

handeyeco · 2026-03-16T16:12:02Z

packages/perseus/src/widgets/interactive-graphs/interactive-graph.testdata.ts

    interactiveGraphQuestionBuilder().withSinusoid().build();

+export const tangentQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder()


Through these PRs, this is the third way I've seen to generate tangent test data:

baseTangentGraphState

generateIGTangentGraph

interactiveGraphQuestionBuilder

Feels like we need to land on one.

ivyolamit added 2 commits March 13, 2026 13:05

[LEMS-3955/tangent-state-management] docs(changeset): Add tangent gra…

c4b7286

…ph state management and reducer for supporting Tangent graph in Interactive Graph

[LEMS-3955/tangent-state-management] [Interactive Graph] Add tangent …

2c79523

…graph state management and reducer

ivyolamit self-assigned this Mar 13, 2026

ivyolamit added the olc-5.0.c4fcb label Mar 13, 2026

ivyolamit marked this pull request as ready for review March 13, 2026 20:17

claude bot reviewed Mar 13, 2026

View reviewed changes

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts Outdated Show resolved Hide resolved

[LEMS-3955/tangent-state-management] fix claude review comment

fa61e49

ivyolamit requested review from a team, SonicScrewdriver and handeyeco March 13, 2026 22:07

handeyeco reviewed Mar 16, 2026

View reviewed changes

handeyeco approved these changes Mar 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Interactive Graph] Add tangent graph state management and reducer#3353

[Interactive Graph] Add tangent graph state management and reducer#3353
ivyolamit wants to merge 3 commits intoLEMS-3955/tangent-kmathfrom
LEMS-3955/tangent-state-management

ivyolamit commented Mar 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 13, 2026 •

edited

Loading

Uh oh!

ivyolamit commented Mar 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 13, 2026 •

edited

Loading

Uh oh!

claude bot left a comment

Uh oh!

Uh oh!

handeyeco Mar 16, 2026

Uh oh!

handeyeco Mar 16, 2026

Uh oh!

handeyeco Mar 16, 2026

Uh oh!

handeyeco Mar 16, 2026

Uh oh!

handeyeco Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ivyolamit commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

References

Test plan:

Uh oh!

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

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

ivyolamit commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

npm Snapshot: Published

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Overview

Security risks

Level of scrutiny

Other factors

Uh oh!

Uh oh!

handeyeco Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

handeyeco Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

handeyeco Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

handeyeco Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

handeyeco Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ivyolamit commented Mar 13, 2026 •

edited

Loading

github-actions bot commented Mar 13, 2026 •

edited

Loading

github-actions bot commented Mar 13, 2026 •

edited

Loading

ivyolamit commented Mar 13, 2026 •

edited

Loading

github-actions bot commented Mar 13, 2026 •

edited

Loading

github-actions bot commented Mar 13, 2026 •

edited

Loading