Feature: Create basic explorable explanation timeline and flow (#858)

* Add explorable-explanation directory * Move easier calculations to psat. * Fix color calculation and font family. * Move icons to its own file * Small improvements * Add p5 to package.json so that it can be resolved in Github workflow * Refactor code to calculate canvas dimensions * Use Promise.all * Remove unused key value pairs * Refactor code to remove repeated code * Refactor code to use colors from config * Fix feedback * Move circles with user icon. * Add animation to move interest group with low opacity into runAdAuction. * Refactor code: Add spaces Add comments. * Remove unnecessary code. * Add group of concentric ring of bubbles. * Add mainCanvasWipe and recreate. Add utility to check if function click was inside circle. * Change user icon * Remove border from small circles * Add another canvas layer and manage animations. --------- Co-authored-by: Amoghavarsha Kudaligi <[email protected]>
GoogleChromeLabs · Dec 12, 2024 · 8df1a0d · 8df1a0d
1 parent 42527df
commit 8df1a0d
Show file tree

Hide file tree

Showing 21 changed files with 7,895 additions and 1 deletion.
diff --git a/ee/favicon.ico b/ee/favicon.ico
diff --git a/ee/package-lock.json b/ee/package-lock.json
diff --git a/ee/package.json b/ee/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "psat-ai",
+  "version": "0.0.1",
+  "description": "Explorable explanations for PSAT",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack serve --open --mode development",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@babel/core": "^7.25.7",
+    "@babel/preset-env": "^7.25.7",
+    "babel-loader": "^9.2.1",
+    "http-server": "^14.1.1",
+    "prettier": "^3.3.3",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
+  },
+  "dependencies": {
+    "p5": "^1.11.0"
+  }
+}
diff --git a/ee/public/favicon.ico b/ee/public/favicon.ico
diff --git a/ee/public/icons/arrow_right.svg b/ee/public/icons/arrow_right.svg
diff --git a/ee/public/icons/pause-button.png b/ee/public/icons/pause-button.png
diff --git a/ee/public/icons/play-button.png b/ee/public/icons/play-button.png
diff --git a/ee/public/index.html b/ee/public/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <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;
+        }
+
+        .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; 
+        }
+
+        .play-pause-button {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+        }
+
+        button {
+            cursor: pointer;
+            border: none;
+            background-color: transparent;
+            padding: 0;
+        }
+
+        button img {
+            width: 20px;
+            height: 20px;
+        }
+        #canvas-container {
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <div id="ps-canvas">
+            <div id="canvas-container">
+                <div class="play-pause-button">
+                    <button id="play" class="hidden">
+                        <img src="./icons/play-button.png" alt="play" />
+                    </button>
+                    <button id="pause">
+                        <img src="./icons/pause-button.png" alt="pause" />
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div id="interest-canvas"></div>
+        <div id="user-canvas"></div>
+    </main>
+
+    <script src="bundle.js"></script>
+</body>
+
+</html>
diff --git a/ee/src/app.js b/ee/src/app.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const app = {
+  timeline: {
+    isPaused: false,
+    circlePositions: [],
+    smallCirclePositions: [],
+    circlePublisherIndices: [],
+    currentIndex: 0,
+  },
+  auction: {
+    auctions: [],
+  },
+  joinInterestGroup: {
+    joinings: [],
+  },
+  flow: {
+    intervals: {},
+  },
+  utils: {},
+  p: null,
+  igp: null,
+  up: null,
+};
+
+export default app;
diff --git a/ee/src/config.js b/ee/src/config.js
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const config = {
+  canvas: {
+    width: 700,
+    background: 245,
+    fontSize: 12,
+  },
+  timeline: {
+    position: { x: 100, y: 50 },
+    circleProps: {
+      diameter: 50,
+      verticalSpacing: 70,
+    },
+    stepDelay: 1500,
+    user: {
+      width: 30,
+      height: 30,
+    },
+    circles: [
+      { type: 'advertiser', website: 'adv1.com', datetime: '2023-10-01 10:00' },
+      { type: 'advertiser', website: 'adv2.com', datetime: '2023-10-01 11:00' },
+      { type: 'publisher', website: 'pub1.com', datetime: '2023-10-01 12:00' },
+      { type: 'advertiser', website: 'adv3.com', datetime: '2023-10-01 13:00' },
+      { type: 'advertiser', website: 'adv5.com', datetime: '2023-10-01 13:02' },
+      { type: 'publisher', website: 'pub2.com', datetime: '2023-10-01 14:00' },
+      { type: 'advertiser', website: 'adv6.com', datetime: '2023-10-01 14:01' },
+      { type: 'advertiser', website: 'adv7.com', datetime: '2023-10-01 15:00' },
+    ],
+    colors: {
+      visitedBlue: '#1A73E8',
+      grey: '#808080',
+    },
+  },
+  flow: {
+    box: { width: 125, height: 100 },
+    smallBox: { width: 80, height: 50 },
+    mediumBox: { width: 125, height: 50 },
+    lineWidth: 100,
+    lineHeight: 50,
+  },
+  rippleEffect: {
+    ripples: [],
+    numRipples: 3,
+    maxRadius: 200,
+    time: 4000,
+    speed: 1,
+    rippled: false,
+  },
+};
+
+export default config;
diff --git a/ee/src/icons.json b/ee/src/icons.json
@@ -0,0 +1,6 @@
+{
+  "user": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNMjM0LTI3NnE1MS0zOSAxMTQtNjEuNVQ0ODAtMzYwcTY5IDAgMTMyIDIyLjVUNzI2LTI3NnEzNS00MSA1NC41LTkzVDgwMC00ODBxMC0xMzMtOTMuNS0yMjYuNVQ0ODAtODAwcS0xMzMgMC0yMjYuNSA5My41VDE2MC00ODBxMCA1OSAxOS41IDExMXQ1NC41IDkzWm0yNDYtMTY0cS01OSAwLTk5LjUtNDAuNVQzNDAtNTgwcTAtNTkgNDAuNS05OS41VDQ4MC03MjBxNTkgMCA5OS41IDQwLjVUNjIwLTU4MHEwIDU5LTQwLjUgOTkuNVQ0ODAtNDQwWm0wIDM2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxNTMgMCAxMDAtMTUuNXQ4Ni00NC41cS0zOS0yOS04Ni00NC41VDQ4MC0yODBxLTUzIDAtMTAwIDE1LjVUMjk0LTIyMHEzOSAyOSA4NiA0NC41VDQ4MC0xNjBabTAtMzYwcTI2IDAgNDMtMTd0MTctNDNxMC0yNi0xNy00M3QtNDMtMTdxLTI2IDAtNDMgMTd0LTE3IDQzcTAgMjYgMTcgNDN0NDMgMTdabTAtNjBabTAgMzYwWiIvPjwvc3ZnPg==",
+  "play": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAAAqhJREFUeF7tm1FuwkAMRDcnKz0JSPCRW5Tego8ilZNAT0a7KEh8FBQnseyZnf7W2GSeZ9e4tCv6CVWgC62u4kUAgptAAAQgWIHg8nKAAAQrEFxeDhCAYAWCy8sBAhCsQHB5OUAAghUILi8HCECwAsHl5QABCFYguLwcIADBCgSXlwNaB7DZ9fvvr8M+WIew8uEOWG/7a336riufLYJIA6BVCKkA3M+BltyQEsAA4tJ15Yf9WMoM4MaB3Q3pAbAfSzAAWN0ABYDRDZAAmNwAC4DFDfAA0EdWFgCwIysVAMRjiRIA0iWdHsDpeOjqyvp6LR9TdsbZP0lDAKjCb3b9aoCwsoLIDAEGwF10NjfAAVgARKotKyyA4ViCvxugASzghvB1NwUAZDfQAEB1Ax2ABze8lVLSj6yUAJDcQA1gARDuI2sTADJf0s0AWMANLiNrcwDW2/485XL+e009jurXJy/WXdSr+GYAZN0h0QOYs0X16vpHR1ADyNr19ACydz01AISupwQwt+tPx8P7ktPN2FwUd0C20XKs+LcvD1iCPWLv/6L0LHf9o/yz36EdN/89BySAuceNxweqqc0JB4Ch6yEvYaauhwPA1vVQAOo6YOryLGq0tNwH6e8Ay8MMsS5bywnvY9RLqABk/griMxosAKC6Hu0OeGllxK5nAQDb9fAA0LseGcAFYbQcNf4MQSiXMMVxA7mMYzpu0ADQdn36O4C96zMDaKLrUwJoqeuzATizjZZQY6jlzTLGhn8OYBTV8kwCYFHLIVYAHES1pBQAi1oOsQLgIKolpQBY1HKIFQAHUS0pBcCilkOsADiIakkpABa1HGIFwEFUS0oBsKjlECsADqJaUgqARS2HWAFwENWSUgAsajnECoCDqJaUAmBRyyFWABxEtaT8BZvYv3DZ9JHwAAAAAElFTkSuQmCC",
+  "pause": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAZhJREFUeF7tm00OgjAQRoeb6Ukk0QW3UG/BAhM8idwMg9EgP+1IpyVGn4mrqlOfrx8w1Ex4eAlk8PETAJBiCIAAZAsRDMIgDLIRwCAbPzIIgzDIRgCDbPzIoFQG5YdiIyLd0/po6qps5j5kjRra5IMNyg/FqW3lqBXQxrNMznVVnhyAktdQ56e9wDUOIIUcgAD0IJAig2YD98l7EuqBGRSthhYxsQE110u5dRXd7Yt2PBYC6HopnfPe7Yvb+OjqqwGgbpl4jpQAAtDQAZaYiJBBTylc51oAAlCfGxzm3zKU8yARThRfQjgCFEAA0s69/UcYDMIgDBoQoN2hCAEgANEPGjhAu4N2Ry8E7Q6lHQogAE36xdz24b4YF6ufXYzRDwrbvEC7g3bHZytMWGIssST7g8ggJYO64Wibmzzb/KLV0BIldsNMqzcZD7mzurTIN+0PWjp37+amNTaKahPGoJVbrtoP8ldLjL8iLNbhB98QnEE/yGL2KwEoVUhj0L8QwCDbL00GYRAG2QhgkI0fGYRBGGQjgEE2fnfmq4R2jqXwowAAAABJRU5ErkJggg==",
+  "completedCheckMark": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAyNyAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjQ5OTkgMjYuNDE2N0MxMS43MTMxIDI2LjQxNjcgMTAuMDMzOSAyNi4wNzc2IDguNDYyNDIgMjUuMzk5NUM2Ljg5MDg5IDI0LjcyMTQgNS41MjM4OCAyMy44MDExIDQuMzYxMzggMjIuNjM4NkMzLjE5ODg4IDIxLjQ3NjEgMi4yNzg1NiAyMC4xMDkxIDEuNjAwNDQgMTguNTM3NUMwLjkyMjMxNCAxNi45NjYgMC41ODMyNTIgMTUuMjg2OCAwLjU4MzI1MiAxMy41QzAuNTgzMjUyIDExLjcxMzIgMC45MjIzMTQgMTAuMDM0MSAxLjYwMDQ0IDguNDYyNTRDMi4yNzg1NiA2Ljg5MTAxIDMuMTk4ODggNS41MjQgNC4zNjEzOCA0LjM2MTVDNS41MjM4OCAzLjE5OSA2Ljg5MDg5IDIuMjc4NjkgOC40NjI0MiAxLjYwMDU2QzEwLjAzMzkgMC45MjI0MzcgMTEuNzEzMSAwLjU4MzM3NCAxMy40OTk5IDAuNTgzMzc0QzE0Ljg5OTIgMC41ODMzNzQgMTYuMjIzMiAwLjc4Nzg4OCAxNy40NzE4IDEuMTk2OTJDMTguNzIwNCAxLjYwNTk0IDE5Ljg3MjEgMi4xNzY0MyAyMC45MjcgMi45MDgzN0wxOS4wNTQxIDQuODEzNThDMTguMjM2IDQuMjk2OTIgMTcuMzY0MiAzLjg5MzI3IDE2LjQzODUgMy42MDI2NEMxNS41MTI4IDMuMzEyMDIgMTQuNTMzMyAzLjE2NjcxIDEzLjQ5OTkgMy4xNjY3MUMxMC42MzY3IDMuMTY2NzEgOC4xOTg3IDQuMTczMTMgNi4xODU4NiA2LjE4NTk4QzQuMTczMDEgOC4xOTg4MyAzLjE2NjU5IDEwLjYzNjggMy4xNjY1OSAxMy41QzMuMTY2NTkgMTYuMzYzMiA0LjE3MzAxIDE4LjgwMTMgNi4xODU4NiAyMC44MTQxQzguMTk4NyAyMi44MjcgMTAuNjM2NyAyMy44MzM0IDEzLjQ5OTkgMjMuODMzNEMxNi4zNjMxIDIzLjgzMzQgMTguODAxMSAyMi44MjcgMjAuODE0IDIwLjgxNDFDMjIuODI2OCAxOC44MDEzIDIzLjgzMzMgMTYuMzYzMiAyMy44MzMzIDEzLjVDMjMuODMzMyAxMy4xMTI1IDIzLjgxMTcgMTIuNzI1IDIzLjc2ODcgMTIuMzM3NUMyMy43MjU2IDExLjk1IDIzLjY2MSAxMS41NzMzIDIzLjU3NDkgMTEuMjA3M0wyNS42NzM5IDkuMTA4MzdDMjUuOTEwNyA5Ljc5NzI2IDI2LjA5MzcgMTAuNTA3NyAyNi4yMjI4IDExLjIzOTZDMjYuMzUyIDExLjk3MTYgMjYuNDE2NiAxMi43MjUgMjYuNDE2NiAxMy41QzI2LjQxNjYgMTUuMjg2OCAyNi4wNzc1IDE2Ljk2NiAyNS4zOTk0IDE4LjUzNzVDMjQuNzIxMyAyMC4xMDkxIDIzLjgwMSAyMS40NzYxIDIyLjYzODUgMjIuNjM4NkMyMS40NzYgMjMuODAxMSAyMC4xMDg5IDI0LjcyMTQgMTguNTM3NCAyNS4zOTk1QzE2Ljk2NTkgMjYuMDc3NiAxNS4yODY3IDI2LjQxNjcgMTMuNDk5OSAyNi40MTY3Wk0xMS42OTE2IDE5LjQ0MTdMNi4yMDIgMTMuOTUyMUw4LjAxMDMzIDEyLjE0MzhMMTEuNjkxNiAxNS44MjVMMjQuNjA4MyAyLjg3NjA4TDI2LjQxNjYgNC42ODQ0MkwxMS42OTE2IDE5LjQ0MTdaIiBmaWxsPSIjMUE3M0U4Ii8+Cjwvc3ZnPgo="
+}