From c95c7bb185b88d629aa18b56f52ee6f840b58cd4 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 29 Nov 2024 18:01:41 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(slope)=20render=20halo=20for=20ent?=
 =?UTF-8?q?ity=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/src/TextWrap/TextWrap.tsx      |  4 +-
 .../grapher/src/lineLegend/LineLegend.tsx     | 62 ++++++++++---------
 .../grapher/src/slopeCharts/SlopeChart.tsx    |  2 +-
 3 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx b/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
index 4f0ece86fa4..6e971e82e42 100644
--- a/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
+++ b/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
@@ -266,10 +266,10 @@ export class TextWrap {
             textProps,
             id,
         }: { textProps?: React.SVGProps<SVGTextElement>; id?: string } = {}
-    ): React.ReactElement | null {
+    ): React.ReactElement {
         const { props, lines, fontSize, fontWeight, lineHeight } = this
 
-        if (lines.length === 0) return null
+        if (lines.length === 0) return <></>
 
         const [correctedX, correctedY] = this.getPositionForSvgRendering(x, y)
 
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
index 09dc45fb37b..b43f81cdab7 100644
--- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -23,9 +23,10 @@ import { BASE_FONT_SIZE, GRAPHER_FONT_SCALE_12 } from "../core/GrapherConstants"
 import { ChartSeries } from "../chart/ChartInterface"
 import { darkenColorForText } from "../color/ColorUtils"
 import { AxisConfig } from "../axis/AxisConfig.js"
+import { Halo } from "../halo/Halo"
 
 // Minimum vertical space between two legend items
-const LEGEND_ITEM_MIN_SPACING = 2
+const LEGEND_ITEM_MIN_SPACING = 4
 // Horizontal distance from the end of the chart to the start of the marker
 const MARKER_MARGIN = 4
 // Space between the label and the annotation
@@ -151,15 +152,14 @@ class LineLabels extends React.Component<{
         return (
             <g id={makeIdForHumanConsumption("text-labels")}>
                 {this.markers.map(({ series, labelText }, index) => {
+                    const key = getSeriesKey(
+                        series,
+                        index,
+                        this.props.uniqueKey
+                    )
                     const textColor = darkenColorForText(series.color)
                     return (
-                        <React.Fragment
-                            key={getSeriesKey(
-                                series,
-                                index,
-                                this.props.uniqueKey
-                            )}
-                        >
+                        <Halo id={key} key={key}>
                             {series.textWrap.render(labelText.x, labelText.y, {
                                 textProps: {
                                     fill: textColor,
@@ -167,7 +167,7 @@ class LineLabels extends React.Component<{
                                     textAnchor: this.anchor,
                                 },
                             })}
-                        </React.Fragment>
+                        </Halo>
                     )
                 })}
             </g>
@@ -182,17 +182,19 @@ class LineLabels extends React.Component<{
         return (
             <g id={makeIdForHumanConsumption("text-annotations")}>
                 {markersWithAnnotations.map(({ series, labelText }, index) => {
+                    const key = getSeriesKey(
+                        series,
+                        index,
+                        this.props.uniqueKey
+                    )
+                    if (!series.annotationTextWrap) return
                     return (
-                        <React.Fragment
-                            key={getSeriesKey(
-                                series,
-                                index,
-                                this.props.uniqueKey
-                            )}
-                        >
-                            {series.annotationTextWrap?.render(
+                        <Halo id={key} key={key}>
+                            {series.annotationTextWrap.render(
                                 labelText.x,
-                                labelText.y + series.textWrap.height,
+                                labelText.y +
+                                    series.textWrap.height +
+                                    ANNOTATION_PADDING,
                                 {
                                     textProps: {
                                         fill: "#333",
@@ -202,7 +204,7 @@ class LineLabels extends React.Component<{
                                     },
                                 }
                             )}
-                        </React.Fragment>
+                        </Halo>
                     )
                 })}
             </g>
@@ -217,6 +219,12 @@ class LineLabels extends React.Component<{
         return (
             <g id={makeIdForHumanConsumption("text-values")}>
                 {markersWithTextValues.map(({ series, labelText }, index) => {
+                    if (!series.valueTextWrap) return
+                    const key = getSeriesKey(
+                        series,
+                        index,
+                        this.props.uniqueKey
+                    )
                     const textColor = darkenColorForText(series.color)
                     const direction = this.anchor === "start" ? 1 : -1
                     const x = this.showValueLabelsInline
@@ -224,23 +232,19 @@ class LineLabels extends React.Component<{
                         : labelText.x
                     const y = this.showValueLabelsInline
                         ? labelText.y
-                        : labelText.y + series.textWrap.height
+                        : labelText.y +
+                          series.textWrap.height +
+                          ANNOTATION_PADDING
                     return (
-                        <React.Fragment
-                            key={getSeriesKey(
-                                series,
-                                index,
-                                this.props.uniqueKey
-                            )}
-                        >
-                            {series.valueTextWrap?.render(x, y, {
+                        <Halo id={key} key={key}>
+                            {series.valueTextWrap.render(x, y, {
                                 textProps: {
                                     fill: textColor,
                                     opacity: this.textOpacity,
                                     textAnchor: this.anchor,
                                 },
                             })}
-                        </React.Fragment>
+                        </Halo>
                     )
                 })}
             </g>
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 06008086e11..52be7eb5a4a 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -959,7 +959,7 @@ export class SlopeChart
                 <GridLines
                     bounds={this.bounds}
                     yAxis={this.yAxis}
-                    endX={this.innerBounds.right}
+                    endX={this.endX}
                 />
                 <VerticalAxisComponent
                     bounds={bounds}