Skip to content

[ Interactive Graph | Vector Graph ] PR5: Editor Support#3443

Draft
SonicScrewdriver wants to merge 2 commits intoLEMS-3971/vector-pr4from
LEMS-3971/vector-pr5
Draft

[ Interactive Graph | Vector Graph ] PR5: Editor Support#3443
SonicScrewdriver wants to merge 2 commits intoLEMS-3971/vector-pr4from
LEMS-3971/vector-pr5

Conversation

@SonicScrewdriver
Copy link
Copy Markdown
Contributor

@SonicScrewdriver SonicScrewdriver commented Apr 1, 2026

Summary

This PR was created with the help of AI, albeit with heavy oversight and review.

This is part of a series of PRs implementing the vector graph type for the Interactive Graph widget:

PR1 – type definitions and schema
PR2 – state management
PR3 – rendering & accessibility
PR4 – scoring
▶️ PR5 – editor support (this PR)

Issue: LEMS-3971

  • Surfaces the vector graph type in the content-creator UI. Once landed and the feature flag is enabled, content creators can author vector graph exercises.

Changes:

  • graph-type-selector.tsx — Adds "Vector" option to the graph type dropdown, gated behind interactive-graph-vector feature flag.
  • start-coords/types.ts — Adds {type: "vector"} to GraphTypesThatHaveStartCoords union.
  • start-coords/util.ts — Imports getVectorCoords and adds case "vector" in getDefaultGraphStartCoords.
  • start-coords/start-coords-settings.tsx — Adds case "vector" dispatching to <StartCoordsLine> (reuses the existing component since vector has the same CollinearTuple shape as ray/linear).
  • interactive-graph-question-builder.ts — Adds withVector() builder method and VectorGraphConfig class to the editor's test data builder.
  • testdata/interactive-graph.testdata.ts — Adds vectorMinimalQuestion test fixture for the editor story.
  • interactive-graph-editor.stories.tsx — Adds InteractiveGraphVector editor Storybook story.

Design decisions:

  • No editor validation for overlapping start coords — Consistent with ray, linear, and segment which also don't validate for overlapping points in the editor. The reducer already rejects moves that would cause overlap during interaction.
  • Reuses StartCoordsLine — Vector's CollinearTuple start coords shape matches ray/linear, so no custom start coords component is needed (unlike exponential which has an asymptote field).

Test plan:

  • pnpm tsc — no new type errors
  • pnpm lint — no lint errors
  • Verified in Storybook: editor correctly shows vector graph type when feature flag is enabled, start coords UI works
  • No existing tests regress

@SonicScrewdriver SonicScrewdriver self-assigned this Apr 1, 2026
@SonicScrewdriver SonicScrewdriver changed the title docs(changeset): Creation of new Vector Graph Editor [ Interactive Graph | Vector Graph ] PR5: Editor Support Apr 1, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 1, 2026

🗄️ Schema Change: No Changes ✅

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 1, 2026

🛠️ Item Splitting: No Changes ✅

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 1, 2026

Size Change: +61 B (+0.01%)

Total Size: 496 kB

Filename Size Change
packages/perseus-editor/dist/es/index.js 101 kB +61 B (+0.06%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 20.5 kB
packages/keypad-context/dist/es/index.js 1 kB
packages/kmath/dist/es/index.js 6.21 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.1 kB
packages/perseus-linter/dist/es/index.js 9.3 kB
packages/perseus-score/dist/es/index.js 9.69 kB
packages/perseus-utils/dist/es/index.js 403 B
packages/perseus/dist/es/index.js 194 kB
packages/perseus/dist/es/strings.js 8.28 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
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 1, 2026

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3443

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

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants