From df0572f4a8048f68eb725fba9a12df7b183ca21b Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 13 Jun 2024 15:56:20 +0100
Subject: [PATCH] keep tab between views

---
 site/GrapherFigureView.tsx                 |  2 ++
 site/GrapherWithFallback.tsx               |  8 +++++++-
 site/multi-dim/MultiDimDataPageContent.tsx | 14 ++++++++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/site/GrapherFigureView.tsx b/site/GrapherFigureView.tsx
index 965255c6206..928e39d5bd7 100644
--- a/site/GrapherFigureView.tsx
+++ b/site/GrapherFigureView.tsx
@@ -19,6 +19,7 @@ import {
 export class GrapherFigureView extends React.Component<{
     grapher: Grapher
     manager?: GrapherManager
+    getGrapherInstance?: (grapher: Grapher) => void
 }> {
     base: React.RefObject<HTMLDivElement> = React.createRef()
     @observable.ref bounds?: Bounds
@@ -54,6 +55,7 @@ export class GrapherFigureView extends React.Component<{
                 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,
+            getGrapherInstance: this.props.getGrapherInstance,
         }
         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 63bd12218f7..b9b18acea4e 100644
--- a/site/GrapherWithFallback.tsx
+++ b/site/GrapherWithFallback.tsx
@@ -11,12 +11,14 @@ export const GrapherWithFallback = ({
     slug,
     className,
     id,
+    getGrapherInstance,
 }: {
     grapher?: Grapher | undefined
     manager?: GrapherManager
     slug?: string
     className?: string
     id?: string
+    getGrapherInstance?: (grapher: Grapher) => void
 }) => {
     return (
         <div
@@ -29,7 +31,11 @@ export const GrapherWithFallback = ({
         >
             <>
                 {grapher ? (
-                    <GrapherFigureView grapher={grapher} manager={manager} />
+                    <GrapherFigureView
+                        grapher={grapher}
+                        manager={manager}
+                        getGrapherInstance={getGrapherInstance}
+                    />
                 ) : (
                     // 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 139935b80d4..70eec553144 100644
--- a/site/multi-dim/MultiDimDataPageContent.tsx
+++ b/site/multi-dim/MultiDimDataPageContent.tsx
@@ -57,6 +57,7 @@ import {
     Url,
     getWindowQueryParams,
     isEqual,
+    GrapherTabOption,
 } from "@ourworldindata/utils"
 import { AttachmentsContext, DocumentContext } from "../gdocs/OwidGdoc.js"
 import StickyNav from "../blocks/StickyNav.js"
@@ -466,13 +467,21 @@ export const MultiDimDataPageContent = ({
         [selectionArray]
     )
 
+    // This is the ACTUAL grapher instance being used, because GrapherFigureView/GrapherWithFallback are doing weird things and are not actually using the grapher instance we pass into it
+    // and therefore we can not access the grapher state (e.g. tab, selection) from the grapher instance we pass into it
+    // TODO we should probably fix that? seems sensible? change GrapherFigureView around a bit to use the actual grapher inst? or pass a GrapherProgrammaticInterface to it instead?
+    const [grapherInst, setGrapherInst] = useState<Grapher | null>(null)
+
     const grapherConfigComputed = useMemo(() => {
         return {
             ...currentView?.config,
             dimensions: dimensionsConfig,
             isEmbeddedInADataPage: true,
-        }
-    }, [currentView, dimensionsConfig])
+
+            // Keep the tab we last had
+            tab: grapherInst?.tab ?? GrapherTabOption.chart,
+        } as GrapherProgrammaticInterface
+    }, [currentView, dimensionsConfig, grapherInst])
 
     const grapher = useMemo(() => {
         const grapher = new Grapher(grapherConfigComputed)
@@ -616,6 +625,7 @@ export const MultiDimDataPageContent = ({
                         key={JSON.stringify(grapherConfigComputed)}
                         grapher={grapher}
                         manager={grapherManager}
+                        getGrapherInstance={(g) => setGrapherInst}
                         id="explore-the-data"
                     />
                     {datapageDataFromVar && (