✨ (slope) click anywhere to dismiss the current selection

owid · Mar 6, 2024 · ff9abda · ff9abda
1 parent ded5908
commit ff9abda
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 16 deletions.
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -194,6 +194,7 @@ import {
     StaticChartRasterizer,
     type GrapherExport,
 } from "../captionedChart/StaticChartRasterizer.js"
+import { SlopeChartManager } from "../slopeCharts/SlopeChart"
 
 declare const window: any
 
@@ -336,7 +337,8 @@ export class Grapher
         FacetChartManager,
         EntitySelectorModalManager,
         SettingsMenuManager,
-        MapChartManager
+        MapChartManager,
+        SlopeChartManager
 {
     @observable.ref $schema = DEFAULT_GRAPHER_CONFIG_SCHEMA
     @observable.ref type = ChartTypeName.LineChart
@@ -2432,7 +2434,7 @@ export class Grapher
         }
     }
 
-    @computed private get isModalOpen(): boolean {
+    @computed get isModalOpen(): boolean {
         return (
             this.isSelectingData ||
             this.isSourcesModalOpen ||

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -59,11 +59,15 @@ import { CoreColumn, OwidTable } from "@ourworldindata/core-table"
 import { autoDetectYColumnSlugs, makeSelectionArray } from "../chart/ChartUtils"
 import { AxisConfig, FontSizeManager } from "../axis/AxisConfig"
 
+export interface SlopeChartManager extends ChartManager {
+    isModalOpen?: boolean
+}
+
 @observer
 export class SlopeChart
     extends React.Component<{
         bounds?: Bounds
-        manager: ChartManager
+        manager: SlopeChartManager
     }>
     implements ChartInterface, VerticalColorLegendManager, ColorScaleManager
 {
@@ -120,12 +124,8 @@ export class SlopeChart
     }
 
     @action.bound onSlopeClick() {
-        const { manager, hoverKey } = this
-        if (
-            manager.addCountryMode === EntitySelectionMode.Disabled ||
-            !manager.addCountryMode ||
-            hoverKey === undefined
-        ) {
+        const { hoverKey, isEntitySelectionEnabled } = this
+        if (!isEntitySelectionEnabled || hoverKey === undefined) {
             return
         }
 
@@ -148,15 +148,18 @@ export class SlopeChart
         return this.selectionArray.selectedEntityNames
     }
 
+    @computed get isEntitySelectionEnabled(): boolean {
+        const { manager } = this
+        return !!(
+            manager.addCountryMode !== EntitySelectionMode.Disabled &&
+            manager.addCountryMode
+        )
+    }
+
     // When the color legend is clicked, toggle selection fo all associated keys
     @action.bound onLegendClick() {
-        const { manager, hoverColor } = this
-        if (
-            manager.addCountryMode === EntitySelectionMode.Disabled ||
-            !manager.addCountryMode ||
-            hoverColor === undefined
-        )
-            return
+        const { hoverColor, isEntitySelectionEnabled } = this
+        if (!isEntitySelectionEnabled || hoverColor === undefined) return
 
         const seriesNamesToToggle = this.series
             .filter((g) => g.color === hoverColor)
@@ -402,10 +405,41 @@ export class SlopeChart
         return sizeByEntity
     }
 
+    // click anywhere inside the Grapher frame to dismiss the current selection
+    @action.bound onGrapherClick(e: Event): void {
+        const tagName = (e.target as HTMLElement).tagName
+        const isTargetInteractive = ["A", "BUTTON", "INPUT"].includes(tagName)
+        if (
+            this.isEntitySelectionEnabled &&
+            !this.hoverKey &&
+            !this.hoverColor &&
+            !this.manager.isModalOpen &&
+            !isTargetInteractive
+        ) {
+            this.selectionArray.clearSelection()
+        }
+    }
+
+    @computed private get grapherElement() {
+        return this.manager.base?.current
+    }
+
     componentDidMount() {
+        if (this.grapherElement) {
+            this.grapherElement.addEventListener("click", this.onGrapherClick)
+        }
         exposeInstanceOnWindow(this)
     }
 
+    componentWillUnmount(): void {
+        if (this.grapherElement) {
+            this.grapherElement.removeEventListener(
+                "click",
+                this.onGrapherClick
+            )
+        }
+    }
+
     @computed get series() {
         const column = this.yColumn
         if (!column) return []