Time estimate or Size

medium

Problem

This is the MVP feature, forthcoming work to be prioritized includes options to adjust what controls are visible, autoplay, default to looping, and addressing visual/UX concerns in the embedded page.

Solution

Update the ShareTrajectoryModal to generate an iframe that with a link to the embedded viewer, merged a set of updates by @meganrm that improved organization and design, notably pulling the code for the embed snippet into its own component.

Added VerticalFlexbox: small reusable component that makes the JSX more readable and prevents having lots of very similar divs each with their own class name on the stylesheet. I think we can add a few more similar container utils over time and do some refactoring to clean up other components.

Type of change

New feature (non-breaking change which adds functionality)

Steps to Verify:

Poke around the options on the modal.
To test the modal you can paste it into the html of the website or another webpage. To use it in a react componant change allowfullscreen to allowFullScreen

Screenshots:

Screenshot 2024-07-30 at 2 07 37 PM

St.^{:grey_question:}	Category	Percentage	Covered / Total
🟡	Statements	66.73% (+0.51% 🔼)	666/998
🟡	Branches	66.21% (+0.47% 🔼)	96/145
🔴	Functions	35.83% (+1.03% 🔼)	91/254
🟡	Lines	64.98% (+0.43% 🔼)	592/911

simularium / simularium-website

Feature/share embed #547