From 9691515f65f0047473cdec60246006e5e7140960 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Thu, 12 Dec 2024 14:46:42 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(line+slope)=20hide=20outlines=20fo?=
 =?UTF-8?q?r=20background=20series?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/lineCharts/LineChart.tsx      | 49 +++++++++----------
 .../grapher/src/slopeCharts/SlopeChart.tsx    |  2 +-
 2 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index 2bf32d13c15..7d5e49c64fd 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -186,6 +186,7 @@ class Lines extends React.Component<LinesProps> {
         const strokeOpacity =
             hover.background && !focus.background ? GRAPHER_OPACITY_MUTE : 1
 
+        const showOutline = !focus.background || hover.active
         const outlineColor =
             this.props.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT
         const outlineWidth = strokeWidth + this.lineOutlineWidth * 2
@@ -199,36 +200,30 @@ class Lines extends React.Component<LinesProps> {
             />
         )
 
-        if (this.props.multiColor) {
-            return (
-                <>
-                    {outline}
-                    <MultiColorPolyline
-                        id={makeIdForHumanConsumption(
-                            "multicolor-line",
-                            series.seriesName
-                        )}
-                        points={series.placedPoints}
-                        strokeLinejoin="round"
-                        strokeWidth={strokeWidth}
-                        strokeDasharray={strokeDasharray}
-                        strokeOpacity={strokeOpacity}
-                    />
-                </>
-            )
-        }
+        const line = this.props.multiColor ? (
+            <MultiColorPolyline
+                id={makeIdForHumanConsumption("line", series.seriesName)}
+                points={series.placedPoints}
+                strokeLinejoin="round"
+                strokeWidth={strokeWidth}
+                strokeDasharray={strokeDasharray}
+                strokeOpacity={strokeOpacity}
+            />
+        ) : (
+            <LinePath
+                id={makeIdForHumanConsumption("line", series.seriesName)}
+                placedPoints={series.placedPoints}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                strokeOpacity={strokeOpacity}
+                strokeDasharray={strokeDasharray}
+            />
+        )
 
         return (
             <>
-                {outline}
-                <LinePath
-                    id={makeIdForHumanConsumption("line", series.seriesName)}
-                    placedPoints={series.placedPoints}
-                    stroke={color}
-                    strokeWidth={strokeWidth}
-                    strokeOpacity={strokeOpacity}
-                    strokeDasharray={strokeDasharray}
-                />
+                {showOutline && outline}
+                {line}
             </>
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 52b2fdc6bf0..99314571805 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -1325,7 +1325,7 @@ function Slope({
 }: SlopeProps) {
     const { displayName, startPoint, endPoint, hover, focus } = series
 
-    const showOutline = !hover.background
+    const showOutline = !focus.background || hover.active
     const opacity =
         hover.background && !focus.background ? GRAPHER_OPACITY_MUTE : 1
     const color =