- Move styles from index.html to styles.css

- Add event.stopPropagation(). - Add comments for protectedAudience.
GoogleChromeLabs · Nov 18, 2024 · de8d5ba · de8d5ba
1 parent 1af5770
commit de8d5ba
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 161 deletions.
diff --git a/packages/explorable-explanations/public/index.html b/packages/explorable-explanations/public/index.html
@@ -5,167 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Protected Audience</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-        }
-
-        .overflowing-text {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .hidden {
-            display: none;
-        }
-
-        #ps-canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
-            pointer-events: auto;
-        }
-
-        #interest-canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
-            pointer-events: none;
-        }
-
-        #user-canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
-            pointer-events: none;
-        }
-
-        button {
-            cursor: pointer;
-            border: none;
-            background-color: transparent;
-            padding: 0;
-        }
-
-        button img {
-            width: 20px;
-            height: 20px;
-        }
-
-        #canvas-container {
-            width: 100%;
-            height: 100%;
-            position: relative;
-        }
-
-        #bubble-container {
-            position: absolute;
-            pointer-events: none;
-            top: 0px;
-            left: 0px;
-        }
-
-        .minified-bubble-container {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            height: 50px;
-            width: 50px;
-            border-radius: 50%;
-            background-color: white;
-            border: 1px solid #808080;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: width 0.5s ease, height 0.5s ease, top 0.5s ease, left 0.5s ease;
-        }
-
-        .circle-svg:hover:active {
-            cursor: pointer;
-        }
-
-        .text-class {
-            pointer-events: none;
-        }
-
-        .svg {
-            cursor: pointer;
-        }
-
-        .circle-svg {
-            transition: transform .2s;
-        }
-
-        .circle-svg:hover {
-            transform: scale(1.05);
-            cursor: pointer;
-        }
-
-        text {
-            cursor: pointer;
-        }
-
-        .minified-bubble-container.expanded {
-            position: absolute;
-            display: block;
-            top: 0px;
-            height: 500px;
-            width: 500px;
-            border-radius: 50%;
-            border: 1px solid #808080;
-            backdrop-filter: blur(10px);
-        }
-
-        .bubble-container {
-            position: absolute;
-            pointer-events: auto;
-        }
-
-        .bubble-container.expanded {
-            backdrop-filter: blur(1px);
-            z-index: 4;
-            height: 100vh;
-            width: 100vw;
-        }
-
-        #close-button {
-            position: absolute;
-            top: 10px;
-            cursor: pointer;
-            display: none;
-        }
-
-        #open-button {
-            position: absolute;
-            top: 50px;
-            left: 50px;
-            cursor: pointer;
-            display: none;
-        }
-
-        #count-display {
-            font-size: 16px;
-            position: absolute;
-            margin: 0px;
-            backdrop-filter: blur(4px);
-            font-weight: bolder;
-            border-radius: 50%;
-        }
-
-        .play-pause-button {
-            margin-right: 10px;
-        }
-
-        .controls {
-            position: absolute;
-            right: 10px;
-            top: 10px;
-            display: flex;
-        }
-    </style>
+    <link rel="stylesheet" href="styles.css"/>
 </head>
 
 <body>

diff --git a/packages/explorable-explanations/public/styles.css b/packages/explorable-explanations/public/styles.css
@@ -0,0 +1,159 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.overflowing-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.hidden {
+    display: none;
+}
+
+#ps-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: auto;
+}
+
+#interest-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+#user-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+button {
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+    padding: 0;
+}
+
+button img {
+    width: 20px;
+    height: 20px;
+}
+
+#canvas-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+#bubble-container {
+    position: absolute;
+    pointer-events: none;
+    top: 0px;
+    left: 0px;
+}
+
+.minified-bubble-container {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    background-color: white;
+    border: 1px solid #808080;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: width 0.5s ease, height 0.5s ease, top 0.5s ease, left 0.5s ease;
+}
+
+.circle-svg:hover:active {
+    cursor: pointer;
+}
+
+.text-class {
+    pointer-events: none;
+}
+
+.svg {
+    cursor: pointer;
+}
+
+.circle-svg {
+    transition: transform .2s;
+}
+
+.circle-svg:hover {
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+text {
+    cursor: pointer;
+}
+
+.minified-bubble-container.expanded {
+    position: absolute;
+    display: block;
+    top: 0px;
+    height: 500px;
+    width: 500px;
+    border-radius: 50%;
+    border: 1px solid #808080;
+    backdrop-filter: blur(10px);
+}
+
+.bubble-container {
+    position: absolute;
+    pointer-events: auto;
+}
+
+.bubble-container.expanded {
+    backdrop-filter: blur(1px);
+    z-index: 4;
+    height: 100vh;
+    width: 100vw;
+}
+
+#close-button {
+    position: absolute;
+    top: 10px;
+    cursor: pointer;
+    display: none;
+}
+
+#open-button {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    cursor: pointer;
+    display: none;
+}
+
+#count-display {
+    font-size: 16px;
+    position: absolute;
+    margin: 0px;
+    backdrop-filter: blur(4px);
+    font-weight: bolder;
+    border-radius: 50%;
+}
+
+.play-pause-button {
+    margin-right: 10px;
+}
+
+.controls {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: flex;
+}
diff --git a/packages/explorable-explanations/src/modules/bubbles.js b/packages/explorable-explanations/src/modules/bubbles.js
@@ -494,6 +494,7 @@ bubbles.bubbleChart = (
         : (event) => {
             // eslint-disable-next-line no-console
             console.log(event);
+            event.stopPropagation();
           }
     )
     .attr('fill-opacity', fillOpacity)

diff --git a/packages/explorable-explanations/src/protectedAudience.js b/packages/explorable-explanations/src/protectedAudience.js
@@ -274,7 +274,9 @@ const interestGroupSketch = (p) => {
     config.bubbles.expandedBubbleX = config.canvas.width / 4 + 320;
     config.bubbles.expandedBubbleY = 0;
 
+    // 335 is the angle where the close icon should be visible.
     const angle = (305 * Math.PI) / 180;
+    // 335 is the radius + the size of icon so that icon is attached to the circle.
     const x = 335 * Math.cos(angle) + config.bubbles.expandedBubbleX;
     const y = 335 * Math.sin(angle) + 320;