Release PhET Simulation widget (#1546) #1546
Merged
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
## Summary: Create a new Perseus widget for PhET simulations with the following features: * Fullscreen mode * Only allows URLs from the [https://phet.colorado.edu](https://phet.colorado.edu/) origin * If the origin is wrong or the resource is not available, we display an error * Displays simulation in your locale (forgot to put this in the demo so I'll attach a screenshot) * If the simulation is not available in your locale, we display a warning banner and load the simulation in English * Skeleton widget editor * This is just to pass a Jest test that expects every widget will have an editor I have documented the Perseus widget creation process [here](https://khanacademy.atlassian.net/wiki/spaces/LC/pages/3075276818/Creating+a+New+Widget+Type). Issue: LEMS-2167 <img width="1041" alt="PhET simulation storybook page, contains an iframe with a PhET simulation and a fullscreen button under the bottom right corner of the iframe" src="https://github.com/user-attachments/assets/4c11ab54-6af0-4525-9f0d-f023d1919de6"> <img width="1027" alt="PhET simulation editor storybook page, contains a URL label with an empty input field" src="https://github.com/user-attachments/assets/152015c6-fd20-403f-a7c0-8faecea79440"> ## Test plan: - Verify that the widget shows up appropriately in Storybook - Change `this.locale` to some nonexistent locale and verify that the warning shows up - Change URL to a non-PhET origin and verify that the error shows up - Change URL to a non-existent resource from the PhET origin and verify that the error shows up - Click the fullscreen button and verify that the iframe goes into fullscreen mode - Verify screen reader accessibility - Make sure the fullscreen button, iframe, and iframe contents are all tab-focusable - Make sure the fullscreen button, iframe, and iframe contents all have appropriate aria labels Author: aemandine Reviewers: jeremywiebe, aemandine, SonicScrewdriver, Myranae Required Reviewers: Approved By: jeremywiebe Checks: ⌛ Publish npm snapshot (ubuntu-latest, 20.x), ⌛ Jest Coverage (ubuntu-latest, 20.x), ⌛ Check builds for changes in size (ubuntu-latest, 20.x), ⌛ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⌛ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⌛ Cypress (ubuntu-latest, 20.x), ✅ gerald, 🚫 Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1512
## Summary: Create the content editor for PhET simulations, allowing users to set: * The URL of the simulation * A description of the simulation (used to communicate the widget's purpose to screen readers and Khanmigo) I have documented the Perseus widget creation process [here](https://khanacademy.atlassian.net/wiki/spaces/LC/pages/3075276818/Creating+a+New+Widget+Type). Issue: [LEMS-2168](https://khanacademy.atlassian.net/browse/LEMS-2168) <img width="1041" alt="Editor page storybook page, displaying PhET widget, which contains an iframe displaying the Projectile Data Lab PhET simulation. The URL of the widget is the URL for Projectile Data Lab, and the description is 'Projectile Data Lab.'" src="https://github.com/user-attachments/assets/f39c5dcf-fee7-4e16-8f6a-bfd682137717"> <img width="1041" alt="Editor page storybook page, displaying PhET widget, which contains an iframe saying 'Sorry, this simulation cannot load.' The URL of the widget is the Google homepage URL, and the description is 'Google.'" src="https://github.com/user-attachments/assets/4a2d7338-07e6-4a95-8476-fb02752a9a7c"> ## Test plan: - Verify that the widget content editor shows up appropriately in Storybook's EditorPage (`/docs/perseuseditor-editorpage--docs`) - Set URL to a valid PhET simulation (like https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html) and verify that the simulation appears correctly - Change URL to a non-PhET origin and verify that the error shows up - Change URL to a non-existent resource from the PhET origin and verify that the error shows up - Click the fullscreen button and verify that the iframe goes into fullscreen mode - `yarn jest packages/perseus-editor/src/widgets/__tests__/phet-sim-editor.test.tsx` [LEMS-2168]: https://khanacademy.atlassian.net/browse/LEMS-2168?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ Author: aemandine Reviewers: aemandine, jeremywiebe, SonicScrewdriver, Myranae Required Reviewers: Approved By: SonicScrewdriver Checks: ✅ codecov/patch, ✅ codecov/project, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1532
## Summary: Update PhET widget design: * Draws an outline around the entire widget, connecting the iframe and fullscreen button into a cohesive unit * Displays simulation load error message as a banner * Displays empty iframe if the simulation did not load * Disables fullscreen button if the simulation did not load * Adds space between the banner and iframe * Removes iframe outline * Makes iframe larger and closer to 16:9 ratio instead of square Issue: [LEMS-2279](https://khanacademy.atlassian.net/browse/LEMS-2279) <img width="1041" alt="PhET widget with no errors, displaying new outline around the widget" src="https://github.com/user-attachments/assets/7c669925-1387-490b-9f75-ab110b0feac9"> <img width="1041" alt="PhET widget with locale error, displaying new outline around the widget and space between warning banner and iframe" src="https://github.com/user-attachments/assets/c2886c24-4ad2-410f-b13a-9119f6803345"> <img width="1041" alt="PhET widget with simulation load error, displaying new outline around the widget, disabled fullscreen button, empty iframe, and simulation load error banner" src="https://github.com/user-attachments/assets/8fea7998-3f3c-487a-a44b-a1441b2496c7"> ## Test plan: - Verify that the widget shows up appropriately in Storybook - Set URL to a valid PhET simulation (like https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html) and verify that the simulation appears correctly - Change URL to a non-PhET origin and verify that the error shows up and matches the appropriate PR screenshot - Click the fullscreen button and verify that the iframe goes into fullscreen mode - `yarn jest packages/perseus/src/widgets/__tests__/phet-sim.test.ts` [LEMS-2279]: https://khanacademy.atlassian.net/browse/LEMS-2279?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ Author: aemandine Reviewers: SonicScrewdriver, Myranae Required Reviewers: Approved By: SonicScrewdriver Checks: ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1542
# Conflicts: # packages/perseus/package.json # packages/perseus/src/strings.ts
|
Size Change: +21.1 kB (+2.46%) Total Size: 880 kB
ℹ️ View Unchanged
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1546 +/- ##
==========================================
+ Coverage 70.53% 70.95% +0.42%
==========================================
Files 518 523 +5
Lines 106900 107264 +364
Branches 5500 11011 +5511
==========================================
+ Hits 75397 76114 +717
+ Misses 31387 31150 -237
+ Partials 116 0 -116
... and 123 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
aemandine
changed the title
phet-widget to main
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (1e645a8) and published it to npm. You Example: yarn add @khanacademy/perseus@PR1546If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR1546 |
Myranae
reviewed
Aug 22, 2024
Myranae
reviewed
Aug 22, 2024
Myranae
reviewed
Aug 22, 2024
| return ( | ||
| <View style={styles.container}> | ||
| {this.state.banner !== null && ( | ||
| // TODO(anna): Make this banner focusable |
There was a problem hiding this comment.
Suggestion, nb: Might be good to have this TODO right above the banner you want to make focusable.
Myranae
approved these changes
Aug 22, 2024
aemandine
changed the title
Merged
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
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:
Releases the PhET Simulation widget.
The PhET Interactive Simulations initiative, run by the University of Colorado Boulder, develops interactive simulations for math and science education that are available for free. These simulations, known as PhET sims, are designed based on comprehensive educational research. They provide a game-like, intuitive platform that encourages students to learn by exploring and discovering concepts on their own.
Commit history:
This feature branch PR includes the following review branch PRs:
Issue: LEMS-XXXX
Test plan:
Confirm all tests pass.
Author: SonicScrewdriver
Reviewers: Myranae, aemandine
Required Reviewers:
Approved By: Myranae
Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ⌛ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald
Pull Request URL: #1546