[Interactive Graph] POC Add tangent graph in Interactive Graph widget#3311
Closed
[Interactive Graph] POC Add tangent graph in Interactive Graph widget#3311
Conversation
github-actions
bot
added
the
schema-change
Contributor
🗄️ Schema Change: Changes Detected
|
Contributor
|
Size Change: +1.2 kB (+0.25%) Total Size: 487 kB
ℹ️ View Unchanged
|
Contributor
🛠️ Item Splitting: Changes Detected
|
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (94f2efe) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3311If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3311If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3311 |
Contributor
Author
|
Screenshot: 
|
ivyolamit
commented
Mar 6, 2026
| @@ -0,0 +1,9 @@ | |||
| --- | |||
| "@khanacademy/kmath": minor | |||
| "@khanacademy/perseus": minor | |||
Contributor
Author
There was a problem hiding this comment.
the changes should be considered as major since this is adding a new feature supporting the tangent graph as a new answer type in the interactive graph widget.
ivyolamit
commented
Mar 6, 2026
| coeffRef.current = coeffs; | ||
| } | ||
|
|
||
| // WORKAROUND for Mafs discontinuity rendering — see getPlotSegments(). |
Contributor
Author
There was a problem hiding this comment.
Suggested change
| // WORKAROUND for Mafs discontinuity rendering — see getPlotSegments(). | |
| // TODO: LEMS-2262 WORKAROUND for Mafs discontinuity rendering — see getPlotSegments(). |
ivyolamit
commented
Mar 6, 2026
| return asymptotes.sort((a, b) => a - b); | ||
| } | ||
|
|
||
| // WORKAROUND: Mafs Plot.OfX renders a single SVG <path> and skips |
Contributor
Author
There was a problem hiding this comment.
Suggested change
| // WORKAROUND: Mafs Plot.OfX renders a single SVG <path> and skips | |
| // TODO: LEMS-2262: Mafs Plot.OfX renders a single SVG <path> and skips |
ivyolamit
force-pushed
the
LEMS-3937/poc-interactive-tangent-graph
branch
from
fe4d463 to
797956e
Compare
… tangent graph in Interactive Graph widget
…t graph in Interactive Graph
…karound comment for Mafs discontinuity rendering Add upstream issue link and removal instructions for the tangent graph asymptote workaround.
ivyolamit
force-pushed
the
LEMS-3937/poc-interactive-tangent-graph
branch
from
797956e to
6e75ff6
Compare
This was referenced Mar 13, 2026
ivyolamit
added a commit
that referenced
this pull request
Mar 17, 2026
#3345) ## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1.▶️ [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) This is the first PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3955). It establishes the type foundation with zero runtime behavior change. The feature flag (`interactive-graph-tangent`) is added in #3344. --- - Adds `PerseusGraphTypeTangent` and `TangentGraphCorrect` types to the data schema, following the sinusoid pattern - Adds the JSON parser for the tangent graph type (`parsePerseusGraphTypeTangent`) - Defines `TangentGraphState` interface (not yet exported or added to the `InteractiveGraphState` union — deferred to a later PR when reducer handlers are implemented) - Adds `generateIGTangentGraph()` test data generator with unit tests - Adds placeholder `case "tangent"` branches in all exhaustiveness switches affected by the new `PerseusGraphType` union member <details> <summary>Implementation notes</summary> Adding `PerseusGraphTypeTangent` to the `PerseusGraphType` union triggers `UnreachableCaseError` in several switch statements. Placeholder cases were added to keep the build green: - `interactive-graph-editor.tsx` — graph merging - `start-coords/util.ts` — `shouldShowStartCoordsUI` returns `false` for tangent (downstream components `StartCoordsSettingsInner` and `getDefaultGraphStartCoords` don't handle tangent yet — returning `true` would show an empty section with a broken reset button) - `interactive-graph-ai-utils.ts` — `getGraphOptionsForProps` + `getUserInput` - `interactive-graph.tsx` — `getEquationString` (returns `""`) - `initialize-graph-state.ts` — returns `type: "none"` These placeholders will be replaced with real implementations in subsequent PRs. `TangentGraphState` is intentionally **not exported** and **not added to the `InteractiveGraphState` union** in this PR. That union has its own set of exhaustiveness checks (`renderGraphElements`, `mafsStateToInteractiveGraph`, `getGradableGraph`), and adding to it requires reducer handlers to exist first. This happens in PR 3. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 - [ ] Generator tests pass (`generateIGTangentGraph` default + all props) Author: ivyolamit Reviewers: ivyolamit, claude[bot], handeyeco, SonicScrewdriver Required Reviewers: Approved By: handeyeco Checks: ✅ 10 checks were successful, ⏭️ 1 check has been skipped Pull Request URL: #3345
ivyolamit
added a commit
that referenced
this pull request
Mar 19, 2026
## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2.▶️ [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) This is the second PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3955). It adds the pure math layer with no UI dependencies. --- Added the tangent math utilities to kmath for supporting Tangent graph in Interactive Graph - Adds `getTangentCoefficients()` to extract `[a, b, c, d]` from two control points for `f(x) = a * tan(b*x - c) + d` - Adds `canonicalTangentCoefficients()` to normalize coefficients for scoring comparison (guarantees `b > 0`, phase in `[0, π)`) - Adds `TangentCoefficient` and `NamedTangentCoefficient` types - 13 new tests covering coefficient extraction and canonical normalization edge cases <details> <summary>Implementation notes</summary> **Canonical normalization differs from the legacy Grapher widget version.** The legacy `canonicalTangentCoefficients` in `grapher-util.ts` guarantees both `a > 0` and `b > 0` using a `phase += π/2` step. However, this is mathematically incorrect for tangent — `tan(x + π/2) = -cot(x)`, not `-tan(x)`. The legacy version still works because its `areEqual` applies the same normalization to both sides, so the error cancels out. Our version only guarantees `b > 0`, using the odd function identity `tan(-x) = -tan(x)`: - If `b < 0`: flip signs of `a`, `b`, and `c` - Normalize `c` to `[0, π)` We intentionally do **not** replace the legacy version to avoid changing scoring behavior for existing Grapher tangent exercises. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 - [ ] `canonicalTangentCoefficients` tests pass (negative b, phase normalization, equivalent curves, preserved negative amplitude) - [ ] `getTangentCoefficients` tests pass (basic, vertical offset, phase shift, negative amplitude, negative angular frequency) ## Test plan: Author: ivyolamit Reviewers: claude[bot], ivyolamit, handeyeco, SonicScrewdriver Required Reviewers: Approved By: SonicScrewdriver Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3347
ivyolamit
added a commit
that referenced
this pull request
Mar 19, 2026
…3353) ## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3.▶️ [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) 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 <details> <summary>Implementation notes</summary> **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. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 Author: ivyolamit Reviewers: claude[bot], handeyeco, ivyolamit, SonicScrewdriver Required Reviewers: Approved By: handeyeco Checks: ✅ 10 checks were successful, ⏭️ 1 check has been skipped Pull Request URL: #3353
ivyolamit
added a commit
that referenced
this pull request
Mar 19, 2026
…tion string (#3354) ## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4.▶️ [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) This is the fourth PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3955). It adds the rendering layer — the Mafs component, accessibility strings, equation string generation, and Storybook coverage. --- Created the tangent graph visual component, add Storybook coverage, SR strings, and equation string for supporting Tangent graph in Interactive Graph. - Adds the tangent graph visual component (`tangent.tsx`) with `renderTangentGraph()`, `computeTangent()`, keyboard constraints, and screen reader descriptions - Adds 5 screen reader strings for tangent graph accessibility (`srTangentGraph`, `srTangentInflectionPoint`, `srTangentSecondPoint`, `srTangentDescription`, `srTangentInteractiveElements`) - Replaces the `mafs-graph.tsx` placeholder with real `renderTangentGraph()` call - Replaces the `interactive-graph.tsx` equation string placeholder with `getTangentEquationString()` - Adds Tangent Storybook story - 7 new tests for the tangent graph component <details> <summary>Implementation notes</summary> **Tangent component follows the sinusoid pattern.** `tangent.tsx` mirrors `sinusoid.tsx` structurally: two movable control points, coefficient calculation with a ref-based fallback for invalid states, and the same keyboard constraint logic that prevents same-x points. **Asymptote handling (vertical line bug fix).** Mafs `Plot.OfX` renders a single SVG `<path>` that draws vertical lines across discontinuities at asymptotes. To fix this, the tangent curve is split into segments between asymptotes: - `getAsymptotePositions()` computes asymptote x-positions within the visible range: `x = (c + π/2 + nπ) / b` - `getPlotSegments()` splits the x-range into segments between asymptotes with a small epsilon margin (0.01) - Each segment is rendered as a separate `Plot.OfX` with a `domain` prop, so Mafs never draws across a discontinuity - `computeTangent()` also returns NaN near asymptotes as a defensive backup. The proximity formula was corrected from the POC — the POC's `((arg / Math.PI + 0.5) % 1) - 0.5` measures distance from zero crossings (inflection points), not asymptotes. The corrected formula `((arg - Math.PI/2) / Math.PI) % 1` correctly targets asymptotes at `arg = π/2 + nπ`. - This approach was validated in the POC (commit 204f3f2) **Two `getTangentCoefficients` functions exist.** The one in `tangent.tsx` returns `NamedTangentCoefficient | undefined` (named object with `undefined` fallback for same-x points) for rendering use. The one in `kmath/coefficients.ts` returns `TangentCoefficient` (numeric tuple, returns `Infinity` for same-x) for scoring use. The UI prevents the same-x case via the reducer's same-x guard, so the difference only matters as a defensive measure. **Screen reader descriptions.** The tangent graph uses "inflection point" for the first control point (where the curve crosses the midline) and "control point" for the second point (a quarter-period away). This differs from sinusoid which uses "midline intersection" and "maximum/minimum point" — tangent doesn't have a meaningful max/min since it approaches ±∞. **Equation string.** `getTangentEquationString()` formats `y = a*tan(b*x - c) + d` using the same pattern as `getSinusoidEquationString()` but using `getTangentCoefficients` from kmath. **No feature flag gate in rendering.** The tangent graph renders unconditionally once the graph type is set to "tangent". The feature flag gate is in the editor (PR 6), which controls whether content creators can select "tangent" as a graph type. This follows the existing pattern — no other graph types check feature flags at render time. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 - [ ] SR tests pass (aria labels for graph, inflection point, control point, description, interactive elements) - [ ] Coefficient calculation test passes - [ ] Tangent computation test passes - [ ] Invalid coefficient test passes (same-x returns undefined) - [ ] Keyboard constraint test passes (avoids same-x) - [ ] Tangent story renders in Storybook (`pnpm storybook`) Author: ivyolamit Reviewers: claude[bot], ivyolamit, handeyeco, SonicScrewdriver Required Reviewers: Approved By: handeyeco Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3354
ivyolamit
added a commit
that referenced
this pull request
Mar 19, 2026
## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5.▶️ [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) This is the fifth PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3955). It adds the scoring layer — the final piece needed for tangent exercises to be fully functional (behind the feature flag). --- Add tangent graph scoring to support the Tangent graph in Interactive Graph - Adds tangent scoring to `scoreInteractiveGraph()` using `getTangentCoefficients` and `canonicalTangentCoefficients` from kmath - Follows the sinusoid scoring pattern: extract coefficients from both guess and rubric, canonicalize, then compare - 6 new tests covering invalid input, correct/incorrect answers, equivalent curves, and negative amplitude <details> <summary>Implementation notes</summary> **Scoring follows the sinusoid pattern exactly.** The tangent scoring block extracts coefficients from both the user's guess and the rubric's correct answer using `getTangentCoefficients()` (from kmath), canonicalizes both with `canonicalTangentCoefficients()`, and compares with `approximateDeepEqual()`. This handles equivalent curves that use different control points (e.g., shifted by a full period). **Uses kmath's `canonicalTangentCoefficients`, NOT the legacy grapher-util version.** The kmath version (PR 2) only guarantees `b > 0`, which is mathematically correct for tangent. The legacy version guarantees both `a > 0` and `b > 0` using a mathematically incorrect phase shift. See PR 2 implementation notes for details. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 - [ ] Invalid input tests pass (undefined guess, missing coords) - [ ] Correct answer test passes - [ ] Incorrect answer test passes - [ ] Equivalent curves test passes (period-shifted control points) - [ ] Negative amplitude test passes Author: ivyolamit Reviewers: claude[bot], handeyeco, SonicScrewdriver Required Reviewers: Approved By: handeyeco Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3356
ivyolamit
added a commit
that referenced
this pull request
Mar 19, 2026
… Editor (#3358) ## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6.▶️ [Editor — Add tangent to answer type](#3358) This is the sixth and final PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3956). It adds editor support so content creators can create tangent exercises. --- Add tangent graph option in the Interactive Graph Editor - Adds tangent as a selectable graph type in the editor, gated by the `interactive-graph-tangent` feature flag - Adds `StartCoordsTangent` component for configuring tangent start coordinates (inflection point + quarter-period point) - Adds tangent equation display in the start coordinates editor section - Exports `getTangentCoords()` from perseus for use by the editor's start-coords utilities - 0 new tests (existing parameterized tests cover the new code paths) <details> <summary>Implementation notes</summary> **Feature flag gating.** The tangent `OptionItem` in `GraphTypeSelector` only renders when `isFeatureOn("interactive-graph-tangent")` is true. This is the only place the feature flag is checked — once a tangent graph type is persisted in content JSON, it renders and scores regardless of the flag. This follows the pattern used by other gated features (e.g., `image-widget-upgrade-scale`). **`apiOptions` prop threading.** `GraphTypeSelector` needed access to `apiOptions` for `isFeatureOn`. Added `apiOptions` as an optional prop and threaded it from `InteractiveGraphEditor`. **`getTangentCoords()` export.** This function was internal to `initialize-graph-state.ts` (as noted in PR 3's plan). Now exported and re-exported from perseus index, used by `getDefaultGraphStartCoords` and `StartCoordsSettingsInner` in the editor. **`StartCoordsTangent` mirrors `StartCoordsSinusoid` exactly.** Two coordinate pair inputs (Point 1 / Point 2) and an equation display using `getTangentEquation()`. The equation helper follows the same pattern as `getSinusoidEquation()`. **`shouldShowStartCoordsUI` flipped.** Changed from `false` (set in PR 1 as a placeholder) to `true` for tangent, now that `StartCoordsSettingsInner` and `getDefaultGraphStartCoords` both handle the tangent type. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 Co-Authored by Claude Code (Opus) Issue: LEMS-3956 ## Test plan: - [ ] `pnpm tsc` — no type errors - [ ] `pnpm lint` — no lint errors - [ ] `pnpm prettier . --check` — formatting clean - [ ] `pnpm knip` — no unused exports - [ ] Tangent option appears in graph type dropdown when feature flag is on - [ ] Tangent option does NOT appear when feature flag is off - [ ] Start coordinates section appears for tangent graph type - [ ] Start coordinates reset button works for tangent - [ ] Tangent equation updates when start coordinates change - [ ] Existing editor tests pass (422 tests) Author: ivyolamit Reviewers: claude[bot], ivyolamit, handeyeco, SonicScrewdriver Required Reviewers: Approved By: SonicScrewdriver Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3358
catandthemachines
pushed a commit
that referenced
this pull request
Apr 1, 2026
#3345) ## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1.▶️ [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) This is the first PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3955). It establishes the type foundation with zero runtime behavior change. The feature flag (`interactive-graph-tangent`) is added in #3344. --- - Adds `PerseusGraphTypeTangent` and `TangentGraphCorrect` types to the data schema, following the sinusoid pattern - Adds the JSON parser for the tangent graph type (`parsePerseusGraphTypeTangent`) - Defines `TangentGraphState` interface (not yet exported or added to the `InteractiveGraphState` union — deferred to a later PR when reducer handlers are implemented) - Adds `generateIGTangentGraph()` test data generator with unit tests - Adds placeholder `case "tangent"` branches in all exhaustiveness switches affected by the new `PerseusGraphType` union member <details> <summary>Implementation notes</summary> Adding `PerseusGraphTypeTangent` to the `PerseusGraphType` union triggers `UnreachableCaseError` in several switch statements. Placeholder cases were added to keep the build green: - `interactive-graph-editor.tsx` — graph merging - `start-coords/util.ts` — `shouldShowStartCoordsUI` returns `false` for tangent (downstream components `StartCoordsSettingsInner` and `getDefaultGraphStartCoords` don't handle tangent yet — returning `true` would show an empty section with a broken reset button) - `interactive-graph-ai-utils.ts` — `getGraphOptionsForProps` + `getUserInput` - `interactive-graph.tsx` — `getEquationString` (returns `""`) - `initialize-graph-state.ts` — returns `type: "none"` These placeholders will be replaced with real implementations in subsequent PRs. `TangentGraphState` is intentionally **not exported** and **not added to the `InteractiveGraphState` union** in this PR. That union has its own set of exhaustiveness checks (`renderGraphElements`, `mafsStateToInteractiveGraph`, `getGradableGraph`), and adding to it requires reducer handlers to exist first. This happens in PR 3. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 - [ ] Generator tests pass (`generateIGTangentGraph` default + all props) Author: ivyolamit Reviewers: ivyolamit, claude[bot], handeyeco, SonicScrewdriver Required Reviewers: Approved By: handeyeco Checks: ✅ 10 checks were successful, ⏭️ 1 check has been skipped Pull Request URL: #3345
catandthemachines
pushed a commit
that referenced
this pull request
Apr 1, 2026
## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2.▶️ [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) This is the second PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3955). It adds the pure math layer with no UI dependencies. --- Added the tangent math utilities to kmath for supporting Tangent graph in Interactive Graph - Adds `getTangentCoefficients()` to extract `[a, b, c, d]` from two control points for `f(x) = a * tan(b*x - c) + d` - Adds `canonicalTangentCoefficients()` to normalize coefficients for scoring comparison (guarantees `b > 0`, phase in `[0, π)`) - Adds `TangentCoefficient` and `NamedTangentCoefficient` types - 13 new tests covering coefficient extraction and canonical normalization edge cases <details> <summary>Implementation notes</summary> **Canonical normalization differs from the legacy Grapher widget version.** The legacy `canonicalTangentCoefficients` in `grapher-util.ts` guarantees both `a > 0` and `b > 0` using a `phase += π/2` step. However, this is mathematically incorrect for tangent — `tan(x + π/2) = -cot(x)`, not `-tan(x)`. The legacy version still works because its `areEqual` applies the same normalization to both sides, so the error cancels out. Our version only guarantees `b > 0`, using the odd function identity `tan(-x) = -tan(x)`: - If `b < 0`: flip signs of `a`, `b`, and `c` - Normalize `c` to `[0, π)` We intentionally do **not** replace the legacy version to avoid changing scoring behavior for existing Grapher tangent exercises. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 - [ ] `canonicalTangentCoefficients` tests pass (negative b, phase normalization, equivalent curves, preserved negative amplitude) - [ ] `getTangentCoefficients` tests pass (basic, vertical offset, phase shift, negative amplitude, negative angular frequency) ## Test plan: Author: ivyolamit Reviewers: claude[bot], ivyolamit, handeyeco, SonicScrewdriver Required Reviewers: Approved By: SonicScrewdriver Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3347
catandthemachines
pushed a commit
that referenced
this pull request
Apr 1, 2026
…3353) ## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3.▶️ [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) 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 <details> <summary>Implementation notes</summary> **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. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 Author: ivyolamit Reviewers: claude[bot], handeyeco, ivyolamit, SonicScrewdriver Required Reviewers: Approved By: handeyeco Checks: ✅ 10 checks were successful, ⏭️ 1 check has been skipped Pull Request URL: #3353
catandthemachines
pushed a commit
that referenced
this pull request
Apr 1, 2026
…tion string (#3354) ## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4.▶️ [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) This is the fourth PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3955). It adds the rendering layer — the Mafs component, accessibility strings, equation string generation, and Storybook coverage. --- Created the tangent graph visual component, add Storybook coverage, SR strings, and equation string for supporting Tangent graph in Interactive Graph. - Adds the tangent graph visual component (`tangent.tsx`) with `renderTangentGraph()`, `computeTangent()`, keyboard constraints, and screen reader descriptions - Adds 5 screen reader strings for tangent graph accessibility (`srTangentGraph`, `srTangentInflectionPoint`, `srTangentSecondPoint`, `srTangentDescription`, `srTangentInteractiveElements`) - Replaces the `mafs-graph.tsx` placeholder with real `renderTangentGraph()` call - Replaces the `interactive-graph.tsx` equation string placeholder with `getTangentEquationString()` - Adds Tangent Storybook story - 7 new tests for the tangent graph component <details> <summary>Implementation notes</summary> **Tangent component follows the sinusoid pattern.** `tangent.tsx` mirrors `sinusoid.tsx` structurally: two movable control points, coefficient calculation with a ref-based fallback for invalid states, and the same keyboard constraint logic that prevents same-x points. **Asymptote handling (vertical line bug fix).** Mafs `Plot.OfX` renders a single SVG `<path>` that draws vertical lines across discontinuities at asymptotes. To fix this, the tangent curve is split into segments between asymptotes: - `getAsymptotePositions()` computes asymptote x-positions within the visible range: `x = (c + π/2 + nπ) / b` - `getPlotSegments()` splits the x-range into segments between asymptotes with a small epsilon margin (0.01) - Each segment is rendered as a separate `Plot.OfX` with a `domain` prop, so Mafs never draws across a discontinuity - `computeTangent()` also returns NaN near asymptotes as a defensive backup. The proximity formula was corrected from the POC — the POC's `((arg / Math.PI + 0.5) % 1) - 0.5` measures distance from zero crossings (inflection points), not asymptotes. The corrected formula `((arg - Math.PI/2) / Math.PI) % 1` correctly targets asymptotes at `arg = π/2 + nπ`. - This approach was validated in the POC (commit 204f3f2) **Two `getTangentCoefficients` functions exist.** The one in `tangent.tsx` returns `NamedTangentCoefficient | undefined` (named object with `undefined` fallback for same-x points) for rendering use. The one in `kmath/coefficients.ts` returns `TangentCoefficient` (numeric tuple, returns `Infinity` for same-x) for scoring use. The UI prevents the same-x case via the reducer's same-x guard, so the difference only matters as a defensive measure. **Screen reader descriptions.** The tangent graph uses "inflection point" for the first control point (where the curve crosses the midline) and "control point" for the second point (a quarter-period away). This differs from sinusoid which uses "midline intersection" and "maximum/minimum point" — tangent doesn't have a meaningful max/min since it approaches ±∞. **Equation string.** `getTangentEquationString()` formats `y = a*tan(b*x - c) + d` using the same pattern as `getSinusoidEquationString()` but using `getTangentCoefficients` from kmath. **No feature flag gate in rendering.** The tangent graph renders unconditionally once the graph type is set to "tangent". The feature flag gate is in the editor (PR 6), which controls whether content creators can select "tangent" as a graph type. This follows the existing pattern — no other graph types check feature flags at render time. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 - [ ] SR tests pass (aria labels for graph, inflection point, control point, description, interactive elements) - [ ] Coefficient calculation test passes - [ ] Tangent computation test passes - [ ] Invalid coefficient test passes (same-x returns undefined) - [ ] Keyboard constraint test passes (avoids same-x) - [ ] Tangent story renders in Storybook (`pnpm storybook`) Author: ivyolamit Reviewers: claude[bot], ivyolamit, handeyeco, SonicScrewdriver Required Reviewers: Approved By: handeyeco Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3354
catandthemachines
pushed a commit
that referenced
this pull request
Apr 1, 2026
## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5.▶️ [Scoring — Add tangent scoring to the scoring package](#3356) 6. [Editor — Add tangent to answer type](#3358) This is the fifth PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3955). It adds the scoring layer — the final piece needed for tangent exercises to be fully functional (behind the feature flag). --- Add tangent graph scoring to support the Tangent graph in Interactive Graph - Adds tangent scoring to `scoreInteractiveGraph()` using `getTangentCoefficients` and `canonicalTangentCoefficients` from kmath - Follows the sinusoid scoring pattern: extract coefficients from both guess and rubric, canonicalize, then compare - 6 new tests covering invalid input, correct/incorrect answers, equivalent curves, and negative amplitude <details> <summary>Implementation notes</summary> **Scoring follows the sinusoid pattern exactly.** The tangent scoring block extracts coefficients from both the user's guess and the rubric's correct answer using `getTangentCoefficients()` (from kmath), canonicalizes both with `canonicalTangentCoefficients()`, and compares with `approximateDeepEqual()`. This handles equivalent curves that use different control points (e.g., shifted by a full period). **Uses kmath's `canonicalTangentCoefficients`, NOT the legacy grapher-util version.** The kmath version (PR 2) only guarantees `b > 0`, which is mathematically correct for tangent. The legacy version guarantees both `a > 0` and `b > 0` using a mathematically incorrect phase shift. See PR 2 implementation notes for details. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 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 - [ ] Invalid input tests pass (undefined guess, missing coords) - [ ] Correct answer test passes - [ ] Incorrect answer test passes - [ ] Equivalent curves test passes (period-shifted control points) - [ ] Negative amplitude test passes Author: ivyolamit Reviewers: claude[bot], handeyeco, SonicScrewdriver Required Reviewers: Approved By: handeyeco Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3356
catandthemachines
pushed a commit
that referenced
this pull request
Apr 1, 2026
… Editor (#3358) ## Summary: PR series to add tangent graph support to the Interactive Graph widget: 1. [Foundation — Add tangent graph type definitions and data schema](#3345) 2. [Math layer — Add tangent math utilities to kmath](#3347) 3. [State management — Reducer, actions, initialization, and test data](#3353) 4. [Rendering — The tangent graph component, Storybook story, and AI utils](#3354) 5. [Scoring — Add tangent scoring to the scoring package](#3356) 6.▶️ [Editor — Add tangent to answer type](#3358) This is the sixth and final PR in a series to add tangent graph support to the Interactive Graph widget (LEMS-3956). It adds editor support so content creators can create tangent exercises. --- Add tangent graph option in the Interactive Graph Editor - Adds tangent as a selectable graph type in the editor, gated by the `interactive-graph-tangent` feature flag - Adds `StartCoordsTangent` component for configuring tangent start coordinates (inflection point + quarter-period point) - Adds tangent equation display in the start coordinates editor section - Exports `getTangentCoords()` from perseus for use by the editor's start-coords utilities - 0 new tests (existing parameterized tests cover the new code paths) <details> <summary>Implementation notes</summary> **Feature flag gating.** The tangent `OptionItem` in `GraphTypeSelector` only renders when `isFeatureOn("interactive-graph-tangent")` is true. This is the only place the feature flag is checked — once a tangent graph type is persisted in content JSON, it renders and scores regardless of the flag. This follows the pattern used by other gated features (e.g., `image-widget-upgrade-scale`). **`apiOptions` prop threading.** `GraphTypeSelector` needed access to `apiOptions` for `isFeatureOn`. Added `apiOptions` as an optional prop and threaded it from `InteractiveGraphEditor`. **`getTangentCoords()` export.** This function was internal to `initialize-graph-state.ts` (as noted in PR 3's plan). Now exported and re-exported from perseus index, used by `getDefaultGraphStartCoords` and `StartCoordsSettingsInner` in the editor. **`StartCoordsTangent` mirrors `StartCoordsSinusoid` exactly.** Two coordinate pair inputs (Point 1 / Point 2) and an equation display using `getTangentEquation()`. The equation helper follows the same pattern as `getSinusoidEquation()`. **`shouldShowStartCoordsUI` flipped.** Changed from `false` (set in PR 1 as a placeholder) to `true` for tangent, now that `StartCoordsSettingsInner` and `getDefaultGraphStartCoords` both handle the tangent type. </details> ### References - [Tangent Notes](https://github.com/Khan/perseus/blob/main/packages/perseus/src/widgets/interactive-graphs/__docs__/notes/tangent.md) - POC: #3311 Co-Authored by Claude Code (Opus) Issue: LEMS-3956 ## Test plan: - [ ] `pnpm tsc` — no type errors - [ ] `pnpm lint` — no lint errors - [ ] `pnpm prettier . --check` — formatting clean - [ ] `pnpm knip` — no unused exports - [ ] Tangent option appears in graph type dropdown when feature flag is on - [ ] Tangent option does NOT appear when feature flag is off - [ ] Start coordinates section appears for tangent graph type - [ ] Start coordinates reset button works for tangent - [ ] Tangent equation updates when start coordinates change - [ ] Existing editor tests pass (422 tests) Author: ivyolamit Reviewers: claude[bot], ivyolamit, handeyeco, SonicScrewdriver Required Reviewers: Approved By: SonicScrewdriver Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3358
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
POC Add tangent graph in Interactive Graph widget
This adds the tangent graph (f(x) = a·tan(bx - c) + d) as a new answer type in the Interactive Graph widget, bringing it from the legacy Grapher widget into the modern Mafs-based rendering system.
Solution approach
Coefficient derivation from two control points:
The tangent curve is defined by two interactive points. Given points P1 and P2:
Asymptote handling:
Tangent functions have vertical asymptotes where tan() is undefined. Mafs Plot.OfX renders a single continuous SVG path, so naively plotting tan(x) produces vertical lines connecting +∞ to -∞. The solution:
Scoring:
Uses canonical coefficient normalization (ensuring a > 0, b > 0, c ∈ [0, π)) to compare student answers with the correct answer, matching the pattern used by sinusoid scoring.
Packages changed
Test Plan
Issue: LEMS-3937
Co-Authored by Claude (Opus)