Render visible point labels on interactive graphs#3749
Draft
EmiliaPalaghita wants to merge 9 commits into
Draft
Conversation
…nt labels on interactive graphs when the`perseus-enable-point-label-field` flag is on and the graph's`showPointLabels` field is true. Labels render via TeX in an HTML overlayso authors can include math (`$A$`, `$\theta$`, …) and stay outside theplotted region as a point is dragged toward an edge. Covers point,circle, angle, polygon, sinusoid, linear, linear-system, ray, andsegment in this release; remaining graph types follow in a per-graphseries. Existing content that sets `pointLabels` for screen-readerpurposes is unaffected — visible rendering requires both the flag and`showPointLabels: true`.
EmiliaPalaghita
changed the title
perseus-enable-point-label-field flag is on and the graph'sshowPointLabels field is true. Labels render via TeX in an HTML overlayso authors can include math ($A$, $\theta$, …) and stay outside theplotted region as a point is dragged toward an edge. Covers point,circle, angle, polygon, sinusoid, linear, linear-system, ray, andsegment in this release; remaining graph types follow in a per-graphseries. Existing content that sets pointLabels for screen-readerpurposes is unaffected — visible rendering requires both the flag andshowPointLabels: true.
EmiliaPalaghita
changed the title
github-actions
Bot
added
schema-change
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (4e64492) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3749If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3749If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3749 |
Contributor
|
Size Change: +1.5 kB (+0.29%) Total Size: 509 kB 📦 View Changed
ℹ️ View Unchanged
|
ivyolamit
reviewed
Jun 9, 2026
ivyolamit
left a comment
ivyolamit
left a comment
Contributor
There was a problem hiding this comment.
@EmiliaPalaghita I've done a first pass on your draft PR. I think the logic you have here make sense to me. I've added few suggestions, comments, and question. And I think what's not clear to me yet is how will khan migo access this? 🤔 from what you mentioned before it's something that will be used by khan migo, i'm also not super familiar with our api or how khan migo is calling our widgets atm.
Co-authored-by: Ivy Olamit <ivy@khanacademy.org>
Co-authored-by: Ivy Olamit <ivy@khanacademy.org>
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
Renders visible point labels on interactive graphs when
showPointLabels: trueis set on the graph JSON and theperseus-enable-point-label-fieldfeature flag is on.All graph types are covered with the exception of
vectorandnone.Schema and parser for
showPointLabelsalready shipped in #3725.The PR covers the following requirements:
perseus-enable-point-label-fieldKnown Issues
The label overlap is more technically complex and requires potential handling on each graph type. As a partial solution, this PR is moving the labels based on 2 conditions:
An attempt to a more appropriate solution will be attempted in a follow-up PR.
Storybook
The flag appears in the Storybook toolbar's "Feature Flags" dropdown automatically (the toolbar iterates
PerseusFeatureFlags). Two stories also pre-set the flag viaglobals: {featureFlags: ["perseus-enable-point-label-field"]}so they're useful out of the box without toolbar fiddling:PointWithVisibleLabelsandPolygonWithVisibleLabels.Test plan
pnpm tscpnpm lintpnpm testmovable-point-labels.test.tsmovable-point-labels-layer.test.tsxmafs-graph.test.tsxRelated
Issue: AITQ-385