🐛 (explorer) dismiss focus state after unselecting an entity (#4365)

owid · Jan 8, 2025 · a6c11e1 · a6c11e1
1 parent 58e75de
commit a6c11e1
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 3 deletions.
diff --git a/packages/@ourworldindata/explorer/src/Explorer.tsx b/packages/@ourworldindata/explorer/src/Explorer.tsx
@@ -27,6 +27,7 @@ import {
     SlideShowManager,
     DEFAULT_GRAPHER_ENTITY_TYPE,
     GrapherAnalytics,
+    FocusArray,
 } from "@ourworldindata/grapher"
 import {
     Bounds,
@@ -277,6 +278,8 @@ export class Explorer
         ? this.props.selection
         : new SelectionArray(this.explorerProgram.selection)
 
+    focusArray = new FocusArray()
+
     entityType = this.explorerProgram.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE
 
     @observable.ref grapher?: Grapher

diff --git a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
@@ -95,6 +95,11 @@ export class EntityPicker extends React.Component<{
     ): void {
         this.manager.selection.toggleSelection(name)
 
+        // Remove focus from an entity that has been removed from the selection
+        if (!this.manager.selection.selectedSet.has(name)) {
+            this.manager.focusArray?.remove(name)
+        }
+
         // Clear search input
         this.searchInput = ""
         this.manager.analytics?.logEntityPickerEvent(
@@ -644,9 +649,10 @@ export class EntityPicker extends React.Component<{
                                     title={selectedDebugMessage}
                                     className="ClearSelectionButton"
                                     data-track-note="entity_picker_clear_selection"
-                                    onClick={(): void =>
+                                    onClick={(): void => {
                                         selection.clearSelection()
-                                    }
+                                        this.manager.focusArray?.clear()
+                                    }}
                                 >
                                     <FontAwesomeIcon icon={faTimes} /> Clear
                                     selection

diff --git a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPickerConstants.ts b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPickerConstants.ts
@@ -3,6 +3,7 @@ import { GrapherAnalytics } from "../../core/GrapherAnalytics"
 import { OwidTable } from "@ourworldindata/core-table"
 import { CoreColumnDef, SortOrder } from "@ourworldindata/types"
 import { SelectionArray } from "../../selection/SelectionArray"
+import { FocusArray } from "../../focus/FocusArray"
 
 export interface EntityPickerManager {
     entityPickerMetric?: ColumnSlug
@@ -19,4 +20,5 @@ export interface EntityPickerManager {
     selection: SelectionArray
     entityType?: string
     analytics?: GrapherAnalytics
+    focusArray?: FocusArray
 }
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -341,6 +341,7 @@ export interface GrapherManager {
     embedDialogUrl?: string
     embedDialogAdditionalElements?: React.ReactElement
     selection?: SelectionArray
+    focusArray?: FocusArray
     editUrl?: string
 }
 
@@ -512,7 +513,7 @@ export class Grapher
             this.props.table?.availableEntities ?? []
         )
 
-    focusArray = new FocusArray()
+    focusArray = this.manager?.focusArray ?? new FocusArray()
 
     /**
      * todo: factor this out and make more RAII.

diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts
@@ -72,6 +72,7 @@ export {
     MapProjectionGeos,
 } from "./mapCharts/MapProjections"
 export { SelectionArray } from "./selection/SelectionArray"
+export { FocusArray } from "./focus/FocusArray"
 export {
     setSelectedEntityNamesParam,
     migrateSelectedEntityNamesParam,