From b7638b8e487ad71892a32f86b493d4476c47d049 Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Wed, 8 Jan 2025 16:57:58 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20work=20on=20facetting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/core/Grapher.tsx              | 76 ++++++++++---------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 1e76d9808c..0a25d1be31 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -3032,6 +3032,30 @@ export class GrapherState {
             (question) => !!getErrorMessageRelatedQuestionUrl(question)
         )
     }
+    set facetStrategy(facet: FacetStrategy) {
+        this.selectedFacetStrategy = facet
+    }
+    set staticFormat(format: GrapherStaticFormat) {
+        this._staticFormat = format
+    }
+    set baseFontSize(val: number) {
+        this._baseFontSize = val
+    }
+    set isInFullScreenMode(newValue: boolean) {
+        // prevent scrolling when in full-screen mode
+        if (newValue) {
+            document.documentElement.classList.add("no-scroll")
+        } else {
+            document.documentElement.classList.remove("no-scroll")
+        }
+
+        // dismiss the share menu
+        this.isShareMenuActive = false
+
+        this._isInFullScreenMode = newValue
+    }
+
+    @observable isShareMenuActive = false
 }
 
 export interface GrapherProps {
@@ -3058,7 +3082,6 @@ export class Grapher extends React.Component<GrapherProps> {
     @observable private hasBeenVisible = false
     @observable private uncaughtError?: Error
     @observable slideShow?: SlideShowController<any>
-    @observable isShareMenuActive = false
 
     /**
      * Whether the chart is rendered in an Admin context (e.g. on owid.cloud).
@@ -3125,7 +3148,7 @@ export class Grapher extends React.Component<GrapherProps> {
     }
 
     @computed get hideFullScreenButton(): boolean {
-        if (this.isInFullScreenMode) return false
+        if (this.grapherState.isInFullScreenMode) return false
         // hide the full screen button if the full screen height
         // is barely larger than the current chart height
         const fullScreenHeight = this.grapherState.windowInnerHeight!
@@ -3293,10 +3316,6 @@ export class Grapher extends React.Component<GrapherProps> {
         )?.column
     }
 
-    set staticFormat(format: GrapherStaticFormat) {
-        this.grapherState._staticFormat = format
-    }
-
     get staticSVG(): string {
         return this.grapherState.generateStaticSvg()
     }
@@ -3542,10 +3561,6 @@ export class Grapher extends React.Component<GrapherProps> {
         )
     }
 
-    set facetStrategy(facet: FacetStrategy) {
-        this.grapherState.selectedFacetStrategy = facet
-    }
-
     @action.bound randomSelection(num: number): void {
         // Continent, Population, GDP PC, GDP, PopDens, UN, Language, etc.
         this.clearErrors()
@@ -3561,34 +3576,24 @@ export class Grapher extends React.Component<GrapherProps> {
         )
     }
 
-    set isInFullScreenMode(newValue: boolean) {
-        // prevent scrolling when in full-screen mode
-        if (newValue) {
-            document.documentElement.classList.add("no-scroll")
-        } else {
-            document.documentElement.classList.remove("no-scroll")
-        }
-
-        // dismiss the share menu
-        this.isShareMenuActive = false
-
-        this.grapherState._isInFullScreenMode = newValue
-    }
-
     @action.bound toggleFullScreenMode(): void {
-        this.isInFullScreenMode = !this.isInFullScreenMode
+        this.grapherState.isInFullScreenMode =
+            !this.grapherState.isInFullScreenMode
     }
 
     @action.bound dismissFullScreen(): void {
         // if a modal is open, dismiss it instead of exiting full-screen mode
-        if (this.grapherState.isModalOpen || this.isShareMenuActive) {
+        if (
+            this.grapherState.isModalOpen ||
+            this.grapherState.isShareMenuActive
+        ) {
             this.grapherState.isEntitySelectorModalOrDrawerOpen = false
             this.grapherState.isSourcesModalOpen = false
             this.grapherState.isEmbedModalOpen = false
             this.grapherState.isDownloadModalOpen = false
-            this.isShareMenuActive = false
+            this.grapherState.isShareMenuActive = false
         } else {
-            this.isInFullScreenMode = false
+            this.grapherState.isInFullScreenMode = false
         }
     }
 
@@ -3675,7 +3680,7 @@ export class Grapher extends React.Component<GrapherProps> {
         if (this.grapherState.isExportingToSvgOrPng)
             return <CaptionedChart manager={this.grapherState} />
 
-        if (this.isInFullScreenMode) {
+        if (this.grapherState.isInFullScreenMode) {
             return (
                 <FullScreen
                     onDismiss={this.dismissFullScreen}
@@ -3803,14 +3808,11 @@ export class Grapher extends React.Component<GrapherProps> {
         }
     }
 
-    set baseFontSize(val: number) {
-        this.grapherState._baseFontSize = val
-    }
-
     @action.bound private setBaseFontSize(): void {
-        this.baseFontSize = this.grapherState.computeBaseFontSizeFromWidth(
-            this.grapherState.captionedChartBounds
-        )
+        this.grapherState.baseFontSize =
+            this.grapherState.computeBaseFontSizeFromWidth(
+                this.grapherState.captionedChartBounds
+            )
     }
 
     // Binds chart properties to global window title and URL. This should only
@@ -3869,7 +3871,7 @@ export class Grapher extends React.Component<GrapherProps> {
                 }
             ),
             reaction(
-                () => this.facetStrategy,
+                () => this.grapherState.facetStrategy,
                 () => this.grapherState.focusArray.clear()
             )
         )