🐛 (slope) give feedback when currently hidden entity is selected

owid · Mar 21, 2024 · eb77042 · eb77042
1 parent b084385
commit eb77042
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -475,15 +475,18 @@ export class SlopeChart
 
     componentDidMount() {
         if (this.grapherElement) {
-            this.grapherElement.addEventListener("click", this.onGrapherClick)
+            this.grapherElement.addEventListener(
+                "mousedown",
+                this.onGrapherClick
+            )
         }
         exposeInstanceOnWindow(this)
     }
 
     componentWillUnmount(): void {
         if (this.grapherElement) {
             this.grapherElement.removeEventListener(
-                "click",
+                "mousedown",
                 this.onGrapherClick
             )
         }
@@ -713,8 +716,12 @@ class LabelledSlopes
     // Then, a special "foreground" set of entities is rendered over the background
     @computed private get isLayerMode() {
         return (
+            this.hoveredSeriesNames.length > 0 ||
             this.focusedSeriesNames.length > 0 ||
-            this.hoveredSeriesNames.length > 0
+            // if the user has selected entities that are not in the chart,
+            // we want to move all entities into the background
+            (this.props.focusKeys?.length > 0 &&
+                this.focusedSeriesNames.length === 0)
         )
     }