✨ (explorer) make selected entity travel on top (#3393)

owid · Apr 16, 2024 · c10330d · c10330d
1 parent c7e732b
commit c10330d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git 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
@@ -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,