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))