Feature: Embed explorable explanations in PSAT extension

[amovar18]

Description

This PR aims to embed explorable explanation in PSAT extension.

Relevant Technical Choices

• Webpack in production mode now gives a dist file from Explorable Explanations package.
• This package exports userSketch, interestGroupSketch and main sketch which is imported by the extension package.

Testing Instructions

• Clone this branch.
• In the terminal run npm i && npm run build:ext
• Now go to example.com and open the DevTools.
• In DevTools navigate to the PSAT extension.
• Go to Protected Audience tab and select explorable explanations you should now see the animation.

Additional Information:

Screenshot/Screencast

Screen.Recording.2024-11-25.at.01.13.55.mov

---

Checklist

• I have thoroughly tested this code to the best of my abilities.
• I have reviewed the code myself before requesting a review.
• This code is covered by unit tests to verify that it works as intended.
• The QA of this PR is done by a member of the QA team (to be checked by QA).

Partially addresses #857

[mohdsayed]

@amovar18

• Reduce gap between “next” and “prev” buttons, add title and change opacity on hover.
• Center the expanded circle popup and reduce size.
• Change the speed of barrage proportional to the distance between the starting and end point.
• Interactive Mode: Remove user icon from cursor when it goes outside of the canvas.
• IM: Remove next and previous buttons in interactive mode.
• In auction, ripple effect covers above down arrow.

For next PRs:

• Make reset button work.
• Speed should be controlled from the speed slider.