From fdc0fe31c0df86a39a828a6a11945b59df109e92 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 8 Nov 2024 15:42:11 +0100
Subject: [PATCH 1/9] =?UTF-8?q?=E2=9C=A8=20(stacked=20area)=20clean=20up?=
 =?UTF-8?q?=20hover=20states?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/chart/ChartManager.ts         |   2 +-
 .../grapher/src/facetChart/FacetChart.tsx     |   8 +-
 .../grapher/src/lineCharts/LineChart.tsx      |  11 +-
 .../src/stackedCharts/StackedAreaChart.tsx    | 121 ++++++++++--------
 .../src/stackedCharts/StackedBarChart.tsx     |   6 +-
 5 files changed, 80 insertions(+), 68 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
index e4116cf0410..d00e2912578 100644
--- a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
+++ b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
@@ -80,7 +80,7 @@ export interface ChartManager {
     sortConfig?: SortConfig
     showNoDataArea?: boolean
 
-    externalLegendFocusBin?: ColorScaleBin | undefined
+    externalLegendHoverBin?: ColorScaleBin | undefined
     disableIntroAnimation?: boolean
 
     missingDataStrategy?: MissingDataStrategy
diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
index 8fd30e2bed9..bf54337c070 100644
--- a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
+++ b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
@@ -475,7 +475,7 @@ export class FacetChart
             const manager = {
                 ...series.manager,
                 useValueBasedColorScheme,
-                externalLegendFocusBin: this.legendFocusBin,
+                externalLegendHoverBin: this.legendHoverBin,
                 xAxisConfig: {
                     // For now, sharing an x axis means hiding the tick labels of inner facets.
                     // This means that none of the x axes are actually hidden (we just don't plot their tick labels).
@@ -757,15 +757,15 @@ export class FacetChart
         return newBins
     }
 
-    @observable.ref private legendFocusBin: ColorScaleBin | undefined =
+    @observable.ref private legendHoverBin: ColorScaleBin | undefined =
         undefined
 
     @action.bound onLegendMouseOver(bin: ColorScaleBin): void {
-        this.legendFocusBin = bin
+        this.legendHoverBin = bin
     }
 
     @action.bound onLegendMouseLeave(): void {
-        this.legendFocusBin = undefined
+        this.legendHoverBin = undefined
     }
 
     // end of legend props
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index 2559f9e8a62..8dc8ab27ee2 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -550,7 +550,7 @@ export class LineChart
 
     seriesIsBlurred(series: LineChartSeries): boolean {
         return (
-            this.isFocusMode &&
+            this.isFocusModeActive &&
             !this.focusedSeriesNames.includes(series.seriesName)
         )
     }
@@ -746,7 +746,6 @@ export class LineChart
     defaultRightPadding = 1
 
     @observable hoveredSeriesName?: SeriesName
-
     @observable private hoverTimer?: NodeJS.Timeout
 
     @action.bound onLineLegendMouseOver(seriesName: SeriesName): void {
@@ -767,22 +766,22 @@ export class LineChart
     }
 
     @computed get focusedSeriesNames(): string[] {
-        const { externalLegendFocusBin } = this.manager
+        const { externalLegendHoverBin } = this.manager
         const focusedSeriesNames = excludeUndefined([
             this.props.manager.entityYearHighlight?.entityName,
             this.hoveredSeriesName,
         ])
-        if (externalLegendFocusBin) {
+        if (externalLegendHoverBin) {
             focusedSeriesNames.push(
                 ...this.series
                     .map((s) => s.seriesName)
-                    .filter((name) => externalLegendFocusBin.contains(name))
+                    .filter((name) => externalLegendHoverBin.contains(name))
             )
         }
         return focusedSeriesNames
     }
 
-    @computed get isFocusMode(): boolean {
+    @computed get isFocusModeActive(): boolean {
         return this.focusedSeriesNames.length > 0
     }
 
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index 5ca7f9e4636..d3777f2f36b 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -59,25 +59,31 @@ import { AxisConfig } from "../axis/AxisConfig.js"
 interface AreasProps extends React.SVGAttributes<SVGGElement> {
     dualAxis: DualAxis
     seriesArr: readonly StackedSeries<Time>[]
-    focusedSeriesNames: SeriesName[]
-    hoveredAreaName?: SeriesName
+    focusedSeriesName?: SeriesName
     onAreaMouseEnter?: (seriesName: SeriesName) => void
     onAreaMouseLeave?: () => void
 }
 
 const STACKED_AREA_CHART_CLASS_NAME = "StackedArea"
 
-const BLUR_COLOR = "#ddd"
+const AREA_OPACITY = {
+    DEFAULT: GRAPHER_AREA_OPACITY_DEFAULT,
+    HOVER: 1,
+    MUTE: 0.3,
+}
+
+const BORDER_OPACITY = {
+    DEFAULT: 0.7,
+    HOVER: 1,
+}
+
+const BORDER_WIDTH = {
+    DEFAULT: 0.5,
+    HOVER: 1.5,
+}
 
 @observer
 class Areas extends React.Component<AreasProps> {
-    private seriesIsBlur(series: StackedSeries<Time>): boolean {
-        return (
-            this.props.focusedSeriesNames.length > 0 &&
-            !this.props.focusedSeriesNames.includes(series.seriesName)
-        )
-    }
-
     @bind placePoint(point: StackedPoint<number>): StackedPlacedPoint {
         const { dualAxis } = this.props
         const { horizontalAxis, verticalAxis } = dualAxis
@@ -146,9 +152,13 @@ class Areas extends React.Component<AreasProps> {
             }))
     }
 
+    @computed get isFocusModeActive(): boolean {
+        return this.props.focusedSeriesName !== undefined
+    }
+
     @computed private get areas(): React.ReactElement[] {
         const { placedSeriesArr } = this
-        const { dualAxis, hoveredAreaName } = this.props
+        const { dualAxis, focusedSeriesName } = this.props
         const { verticalAxis } = dualAxis
 
         return placedSeriesArr.map((series, index) => {
@@ -169,11 +179,11 @@ class Areas extends React.Component<AreasProps> {
                 ]
             }
             const points = [...placedPoints, ...reverse(clone(prevPoints))]
-            const opacity = !hoveredAreaName
-                ? GRAPHER_AREA_OPACITY_DEFAULT // normal opacity
-                : hoveredAreaName === series.seriesName
-                  ? GRAPHER_AREA_OPACITY_DEFAULT // hovered
-                  : 0.2 // non-hovered
+            const opacity = !this.isFocusModeActive
+                ? AREA_OPACITY.DEFAULT // normal opacity
+                : focusedSeriesName === series.seriesName
+                  ? AREA_OPACITY.HOVER // hovered
+                  : AREA_OPACITY.MUTE // non-hovered
 
             return (
                 <path
@@ -182,7 +192,7 @@ class Areas extends React.Component<AreasProps> {
                     key={series.seriesName + "-area"}
                     strokeLinecap="round"
                     d={pointsToPath(points)}
-                    fill={this.seriesIsBlur(series) ? BLUR_COLOR : series.color}
+                    fill={series.color}
                     fillOpacity={opacity}
                     clipPath={this.props.clipPath}
                     onMouseEnter={(): void => {
@@ -198,15 +208,17 @@ class Areas extends React.Component<AreasProps> {
 
     @computed private get borders(): React.ReactElement[] {
         const { placedSeriesArr } = this
-        const { hoveredAreaName } = this.props
+        const { focusedSeriesName } = this.props
 
         return placedSeriesArr.map((placedSeries) => {
             const opacity =
-                hoveredAreaName === placedSeries.seriesName
-                    ? 1 // hovered
-                    : 0.7 // non-hovered
-            const weight =
-                hoveredAreaName === placedSeries.seriesName ? 1.5 : 0.5
+                focusedSeriesName === placedSeries.seriesName
+                    ? BORDER_OPACITY.HOVER // hovered
+                    : BORDER_OPACITY.DEFAULT // non-hovered
+            const strokeWidth =
+                focusedSeriesName === placedSeries.seriesName
+                    ? BORDER_WIDTH.HOVER
+                    : BORDER_WIDTH.DEFAULT
 
             return (
                 <path
@@ -217,15 +229,9 @@ class Areas extends React.Component<AreasProps> {
                     key={placedSeries.seriesName + "-border"}
                     strokeLinecap="round"
                     d={pointsToPath(placedSeries.placedPoints)}
-                    stroke={rgb(
-                        this.seriesIsBlur(placedSeries)
-                            ? BLUR_COLOR
-                            : placedSeries.color
-                    )
-                        .darker(0.5)
-                        .toString()}
+                    stroke={rgb(placedSeries.color).darker(0.5).toString()}
                     strokeOpacity={opacity}
-                    strokeWidth={weight}
+                    strokeWidth={strokeWidth}
                     fill="none"
                     clipPath={this.props.clipPath}
                     onMouseEnter={(): void => {
@@ -327,7 +333,7 @@ export class StackedAreaChart
         extend(this.tooltipState.target, { series: undefined })
     }
 
-    @observable hoverSeriesName?: SeriesName
+    @observable lineLegendHoveredSeriesName?: SeriesName
     @observable private hoverTimer?: NodeJS.Timeout
 
     @computed protected get paddingForLegendRight(): number {
@@ -378,38 +384,47 @@ export class StackedAreaChart
 
     @action.bound onLineLegendMouseOver(seriesName: SeriesName): void {
         clearTimeout(this.hoverTimer)
-        this.hoverSeriesName = seriesName
+        this.lineLegendHoveredSeriesName = seriesName
     }
 
     @action.bound onLineLegendMouseLeave(): void {
         clearTimeout(this.hoverTimer)
         this.hoverTimer = setTimeout(() => {
             // wait before clearing selection in case the mouse is moving quickly over neighboring labels
-            this.hoverSeriesName = undefined
+            this.lineLegendHoveredSeriesName = undefined
         }, 200)
     }
 
-    @computed get focusedSeriesNames(): string[] {
-        const { externalLegendFocusBin } = this.manager
-        const externalFocusedSeriesNames = externalLegendFocusBin
-            ? this.rawSeries
-                  .map((s) => s.seriesName)
-                  .filter((name) => externalLegendFocusBin.contains(name))
-            : []
-        return excludeUndefined([
-            this.hoverSeriesName,
-            ...externalFocusedSeriesNames,
-        ])
+    @computed get facetLegendHoveredSeriesName(): SeriesName | undefined {
+        const { externalLegendHoverBin } = this.manager
+        if (!externalLegendHoverBin) return undefined
+        const hoveredSeriesNames = this.rawSeries
+            .map((s) => s.seriesName)
+            .filter((name) => externalLegendHoverBin.contains(name))
+        // stacked area charts can't plot the same entity or column multiple times
+        return hoveredSeriesNames.length > 0 ? hoveredSeriesNames[0] : undefined
     }
 
-    @computed get isFocusMode(): boolean {
-        return this.focusedSeriesNames.length > 0
+    @computed get focusedSeriesName(): SeriesName | undefined {
+        return (
+            // if the chart area is hovered
+            this.tooltipState.target?.series ??
+            // if the line legend is hovered
+            this.lineLegendHoveredSeriesName ??
+            // if the facet legend is hovered
+            this.facetLegendHoveredSeriesName
+        )
+    }
+
+    // used by the line legend component
+    @computed get focusedSeriesNames(): string[] {
+        return this.focusedSeriesName ? [this.focusedSeriesName] : []
     }
 
     seriesIsBlur(series: StackedSeries<Time>): boolean {
         return (
-            this.focusedSeriesNames.length > 0 &&
-            !this.focusedSeriesNames.includes(series.seriesName)
+            this.focusedSeriesName !== undefined &&
+            this.focusedSeriesName !== series.seriesName
         )
     }
 
@@ -464,7 +479,7 @@ export class StackedAreaChart
         if (!this.manager.shouldPinTooltipToBottom) {
             this.dismissTooltip()
         }
-        this.hoverSeriesName = undefined
+        this.lineLegendHoveredSeriesName = undefined
     }
 
     @computed private get activeXVerticalLine():
@@ -650,7 +665,7 @@ export class StackedAreaChart
                 <Areas
                     dualAxis={this.dualAxis}
                     seriesArr={this.series}
-                    focusedSeriesNames={this.focusedSeriesNames}
+                    focusedSeriesName={this.focusedSeriesName}
                 />
             </>
         )
@@ -658,7 +673,6 @@ export class StackedAreaChart
 
     renderInteractive(): React.ReactElement {
         const { bounds, dualAxis, renderUid, series } = this
-        const { target } = this.tooltipState
 
         const clipPath = makeClipPath(renderUid, {
             ...bounds,
@@ -689,8 +703,7 @@ export class StackedAreaChart
                     <Areas
                         dualAxis={dualAxis}
                         seriesArr={series}
-                        focusedSeriesNames={this.focusedSeriesNames}
-                        hoveredAreaName={target?.series}
+                        focusedSeriesName={this.focusedSeriesName}
                         onAreaMouseEnter={this.onAreaMouseEnter}
                         onAreaMouseLeave={this.onAreaMouseLeave}
                     />
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
index cf881398051..dd19080c685 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
@@ -215,7 +215,7 @@ export class StackedBarChart
     // All currently hovered group keys, combining the legend and the main UI
     @computed get hoverKeys(): string[] {
         const { hoverColor, manager } = this
-        const { externalLegendFocusBin } = manager
+        const { externalLegendHoverBin } = manager
 
         const hoverKeys =
             hoverColor === undefined
@@ -225,11 +225,11 @@ export class StackedBarChart
                           .filter((g) => g.color === hoverColor)
                           .map((g) => g.seriesName)
                   )
-        if (externalLegendFocusBin) {
+        if (externalLegendHoverBin) {
             hoverKeys.push(
                 ...this.rawSeries
                     .map((g) => g.seriesName)
-                    .filter((name) => externalLegendFocusBin.contains(name))
+                    .filter((name) => externalLegendHoverBin.contains(name))
             )
         }
 

From 3dc05c17790c3a2cc5eab407b0a2abb5b019a457 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 8 Nov 2024 16:08:17 +0100
Subject: [PATCH 2/9] =?UTF-8?q?=E2=9C=A8=20(stacked=20area)=20match=20tool?=
 =?UTF-8?q?tip=20swatch=20opacity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/core/GrapherConstants.ts      |  2 ++
 .../grapher/src/lineCharts/LineChart.tsx      |  3 ++-
 .../src/stackedCharts/StackedAreaChart.tsx    | 18 +++++++------
 .../src/stackedCharts/StackedBarChart.tsx     | 25 +++++++++++++++----
 .../stackedCharts/StackedDiscreteBarChart.tsx |  4 +--
 .../grapher/src/tooltip/TooltipContents.tsx   |  7 ++++--
 .../grapher/src/tooltip/TooltipProps.ts       |  5 +++-
 7 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
index 86042194b1b..4e659b7d3e9 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -32,6 +32,8 @@ export const GRAPHER_AXIS_LINE_WIDTH_DEFAULT = 1
 export const GRAPHER_AXIS_LINE_WIDTH_THICK = 2
 
 export const GRAPHER_AREA_OPACITY_DEFAULT = 0.8
+export const GRAPHER_AREA_OPACITY_MUTE = 0.3
+export const GRAPHER_AREA_OPACITY_FOCUS = 1
 
 export const BASE_FONT_SIZE = 16
 
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index 8dc8ab27ee2..29fe69f5ae8 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -716,13 +716,14 @@ export class LineChart
                         const blurred =
                             this.seriesIsBlurred(series) || point === undefined
 
-                        const swatch = blurred
+                        const color = blurred
                             ? BLUR_LINE_COLOR
                             : this.hasColorScale
                               ? darkenColorForLine(
                                     this.getColorScaleColor(point?.colorValue)
                                 )
                               : series.color
+                        const swatch = { color }
 
                         const values = excludeUndefined([
                             point?.y,
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index d3777f2f36b..bdfc5dda6a3 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -21,6 +21,8 @@ import { computed, action, observable } from "mobx"
 import { SeriesName } from "@ourworldindata/types"
 import {
     GRAPHER_AREA_OPACITY_DEFAULT,
+    GRAPHER_AREA_OPACITY_MUTE,
+    GRAPHER_AREA_OPACITY_FOCUS,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     GRAPHER_AXIS_LINE_WIDTH_THICK,
 } from "../core/GrapherConstants"
@@ -68,8 +70,8 @@ const STACKED_AREA_CHART_CLASS_NAME = "StackedArea"
 
 const AREA_OPACITY = {
     DEFAULT: GRAPHER_AREA_OPACITY_DEFAULT,
-    HOVER: 1,
-    MUTE: 0.3,
+    FOCUS: GRAPHER_AREA_OPACITY_FOCUS,
+    MUTE: GRAPHER_AREA_OPACITY_MUTE,
 }
 
 const BORDER_OPACITY = {
@@ -182,7 +184,7 @@ class Areas extends React.Component<AreasProps> {
             const opacity = !this.isFocusModeActive
                 ? AREA_OPACITY.DEFAULT // normal opacity
                 : focusedSeriesName === series.seriesName
-                  ? AREA_OPACITY.HOVER // hovered
+                  ? AREA_OPACITY.FOCUS // hovered
                   : AREA_OPACITY.MUTE // non-hovered
 
             return (
@@ -582,17 +584,17 @@ export class StackedAreaChart
                         .slice()
                         .reverse()
                         .map((series) => {
-                            const {
-                                seriesName: name,
-                                color: swatch,
-                                points,
-                            } = series
+                            const { seriesName: name, color, points } = series
                             const point = points[hoveredPointIndex]
                             const blurred = this.seriesIsBlur(series)
                             const focused = name === target.series
                             const values = [
                                 point?.fake ? undefined : point?.value,
                             ]
+                            const opacity = focused
+                                ? AREA_OPACITY.FOCUS
+                                : AREA_OPACITY.DEFAULT
+                            const swatch = { color, opacity }
 
                             return {
                                 name,
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
index dd19080c685..6dcbab4f96c 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
@@ -31,6 +31,8 @@ import {
 import {
     BASE_FONT_SIZE,
     GRAPHER_AREA_OPACITY_DEFAULT,
+    GRAPHER_AREA_OPACITY_FOCUS,
+    GRAPHER_AREA_OPACITY_MUTE,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     GRAPHER_AXIS_LINE_WIDTH_THICK,
     GRAPHER_FONT_SCALE_12,
@@ -77,6 +79,12 @@ interface TickmarkPlacement {
     isHidden: boolean
 }
 
+const BAR_OPACITY = {
+    DEFAULT: GRAPHER_AREA_OPACITY_DEFAULT,
+    FOCUS: GRAPHER_AREA_OPACITY_FOCUS,
+    MUTE: GRAPHER_AREA_OPACITY_MUTE,
+}
+
 @observer
 class StackedBarSegment extends React.Component<StackedBarSegmentProps> {
     base: React.RefObject<SVGRectElement> = React.createRef()
@@ -99,7 +107,7 @@ class StackedBarSegment extends React.Component<StackedBarSegmentProps> {
     }
 
     @computed get trueOpacity(): number {
-        return this.mouseOver ? 1 : this.props.opacity
+        return this.mouseOver ? BAR_OPACITY.FOCUS : this.props.opacity
     }
 
     @action.bound onBarMouseOver(): void {
@@ -404,7 +412,12 @@ export class StackedBarChart
                             const values = [
                                 point?.fake ? undefined : point?.value,
                             ]
-                            const swatch = point?.color ?? seriesColor
+
+                            const color = point?.color ?? seriesColor
+                            const opacity = focused
+                                ? BAR_OPACITY.FOCUS
+                                : BAR_OPACITY.DEFAULT
+                            const swatch = { color, opacity }
 
                             return { name, swatch, blurred, focused, values }
                         }
@@ -501,8 +514,8 @@ export class StackedBarChart
                     )
                     const opacity =
                         isLegendHovered || this.hoverKeys.length === 0
-                            ? GRAPHER_AREA_OPACITY_DEFAULT
-                            : 0.2
+                            ? BAR_OPACITY.DEFAULT
+                            : BAR_OPACITY.MUTE
 
                     return (
                         <g
@@ -517,7 +530,9 @@ export class StackedBarChart
                                     horizontalAxis.place(bar.position) -
                                     this.barWidth / 2
                                 const barOpacity =
-                                    bar === target?.bar ? 1 : opacity
+                                    bar === target?.bar
+                                        ? BAR_OPACITY.FOCUS
+                                        : opacity
 
                                 return (
                                     <StackedBarSegment
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
index 0cc757a8c33..c575e65c476 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -923,13 +923,13 @@ export class StackedDiscreteBarChart
                         rows={item.bars.map((bar) => {
                             const {
                                 seriesName: name,
-                                color: swatch,
+                                color,
                                 point: { value, time, fake: blurred },
                             } = bar
 
                             return {
                                 name,
-                                swatch,
+                                swatch: { color },
                                 blurred,
                                 focused: name === target.seriesName,
                                 values: [!blurred ? value : undefined],
diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
index da807f42e70..5a3f49068c7 100644
--- a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
+++ b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
@@ -236,7 +236,7 @@ export class TooltipTable extends React.Component<TooltipTableProps> {
                             annotation,
                             values,
                             notice,
-                            swatch = "transparent",
+                            swatch,
                         } = row
                         const [_m, seriesName, seriesParenthetical] =
                             name.trim().match(/^(.*?)(\([^()]*\))?$/) ?? []
@@ -253,7 +253,10 @@ export class TooltipTable extends React.Component<TooltipTableProps> {
                                 <td className="series-color">
                                     <div
                                         className="swatch"
-                                        style={{ backgroundColor: swatch }}
+                                        style={{
+                                            backgroundColor: swatch?.color,
+                                            opacity: swatch?.opacity,
+                                        }}
                                     />
                                 </td>
                                 <td className="series-name">
diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts b/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts
index 922ee779a40..e3222a8949b 100644
--- a/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts
+++ b/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts
@@ -64,7 +64,10 @@ export interface TooltipTableProps {
 export interface TooltipTableRow {
     name: string
     annotation?: string
-    swatch?: string // css color string for the series's swatch
+    swatch?: {
+        color?: string // css color string for the series's swatch
+        opacity?: number
+    }
     focused?: boolean // highlighted (based on hovered series in chart)
     blurred?: boolean // greyed out (typically due to missing data)
     striped?: boolean // use textured swatch (to show data is extrapolated)

From 5450fbb49ecfbc6ff321bc9d95894d562a7394f6 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 8 Nov 2024 16:27:00 +0100
Subject: [PATCH 3/9] =?UTF-8?q?=F0=9F=90=9B=20(stacked=20area)=20make=20th?=
 =?UTF-8?q?e=20whole=20chart=20area=20hoverable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index 29fe69f5ae8..f647e3c338c 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -479,7 +479,6 @@ export class LineChart
         if (!ref) return
 
         const mouse = getRelativeMouse(ref, ev)
-
         const boxPadding = isMobile() ? 44 : 25
 
         // expand the box width, so it's easier to see the tooltip for the first & last timepoints

From 7367a8bdaeb7cafe376cf1be45fbaacd00a59bf3 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 8 Nov 2024 16:43:43 +0100
Subject: [PATCH 4/9] =?UTF-8?q?=E2=9C=A8=20(line=20legend)=20mute=20labels?=
 =?UTF-8?q?=20instead=20of=20greying=20them=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/lineCharts/LineChart.tsx        |  3 ++-
 .../grapher/src/lineLegend/LineLegend.tsx       | 17 +++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index f647e3c338c..876a49b57bf 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -307,8 +307,9 @@ class Lines extends React.Component<LinesProps> {
                                 "background-line",
                                 series.seriesName
                             ),
-                            stroke: "#ddd",
+                            stroke: series.color,
                             strokeWidth: 1,
+                            strokeOpacity: 0.3,
                         })}
                     </React.Fragment>
                 ))}
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
index 7ae08fd5dea..01613c1a48c 100644
--- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -122,13 +122,15 @@ class LineLabels extends React.Component<{
         })
     }
 
+    @computed get textOpacity(): number {
+        return this.props.isFocus ? 1 : 0.6
+    }
+
     @computed get textLabels(): React.ReactElement {
         return (
             <g id={makeIdForHumanConsumption("text-labels")}>
                 {this.markers.map(({ series, labelText }, index) => {
-                    const textColor = this.props.isFocus
-                        ? darkenColorForText(series.color)
-                        : "#ddd"
+                    const textColor = darkenColorForText(series.color)
                     return (
                         <React.Fragment
                             key={getSeriesKey(
@@ -138,7 +140,10 @@ class LineLabels extends React.Component<{
                             )}
                         >
                             {series.textWrap.render(labelText.x, labelText.y, {
-                                textProps: { fill: textColor },
+                                textProps: {
+                                    fill: textColor,
+                                    opacity: this.textOpacity,
+                                },
                             })}
                         </React.Fragment>
                     )
@@ -155,7 +160,6 @@ class LineLabels extends React.Component<{
         return (
             <g id={makeIdForHumanConsumption("text-annotations")}>
                 {markersWithAnnotations.map(({ series, labelText }, index) => {
-                    const annotationColor = this.props.isFocus ? "#333" : "#ddd"
                     return (
                         <React.Fragment
                             key={getSeriesKey(
@@ -169,7 +173,8 @@ class LineLabels extends React.Component<{
                                 labelText.y + series.textWrap.height,
                                 {
                                     textProps: {
-                                        fill: annotationColor,
+                                        fill: "#333",
+                                        opacity: this.textOpacity,
                                         style: { fontWeight: 300 },
                                     },
                                 }

From 37c5c83d6959ec7e3b927d89723a50f186e8447c Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 8 Nov 2024 17:08:59 +0100
Subject: [PATCH 5/9] =?UTF-8?q?=F0=9F=90=9B=20(stacked=20area)=20show=20ma?=
 =?UTF-8?q?rkers=20on=20hover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/stackedCharts/StackedAreaChart.tsx           | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index bdfc5dda6a3..0752ba77673 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -497,9 +497,8 @@ export class StackedAreaChart
             <g className="hoverIndicator" style={{ pointerEvents: "none" }}>
                 {series.map((series) => {
                     const point = series.points[hoveredPointIndex]
-                    return this.seriesIsBlur(series) ||
-                        point.fake ||
-                        point.value === 0 ? null : (
+                    if (point.fake || point.value === 0) return null
+                    return (
                         <circle
                             key={series.seriesName}
                             cx={horizontalAxis.place(point.position)}

From 1bc71891b2922812c37ed0eb59642baec5cff6f3 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 8 Nov 2024 17:13:30 +0100
Subject: [PATCH 6/9] =?UTF-8?q?=E2=9C=A8=20(stacked=20area)=20mute=20borde?=
 =?UTF-8?q?rs=20when=20in=20background?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/stackedCharts/StackedAreaChart.tsx     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index 0752ba77673..05ee40ddd2b 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -77,6 +77,7 @@ const AREA_OPACITY = {
 const BORDER_OPACITY = {
     DEFAULT: 0.7,
     HOVER: 1,
+    MUTE: 0.3,
 }
 
 const BORDER_WIDTH = {
@@ -213,10 +214,11 @@ class Areas extends React.Component<AreasProps> {
         const { focusedSeriesName } = this.props
 
         return placedSeriesArr.map((placedSeries) => {
-            const opacity =
-                focusedSeriesName === placedSeries.seriesName
-                    ? BORDER_OPACITY.HOVER // hovered
-                    : BORDER_OPACITY.DEFAULT // non-hovered
+            const opacity = !this.isFocusModeActive
+                ? BORDER_OPACITY.DEFAULT // normal opacity
+                : focusedSeriesName === placedSeries.seriesName
+                  ? BORDER_OPACITY.HOVER // hovered
+                  : BORDER_OPACITY.MUTE // non-hovered
             const strokeWidth =
                 focusedSeriesName === placedSeries.seriesName
                     ? BORDER_WIDTH.HOVER

From 876c7922e66339618e4543393ab4ff237077a1ed Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 8 Nov 2024 17:20:40 +0100
Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=90=9B=20(stacked=20area)=20recognize?=
 =?UTF-8?q?=20area=20when=20hovered?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/stackedCharts/StackedAreaChart.tsx       | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index 05ee40ddd2b..bb36467b120 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -330,7 +330,14 @@ export class StackedAreaChart
     }>({ fade: "immediate" })
 
     @action.bound private onAreaMouseEnter(seriesName: SeriesName): void {
-        extend(this.tooltipState.target, { series: seriesName })
+        if (this.tooltipState.target) {
+            extend(this.tooltipState.target, { series: seriesName })
+        } else {
+            this.tooltipState.target = {
+                index: 0, // might be incorrect but will be updated immediately by the move event handler
+                series: seriesName,
+            }
+        }
     }
 
     @action.bound private onAreaMouseLeave(): void {

From 5ff9e40451d8b543f15dcba26e69cab2cb314d07 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Mon, 11 Nov 2024 10:01:58 +0100
Subject: [PATCH 8/9] =?UTF-8?q?=E2=9C=A8=20(stacked=20area)=20do=20not=20b?=
 =?UTF-8?q?lur=20rows=20in=20the=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/stackedCharts/StackedAreaChart.tsx       | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index bb36467b120..a82fd79dfd3 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -432,13 +432,6 @@ export class StackedAreaChart
         return this.focusedSeriesName ? [this.focusedSeriesName] : []
     }
 
-    seriesIsBlur(series: StackedSeries<Time>): boolean {
-        return (
-            this.focusedSeriesName !== undefined &&
-            this.focusedSeriesName !== series.seriesName
-        )
-    }
-
     @action.bound private onCursorMove(
         ev: React.MouseEvent<SVGGElement> | React.TouchEvent<SVGElement>
     ): void {
@@ -594,7 +587,6 @@ export class StackedAreaChart
                         .map((series) => {
                             const { seriesName: name, color, points } = series
                             const point = points[hoveredPointIndex]
-                            const blurred = this.seriesIsBlur(series)
                             const focused = name === target.series
                             const values = [
                                 point?.fake ? undefined : point?.value,
@@ -608,7 +600,6 @@ export class StackedAreaChart
                                 name,
                                 swatch,
                                 focused,
-                                blurred,
                                 values,
                             }
                         })}

From 4d8182a6f87f344558a795ff3d1724b8a08ffcb3 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Mon, 11 Nov 2024 10:02:37 +0100
Subject: [PATCH 9/9] =?UTF-8?q?=F0=9F=94=A8=20(stacked=20area)=20small=20r?=
 =?UTF-8?q?efactor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/stackedCharts/StackedAreaChart.tsx    | 11 ++++++-----
 .../grapher/src/tooltip/TooltipContents.tsx           | 11 ++++++++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index a82fd79dfd3..857a08a1b4a 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -409,11 +409,12 @@ export class StackedAreaChart
     @computed get facetLegendHoveredSeriesName(): SeriesName | undefined {
         const { externalLegendHoverBin } = this.manager
         if (!externalLegendHoverBin) return undefined
-        const hoveredSeriesNames = this.rawSeries
-            .map((s) => s.seriesName)
-            .filter((name) => externalLegendHoverBin.contains(name))
-        // stacked area charts can't plot the same entity or column multiple times
-        return hoveredSeriesNames.length > 0 ? hoveredSeriesNames[0] : undefined
+        // stacked area charts can't plot the same entity or column multiple times,
+        // so we just find the first series that matches the hovered legend item
+        const hoveredSeries = this.rawSeries.find((series) =>
+            externalLegendHoverBin.contains(series.seriesName)
+        )
+        return hoveredSeries?.seriesName
     }
 
     @computed get focusedSeriesName(): SeriesName | undefined {
diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
index 5a3f49068c7..92136fadf56 100644
--- a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
+++ b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
@@ -236,8 +236,13 @@ export class TooltipTable extends React.Component<TooltipTableProps> {
                             annotation,
                             values,
                             notice,
-                            swatch,
+                            swatch = {},
                         } = row
+                        const {
+                            color: swatchColor = "transparent",
+                            opacity: swatchOpacity = 1,
+                        } = swatch
+
                         const [_m, seriesName, seriesParenthetical] =
                             name.trim().match(/^(.*?)(\([^()]*\))?$/) ?? []
 
@@ -254,8 +259,8 @@ export class TooltipTable extends React.Component<TooltipTableProps> {
                                     <div
                                         className="swatch"
                                         style={{
-                                            backgroundColor: swatch?.color,
-                                            opacity: swatch?.opacity,
+                                            backgroundColor: swatchColor,
+                                            opacity: swatchOpacity,
                                         }}
                                     />
                                 </td>