🐛 (line) unselected lines don't disappear (#4417)

owid · Jan 9, 2025 · ea5361d · ea5361d
1 parent 0ea6d20
commit ea5361d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx b/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx
@@ -43,11 +43,11 @@ export const getDefaultFailMessage = (manager: ChartManager): string => {
 
 export const getSeriesKey = (
     series: LineChartSeries,
-    suffix?: string
+    index: number
 ): string => {
     return `${series.seriesName}-${series.color}-${
         series.isProjection ? "projection" : ""
-    }${suffix ? "-" + suffix : ""}`
+    }-${index}`
 }
 
 export const autoDetectSeriesStrategy = (

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -279,8 +279,8 @@ class Lines extends React.Component<LinesProps> {
     private renderLines(): React.ReactElement {
         return (
             <>
-                {this.props.series.map((series) => (
-                    <React.Fragment key={getSeriesKey(series)}>
+                {this.props.series.map((series, index) => (
+                    <React.Fragment key={getSeriesKey(series, index)}>
                         {this.renderLine(series)}
                         {this.renderLineMarkers(series)}
                     </React.Fragment>
@@ -556,7 +556,7 @@ export class LineChart
                     y2={verticalAxis.range[1]}
                     stroke="rgba(180,180,180,.4)"
                 />
-                {this.renderSeries.map((series) => {
+                {this.renderSeries.map((series, index) => {
                     const value = series.points.find(
                         (point) => point.x === activeX
                     )
@@ -574,7 +574,7 @@ export class LineChart
 
                     return (
                         <circle
-                            key={getSeriesKey(series)}
+                            key={getSeriesKey(series, index)}
                             cx={horizontalAxis.place(value.x)}
                             cy={verticalAxis.place(value.y)}
                             r={this.lineStrokeWidth / 2 + 3.5}

diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -39,6 +39,7 @@ import {
     MARKER_MARGIN,
     NON_FOCUSED_TEXT_COLOR,
 } from "./LineLegendConstants.js"
+import { getSeriesKey } from "./LineLegendHelpers"
 
 export interface LineLabelSeries extends ChartSeries {
     label: string
@@ -150,7 +151,7 @@ class LineLabels extends React.Component<{
     @computed private get textLabels(): React.ReactElement {
         return (
             <g id={makeIdForHumanConsumption("text-labels")}>
-                {this.markers.map(({ series, labelText }) => {
+                {this.markers.map(({ series, labelText }, index) => {
                     const textColor =
                         !series.focus?.background || series.hover?.active
                             ? darkenColorForText(series.color)
@@ -164,7 +165,7 @@ class LineLabels extends React.Component<{
                     return series.textWrap instanceof TextWrap ? (
                         <Halo
                             id={series.seriesName}
-                            key={series.seriesName}
+                            key={getSeriesKey(series, index)}
                             show={this.showTextOutline}
                             outlineColor={this.textOutlineColor}
                         >
@@ -197,12 +198,12 @@ class LineLabels extends React.Component<{
         if (!markersWithAnnotations) return
         return (
             <g id={makeIdForHumanConsumption("text-annotations")}>
-                {markersWithAnnotations.map(({ series, labelText }) => {
+                {markersWithAnnotations.map(({ series, labelText }, index) => {
                     if (!series.annotationTextWrap) return
                     return (
                         <Halo
                             id={series.seriesName}
-                            key={series.seriesName}
+                            key={getSeriesKey(series, index)}
                             show={this.showTextOutline}
                             outlineColor={this.textOutlineColor}
                         >
@@ -232,7 +233,7 @@ class LineLabels extends React.Component<{
         if (!this.props.needsConnectorLines) return
         return (
             <g id={makeIdForHumanConsumption("connectors")}>
-                {this.markers.map(({ series, connectorLine }) => {
+                {this.markers.map(({ series, connectorLine }, index) => {
                     const { x1, x2 } = connectorLine
                     const {
                         level,
@@ -253,7 +254,7 @@ class LineLabels extends React.Component<{
                     return (
                         <path
                             id={makeIdForHumanConsumption(series.seriesName)}
-                            key={series.seriesName}
+                            key={getSeriesKey(series, index)}
                             d={d}
                             stroke={lineColor}
                             strokeWidth={0.5}
@@ -268,14 +269,14 @@ class LineLabels extends React.Component<{
     @computed private get interactions(): React.ReactElement | void {
         return (
             <g>
-                {this.props.series.map((series) => {
+                {this.props.series.map((series, index) => {
                     const x =
                         this.anchor === "start"
                             ? series.origBounds.x
                             : series.origBounds.x - series.bounds.width
                     return (
                         <g
-                            key={series.seriesName}
+                            key={getSeriesKey(series, index)}
                             onMouseOver={() => this.props.onMouseOver?.(series)}
                             onMouseLeave={() =>
                                 this.props.onMouseLeave?.(series)

diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegendHelpers.ts b/packages/@ourworldindata/grapher/src/lineLegend/LineLegendHelpers.ts
@@ -245,3 +245,7 @@ export function computeCandidateScores(
 
     return scoreMap
 }
+
+export function getSeriesKey(series: PlacedSeries, index: number): string {
+    return `${series.seriesName}-${index}`
+}