Feature: Refactor code, add colored boxes, information icons, and longer line animation duration

packages/explorable-explanations/package.json

@@ -31,6 +31,7 @@
   },
   "homepage": "https://github.com/GoogleChromeLabs/ps-analysis-tool",
   "dependencies": {
+    "just-throttle": "^4.2.0",
     "p5": "^1.11.0"
   }
-}
+}

packages/explorable-explanations/src/icons.json

@@ -3,5 +3,6 @@
   "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=",
-  "expand": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJtNDgwLTM0MCAxODAtMTgwLTU3LTU2LTEyMyAxMjMtMTIzLTEyMy01NyA1NiAxODAgMTgwWm0wIDI2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIi8+PC9zdmc+"
+  "expand": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJtNDgwLTM0MCAxODAtMTgwLTU3LTU2LTEyMyAxMjMtMTIzLTEyMy01NyA1NiAxODAgMTgwWm0wIDI2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIi8+PC9zdmc+",
+  "info": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNNDQwLTI4MGg4MHYtMjQwaC04MHYyNDBabTQwLTMyMHExNyAwIDI4LjUtMTEuNVQ1MjAtNjQwcTAtMTctMTEuNS0yOC41VDQ4MC02ODBxLTE3IDAtMjguNSAxMS41VDQ0MC02NDBxMCAxNyAxMS41IDI4LjVUNDgwLTYwMFptMCA1MjBxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIvPjwvc3ZnPg=="
 }

packages/explorable-explanations/src/index.js

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './components';
+export * from './protectedAudience/components';
 export {
   app,
   userSketch,
   interestGroupSketch,
   sketch,
-} from './protectedAudience.js';
-export { default as config } from './config.js';
+} from './protectedAudience';
+export { default as config } from './protectedAudience/config.js';