From 1d3e5a8064d6e22c693977aabe8e2e9541f6c76a Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Sun, 12 Nov 2023 17:57:31 +0000
Subject: [PATCH] fix(datapages): don't bind charts in the all charts block to
 the window

basically re-applying 7eb70960b82411cdd23670adbe04139875cf4646 (#2466)
---
 site/DataPageV2.tsx        |  7 +++++--
 site/DataPageV2Content.tsx | 17 ++++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/site/DataPageV2.tsx b/site/DataPageV2.tsx
index 3cb35a6db4a..159ba7d2865 100644
--- a/site/DataPageV2.tsx
+++ b/site/DataPageV2.tsx
@@ -83,10 +83,13 @@ export const DataPageV2 = (props: {
         grapher
     )
 
+    // Note that we cannot set `bindUrlToWindow` and `isEmbeddedInADataPage` here,
+    // because this would then get serialized into the EMBEDDED_JSON object,
+    // and MultiEmbedder would then pick it up for other charts on the page
+    // _aside_ from the main one (e.g. the related charts block),
+    // which we don't want to happen.
     const grapherConfig: GrapherProgrammaticInterface = {
         ...mergedGrapherConfig,
-        isEmbeddedInADataPage: true,
-        bindUrlToWindow: true,
         bakedGrapherURL: BAKED_GRAPHER_URL,
         adminBaseUrl: ADMIN_BASE_URL,
         dataApiUrl: DATA_API_URL,
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
index c05a531934d..730f92685be 100644
--- a/site/DataPageV2Content.tsx
+++ b/site/DataPageV2Content.tsx
@@ -1,7 +1,11 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useMemo } from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowDown } from "@fortawesome/free-solid-svg-icons"
-import { Grapher, GrapherInterface } from "@ourworldindata/grapher"
+import {
+    Grapher,
+    GrapherInterface,
+    GrapherProgrammaticInterface,
+} from "@ourworldindata/grapher"
 import {
     CodeSnippet,
     REUSE_THIS_WORK_SECTION_ID,
@@ -82,7 +86,14 @@ export const DataPageV2Content = ({
             : datapageData.attributionShort || datapageData.titleVariant
 
     // Initialize the grapher for client-side rendering
-    const mergedGrapherConfig = grapherConfig
+    const mergedGrapherConfig: GrapherProgrammaticInterface = useMemo(
+        () => ({
+            ...grapherConfig,
+            isEmbeddedInADataPage: true,
+            bindUrlToWindow: true,
+        }),
+        [grapherConfig]
+    )
 
     useEffect(() => {
         setGrapher(new Grapher(mergedGrapherConfig))