[ Interactive Graph | Vector Graph ] PR5: Editor Support

[SonicScrewdriver]

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

[github-actions]

🗄️ Schema Change: No Changes ✅

[github-actions]

🛠️ Item Splitting: No Changes ✅

[github-actions]

Size Change: +179 B (+0.04%)

Total Size: 502 kB

📦 View Changed

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	103 kB	+179 B (+0.17%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	20.6 kB
packages/keypad-context/dist/es/index.js	1 kB
packages/kmath/dist/es/index.js	6.36 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	12 kB
packages/perseus-core/dist/es/index.js	25.2 kB
packages/perseus-linter/dist/es/index.js	9.42 kB
packages/perseus-score/dist/es/index.js	9.78 kB
packages/perseus-utils/dist/es/index.js	403 B
packages/perseus/dist/es/index.js	198 kB
packages/perseus/dist/es/strings.js	8.46 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]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (77c581a) 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

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

[ivyolamit]

@SonicScrewdriver overall PR looks good, i just have few non-blocking comments. Great work here! Editor looks good 👌🏼

[ivyolamit]

ooopppss I think not all new graph types has editor stories 🙈
let's create a follow-up tasks for it

[ivyolamit]

Not sure if there was a reason adding the Angle at the last, but can we rearrange this, looks weird Angle is at the bottom 😓

[SonicScrewdriver]

I agree! I wonder if we should have this be a separate ticket to discuss with content. My inclination is just to make everything alphabetical, but perhaps they would prefer a different order according to the graph types frequency of use?

[ivyolamit]

Just an observation, probably it's the intended behavior of Correct Answer section the coordinates will not show up at initial render. I noticed this in Absolute Value. But it would be nice to see the initial coordinates like other graphs. (See (5.000, 5.000) on the right.)

Initial	After Moving

[SonicScrewdriver]

Oh! Yeah I fully agree, I'll update this so that it's always visible.

[ivyolamit]

This is something I noticed when doing the POC yesterday in Matthew's interactive but not scored PR, the font of a label beside a dropdown is not consistent with the rest of the editor. I'm not sure if it was intentional, but in the POC i did made it consistent. I'll leave that up to you if you'll update that here, it's a trivial thing and not a blocker.

[SonicScrewdriver]

Oooo I'll look into this to make sure I've implemented it how we've set up the feature previously. I was pretty sure I copied this logic exactly from the Polygon Graph, but I could have missed something!

[ivyolamit]

The font in the info tip here looks smaller and not consistent styling with the screen reader tree.

Congruent	Screen reader tree

I can't pin point where it is defined in screen reader tree code, it looks the same how you implemented here <InfoTip> 🤔

[SonicScrewdriver]

I'm less inclined to worry about this if it's a deep dive, but I'll give it a quick look to see if I can notice anything different about my implementation! :)