keep tab between views

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.

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

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 && (