Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: Embed explorable explanations in PSAT extension #874

Merged
merged 72 commits into from
Nov 29, 2024
Merged

Feature: Embed explorable explanations in PSAT extension #874

merged 72 commits into from
Nov 29, 2024

Conversation

amovar18
Copy link
Collaborator

@amovar18 amovar18 commented Nov 24, 2024 •
edited
Loading

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

@amovar18 amovar18 self-assigned this Nov 24, 2024
@amovar18 amovar18 added this to the v0.12 milestone Nov 24, 2024
@amovar18 amovar18 marked this pull request as ready for review November 24, 2024 19:56
@mohdsayed
Copy link
Collaborator

mohdsayed commented Nov 25, 2024 •
edited
Loading

@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.

@mohdsayed mohdsayed changed the title Feature: Embed Explorable explanations in PSAT extension Feature: Embed explorable explanations in PSAT extension Nov 25, 2024
mohdsayed
mohdsayed requested changes Nov 29, 2024
View reviewed changes
Copy link
Collaborator

@mohdsayed mohdsayed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can merge after some improvements.

@amovar18 amovar18 requested a review from mohdsayed November 29, 2024 09:16
mohdsayed
mohdsayed approved these changes Nov 29, 2024
View reviewed changes
Copy link
Collaborator

@mohdsayed mohdsayed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks

@mohdsayed mohdsayed merged commit ae90247 into develop Nov 29, 2024
6 checks passed
@mohdsayed mohdsayed deleted the feat/ee-psat branch November 29, 2024 10:02
amovar18 added a commit that referenced this pull request Dec 12, 2024
@amovar18 @mohdsayed @mayan-000
Feature: Embed explorable explanations in PSAT extension (#874)
590f3b9 
* Conifgure webpack to spit dist folder.

* Add styles to extension.
Add html of canvas to extension.

* Use App exported from index.js

* Remove circular dependency.

* Add previous and next button.
Fix bugs in canvas embedding.

* Use constants for bubbles.

* Fix calculation in bubblr click listener.

* Fix interactive mode.

* Fix the bubbles calculation for interactive mode.

* Move explorable explaination tab next to overview

* Reduce font size of Interactive mode and multi seller

* Disable previous and next buttons when interactive mode is on.

* Calculate height and width of the expanded bubble according to the parentNode viewport.

* Remove user icon if cursor goes out of canvas.

* Increase animation speed.

* Remove user icon if cursor goes out of canvas.

* Calculate height and width of the expanded bubble according to the parentNode viewport.

* Fix interactive mode switching.

* Fix regression.

* Update classes

* Conditionally set button disability.

* Fix returning promise.

* Add titles.

* Silence errors and handle ending of the loop.

* Add reset button to EE.

* Remove button and image global styles

* Fix bugs in reset button.

* Fix bug.

* Fix bug in reset.

* Fix known bugs.

* Move bubble a bit up in call order.

* Fix font.

* Move bubbles.generatebubbles in the loop.

* Update checkbox hover class

* Update min size for content panels

* Remvove react wrapper.

* Fix undefined color error.

* Disable previous and next button when timeline ends.

* Fix reset when no action is performed in interactive mode.

* Add DSP boxes for bidding.
Add boxes for show winning ad.
Fix the date time branch for publisher 2.

* Fix bubble generation for interactive mode.

* Update DSP Tag to Tags for joinInterestGroup

* Add promise queue.

* Implement new promise queue and modify next and previous function.

* Using window variable.

* Fix promise queue.

* Modify promise queue.

* Fix bugs.

* Fix bugs.

* Fix errors.

* Fix misc conditions.

* Add mechanism for development mode.

* Fix bugs in development mode.

* Fix bubble generation calls.

* Fix timeline issue of toggling.

* Remove unused config variables.

* Code improvements

* Improve code

* Move state controllers to app.

* Fix webpack config.

* Fix extension webpack config and interactive mode.

* Add comment for utils.disableButtons.

* Fix cursor.

* Fix disableButton call.

* Move function to flow.

* Use extras instead of title for comparison.

* Use extraProps instead of extras.

---------

Co-authored-by: sayedtaqui <sayedwp@gmail.com>
Co-authored-by: Mayank Rana <mayankranax1@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mohdsayed mohdsayed mohdsayed approved these changes

@mayan-000 mayan-000 Awaiting requested review from mayan-000

Assignees

@amovar18 amovar18

Labels
None yet
Projects
PS Analysis Tool
Status: Done
Milestone
v0.12
Development

Successfully merging this pull request may close these issues.
3 participants
@amovar18 @mohdsayed @mayan-000