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] Implement adding/editing/deleting a standalone locked label #1539

Merged
merged 9 commits into from
Aug 22, 2024

Conversation

nishasy
Copy link
Contributor

@nishasy nishasy commented Aug 21, 2024

Summary:

We want to be able to add/edit/delete (standalone) locked labels on
the Interactive Graph widget.

  • Add locked-label-settings.tsx file for the UI
  • Add "label" to the locked figures dropdown
  • stories and tests

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

Test plan:

  • yarn jest packages/perseus-editor/src/components/__tests__/locked-label-settings.test.tsx

Storybook

Screenshot 2024-08-21 at 11 15 11 AM
Screen.Recording.2024-08-21.at.11.16.19.AM.mov

@nishasy nishasy self-assigned this Aug 21, 2024
@nishasy nishasy requested review from mark-fitzgerald, benchristel and a team August 21, 2024 18:25
Copy link
Contributor

github-actions bot commented Aug 21, 2024

Size Change: +470 B (+0.05%)

Total Size: 858 kB

Filename Size Change
packages/perseus-editor/dist/es/index.js 277 kB +470 B (+0.17%)
ℹ️ 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/index.js 416 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 marked this pull request as ready for review August 21, 2024 18:29
@khan-actions-bot
Copy link
Contributor

khan-actions-bot commented Aug 21, 2024

Gerald

Required Reviewers
  • @Khan/perseus for changes to .changeset/angry-hounds-lick.md, packages/perseus-editor/src/widgets/interactive-graph-editor.tsx, packages/perseus-editor/src/components/__stories__/locked-label-settings.stories.tsx, packages/perseus-editor/src/components/__tests__/locked-function-settings.test.tsx, packages/perseus-editor/src/components/__tests__/locked-label-settings.test.tsx, packages/perseus-editor/src/components/graph-locked-figures/locked-figure-select.tsx, packages/perseus-editor/src/components/graph-locked-figures/locked-figure-settings.tsx, packages/perseus-editor/src/components/graph-locked-figures/locked-figures-section.tsx, packages/perseus-editor/src/components/graph-locked-figures/locked-label-settings.tsx

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

Copy link

codecov bot commented Aug 21, 2024

Codecov Report

Attention: Patch coverage is 98.00995% with 4 lines in your changes missing coverage. Please review.

Project coverage is 71.05%. Comparing base (cc1995d) to head (388a690).
Report is 1 commits behind head on main.

Files Patch % Lines
...ts/graph-locked-figures/locked-figure-settings.tsx 66.66% 4 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1539      +/-   ##
==========================================
+ Coverage   70.20%   71.05%   +0.84%     
==========================================
  Files         517      521       +4     
  Lines      106703   106933     +230     
  Branches     5445    10971    +5526     
==========================================
+ Hits        74912    75982    +1070     
+ Misses      31675    30951     -724     
+ Partials      116        0     -116     

Impacted file tree graph

Files Coverage Δ
...ents/graph-locked-figures/locked-figure-select.tsx 100.00% <100.00%> (ø)
...ts/graph-locked-figures/locked-figures-section.tsx 97.82% <100.00%> (+0.05%) ⬆️
...nts/graph-locked-figures/locked-label-settings.tsx 100.00% <100.00%> (ø)
...us-editor/src/widgets/interactive-graph-editor.tsx 91.48% <100.00%> (+0.05%) ⬆️
...ts/graph-locked-figures/locked-figure-settings.tsx 91.66% <66.66%> (-3.58%) ⬇️

... and 111 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 cc1995d...388a690. Read the comment docs.

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! Left a couple minor suggestions inline.

Comment on lines 136 to 139
expect(onChangeProps).toHaveBeenCalledTimes(2);
// Calls are not being accumulated because they're mocked.
expect(onChangeProps).toHaveBeenNthCalledWith(1, {coord: [1, 0]});
expect(onChangeProps).toHaveBeenNthCalledWith(2, {coord: [0, 2]});
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 make these assertions with a single expect call by doing:

expect(onChangeProps.mock.calls).toEqual([
  [{coord: [1, 0]}],
  [{coord: [0, 2]}],
]);

await userEvent.type(textInput, "x^2");

// Assert
// Assert
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
// Assert

};

export default function LockedLabelSettings(props: Props) {
const {coord, color, size, text, onChangeProps} = props;
Copy link
Member

Choose a reason for hiding this comment

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

Why destructure some of the props here, but not expanded or onToggle?

Label ({coord[0]}, {coord[1]})
</LabelLarge>
<Strut size={spacing.xSmall_8} />
{text !== "" && (
Copy link
Member

Choose a reason for hiding this comment

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

Does something break if we render a LabelLarge with blank text? Or is it just bad for accessibility?

I wonder if we should default text to something like (empty) for display purposes, to keep the UI consistent.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It just shows a little white circle because of the padding. It doesn't really matter, but it looked weird.

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 (388a690) and published it to npm. You
can install it using the tag PR1539.

Example:

yarn add @khanacademy/perseus@PR1539

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

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

@nishasy nishasy changed the base branch from view-locked-label to main August 22, 2024 18:49
@nishasy nishasy merged commit 7805626 into main Aug 22, 2024
9 checks passed
@nishasy nishasy deleted the add-locked-label branch August 22, 2024 19:12
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