🎉 add allGraphersLoaded event

packages/@ourworldindata/grapher/src/core/GrapherConstants.ts

@@ -13,6 +13,8 @@ export const DEFAULT_GRAPHER_CONFIG_SCHEMA =
 
 export const DEFAULT_GRAPHER_ENTITY_TYPE = "country or region"
 export const DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL = "countries and regions"
+export const GRAPHER_LOADED_EVENT_NAME = "grapherLoaded"
+export const ALL_GRAPHERS_LOADED_EVENT_NAME = "allGraphersLoaded"
 
 export const DEFAULT_GRAPHER_WIDTH = 850
 export const DEFAULT_GRAPHER_HEIGHT = 600

packages/@ourworldindata/grapher/src/index.ts

@@ -17,6 +17,8 @@ export {
     DEFAULT_GRAPHER_HEIGHT,
     STATIC_EXPORT_DETAIL_SPACING,
     DEFAULT_GRAPHER_ENTITY_TYPE,
+    GRAPHER_LOADED_EVENT_NAME,
+    ALL_GRAPHERS_LOADED_EVENT_NAME,
     CookieKey,
     BASE_FONT_SIZE,
     ThereWasAProblemLoadingThisChart,

site/runAllGraphersLoadedListener.ts

@@ -0,0 +1,54 @@
+import {
+    GRAPHER_EMBEDDED_FIGURE_ATTR,
+    GRAPHER_LOADED_EVENT_NAME,
+    ALL_GRAPHERS_LOADED_EVENT_NAME,
+} from "@ourworldindata/grapher"
+import {
+    EXPLORER_EMBEDDED_FIGURE_SELECTOR,
+    ExplorerContainerId,
+} from "../explorer/ExplorerConstants.js"
+
+// Counts the number of embeds in the page and dispatches an event when all of them are loaded
+// See Grapher.tsx for the mobx reaction that is dispatched when a grapher is loaded
+export function runAllGraphersLoadedListener() {
+    const grapherEmbeds = [
+        ...document.querySelectorAll(
+            [
+                // embedded graphers
+                `[${GRAPHER_EMBEDDED_FIGURE_ATTR}]`,
+                // embedded explorers
+                `[${EXPLORER_EMBEDDED_FIGURE_SELECTOR}]`,
+                // explorers in explorer pages
+                `#${ExplorerContainerId}`,
+            ].join()
+        ),
+        // filter out embeds that have a parent with display:none e.g. inside expandable paragraphs
+    ].filter((el) => {
+        let parent = el.parentElement
+        while (parent) {
+            if (parent.style.display === "none") return false
+            parent = parent.parentElement
+        }
+        return true
+    })
+
+    if (grapherEmbeds.length === 0) {
+        // Putting this dispatch inside a timeout so external scripts have enough time to set up a listener.
+        // This isn't ideal, but it seems better than duplicating the grapher selection and filtering code any time
+        // we need to handle the case where there are no graphers on the page.
+        setTimeout(() => {
+            document.dispatchEvent(
+                new CustomEvent(ALL_GRAPHERS_LOADED_EVENT_NAME)
+            )
+        }, 2000)
+    }
+    let loadedEmbeds = 0
+    document.addEventListener(GRAPHER_LOADED_EVENT_NAME, () => {
+        loadedEmbeds++
+        if (loadedEmbeds === grapherEmbeds.length) {
+            document.dispatchEvent(
+                new CustomEvent(ALL_GRAPHERS_LOADED_EVENT_NAME)
+            )
+        }
+    })
+}

site/runSiteFooterScripts.ts

@@ -22,6 +22,7 @@ import {
     _OWID_DATA_INSIGHTS_INDEX_PAGE_DATA,
     hydrateDataInsightsIndexPage,
 } from "./DataInsightsIndexPageContent.js"
+import { runAllGraphersLoadedListener } from "./runAllGraphersLoadedListener.js"
 
 export const runSiteFooterScripts = (
     args:
@@ -42,6 +43,7 @@ export const runSiteFooterScripts = (
     switch (context) {
         case SiteFooterContext.dataPageV2:
             hydrateDataPageV2Content(isPreviewing)
+            runAllGraphersLoadedListener()
             runLightbox()
             runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
             runSiteTools()
@@ -51,12 +53,14 @@ export const runSiteFooterScripts = (
         case SiteFooterContext.grapherPage:
         case SiteFooterContext.explorerPage:
             runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
+            runAllGraphersLoadedListener()
             runSiteTools()
             runCookiePreferencesManager()
             runDetailsOnDemand()
             break
         case SiteFooterContext.gdocsDocument:
             hydrateOwidGdoc(debug, isPreviewing)
+            runAllGraphersLoadedListener()
             runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
             runFootnotes()
             runDetailsOnDemand()
@@ -87,6 +91,7 @@ export const runSiteFooterScripts = (
             hydrateStickyNav()
             MultiEmbedderSingleton.setUpGlobalEntitySelectorForEmbeds()
             MultiEmbedderSingleton.embedAll()
+            runAllGraphersLoadedListener()
             runLightbox()
             hydrateProminentLink(MultiEmbedderSingleton.selection)
             runFootnotes()