From 34419621ceebfc78ce3296d8c230f9ff74cccbea Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 3 Jan 2025 16:18:04 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20only=20render=20interactive=20el?=
 =?UTF-8?q?ements=20if=20necessary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/mapCharts/MapChart.tsx            | 15 +++++++++++----
 .../grapher/src/stackedCharts/MarimekkoChart.tsx  | 11 +++++++++--
 .../src/stackedCharts/StackedDiscreteBarChart.tsx | 12 ++++++++++--
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
index 9a350623a8..37b81c26b9 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -633,14 +633,21 @@ export class MapChart
     }
 
     renderMapLegend(): React.ReactElement {
+        const onMouseLeave = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseLeave
+        const onMouseOver = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseOver
+
         return (
             <>
                 {this.numericLegend && (
                     <HorizontalNumericColorLegendComponent
                         legend={this.numericLegend}
                         focusBin={this.numericFocusBracket}
-                        onMouseLeave={this.onLegendMouseLeave}
-                        onMouseOver={this.onLegendMouseOver}
+                        onMouseLeave={onMouseLeave}
+                        onMouseOver={onMouseOver}
                     />
                 )}
                 {this.categoryLegend && (
@@ -649,8 +656,8 @@ export class MapChart
                         x={this.legendX}
                         y={this.categoryLegendY}
                         swatchStrokeColor={this.categoricalBinStroke}
-                        onMouseLeave={this.onLegendMouseLeave}
-                        onMouseOver={this.onLegendMouseOver}
+                        onMouseLeave={onMouseLeave}
+                        onMouseOver={onMouseOver}
                     />
                 )}
             </>
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
index c82b789795..21d92aacbd 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
@@ -1030,6 +1030,13 @@ export class MarimekkoChart
 
         const footer = excludeUndefined([toleranceNotice, roundingNotice])
 
+        const onLegendMouseLeave = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseLeave
+        const onLegendMouseOver = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseOver
+
         return (
             <g
                 ref={this.base}
@@ -1061,8 +1068,8 @@ export class MarimekkoChart
                     x={this.legendX}
                     y={this.categoryLegendY}
                     opacity={this.legendOpacity}
-                    onMouseLeave={this.onLegendMouseLeave}
-                    onMouseOver={this.onLegendMouseOver}
+                    onMouseLeave={onLegendMouseLeave}
+                    onMouseOver={onLegendMouseOver}
                 />
                 {this.renderBars()}
                 {target && (
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
index fc64ac6b2c..aaf95496be 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -727,13 +727,21 @@ export class StackedDiscreteBarChart
 
     renderLegend(): React.ReactElement | void {
         if (!this.showLegend) return
+
+        const onMouseLeave = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseLeave
+        const onMouseOver = this.manager.isStatic
+            ? undefined
+            : this.onLegendMouseOver
+
         return (
             <HorizontalCategoricalColorLegendComponent
                 legend={this.legend}
                 x={this.legendX}
                 y={this.categoryLegendY}
-                onMouseLeave={this.onLegendMouseLeave}
-                onMouseOver={this.onLegendMouseOver}
+                onMouseLeave={onMouseLeave}
+                onMouseOver={onMouseOver}
             />
         )
     }