Show Arrowheads on Locked Lines #1229

mark-fitzgerald · 2024-04-26T20:00:58Z

Summary:

Arrowheads on locked lines apply only to rays and lines, not line segments. Previously, showing arrows was an option that could be turned "off" on a per-line basis. After reviewing the use cases for locked features, it was determined that this option should not exist - lines and rays should always have arrowheads.

Issue: LEMS-1929

Test plan:

Run yarn start to launch Storybook.
In Storybook, go to "Interactive Graph Editor - With Locked Lines" within the Perseus Editor section.
- http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph-editor--with-locked-lines
Notice that the line and ray each have arrowheads in their appropriate location, and that the line segment does not have any arrowheads.

Affected behavior:

With arrows

Move arrowhead property values to a util function. Add arrowheads to lines.

… set to 'true'. Update tests and snapshots accordingly.

github-actions · 2024-04-26T20:04:03Z

Size Change: +112 B (0%)

Total Size: 833 kB

Filename	Size	Change
`packages/perseus-editor/dist/es/index.js`	267 kB	-39 B (0%)
`packages/perseus/dist/es/index.js`	399 kB	+151 B (0%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	38.1 kB
`packages/kmath/dist/es/index.js`	4.27 kB
`packages/math-input/dist/es/index.js`	80.5 kB
`packages/math-input/dist/es/strings.js`	1.73 kB
`packages/perseus-core/dist/es/index.js`	908 B
`packages/perseus-error/dist/es/index.js`	878 B
`packages/perseus-linter/dist/es/index.js`	21.8 kB
`packages/perseus/dist/es/strings.js`	3.22 kB
`packages/pure-markdown/dist/es/index.js`	3.68 kB
`packages/simple-markdown/dist/es/index.js`	12.4 kB

_{compressed-size-action}

codecov · 2024-04-26T20:08:12Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.34%. Comparing base (cf1dc61) to head (27d720f).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1229      +/-   ##
==========================================
+ Coverage   68.64%   70.34%   +1.70%     
==========================================
  Files         470      474       +4     
  Lines      100733   100836     +103     
  Branches     7146    10853    +3707     
==========================================
+ Hits        69148    70934    +1786     
+ Misses      31406    29902    -1504     
+ Partials      179        0     -179

Files	Coverage Δ
...eus-editor/src/components/locked-line-settings.tsx	`100.00% <ø> (ø)`
packages/perseus-editor/src/components/util.ts	`56.81% <ø> (-0.49%)`	⬇️
...widgets/__testdata__/interactive-graph.testdata.ts	`100.00% <100.00%> (ø)`
...interactive-graphs/graphs/components/arrowhead.tsx	`100.00% <100.00%> (ø)`
...ts/interactive-graphs/graphs/components/vector.tsx	`100.00% <100.00%> (ø)`
...eus/src/widgets/interactive-graphs/graphs/utils.ts	`98.24% <100.00%> (+0.13%)`	⬆️
...eus/src/widgets/interactive-graphs/locked-line.tsx	`97.27% <100.00%> (+1.16%)`	⬆️

... and 133 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 cf1dc61...27d720f. Read the comment docs.

… for segment.

… added to the graph.

khan-actions-bot · 2024-04-26T21:07:29Z

Gerald

Required Reviewers

@Khan/perseus for changes to .changeset/gold-deers-heal.md, packages/perseus/src/perseus-types.ts, packages/perseus-editor/src/components/locked-line-settings.tsx, packages/perseus-editor/src/components/util.ts, packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts, packages/perseus/src/widgets/interactive-graphs/locked-line.tsx, packages/perseus-editor/src/components/__tests__/util.test.ts, packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx, packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor-locked-figures.test.tsx, packages/perseus/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap, packages/perseus/src/widgets/interactive-graphs/graphs/utils.ts, packages/perseus/src/widgets/interactive-graphs/graphs/components/arrowhead.test.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/arrowhead.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-line.test.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/vector.tsx, packages/perseus/src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap

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

packages/perseus/src/widgets/interactive-graphs/graphs/components/vector.tsx

packages/perseus/src/widgets/interactive-graphs/locked-line.tsx

benchristel · 2024-04-29T17:58:57Z

packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts

@@ -1159,6 +1159,120 @@ export const segmentWithLockedLineQuestion: PerseusRenderer = {
    },
 };

+export const segmentWithLockedLineAndArrowheadsQuestion: PerseusRenderer = {


suggestion: we now have an InteractiveGraphQuestionBuilder class that could help abbreviate test data definitions like this. It doesn't yet have a way to add locked figures, but you could add that fairly easily I think.

I'd be down to add that functionality for locked figures in a future PR. I can make an M2 ticket for it.

packages/perseus/src/widgets/interactive-graphs/graphs/components/vector.tsx

packages/perseus/src/widgets/interactive-graphs/graphs/utils.ts

packages/perseus/src/widgets/interactive-graphs/locked-line.tsx

…rrows also (prior changes removed that feature). Implement other PR comment suggestions.

Adjust tests accordingly. Add unit tests for Arrowhead.

Fix lint errors.

github-actions · 2024-05-06T20:31:54Z

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1229

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

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

nishasy

Very exciting!

nishasy · 2024-05-06T22:39:08Z

packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts

@@ -1159,6 +1159,120 @@ export const segmentWithLockedLineQuestion: PerseusRenderer = {
    },
 };

+export const segmentWithLockedLineAndArrowheadsQuestion: PerseusRenderer = {


I'd be down to add that functionality for locked figures in a future PR. I can make an M2 ticket for it.

packages/perseus/src/widgets/interactive-graphs/graphs/components/arrowhead.test.tsx

@mark-fitzgerald

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/perseus@22.4.0 ### Minor Changes - [#1229](#1229) [`3c1e398d5`](3c1e398) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Show Arrowheads on Locked Lines in Interactive Graphs - [#1237](#1237) [`54689a18f`](54689a1) Thanks [@handeyeco](https://github.com/handeyeco)! - Rough out new Circle Graph behind a feature flag ### Patch Changes - [#1222](#1222) [`44cf7348c`](44cf734) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Fix @phosphor-icon paths in `explanation` widget - [#1243](#1243) [`ee89a1b01`](ee89a1b) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Fix dash style for locked lines when kind is 'ray' ## @khanacademy/perseus-editor@6.2.1 ### Patch Changes - [#1237](#1237) [`54689a18f`](54689a1) Thanks [@handeyeco](https://github.com/handeyeco)! - Rough out new Circle Graph behind a feature flag - [#1246](#1246) [`d66b79e44`](d66b79e) Thanks [@nishasy](https://github.com/nishasy)! - Change locked figures' initial color to grayH (previusly green) - [#1242](#1242) [`7d172698e`](7d17269) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Adds a warning above the protractor and ruler checkboxes in interactive-graph settings - [#1245](#1245) [`45a6647cf`](45a6647) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Fix location of DeviceFramer and ViewportResizer in Storybook - Updated dependencies \[[`44cf7348c`](44cf734), [`3c1e398d5`](3c1e398), [`ee89a1b01`](ee89a1b), [`54689a18f`](54689a1)]: - @khanacademy/perseus@22.4.0 ## @khanacademy/perseus-dev-ui@1.5.5 ### Patch Changes - [#1222](#1222) [`44cf7348c`](44cf734) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - ✨ Display image background info in Dev UI

nishasy and others added 8 commits April 23, 2024 18:19

Implement locked rays

d8d44d8

purple

17ce7bb

Add "showArrows" conditional logic to rays.

591cc89

Refactor how line/ray arrowheads are generated and placed in the graph.

2fd6dc5

Move arrowhead property values to a util function. Add arrowheads to lines.

Merge main into branch and adjust for conflicts.

a439b2f

Merge branch 'main' into lems-1929-show-arrows-on-locked-lines

d12424c

Show arrowheads on segments in place of their endpoints, when flag is…

f334fc5

… set to 'true'. Update tests and snapshots accordingly.

Prettier adjustments & changeset.

ce5fd5e

mark-fitzgerald self-assigned this Apr 26, 2024

mark-fitzgerald requested a review from a team April 26, 2024 20:08

Mark Fitzgerald added 4 commits April 26, 2024 13:21

Adjust editor to default to "show arrows" when a ray line type is added.

b621f67

Adjust editor to default to "show arrows" when a ray or line, but not…

073859f

… for segment.

Adjust editor to default to "show arrows" when a locked line is newly…

55cd0a2

… added to the graph.

Update unit tests to account for new default settings for show arrows.

6ef7bd8

mark-fitzgerald marked this pull request as ready for review April 26, 2024 21:07

nishasy reviewed Apr 26, 2024

View reviewed changes

packages/perseus/src/widgets/interactive-graphs/graphs/components/vector.tsx Show resolved Hide resolved

benchristel reviewed Apr 29, 2024

View reviewed changes

Mark Fitzgerald and others added 3 commits April 29, 2024 14:40

Refactor to have arrowheads in vector so that movable line can have a…

885982d

…rrows also (prior changes removed that feature). Implement other PR comment suggestions.

Remove "showArrows" option from locked lines and editor.

748cf45

Adjust tests accordingly. Add unit tests for Arrowhead.

Merge changes from main.

27d720f

Fix lint errors.

nishasy approved these changes May 6, 2024

View reviewed changes

benchristel approved these changes May 7, 2024

View reviewed changes

mark-fitzgerald merged commit 3c1e398 into main May 7, 2024
21 checks passed

mark-fitzgerald deleted the lems-1929-show-arrows-on-locked-lines branch May 7, 2024 16:51

khan-actions-bot mentioned this pull request May 7, 2024

Version Packages #1244

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show Arrowheads on Locked Lines #1229

Show Arrowheads on Locked Lines #1229

mark-fitzgerald commented Apr 26, 2024 •

edited

github-actions bot commented Apr 26, 2024 •

edited

codecov bot commented Apr 26, 2024 •

edited

khan-actions-bot commented Apr 26, 2024 •

edited

benchristel Apr 29, 2024

nishasy May 6, 2024

github-actions bot commented May 6, 2024

nishasy left a comment

nishasy May 6, 2024

Show Arrowheads on Locked Lines #1229

Show Arrowheads on Locked Lines #1229

Conversation

mark-fitzgerald commented Apr 26, 2024 • edited

Summary:

Test plan:

Affected behavior:

With arrows

github-actions bot commented Apr 26, 2024 • edited

codecov bot commented Apr 26, 2024 • edited

Codecov Report

khan-actions-bot commented Apr 26, 2024 • edited

Gerald

benchristel Apr 29, 2024

Choose a reason for hiding this comment

nishasy May 6, 2024

Choose a reason for hiding this comment

github-actions bot commented May 6, 2024

npm Snapshot: Published

nishasy left a comment

Choose a reason for hiding this comment

nishasy May 6, 2024

Choose a reason for hiding this comment

mark-fitzgerald commented Apr 26, 2024 •

edited

github-actions bot commented Apr 26, 2024 •

edited

codecov bot commented Apr 26, 2024 •

edited

khan-actions-bot commented Apr 26, 2024 •

edited