Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Locked labels] View locked labels in an Interactive Graph #1533

Merged
merged 5 commits into from
Aug 22, 2024

Conversation

nishasy
Copy link
Contributor

@nishasy nishasy commented Aug 20, 2024

Summary:

We want to be able to view a (standalone) locked label on an
Interactive Graph Widget.

  • Add "interctive-graph-locked-features-labels" feature flag
  • Create LockedLabelType
  • Create a layer for locked labels since they can't be part
    of the Mafs graph SVG (can't put TeX in an SVG)
  • Create a LockedLabel component to render the labels
  • Update the builder to support locked labels
  • Add locked labels to stories

Issue: https://khanacademy.atlassian.net/browse/LEMS-2268

Test plan:

yarn jest packages/perseus/src/widgets/__tests__/interactive-graph.test.tsx

Storybook

Screenshot 2024-08-20 at 4 08 28 PM

@nishasy nishasy self-assigned this Aug 20, 2024
Copy link
Contributor

github-actions bot commented Aug 20, 2024

Size Change: +476 B (+0.06%)

Total Size: 858 kB

Filename Size Change
packages/perseus-editor/dist/es/index.js 276 kB +92 B (+0.03%)
packages/perseus/dist/es/index.js 416 kB +384 B (+0.09%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 38.3 kB
packages/keypad-context/dist/es/index.js 760 B
packages/kmath/dist/es/index.js 4.27 kB
packages/math-input/dist/es/index.js 78 kB
packages/math-input/dist/es/strings.js 1.79 kB
packages/perseus-core/dist/es/index.js 1.48 kB
packages/perseus-linter/dist/es/index.js 22.2 kB
packages/perseus/dist/es/strings.js 3.31 kB
packages/pure-markdown/dist/es/index.js 3.67 kB
packages/simple-markdown/dist/es/index.js 12.4 kB

compressed-size-action

@nishasy nishasy requested review from benchristel, SonicScrewdriver and a team August 20, 2024 23:17
Copy link

codecov bot commented Aug 20, 2024

Codecov Report

Attention: Patch coverage is 89.56522% with 12 lines in your changes missing coverage. Please review.

Project coverage is 70.87%. Comparing base (0bf2711) to head (2fbb312).
Report is 1 commits behind head on main.

Files Patch % Lines
packages/perseus-editor/src/components/util.ts 30.00% 7 Missing ⚠️
...ts/graph-locked-figures/locked-figures-section.tsx 28.57% 5 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1533      +/-   ##
==========================================
+ Coverage   70.04%   70.87%   +0.82%     
==========================================
  Files         515      520       +5     
  Lines      106589   106736     +147     
  Branches     7711    11601    +3890     
==========================================
+ Hits        74659    75644     +985     
+ Misses      31746    31092     -654     
+ Partials      184        0     -184     

Impacted file tree graph

Files Coverage Δ
packages/perseus/src/index.ts 100.00% <100.00%> (ø)
packages/perseus/src/widgets/interactive-graph.tsx 50.83% <100.00%> (+0.61%) ⬆️
...s/interactive-graphs/graph-locked-labels-layer.tsx 100.00% <100.00%> (ø)
.../widgets/interactive-graphs/graph-locked-layer.tsx 91.46% <100.00%> (+0.67%) ⬆️
...ctive-graphs/interactive-graph-question-builder.ts 100.00% <100.00%> (ø)
...interactive-graphs/locked-figures/locked-label.tsx 100.00% <100.00%> (ø)
...seus/src/widgets/interactive-graphs/mafs-graph.tsx 99.55% <100.00%> (+0.01%) ⬆️
...widgets/interactive-graphs/stateful-mafs-graph.tsx 89.04% <100.00%> (+0.07%) ⬆️
...ts/graph-locked-figures/locked-figures-section.tsx 97.76% <28.57%> (-2.24%) ⬇️
packages/perseus-editor/src/components/util.ts 85.83% <30.00%> (-1.63%) ⬇️

... and 159 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0bf2711...2fbb312. Read the comment docs.

@nishasy nishasy marked this pull request as ready for review August 20, 2024 23:25
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/perseus for changes to .changeset/violet-worms-invite.md, packages/perseus/src/index.ts, packages/perseus/src/perseus-types.ts, packages/perseus/src/types.ts, packages/perseus/src/widgets/interactive-graph.tsx, packages/perseus-editor/src/__stories__/flags-for-api-options.ts, packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx, packages/perseus-editor/src/components/util.ts, packages/perseus/src/widgets/__stories__/interactive-graph.stories.tsx, packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts, packages/perseus/src/widgets/__tests__/interactive-graph.test.tsx, packages/perseus/src/widgets/interactive-graphs/graph-locked-labels-layer.tsx, packages/perseus/src/widgets/interactive-graphs/graph-locked-layer.tsx, packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts, packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts, packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx, packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.tsx, packages/perseus-editor/src/components/__tests__/util.test.ts, packages/perseus-editor/src/components/graph-locked-figures/locked-figures-section.tsx, packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-label.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

Copy link
Member

@benchristel benchristel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Comment on lines 13 to 21
const {range, width, height} = useGraphConfig();

const graphInfo: GraphDimensions = {
range,
width,
height,
};

const [x, y] = pointToPixel(coord, graphInfo);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can pass the result of useGraphConfig() directly to pointToPixel, and then you don't have to destructure and restructure the objects.

Suggested change
const {range, width, height} = useGraphConfig();
const graphInfo: GraphDimensions = {
range,
width,
height,
};
const [x, y] = pointToPixel(coord, graphInfo);
const [x, y] = pointToPixel(coord, useGraphConfig());

Copy link
Contributor

github-actions bot commented Aug 22, 2024

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1533

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1533

@nishasy nishasy merged commit cc1995d into main Aug 22, 2024
9 checks passed
@nishasy nishasy deleted the view-locked-label branch August 22, 2024 18:49
aemandine pushed a commit that referenced this pull request Aug 22, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.


# Releases
## @khanacademy/[email protected]

### Major Changes

-   [#1546](#1546) [`6cbe4947e`](6cbe494) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Release PhET widget

    This PR releases a new PhET simulation widget to Perseus that requires an
    update in order to allow the support of new, upcoming content. Older versions
    of Perseus will be unable to render content that contains this widget.

    PhET simulations come from <https://phet.colorado.edu/>.

### Minor Changes

-   [#1529](#1529) [`0bf2711c0`](0bf2711) Thanks [@nicolecomputer](https://github.com/nicolecomputer)! - Adds unlimited point graph


-   [#1542](#1542) [`a7fc2a3e3`](a7fc2a3) Thanks [@aemandine](https://github.com/aemandine)! - Design update for PhET widget


-   [#1512](#1512) [`4f24be79d`](4f24be7) Thanks [@aemandine](https://github.com/aemandine)! - Add PhET widget


-   [#1532](#1532) [`6e102f9c4`](6e102f9) Thanks [@aemandine](https://github.com/aemandine)! - Add a content editor for the PhET widget


-   [#1533](#1533) [`cc1995daf`](cc1995d) Thanks [@nishasy](https://github.com/nishasy)! - [Locked labels] View locked labels in an Interactive Graph

### Patch Changes

-   [#1539](#1539) [`7805626e1`](7805626) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Labels] Implement adding/editing/deleting a standalone locked label


-   [#1541](#1541) [`36471197c`](3647119) Thanks [@nicolecomputer](https://github.com/nicolecomputer)! - Adds a finite point question to dev gallery

## @khanacademy/[email protected]

### Major Changes

-   [#1546](#1546) [`6cbe4947e`](6cbe494) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Release PhET widget

    This PR releases a new PhET simulation widget to Perseus that requires an
    update in order to allow the support of new, upcoming content. Older versions
    of Perseus will be unable to render content that contains this widget.

    PhET simulations come from <https://phet.colorado.edu/>.

### Minor Changes

-   [#1539](#1539) [`7805626e1`](7805626) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Labels] Implement adding/editing/deleting a standalone locked label


-   [#1542](#1542) [`a7fc2a3e3`](a7fc2a3) Thanks [@aemandine](https://github.com/aemandine)! - Design update for PhET widget


-   [#1532](#1532) [`6e102f9c4`](6e102f9) Thanks [@aemandine](https://github.com/aemandine)! - Add a content editor for the PhET widget


-   [#1533](#1533) [`cc1995daf`](cc1995d) Thanks [@nishasy](https://github.com/nishasy)! - [Locked labels] View locked labels in an Interactive Graph

### Patch Changes

-   Updated dependencies \[[`7805626e1`](7805626), [`0bf2711c0`](0bf2711), [`a7fc2a3e3`](a7fc2a3), [`4f24be79d`](4f24be7), [`6cbe4947e`](6cbe494), [`36471197c`](3647119), [`6e102f9c4`](6e102f9), [`cc1995daf`](cc1995d)]:
    -   @khanacademy/[email protected]

## @khanacademy/[email protected]

### Patch Changes

-   [#1541](#1541) [`36471197c`](3647119) Thanks [@nicolecomputer](https://github.com/nicolecomputer)! - Adds a finite point question to dev gallery

Author: khan-actions-bot

Reviewers: aemandine, #perseus

Required Reviewers:

Approved By: aemandine

Checks: ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1544
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants