Feature: Interest groups bubble plotting #865

amovar18 · 2024-11-04T11:12:46Z

Description

In this PR, we aim to create a container for interest group bubbles. So that it looks better when there are more number of interest group bubbles.

Relevant Technical Choices

A new module bubbles has been added. This module will manage the animation for the loading the interest group and joining interest group.
this will also manage the expansion and minification of the interest group bubble container.

Testing Instructions

Clone the branch.
In the terminal run cd ee && npm i && npm run start.
Now open https://localhost:8080/index.html.
Once interest group is added by advertiser you can click on this and expand the circle to see interest groups.

Additional Information:

Screenshot/Screencast

Screen.Recording.2024-11-04.at.16.41.39.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

…l into feat/ee-bubbles

Remove timeline line in interactive mode.

…l into feat/ee-interactive-mode

Introduce bubbles config to handle interest group bubbles animation.

Fix references.

…circle.

…on box.

mohdsayed · 2024-11-15T03:29:36Z

Some more improvements are required.

Remove blur from small circle.
Make expand and collapse icons grey.
Move collapse icon closer to the larger circle.
Close on ESC key press and when clicking outside the larger circle.
Use grey color for both small and large circles.
Change cursor to pointer for all clickable circles.
Fix issue where expand and collapse icons appear after a quick refresh.

Add play and pause mechanism

mohdsayed · 2024-11-15T08:23:41Z

@amovar18 Two issues are still pending

#865 (comment)

mohdsayed · 2024-11-18T04:50:51Z

packages/explorable-explanations/public/index.html

+            font-weight: bolder;
+            border-radius: 50%;
+        }
+


As the CSS is growing, we should soon move it to a css file.

mohdsayed · 2024-11-18T06:43:23Z

packages/explorable-explanations/src/lib/bubbles.js

@@ -0,0 +1,525 @@
+/*


Moving this to module as it encapsulates functional unit of the application, responsible for a specific feature.

mohdsayed

Looks great

* Add click event to the interest group bubbles. * Fix barragge animation. * Fix click event. * Fix barrage animation. Remove timeline line in interactive mode. * Fix samll bugs in protected audience. * Fix order of calling. * Add default height and width for canvas. Introduce bubbles config to handle interest group bubbles animation. * Set canvas height and width. * Remove barrage animation code from flow. * Remove drawSmallcircles from timeline. Fix references. * Remove drawPreviousCircles from utils. * Create bubbles file to handle interest group bubbles. * Fix barrage animation and reverseBarrage animation. * Add isExpanded listener. * Change interest group design. * Fix click event and circle addition to the interest group. * Remove comment. * Fix arrow background. * Add click event at correct place. * Calculate the maximum number of bubbles that can be drawn in the big circle. * Make the text of interest group count white. * Make interest group travel from the minified circle to the runAdAuction box. * Add text for interestgroup bubbles. * Use d3js for expanded mode. * Fix in barrage animation. * Group IG by websites. * Ad randomised value generation. * Use d3js for bubble containers. * Center the expanded bubble container. * Complete usage of D3.js. * Add text to interest group bubbles. * Fix bug. reduce IG counts * Add expanding animation. Remove expanded bubble. Dynamically change zIndex of interest group canvas during barrage animation. * Use interest group name instead of uuid. * remove uuid. * Change value to length of string. * blur background when container expands. * Add a cross button for intuitive closing of the expanded bubble. * Remove circle transition to right when no bubble is added. * Round the p tag and create method to make the color visible. * use interest group names. * Fix bubble reverse barrage animation. * Fix issues post merge. * Remove ee folder. * Revert removal of interest group. * Move bubble to top left corner of the circle. * Expand circle on hover. * have click animation to depict click. * Add collapse and expand button. * Stop barrage animation when bubble is expanded. * Add cursor pointer. * Remove background blur use flex for count display. * Change colors of the expand and collapse button. * Calculate angle and place close button there. * Fix close button not clickable. * Add escape event to close the bubble. * Remove unused code. Add play and pause mechanism * Dont show bubbles which have been paused during barrage animation. * Fix click listeners. * Remove delay. * Add ripple effect to the auction flow. * Fix expansion and minification of the interst group bubbles. * Convert all setInterval to requestAnimationFrame. * Fix ripple effect cutting off boxes * Move bubbles to modules and add JSDocs * Fix spacing --------- Co-authored-by: sayedtaqui <[email protected]>

amovar18 added 30 commits October 31, 2024 12:21

Add click event to the interest group bubbles.

6587c75

Merge branch 'develop' of github.com:GoogleChromeLabs/ps-analysis-too…

19eb87a

…l into feat/ee-bubbles

Fix barragge animation.

722de87

Fix click event.

8b7d953

Fix barrage animation.

402bf84

Remove timeline line in interactive mode.

Fix samll bugs in protected audience.

4e2a1fe

Merge branch 'develop' of github.com:GoogleChromeLabs/ps-analysis-too…

4541344

…l into feat/ee-interactive-mode

Fix order of calling.

669f7e6

Add default height and width for canvas.

3590b0e

Introduce bubbles config to handle interest group bubbles animation.

Set canvas height and width.

2cc6d70

Remove barrage animation code from flow.

cceb570

Remove drawSmallcircles from timeline.

0010396

Fix references.

Remove drawPreviousCircles from utils.

10d38f4

Create bubbles file to handle interest group bubbles.

2f71bec

Fix barrage animation and reverseBarrage animation.

b5ae3f7

Add isExpanded listener.

84ee6d6

Change interest group design.

410e3ba

Fix click event and circle addition to the interest group.

e3ebbe6

Remove comment.

b656c0c

Fix arrow background.

9e5a6f6

Add click event at correct place.

51fcf2b

Calculate the maximum number of bubbles that can be drawn in the big …

6fd3ca9

…circle.

Make the text of interest group count white.

04ccf5e

Make interest group travel from the minified circle to the runAdAucti…

9b3a8ca

…on box.

Add text for interestgroup bubbles.

22e4ae8

Use d3js for expanded mode.

b5be193

Fix in barrage animation.

e1b9caa

Group IG by websites.

35662a3

Ad randomised value generation.

3066d2c

Use d3js for bubble containers.

c55b5c6

amovar18 added 7 commits November 14, 2024 16:44

Revert removal of interest group.

f0e7b21

Move bubble to top left corner of the circle.

7b41cc3

Expand circle on hover.

04b350d

have click animation to depict click.

128cfe3

Add collapse and expand button.

82fb5da

Stop barrage animation when bubble is expanded.

0125bb4

Add cursor pointer.

dcfd918

amovar18 added 8 commits November 15, 2024 09:45

Remove background blur use flex for count display.

2afb320

Change colors of the expand and collapse button.

3d39a5d

Calculate angle and place close button there.

eb2ce95

Fix close button not clickable.

fdc6c53

Add escape event to close the bubble.

047e132

Remove unused code.

a23bf1d

Add play and pause mechanism

Dont show bubbles which have been paused during barrage animation.

1c69136

Fix click listeners.

4d3158b

amovar18 and others added 5 commits November 15, 2024 14:08

Remove delay.

b3ebd26

Add ripple effect to the auction flow.

b44b5dd

Fix expansion and minification of the interst group bubbles.

76b7d2e

Convert all setInterval to requestAnimationFrame.

f1bf17e

Fix ripple effect cutting off boxes

fc18a7b

mohdsayed reviewed Nov 18, 2024

View reviewed changes

mohdsayed added 2 commits November 18, 2024 12:19

Move bubbles to modules and add JSDocs

1141040

Fix spacing

e151fd6

mohdsayed approved these changes Nov 18, 2024

View reviewed changes

mohdsayed merged commit 1af5770 into develop Nov 18, 2024
6 checks passed

mohdsayed deleted the feat/ig-bubbles-plot branch November 18, 2024 07:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Interest groups bubble plotting #865

Feature: Interest groups bubble plotting #865

amovar18 commented Nov 4, 2024 •

edited by mohdsayed

Loading

mohdsayed commented Nov 15, 2024 •

edited

Loading

mohdsayed commented Nov 15, 2024

mohdsayed Nov 18, 2024

mohdsayed Nov 18, 2024

mohdsayed left a comment

Feature: Interest groups bubble plotting #865

Feature: Interest groups bubble plotting #865

Conversation

amovar18 commented Nov 4, 2024 • edited by mohdsayed Loading

Description

Relevant Technical Choices

Testing Instructions

Additional Information:

Screenshot/Screencast

Checklist

mohdsayed commented Nov 15, 2024 • edited Loading

mohdsayed commented Nov 15, 2024

mohdsayed Nov 18, 2024

Choose a reason for hiding this comment

mohdsayed Nov 18, 2024

Choose a reason for hiding this comment

mohdsayed left a comment

Choose a reason for hiding this comment

amovar18 commented Nov 4, 2024 •

edited by mohdsayed

Loading

mohdsayed commented Nov 15, 2024 •

edited

Loading