From c10330d562ed49d2ab899ddb3dd76bada37535ea Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Tue, 16 Apr 2024 10:54:29 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(explorer)=20make=20selected=20enti?=
 =?UTF-8?q?ty=20travel=20on=20top=20(#3393)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/controls/entityPicker/EntityPicker.scss   |  4 ++++
 .../src/controls/entityPicker/EntityPicker.tsx    | 15 +++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.scss b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.scss
index d9a4aab91a9..f1768167dbe 100644
--- a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.scss
+++ b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.scss
@@ -94,6 +94,10 @@ $zindex-dropdown: 100;
         z-index: 1;
     }
 
+    &.most-recently-selected {
+        z-index: 2;
+    }
+
     &.focused {
         background-color: $gray-10;
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
index ce871bb7118..43b61a37de2 100644
--- a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
@@ -75,6 +75,8 @@ export class EntityPicker extends React.Component<{
 
     @observable private blockOptionHover = false
 
+    @observable private mostRecentlySelectedEntityName: string | null = null
+
     @observable
     private scrollContainerRef: React.RefObject<HTMLDivElement> =
         React.createRef()
@@ -92,12 +94,15 @@ export class EntityPicker extends React.Component<{
         checked?: boolean
     ): void {
         this.manager.selection.toggleSelection(name)
+
         // Clear search input
         this.searchInput = ""
         this.manager.analytics?.logEntityPickerEvent(
             checked ? "select" : "deselect",
             name
         )
+
+        this.mostRecentlySelectedEntityName = name
     }
 
     @computed private get manager(): EntityPickerManager {
@@ -623,6 +628,13 @@ export class EntityPicker extends React.Component<{
                                                     ? this.focusRef
                                                     : undefined
                                             }
+                                            className={
+                                                this
+                                                    .mostRecentlySelectedEntityName ===
+                                                option.entityName
+                                                    ? "most-recently-selected"
+                                                    : undefined
+                                            }
                                         />
                                     ))}
                                 </Flipper>
@@ -658,6 +670,7 @@ interface PickerOptionProps {
     isSelected?: boolean
     barScale?: ScaleLinear<number, number>
     hasDataForActiveMetric: boolean
+    className?: string
 }
 
 class PickerOption extends React.Component<PickerOptionProps> {
@@ -679,6 +692,7 @@ class PickerOption extends React.Component<PickerOptionProps> {
             isFocused,
             hasDataForActiveMetric,
             highlight,
+            className,
         } = this.props
         const { entityName, plotValue, formattedValue } = optionWithMetricValue
         const metricValue = formattedValue === entityName ? "" : formattedValue // If the user has this entity selected, don't show the name twice.
@@ -688,6 +702,7 @@ class PickerOption extends React.Component<PickerOptionProps> {
                 <label
                     className={classnames(
                         "EntityPickerOption",
+                        className,
                         {
                             selected: isSelected,
                             focused: isFocused,