From 449a16bef3c976254b5f1e674ce3711cf5ccf22b Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 13 Jun 2024 15:05:55 +0100
Subject: [PATCH] keep selection between views

---
 site/GrapherFigureView.tsx                 | 14 ++++++--
 site/GrapherWithFallback.tsx               |  6 ++--
 site/multi-dim/MultiDimDataPageContent.tsx | 37 ++++++++++++++++++----
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/site/GrapherFigureView.tsx b/site/GrapherFigureView.tsx
index c29ea3a0653..965255c6206 100644
--- a/site/GrapherFigureView.tsx
+++ b/site/GrapherFigureView.tsx
@@ -2,7 +2,11 @@ import { action, observable } from "mobx"
 import { observer } from "mobx-react"
 import React from "react"
 
-import { Grapher, GrapherProgrammaticInterface } from "@ourworldindata/grapher"
+import {
+    Grapher,
+    GrapherManager,
+    GrapherProgrammaticInterface,
+} from "@ourworldindata/grapher"
 import { Bounds } from "@ourworldindata/utils"
 import {
     ADMIN_BASE_URL,
@@ -12,7 +16,10 @@ import {
 
 // Wrapper for Grapher that uses css on figure element to determine the bounds
 @observer
-export class GrapherFigureView extends React.Component<{ grapher: Grapher }> {
+export class GrapherFigureView extends React.Component<{
+    grapher: Grapher
+    manager?: GrapherManager
+}> {
     base: React.RefObject<HTMLDivElement> = React.createRef()
     @observable.ref bounds?: Bounds
 
@@ -32,7 +39,7 @@ export class GrapherFigureView extends React.Component<{ grapher: Grapher }> {
     }
 
     render() {
-        const { grapher } = this.props
+        const { grapher, manager } = this.props
 
         const props: GrapherProgrammaticInterface = {
             ...grapher.toObject(),
@@ -46,6 +53,7 @@ export class GrapherFigureView extends React.Component<{ grapher: Grapher }> {
             dataApiUrlForAdmin:
                 this.context?.admin?.settings?.DATA_API_FOR_ADMIN_UI, // passed this way because clientSettings are baked and need a recompile to be updated
             enableKeyboardShortcuts: true,
+            manager,
         }
         return (
             // They key= in here makes it so that the chart is re-loaded when the slug changes.
diff --git a/site/GrapherWithFallback.tsx b/site/GrapherWithFallback.tsx
index 3849df575ff..63bd12218f7 100644
--- a/site/GrapherWithFallback.tsx
+++ b/site/GrapherWithFallback.tsx
@@ -1,4 +1,4 @@
-import { Grapher } from "@ourworldindata/grapher"
+import { Grapher, GrapherManager } from "@ourworldindata/grapher"
 import React from "react"
 import { GrapherFigureView } from "./GrapherFigureView.js"
 import cx from "classnames"
@@ -7,11 +7,13 @@ import GrapherImage from "./GrapherImage.js"
 
 export const GrapherWithFallback = ({
     grapher,
+    manager,
     slug,
     className,
     id,
 }: {
     grapher?: Grapher | undefined
+    manager?: GrapherManager
     slug?: string
     className?: string
     id?: string
@@ -27,7 +29,7 @@ export const GrapherWithFallback = ({
         >
             <>
                 {grapher ? (
-                    <GrapherFigureView grapher={grapher} />
+                    <GrapherFigureView grapher={grapher} manager={manager} />
                 ) : (
                     // Render fallback svg when javascript disabled or while
                     // grapher is loading
diff --git a/site/multi-dim/MultiDimDataPageContent.tsx b/site/multi-dim/MultiDimDataPageContent.tsx
index d6cbff82d04..139935b80d4 100644
--- a/site/multi-dim/MultiDimDataPageContent.tsx
+++ b/site/multi-dim/MultiDimDataPageContent.tsx
@@ -3,7 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowDown, faCaretDown } from "@fortawesome/free-solid-svg-icons"
 import {
     Grapher,
+    GrapherManager,
     GrapherProgrammaticInterface,
+    SelectionArray,
     getVariableMetadataRoute,
 } from "@ourworldindata/grapher"
 import {
@@ -71,6 +73,7 @@ import {
     DimensionEnriched,
     MultiDimDataPageConfigType,
 } from "./MultiDimDataPageTypes.js"
+import { action, autorun, reaction } from "mobx"
 declare global {
     interface Window {
         _OWID_MULTI_DIM_CONFIG: MultiDimDataPageConfigType
@@ -78,6 +81,15 @@ declare global {
 }
 export const OWID_DATAPAGE_CONTENT_ROOT_ID = "owid-datapageJson-root"
 
+// https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
+function usePrevious<T>(value: T) {
+    const ref = useRef<T>()
+    useEffect(() => {
+        ref.current = value
+    }, [value])
+    return ref.current
+}
+
 // We still have topic pages on WordPress, whose featured images are specified as absolute URLs which this component handles
 // Once we've migrated all WP topic pages to gdocs, we'll be able to remove this component and just use <Image />
 const DatapageResearchThumbnail = ({
@@ -436,16 +448,28 @@ export const MultiDimDataPageContent = ({
             </a>
         ))
 
-    const grapherConfigComputed = useMemo(() => {
-        return {
-            ...currentView?.config,
-            dimensions: dimensionsConfig,
-            selectedEntityNames: [
+    const selectionArray = useMemo(
+        () =>
+            new SelectionArray([
                 "Spain",
                 "Zimbabwe",
                 "United Kingdom",
                 "World",
-            ],
+            ]),
+        []
+    )
+
+    const grapherManager = useMemo(
+        (): GrapherManager => ({
+            selection: selectionArray,
+        }),
+        [selectionArray]
+    )
+
+    const grapherConfigComputed = useMemo(() => {
+        return {
+            ...currentView?.config,
+            dimensions: dimensionsConfig,
             isEmbeddedInADataPage: true,
         }
     }, [currentView, dimensionsConfig])
@@ -591,6 +615,7 @@ export const MultiDimDataPageContent = ({
                     <GrapherWithFallback
                         key={JSON.stringify(grapherConfigComputed)}
                         grapher={grapher}
+                        manager={grapherManager}
                         id="explore-the-data"
                     />
                     {datapageDataFromVar && (