Reset interactive graph state when the graph type or number of segments changes #1345
Conversation
This file contains 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
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
|
Size Change: +274 B (+0.03%) Total Size: 845 kB
ℹ️ View Unchanged
|
…ts changes There was a bug in the exercise editor where the preview did not reflect changes to the graph type or number of segments. This happened because changes to the `graph.type` and `graph.numSegments` props were ignored. We now reinitialize the graph state when those props change. Issue: LEMS-2041 Test plan: Deploy a dev build of Perseus into the a webapp ZND. Visit: https://www.khanacademy.org/devadmin/content/exercises/linear-graph-exercise/x3239cabc044aa28b/x325a92c13bc37711 Change the graph type of one of the interactive graphs to "segment". The preview on the right-hand side of the editor should update. Change the number of segments on the graph. The preview should update.
benchristel
force-pushed
the
benc/reinitialize
branch
from
d000b15
to
8348640
Compare
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (97b19a7) and published it to npm. You Example: yarn add @khanacademy/perseus@PR1345If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR1345 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1345 +/- ##
==========================================
+ Coverage 69.52% 70.69% +1.17%
==========================================
Files 488 492 +4
Lines 103276 103387 +111
Branches 7416 11138 +3722
==========================================
+ Hits 71806 73093 +1287
+ Misses 31289 30294 -995
+ Partials 181 0 -181
... and 139 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
benchristel
commented
Jun 17, 2024
| // This conditional prevents the state from being "reinitialized" right | ||
| // after the first render. This is an optimization, but also prevents | ||
| // a bug where the graph would be marked "incorrect" during grading | ||
| // even if the user never interacted with it. |
There was a problem hiding this comment.
I feel like there's probably a simpler way to achieve this that doesn't require keeping a ref to two props objects. Maybe I should extract a useEffectExceptOnMount hook — unless we already have one?
There was a problem hiding this comment.
Looking at the exports from wonder-blocks-core, I'm not sure there's something that fits your use case. Maybe useIsMounted is the closest one? But I don't think that's the same thing... 🤔
There was a problem hiding this comment.
Question: What's the downside to having the two refs? If you can extract a hook that makes things simpler, that always sounds better to me :) Unless it is harder to follow of course.
nishasy
approved these changes
Jun 17, 2024
| // This conditional prevents the state from being "reinitialized" right | ||
| // after the first render. This is an optimization, but also prevents | ||
| // a bug where the graph would be marked "incorrect" during grading | ||
| // even if the user never interacted with it. |
There was a problem hiding this comment.
Looking at the exports from wonder-blocks-core, I'm not sure there's something that fits your use case. Maybe useIsMounted is the closest one? But I don't think that's the same thing... 🤔
Merged
nishasy
added a commit
that referenced
this pull request
Jun 17, 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/perseus@23.5.0 ### Minor Changes - [#1348](#1348) [`73ba4f7c9`](73ba4f7) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Update the locked ellipse settings so they only take degrees as input. - [#1353](#1353) [`e528c5b2b`](e528c5b) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph] View a locked polygon - [#1351](#1351) [`9a6517ca2`](9a6517c) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Add blue and gold to locked figures colorset ### Patch Changes - [#1350](#1350) [`1e877c6d4`](1e877c6) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Add locked vector to storybook story for all locked figures - [#1345](#1345) [`92990f15f`](92990f1) Thanks [@benchristel](https://github.com/benchristel)! - Fix a bug in the exercise editor where the preview did not update after a change to the graph type or number of line segments. ## @khanacademy/perseus-editor@6.11.0 ### Minor Changes - [#1348](#1348) [`73ba4f7c9`](73ba4f7) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Update the locked ellipse settings so they only take degrees as input. - [#1353](#1353) [`e528c5b2b`](e528c5b) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph] View a locked polygon - [#1351](#1351) [`9a6517ca2`](9a6517c) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Add blue and gold to locked figures colorset - [#1354](#1354) [`e73373f48`](e73373f) Thanks [@Myranae](https://github.com/Myranae)! - Fix interactive graph editor in storybook to display and persist options ### Patch Changes - [#1350](#1350) [`1e877c6d4`](1e877c6) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Add locked vector to storybook story for all locked figures - Updated dependencies \[[`1e877c6d4`](1e877c6), [`92990f15f`](92990f1), [`73ba4f7c9`](73ba4f7), [`e528c5b2b`](e528c5b), [`9a6517ca2`](9a6517c)]: - @khanacademy/perseus@23.5.0
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
There was a bug in the exercise editor where the preview did not reflect
changes to the graph type or number of segments. This happened because
changes to the
graph.typeandgraph.numSegmentsprops were ignored.We now reinitialize the graph state when those props change.
Issue: LEMS-2041
Test plan:
Deploy a dev build of Perseus into the a webapp ZND. Visit:
https://www.khanacademy.org/devadmin/content/exercises/linear-graph-exercise/x3239cabc044aa28b/x325a92c13bc37711
Change the graph type of one of the interactive graphs to "segment".
The preview on the right-hand side of the editor should update.
Change the number of segments on the graph. The preview should update.