From 889ebd5242cca5875ffa028dde92f3b8fd1b042d Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Mon, 25 Mar 2024 09:37:46 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(entity=20selector)=20redesign?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/src/Checkbox.scss              |   5 +-
 .../components/src/Checkbox.tsx               |   4 +-
 .../grapher/src/controls/RadioButton.scss     |  72 +++
 .../grapher/src/controls/RadioButton.tsx      |  31 ++
 .../grapher/src/core/Grapher.tsx              |  13 +-
 .../grapher/src/core/GrapherConstants.ts      |   5 +-
 .../grapher/src/core/grapher.scss             |   1 +
 .../grapher/src/core/typography.scss          |  33 ++
 .../src/entitySelector/EntitySelector.scss    | 253 +++++----
 .../src/entitySelector/EntitySelector.tsx     | 487 ++++++++++++------
 .../grapher/src/modal/EntitySelectorModal.tsx |   2 +-
 .../grapher/src/modal/Modal.scss              |   5 +
 .../grapher/src/modal/Modal.tsx               |   9 +-
 .../grapher/src/selection/SelectionArray.ts   |  24 +-
 .../grapher/src/sidePanel/SidePanel.scss      |   4 +-
 .../grapher/src/sidePanel/SidePanel.tsx       |   9 +-
 .../src/slideInDrawer/SlideInDrawer.scss      |  10 +-
 .../src/slideInDrawer/SlideInDrawer.tsx       |  13 +-
 .../grapher/src/slopeCharts/SlopeChart.tsx    |   3 +-
 .../tsup.config.bundled_mna7e6rrx0j.mjs       |  15 +
 20 files changed, 715 insertions(+), 283 deletions(-)
 create mode 100644 packages/@ourworldindata/grapher/src/controls/RadioButton.scss
 create mode 100644 packages/@ourworldindata/grapher/src/controls/RadioButton.tsx
 create mode 100644 packages/@ourworldindata/grapher/tsup.config.bundled_mna7e6rrx0j.mjs

diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
index 04f3b3ded66..f7523480202 100644
--- a/packages/@ourworldindata/components/src/Checkbox.scss
+++ b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -57,11 +57,10 @@
     }
 
     .label {
+        @include grapher_label-2-regular;
         padding-left: $checkbox-size + 8px;
         cursor: pointer;
-        font-size: 14px;
-        letter-spacing: 0.01em;
-        line-height: 1.15;
+        user-select: none;
     }
 
     &:hover {
diff --git a/packages/@ourworldindata/components/src/Checkbox.tsx b/packages/@ourworldindata/components/src/Checkbox.tsx
index 0e6e799939c..207a9439003 100644
--- a/packages/@ourworldindata/components/src/Checkbox.tsx
+++ b/packages/@ourworldindata/components/src/Checkbox.tsx
@@ -4,8 +4,8 @@ import { faCheck } from "@fortawesome/free-solid-svg-icons"
 
 export class Checkbox extends React.Component<{
     checked: boolean
-    onChange: () => any
-    label: string | React.ReactNode
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    label: React.ReactNode
 }> {
     render(): JSX.Element {
         const { checked, onChange, label } = this.props
diff --git a/packages/@ourworldindata/grapher/src/controls/RadioButton.scss b/packages/@ourworldindata/grapher/src/controls/RadioButton.scss
new file mode 100644
index 00000000000..addc72efe66
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/controls/RadioButton.scss
@@ -0,0 +1,72 @@
+.radio {
+    $radio-size: 16px;
+
+    $light-stroke: #dadada;
+    $hover-stroke: #a4b6ca;
+    $active-fill: #dbe5f0;
+
+    position: relative;
+
+    input {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+        cursor: pointer;
+    }
+
+    .outer {
+        position: absolute;
+        left: 0;
+        top: 0;
+        content: " ";
+        width: $radio-size;
+        height: $radio-size;
+
+        background: white;
+        pointer-events: none;
+        border-radius: 50%;
+        border: 1px solid #a4b6ca;
+        color: $dark-text;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .inner {
+            display: none;
+            width: $radio-size / 2;
+            height: $radio-size / 2;
+            background-color: #6e87a2;
+            border-radius: 50%;
+        }
+    }
+
+    input:focus-visible + .outer {
+        outline: 2px solid $controls-color;
+    }
+
+    input:active + .outer > .inner {
+        display: block;
+    }
+
+    input:checked + .outer > .inner {
+        display: block;
+    }
+
+    input:checked:active + .outer > .inner {
+        display: block;
+    }
+
+    .label {
+        @include grapher_label-2-regular;
+        padding-left: $radio-size + 8px;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    &:hover {
+        input:not(:checked) + .custom {
+            border-color: $hover-stroke;
+        }
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/controls/RadioButton.tsx b/packages/@ourworldindata/grapher/src/controls/RadioButton.tsx
new file mode 100644
index 00000000000..10117e869e1
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/controls/RadioButton.tsx
@@ -0,0 +1,31 @@
+import React from "react"
+
+export class RadioButton extends React.Component<{
+    checked: boolean
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    label: React.ReactNode
+    group?: string
+}> {
+    render(): JSX.Element {
+        const { checked, onChange, label, group } = this.props
+
+        return (
+            <div className="radio">
+                <label>
+                    <input
+                        type="radio"
+                        name={group}
+                        checked={checked}
+                        onChange={onChange}
+                    />
+                    <div className="outer">
+                        {checked && <div className="inner" />}
+                    </div>
+                    <div className="label">
+                        {label} {checked}
+                    </div>
+                </label>
+            </div>
+        )
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index ff5248a5529..3b07c92258c 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -202,7 +202,10 @@ import {
 } from "../captionedChart/StaticChartRasterizer.js"
 import { SlopeChartManager } from "../slopeCharts/SlopeChart"
 import { SidePanel } from "../sidePanel/SidePanel"
-import { EntitySelector } from "../entitySelector/EntitySelector"
+import {
+    EntitySelector,
+    type EntitySelectorState,
+} from "../entitySelector/EntitySelector"
 import { SlideInDrawer } from "../slideInDrawer/SlideInDrawer"
 
 declare global {
@@ -464,6 +467,8 @@ export class Grapher
 
     @observable.ref legacyConfigAsAuthored: Partial<LegacyGrapherInterface> = {}
 
+    @observable entitySelectorState: Partial<EntitySelectorState> = {}
+
     @computed get dataApiUrlForAdmin(): string | undefined {
         return this.props.dataApiUrlForAdmin
     }
@@ -2151,7 +2156,7 @@ export class Grapher
             0,
             // the chart takes up 9 columns in 12-column grid
             (9 / 12) * this.frameBounds.width,
-            this.frameBounds.height
+            this.frameBounds.height - 2 // 2px accounts for the border
         )
     }
 
@@ -2162,7 +2167,7 @@ export class Grapher
             0, // not in use; intentionally set to zero
             0, // not in use; intentionally set to zero
             this.frameBounds.width - this.captionedChartBounds.width,
-            this.frameBounds.height
+            this.captionedChartBounds.height
         )
     }
 
@@ -3128,7 +3133,7 @@ export class Grapher
         return this.canHighlightEntities
             ? `Select ${this.entityTypePlural}`
             : this.canChangeEntity
-              ? `Change ${a(this.entityType)}`
+              ? `Choose ${a(this.entityType)}`
               : `Add/remove ${this.entityTypePlural}`
     }
 
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
index adc5320e816..f956fdc1dc1 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -4,10 +4,9 @@ export const GRAPHER_EMBEDDED_FIGURE_ATTR = "data-grapher-src"
 export const GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR = "data-grapher-config"
 
 export const GRAPHER_PAGE_BODY_CLASS = "StandaloneGrapherOrExplorerPage"
-
-export const GRAPHER_DRAWER_ID = "grapher-drawer"
-
+export const GRAPHER_SCROLLABLE_CONTAINER_CLASS = "scrollable-container"
 export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe"
+export const GRAPHER_DRAWER_ID = "grapher-drawer"
 
 export const DEFAULT_GRAPHER_CONFIG_SCHEMA =
     "https://files.ourworldindata.org/schemas/grapher-schema.003.json"
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index 1c46df263f3..b810dad4c96 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -88,6 +88,7 @@ $zindex-controls-drawer: 150;
 @import "../fullScreen/FullScreen.scss";
 @import "../../../components/src/Checkbox.scss";
 @import "../closeButton/CloseButton.scss";
+@import "../controls/RadioButton.scss";
 
 .grapher_dark {
     color: $dark-text;
diff --git a/packages/@ourworldindata/grapher/src/core/typography.scss b/packages/@ourworldindata/grapher/src/core/typography.scss
index 7b4981f260b..149e3b11d66 100644
--- a/packages/@ourworldindata/grapher/src/core/typography.scss
+++ b/packages/@ourworldindata/grapher/src/core/typography.scss
@@ -83,6 +83,24 @@
     @include grapher_body-3-medium;
 }
 
+@mixin grapher_body-3-regular {
+    @include grapher_body-3-medium;
+    font-weight: 400;
+}
+
+.grapher_body-3-regular {
+    @include grapher_body-3-regular;
+}
+
+@mixin grapher_body-3-medium-italic {
+    @include grapher_body-3-medium;
+    font-style: italic;
+}
+
+.grapher_body-3-medium-italic {
+    @include grapher_body-3-medium-italic;
+}
+
 //
 // labels
 //
@@ -101,3 +119,18 @@
 .grapher_label-1-medium {
     @include grapher_label-1-medium;
 }
+
+@mixin grapher_label-2-regular {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: 0.01em;
+}
+
+.grapher_label-2-regular {
+    @include grapher_label-2-regular;
+}
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
index 373f1e1f7b8..15f2144ae5a 100644
--- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -1,57 +1,162 @@
 @at-root {
-    .EntitySelector {
-        $light-stroke: #e7e7e7;
-        $active-fill: #dbe5f0;
+    .entity-selector {
+        --padding: var(--modal-padding, 16px);
 
-        text-align: left;
-        margin: 0 var(--modal-padding, 16px) var(--modal-padding, 16px);
+        $light-stroke: #e7e7e7;
+        $border: 1px solid #f2f2f2;
+        $disabled: #c6c6c6;
 
-        ul {
-            margin: 0;
-            padding: 0;
-            font-size: 0.8125em;
-        }
+        $footer-height: 48px;
 
-        li {
-            list-style-type: none;
-        }
+        $zindex-header: 2;
+        $zindex-footer: 2;
+        $zindex-animated: 1;
 
-        .searchBar {
-            display: flex;
+        .entity-selector__search-bar {
             position: sticky;
             top: 0;
             left: 0;
             background-color: #fff;
-            z-index: 1;
+            z-index: $zindex-header;
+            padding: 0 var(--padding) 8px var(--padding);
+            margin-bottom: 16px;
+        }
+
+        .entity-selector__footer {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            background-color: #fff;
+            padding: 0 16px;
+            width: 100%;
+            border-radius: 4px;
+            z-index: $zindex-footer;
+
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 var(--padding);
+            height: $footer-height;
+            box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.04);
+
+            .footer__selected {
+                font-size: 0.6875rem;
+                font-weight: 500;
+                letter-spacing: 0.06em;
+                text-transform: uppercase;
+
+                // small visual correction
+                top: 1px;
+                position: relative;
+            }
+
+            button {
+                background: none;
+                border: none;
+                color: $dark-text;
+                font-size: 0.8125rem;
+                font-weight: 500;
+                letter-spacing: 0.01em;
+                text-decoration-line: underline;
+                text-underline-offset: 3px;
+                cursor: pointer;
+
+                &:disabled {
+                    color: $disabled;
+                    text-decoration: none;
+                    cursor: default;
+                }
+            }
+        }
+
+        .entity-selector__content {
+            margin: -8px var(--padding) ($footer-height + 8px) var(--padding);
+        }
+
+        &.entity-selector--single {
+            .entity-selector__content {
+                margin-bottom: 16px;
+            }
+        }
+
+        .entity-search-results {
+            margin-top: 16px;
+        }
+
+        .section-title {
+            letter-spacing: 0.01em;
+            margin-top: 16px;
+            margin-bottom: 8px;
+        }
+
+        .selectable-entity {
+            padding: 9px 8px 9px 16px;
+            cursor: pointer;
+        }
+
+        .animated-entity {
+            position: relative;
+            z-index: 0;
+            background: #fff;
+
+            &.most-recently-selected {
+                z-index: $zindex-animated;
+            }
+        }
+
+        li + li .selectable-entity {
+            border-top: $border;
+        }
+
+        li:first-of-type .selectable-entity {
+            border-top: $border;
         }
 
-        .searchInput {
-            flex-grow: 1;
+        li:last-of-type .selectable-entity {
+            border-bottom: $border;
+        }
 
+        .search-input {
             // search icon
-            $svg-margin-left: 8px;
+            $svg-margin: 8px;
             $svg-size: 12px;
 
             $placeholder: #a1a1a1;
-            $focus-outline: 2px solid $controls-color;
+            $focus: 1px solid #a4b6ca;
+
+            position: relative;
 
-            svg {
+            .search-icon {
                 position: absolute;
                 top: 50%;
-                left: $svg-margin-left;
+                left: $svg-margin;
                 color: $light-text;
                 transform: translateY(-50%);
                 font-size: $svg-size;
                 font-weight: 900;
             }
 
+            .clear {
+                margin: 0;
+                padding: 0;
+                background: none;
+                border: none;
+                position: absolute;
+                top: 50%;
+                right: $svg-margin;
+                transform: translateY(-50%);
+                font-size: $svg-size;
+                color: $dark-text;
+                cursor: pointer;
+            }
+
             input[type="search"] {
+                @include grapher_label-2-regular;
                 width: 100%;
                 height: 32px;
-                font-size: 0.8125em;
                 border: 1px solid $light-stroke;
-                padding-left: $svg-margin-left + $svg-size + 4px;
-                padding-right: 1em;
+                padding-left: $svg-margin + $svg-size + 4px;
+                padding-right: $svg-margin + $svg-size + 4px;
                 border-radius: 4px;
 
                 // style placeholder text in search input
@@ -68,102 +173,32 @@
 
                 // style focus state
                 &:focus {
-                    outline: $focus-outline;
+                    outline: none;
+                    border: $focus;
                 }
                 &:focus:not(:focus-visible) {
-                    outline: none;
+                    border: none;
                 }
                 &:focus-visible {
-                    outline: $focus-outline;
-                }
-            }
-        }
-
-        .searchResults .empty {
-            font-size: 0.8125em;
-        }
-
-        &.EntitySelectorSingle {
-            ul {
-                margin-top: 8px;
-            }
-
-            li {
-                color: $dark-text;
-                cursor: pointer;
-                padding: 12px 16px;
-                border-bottom: 1px solid $light-stroke;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                &:last-child {
-                    border-bottom: none;
-                }
-
-                &.selected,
-                &:hover {
-                    background-color: $active-fill;
-                    color: $active-text;
+                    border: $focus;
                 }
 
-                svg {
-                    color: $active-text;
-                    font-size: 12px;
-                    font-weight: 900;
+                &::-webkit-search-cancel-button {
+                    -webkit-appearance: none;
                 }
             }
 
-            .searchResults .empty {
-                margin-top: 1.5em;
-            }
-        }
-
-        &.EntitySelectorMulti {
-            .searchInput {
-                max-width: 75%;
-            }
-
-            .entities {
-                margin-top: 1.5em;
-                display: flex;
-                justify-content: space-between;
-            }
-
-            .selectedData {
-                min-width: 25%;
-                padding-left: 1em;
-
-                .selectedLabel {
-                    color: #a1a1a1;
-                    font-size: 0.8125em;
-                    font-weight: 700;
-                    margin: 0;
-                    margin-bottom: 1em;
+            &.search-input--empty {
+                input[type="search"] {
+                    padding-right: 8px;
                 }
             }
+        }
 
-            .searchResults {
-                width: 100%;
-            }
-
-            li + li {
-                margin-top: 1em;
-            }
-
-            .clearSelection {
-                font-size: 0.8125em;
-                padding: 0;
-                margin-left: 16px;
-                color: $dark-text;
-                font-weight: 500;
-                text-decoration: underline;
-                cursor: pointer;
-
-                &:hover {
-                    text-decoration: none;
-                }
-            }
+        ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
         }
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
index 3bcfcfdc515..d605a8a503a 100644
--- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
@@ -1,57 +1,52 @@
 import React from "react"
 import { observer } from "mobx-react"
-import { computed, action, observable } from "mobx"
-import classnames from "classnames"
-import { isTouchDevice, sortBy, isCountryName } from "@ourworldindata/utils"
+import { computed, action, reaction } from "mobx"
+import cx from "classnames"
+import a from "indefinite"
+import {
+    isTouchDevice,
+    sortBy,
+    partition,
+    capitalize,
+} from "@ourworldindata/utils"
 import { Checkbox } from "@ourworldindata/components"
 import { FuzzySearch } from "../controls/FuzzySearch"
-import { faMagnifyingGlass, faCheck } from "@fortawesome/free-solid-svg-icons"
+import {
+    faCircleXmark,
+    faMagnifyingGlass,
+} from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { SelectionArray } from "../selection/SelectionArray"
+import { Flipper, Flipped } from "react-flip-toolkit"
+import { RadioButton } from "../controls/RadioButton"
+import { makeSelectionArray } from "../chart/ChartUtils.js"
+import {
+    DEFAULT_GRAPHER_ENTITY_TYPE,
+    DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL,
+    GRAPHER_SCROLLABLE_CONTAINER_CLASS,
+} from "../core/GrapherConstants"
+
+export interface EntitySelectorState {
+    searchInput: string
+    mostRecentlySelectedEntityName?: string
+}
 
 export interface EntitySelectorManager {
+    entitySelectorState: Partial<EntitySelectorState>
     selection: SelectionArray
     canChangeEntity: boolean
     entitiesAreCountryLike?: boolean
+    entityType?: string
+    entityTypePlural?: string
 }
 
 interface SearchableEntity {
     name: string
 }
 
-interface SearchResultProps {
-    result: SearchableEntity
-    isMulti: boolean
-    isChecked: boolean
-    onSelect: (entityName: string) => void
-}
-
-class EntitySearchResult extends React.PureComponent<SearchResultProps> {
-    render(): JSX.Element {
-        const { result, isMulti, isChecked, onSelect } = this.props
-
-        if (isMulti) {
-            return (
-                <li>
-                    <Checkbox
-                        label={result.name}
-                        checked={isChecked}
-                        onChange={(): void => onSelect(result.name)}
-                    />
-                </li>
-            )
-        } else {
-            return (
-                <li
-                    className={"clickable" + (isChecked ? " selected" : "")}
-                    onClick={(): void => onSelect(result.name)}
-                >
-                    {result.name}
-                    {isChecked && <FontAwesomeIcon icon={faCheck} />}
-                </li>
-            )
-        }
-    }
+interface PartitionedEntities {
+    selected: string[]
+    unselected: string[]
 }
 
 @observer
@@ -60,22 +55,72 @@ export class EntitySelector extends React.Component<{
     onDismiss?: () => void
     autoFocus?: boolean
 }> {
-    @observable searchInput: string = ""
-    searchField!: HTMLInputElement
+    container: React.RefObject<HTMLDivElement> = React.createRef()
+    searchField: React.RefObject<HTMLInputElement> = React.createRef()
+
+    componentDidMount(): void {
+        if (this.props.autoFocus && !isTouchDevice())
+            this.searchField.current?.focus()
+
+        const scrollableContainer = this.container.current?.closest(
+            `.${GRAPHER_SCROLLABLE_CONTAINER_CLASS}`
+        )
+
+        // scroll to the top when the search input changes
+        reaction(
+            () => this.searchInput,
+            () => {
+                if (scrollableContainer) scrollableContainer.scrollTop = 0
+            }
+        )
+    }
+
+    private set(state: Partial<EntitySelectorState>): void {
+        this.manager.entitySelectorState = {
+            ...this.manager.entitySelectorState,
+            ...state,
+        }
+    }
+
+    private clearSearchInput(): void {
+        this.set({ searchInput: "" })
+    }
 
     @computed private get manager(): EntitySelectorManager {
         return this.props.manager
     }
 
+    @computed private get searchInput(): string {
+        return this.manager.entitySelectorState.searchInput ?? ""
+    }
+
+    @computed private get mostRecentlySelectedEntityName(): string | undefined {
+        return this.manager.entitySelectorState.mostRecentlySelectedEntityName
+    }
+
+    @computed private get entityType(): string {
+        return this.manager.entityType || DEFAULT_GRAPHER_ENTITY_TYPE
+    }
+
+    @computed private get entityTypePlural(): string {
+        return (
+            this.manager.entityTypePlural || DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL
+        )
+    }
+
     @computed private get selectionArray(): SelectionArray {
-        return this.manager.selection
+        return makeSelectionArray(this.manager.selection)
     }
 
     @computed get sortedAvailableEntities(): string[] {
         return sortBy(this.selectionArray.availableEntityNames)
     }
 
-    @computed get isMulti(): boolean {
+    @computed private get searchableEntities(): SearchableEntity[] {
+        return this.sortedAvailableEntities.map((name) => ({ name }))
+    }
+
+    @computed get isMultiMode(): boolean {
         return !this.manager.canChangeEntity
     }
 
@@ -83,139 +128,291 @@ export class EntitySelector extends React.Component<{
         return new FuzzySearch(this.searchableEntities, "name")
     }
 
-    @computed private get searchableEntities(): SearchableEntity[] {
-        return this.sortedAvailableEntities.map((name) => {
-            return { name } as SearchableEntity
-        })
-    }
-
-    @computed get searchResults(): SearchableEntity[] {
+    @computed get searchResults(): SearchableEntity[] | undefined {
         return this.searchInput
             ? this.fuzzy.search(this.searchInput)
-            : this.searchableEntities
+            : undefined
+    }
+
+    @computed get partitionedSearchResults(): PartitionedEntities | undefined {
+        const { searchResults } = this
+
+        if (!searchResults) return undefined
+
+        const [selected, unselected] = partition(
+            searchResults.map((entity) => entity.name),
+            (name) => this.isEntitySelected(name)
+        )
+
+        return { selected, unselected }
+    }
+
+    @computed get partitionedEntities(): PartitionedEntities {
+        const [selected, unselected] = partition(
+            this.sortedAvailableEntities,
+            (name) => this.isEntitySelected(name)
+        )
+
+        return { selected, unselected }
     }
 
-    @action.bound onSelect(entityName: string): void {
-        if (this.isMulti) {
+    @computed get partitionedVisibleEntities(): PartitionedEntities {
+        return this.partitionedSearchResults ?? this.partitionedEntities
+    }
+
+    @action.bound onSearchKeyDown(e: React.KeyboardEvent<HTMLElement>): void {
+        const { searchResults } = this
+        if (e.key === "Enter" && searchResults && searchResults.length > 0) {
+            this.onChange(searchResults[0].name)
+            this.clearSearchInput()
+        }
+    }
+
+    @action.bound onChange(entityName: string): void {
+        if (this.isMultiMode) {
             this.selectionArray.toggleSelection(entityName)
         } else {
             this.selectionArray.setSelectedEntities([entityName])
             if (this.props.onDismiss) this.props.onDismiss()
         }
+
+        this.set({ mostRecentlySelectedEntityName: entityName })
     }
 
-    componentDidMount(): void {
-        if (this.props.autoFocus && !isTouchDevice()) this.searchField.focus()
+    @action.bound onClear(): void {
+        const { partitionedVisibleEntities: visibleEntities } = this
+        this.selectionArray.deselectEntities(visibleEntities.selected)
     }
 
-    @action.bound onSearchKeyDown(e: React.KeyboardEvent<HTMLElement>): void {
-        if (e.key === "Enter" && this.searchResults.length > 0) {
-            this.onSelect(this.searchResults[0].name)
-            this.searchInput = ""
+    private renderSearchBar(): JSX.Element {
+        return (
+            <div className="entity-selector__search-bar">
+                <div
+                    className={cx("search-input", {
+                        "search-input--empty": !this.searchInput,
+                    })}
+                >
+                    <input
+                        ref={this.searchField}
+                        type="search"
+                        placeholder={`Search for ${a(this.entityType)}`}
+                        value={this.searchInput}
+                        onChange={action((e): void => {
+                            this.set({
+                                searchInput: e.currentTarget.value,
+                            })
+                        })}
+                        onKeyDown={this.onSearchKeyDown}
+                    />
+                    <FontAwesomeIcon
+                        className="search-icon"
+                        icon={faMagnifyingGlass}
+                    />
+                    {this.searchInput && (
+                        <button
+                            type="button"
+                            className="clear"
+                            onClick={action(() => this.clearSearchInput())}
+                        >
+                            <FontAwesomeIcon icon={faCircleXmark} />
+                        </button>
+                    )}
+                </div>
+            </div>
+        )
+    }
+
+    private renderSearchResults(): JSX.Element {
+        if (!this.searchResults || this.searchResults.length === 0) {
+            return (
+                <div className="entity-search-results grapher_body-3-regular">
+                    There is no data for the {this.entityType} you are looking
+                    for. You may want to try using different keywords or
+                    checking for typos.
+                </div>
+            )
         }
+
+        return (
+            <ul className="entity-search-results">
+                {this.searchResults.map(({ name }) => (
+                    <li key={name}>
+                        <SelectableEntity
+                            name={name}
+                            type={this.isMultiMode ? "checkbox" : "radio"}
+                            checked={this.isEntitySelected(name)}
+                            onChange={() => this.onChange(name)}
+                        />
+                    </li>
+                ))}
+            </ul>
+        )
     }
 
-    @action.bound onClear(): void {
-        this.selectionArray.clearSelection()
+    private renderAllEntitiesInSingleMode(): JSX.Element {
+        return (
+            <ul>
+                {this.sortedAvailableEntities.map((name) => (
+                    <li key={name}>
+                        <SelectableEntity
+                            name={name}
+                            type="radio"
+                            checked={this.isEntitySelected(name)}
+                            onChange={() => this.onChange(name)}
+                        />
+                    </li>
+                ))}
+            </ul>
+        )
     }
 
-    renderSelectedData(): React.ReactNode {
-        const selectedEntityNames = this.selectionArray.selectedEntityNames
+    private isEntitySelected(name: string): boolean {
+        return this.selectionArray.selectedSet.has(name)
+    }
 
-        // only render something in isMulti mode
-        if (this.isMulti) {
-            return (
-                <div className="selectedData">
-                    {selectedEntityNames.length > 0 && (
-                        <div className="selectedLabel">Selection</div>
-                    )}
-                    <ul>
-                        {selectedEntityNames.map((name) => {
-                            return (
-                                <li key={name}>
-                                    <Checkbox
-                                        label={name}
-                                        checked={true}
-                                        onChange={(): void => {
-                                            this.onSelect(name)
-                                        }}
-                                    />
-                                </li>
-                            )
-                        })}
-                    </ul>
+    private renderAllEntitiesInMultiMode(): JSX.Element {
+        const { selected, unselected } = this.partitionedEntities
+
+        return (
+            <Flipper
+                spring={{
+                    stiffness: 300,
+                    damping: 33,
+                }}
+                flipKey={this.selectionArray.selectedEntityNames.join(",")}
+            >
+                {selected.length > 0 && (
+                    <Flipped flipId="__selection" translate opacity>
+                        <div className="section-title grapher_body-3-medium-italic">
+                            Selection
+                        </div>
+                    </Flipped>
+                )}
+                <ul>
+                    {selected.map((name) => (
+                        <Flipped key={name} flipId={name} translate opacity>
+                            <li
+                                className={cx("animated-entity", {
+                                    "most-recently-selected":
+                                        this.mostRecentlySelectedEntityName ===
+                                        name,
+                                })}
+                            >
+                                <SelectableEntity
+                                    name={name}
+                                    type="checkbox"
+                                    checked={this.isEntitySelected(name)}
+                                    onChange={() => this.onChange(name)}
+                                />
+                            </li>
+                        </Flipped>
+                    ))}
+                </ul>
+
+                {selected.length > 0 && unselected.length > 0 && (
+                    <Flipped flipId="__available" translate opacity>
+                        <div className="section-title grapher_body-3-medium-italic grapher_light">
+                            {capitalize(this.entityTypePlural)}
+                        </div>
+                    </Flipped>
+                )}
+
+                <ul>
+                    {unselected.map((name) => (
+                        <Flipped key={name} flipId={name} translate opacity>
+                            <li
+                                className={cx("animated-entity", {
+                                    "most-recently-selected":
+                                        this.mostRecentlySelectedEntityName ===
+                                        name,
+                                })}
+                            >
+                                <SelectableEntity
+                                    name={name}
+                                    type="checkbox"
+                                    checked={this.isEntitySelected(name)}
+                                    onChange={() => this.onChange(name)}
+                                />
+                            </li>
+                        </Flipped>
+                    ))}
+                </ul>
+            </Flipper>
+        )
+    }
+
+    private renderFooter(): JSX.Element {
+        const { numSelectedEntities } = this.selectionArray
+        const { partitionedVisibleEntities: visibleEntities } = this
+
+        return (
+            <div className="entity-selector__footer">
+                <div className="footer__selected">
+                    {numSelectedEntities > 0
+                        ? `${numSelectedEntities} selected`
+                        : "No matches"}
                 </div>
-            )
-        } else return undefined
+                <button
+                    type="button"
+                    onClick={this.onClear}
+                    disabled={visibleEntities.selected.length === 0}
+                >
+                    Clear
+                </button>
+            </div>
+        )
     }
 
     render(): JSX.Element {
-        const { selectionArray, searchResults, searchInput } = this
-
         return (
             <div
-                className={classnames(
-                    "EntitySelector",
-                    this.isMulti
-                        ? "EntitySelectorMulti"
-                        : "EntitySelectorSingle"
-                )}
+                ref={this.container}
+                className={cx("entity-selector", {
+                    "entity-selector--single": !this.isMultiMode,
+                })}
             >
-                <div className="searchBar">
-                    <div className="searchInput">
-                        <input
-                            type="search"
-                            placeholder="Search..."
-                            value={searchInput}
-                            onChange={(e): void => {
-                                this.searchInput = e.currentTarget.value
-                            }}
-                            onKeyDown={this.onSearchKeyDown}
-                            ref={(e): HTMLInputElement =>
-                                (this.searchField = e as HTMLInputElement)
-                            }
-                        />
-                        <FontAwesomeIcon icon={faMagnifyingGlass} />
-                    </div>
-                    {this.isMulti &&
-                    selectionArray.selectedEntityNames.length > 0 ? (
-                        <button
-                            className="clearSelection"
-                            onClick={this.onClear}
-                        >
-                            Clear selection
-                        </button>
-                    ) : undefined}
-                </div>
+                {this.renderSearchBar()}
 
-                <div className="entities">
-                    <div className="searchResults">
-                        {searchResults.length > 0 ? (
-                            <ul>
-                                {searchResults.map((result) => (
-                                    <EntitySearchResult
-                                        key={result.name}
-                                        result={result}
-                                        isMulti={this.isMulti}
-                                        isChecked={selectionArray.selectedSet.has(
-                                            result.name
-                                        )}
-                                        onSelect={this.onSelect}
-                                    />
-                                ))}
-                            </ul>
-                        ) : (
-                            <div className="empty">
-                                {this.manager.entitiesAreCountryLike &&
-                                isCountryName(this.searchInput)
-                                    ? "There is no data for the country, region or group you are looking for."
-                                    : "Nothing turned up. You may want to try using different keywords or checking for typos."}
-                            </div>
-                        )}
-                    </div>
-                    {this.renderSelectedData()}
+                <div className="entity-selector__content">
+                    {this.searchInput
+                        ? this.renderSearchResults()
+                        : this.isMultiMode
+                          ? this.renderAllEntitiesInMultiMode()
+                          : this.renderAllEntitiesInSingleMode()}
                 </div>
+
+                {this.isMultiMode && this.renderFooter()}
             </div>
         )
     }
 }
+
+function SelectableEntity({
+    name,
+    checked,
+    type,
+    onChange,
+}: {
+    name: React.ReactNode
+    checked: boolean
+    type: "checkbox" | "radio"
+    onChange: () => void
+}) {
+    const Input = {
+        checkbox: Checkbox,
+        radio: RadioButton,
+    }[type]
+
+    return (
+        <div
+            className="selectable-entity"
+            onClickCapture={(e) => {
+                e.stopPropagation()
+                e.preventDefault()
+                onChange()
+            }}
+        >
+            <Input label={name} checked={checked} onChange={onChange} />
+        </div>
+    )
+}
diff --git a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
index 43985eda99c..a6604f4140e 100644
--- a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
@@ -27,7 +27,7 @@ export class EntitySelectorModal extends React.Component<{
     }
 
     @computed private get modalBounds(): Bounds {
-        const maxWidth = this.manager.canChangeEntity ? 640 : 740
+        const maxWidth = 366
         const padWidth = Math.max(16, (this.frameBounds.width - maxWidth) / 2)
         return this.frameBounds.padHeight(16).padWidth(padWidth)
     }
diff --git a/packages/@ourworldindata/grapher/src/modal/Modal.scss b/packages/@ourworldindata/grapher/src/modal/Modal.scss
index ad51c3e341b..8c98b6c37f0 100644
--- a/packages/@ourworldindata/grapher/src/modal/Modal.scss
+++ b/packages/@ourworldindata/grapher/src/modal/Modal.scss
@@ -41,9 +41,14 @@
                 justify-content: space-between;
                 align-items: center;
                 padding: var(--modal-padding) var(--modal-padding) 16px;
+
+                button {
+                    margin-left: 8px;
+                }
             }
 
             .modal-scrollable {
+                flex-grow: 1;
                 overflow-y: auto;
             }
         }
diff --git a/packages/@ourworldindata/grapher/src/modal/Modal.tsx b/packages/@ourworldindata/grapher/src/modal/Modal.tsx
index 0dd218a2b7b..5797756b9e8 100644
--- a/packages/@ourworldindata/grapher/src/modal/Modal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/Modal.tsx
@@ -1,8 +1,10 @@
 import React from "react"
+import cx from "classnames"
 import { observer } from "mobx-react"
 import { action, computed } from "mobx"
 import { Bounds } from "@ourworldindata/utils"
 import { CloseButton } from "../closeButton/CloseButton.js"
+import { GRAPHER_SCROLLABLE_CONTAINER_CLASS } from "../core/GrapherConstants.js"
 
 @observer
 export class Modal extends React.Component<{
@@ -106,7 +108,12 @@ export class Modal extends React.Component<{
                                 onClick={this.props.onDismiss}
                             />
                         )}
-                        <div className="modal-scrollable">
+                        <div
+                            className={cx(
+                                "modal-scrollable",
+                                GRAPHER_SCROLLABLE_CONTAINER_CLASS
+                            )}
+                        >
                             {this.props.children}
                         </div>
                     </div>
diff --git a/packages/@ourworldindata/grapher/src/selection/SelectionArray.ts b/packages/@ourworldindata/grapher/src/selection/SelectionArray.ts
index b6f3dd4360e..0c8884a9293 100644
--- a/packages/@ourworldindata/grapher/src/selection/SelectionArray.ts
+++ b/packages/@ourworldindata/grapher/src/selection/SelectionArray.ts
@@ -121,17 +121,29 @@ export class SelectionArray {
         return this
     }
 
-    // Mainly for testing
-    @action.bound selectSample(howMany = 1): this {
-        return this.setSelectedEntities(
-            this.availableEntityNames.slice(0, howMany)
+    @action.bound deselectEntity(entityName: EntityName): this {
+        this.selectedEntityNames = this.selectedEntityNames.filter(
+            (name) => name !== entityName
         )
+        return this
     }
 
-    @action.bound deselectEntity(entityName: EntityName): this {
+    @action.bound selectEntities(entityNames: EntityName[]): this {
+        entityNames.forEach((entityName) => this.selectEntity(entityName))
+        return this
+    }
+
+    @action.bound deselectEntities(entityNames: EntityName[]): this {
         this.selectedEntityNames = this.selectedEntityNames.filter(
-            (name) => name !== entityName
+            (name) => !entityNames.includes(name)
         )
         return this
     }
+
+    // Mainly for testing
+    @action.bound selectSample(howMany = 1): this {
+        return this.setSelectedEntities(
+            this.availableEntityNames.slice(0, howMany)
+        )
+    }
 }
diff --git a/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.scss b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.scss
index 8499c3098a1..a0b4a725640 100644
--- a/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.scss
+++ b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.scss
@@ -2,7 +2,8 @@
     flex-grow: 0;
     flex-shrink: 0;
     border-left: 1px solid $frame-color;
-    overflow-y: auto;
+
+    position: relative;
 
     // necessary for scrolling
     display: flex;
@@ -14,6 +15,7 @@
     }
 
     .side-panel__scrollable {
+        flex-grow: 1;
         overflow-y: auto;
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx
index 61ef2a49cfb..d12567f2d01 100644
--- a/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx
+++ b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx
@@ -1,7 +1,9 @@
 import React from "react"
+import cx from "classnames"
 import { observer } from "mobx-react"
 import { computed } from "mobx"
 import { Bounds } from "@ourworldindata/utils"
+import { GRAPHER_SCROLLABLE_CONTAINER_CLASS } from "../core/GrapherConstants"
 
 @observer
 export class SidePanel extends React.Component<{
@@ -25,7 +27,12 @@ export class SidePanel extends React.Component<{
                 <h3 className="side-panel__header grapher_h5-black-caps grapher_light">
                     {this.props.title}
                 </h3>
-                <div className="side-panel__scrollable">
+                <div
+                    className={cx(
+                        "side-panel__scrollable",
+                        GRAPHER_SCROLLABLE_CONTAINER_CLASS
+                    )}
+                >
                     {this.props.children}
                 </div>
             </div>
diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
index 7f6f3692167..1649aa6a87b 100644
--- a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
+++ b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
@@ -9,8 +9,6 @@
         $bold: 700;
         $lato: $sans-serif-font-stack;
 
-        $indent: 15px;
-
         .grapher-drawer-contents {
             position: fixed;
             right: 0;
@@ -31,17 +29,21 @@
                 justify-content: space-between;
                 align-items: center;
                 background: white;
-                padding: 9px $indent 3px $indent;
+                padding: 16px;
                 position: sticky;
                 top: 0;
                 z-index: 1;
-                margin-bottom: 16px;
 
                 flex-shrink: 0; // necessary for scrolling
+
+                button {
+                    margin-left: 8px;
+                }
             }
 
             .grapher-drawer-scrollable {
                 overflow-y: auto;
+                flex-grow: 1;
             }
         }
 
diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
index dbcdc03fc82..a763f36a0b3 100644
--- a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
+++ b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
@@ -1,8 +1,12 @@
 import React from "react"
+import cx from "classnames"
 import { createPortal } from "react-dom"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
-import { GRAPHER_DRAWER_ID } from "../core/GrapherConstants"
+import {
+    GRAPHER_DRAWER_ID,
+    GRAPHER_SCROLLABLE_CONTAINER_CLASS,
+} from "../core/GrapherConstants"
 import { CloseButton } from "../closeButton/CloseButton.js"
 
 @observer
@@ -90,7 +94,12 @@ export class SlideInDrawer extends React.Component<{
                         <CloseButton onClick={() => this.toggleVisibility()} />
                     </div>
 
-                    <div className="grapher-drawer-scrollable">
+                    <div
+                        className={cx(
+                            "grapher-drawer-scrollable",
+                            GRAPHER_SCROLLABLE_CONTAINER_CLASS
+                        )}
+                    >
                         {this.props.children}
                     </div>
                 </div>
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 6b65d61a85e..a4ab855a226 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -534,7 +534,8 @@ export class SlopeChart
         const target = e.target as HTMLElement
 
         // check if the target is an interactive element or contained within one
-        const selector = "a, button, input, .TimelineComponent"
+        const selector =
+            "a, button, input, .TimelineComponent, .entity-selector"
         const isTargetInteractive = target.closest(selector) !== null
 
         if (
diff --git a/packages/@ourworldindata/grapher/tsup.config.bundled_mna7e6rrx0j.mjs b/packages/@ourworldindata/grapher/tsup.config.bundled_mna7e6rrx0j.mjs
new file mode 100644
index 00000000000..1efe232a4cf
--- /dev/null
+++ b/packages/@ourworldindata/grapher/tsup.config.bundled_mna7e6rrx0j.mjs
@@ -0,0 +1,15 @@
+// tsup.config.ts
+import { defineConfig } from "tsup";
+import { sassPlugin } from "esbuild-sass-plugin";
+var tsup_config_default = defineConfig({
+  dts: true,
+  sourcemap: true,
+  splitting: true,
+  clean: true,
+  esbuildPlugins: [sassPlugin()],
+  tsconfig: "./tsconfig.src.json"
+});
+export {
+  tsup_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidHN1cC5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9faW5qZWN0ZWRfZmlsZW5hbWVfXyA9IFwiL1VzZXJzL3NvcGhpYS9jb2RlL293aWQvb3dpZC1ncmFwaGVyL3BhY2thZ2VzL0BvdXJ3b3JsZGluZGF0YS9ncmFwaGVyL3RzdXAuY29uZmlnLnRzXCI7Y29uc3QgX19pbmplY3RlZF9kaXJuYW1lX18gPSBcIi9Vc2Vycy9zb3BoaWEvY29kZS9vd2lkL293aWQtZ3JhcGhlci9wYWNrYWdlcy9Ab3Vyd29ybGRpbmRhdGEvZ3JhcGhlclwiO2NvbnN0IF9faW5qZWN0ZWRfaW1wb3J0X21ldGFfdXJsX18gPSBcImZpbGU6Ly8vVXNlcnMvc29waGlhL2NvZGUvb3dpZC9vd2lkLWdyYXBoZXIvcGFja2FnZXMvQG91cndvcmxkaW5kYXRhL2dyYXBoZXIvdHN1cC5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidHN1cFwiXG5pbXBvcnQgeyBzYXNzUGx1Z2luIH0gZnJvbSBcImVzYnVpbGQtc2Fzcy1wbHVnaW5cIlxuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICAgIGR0czogdHJ1ZSxcbiAgICBzb3VyY2VtYXA6IHRydWUsXG4gICAgc3BsaXR0aW5nOiB0cnVlLFxuICAgIGNsZWFuOiB0cnVlLFxuICAgIGVzYnVpbGRQbHVnaW5zOiBbc2Fzc1BsdWdpbigpXSxcbiAgICB0c2NvbmZpZzogXCIuL3RzY29uZmlnLnNyYy5qc29uXCIsXG59KVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE2VixTQUFTLG9CQUFvQjtBQUMxWCxTQUFTLGtCQUFrQjtBQUUzQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUN4QixLQUFLO0FBQUEsRUFDTCxXQUFXO0FBQUEsRUFDWCxXQUFXO0FBQUEsRUFDWCxPQUFPO0FBQUEsRUFDUCxnQkFBZ0IsQ0FBQyxXQUFXLENBQUM7QUFBQSxFQUM3QixVQUFVO0FBQ2QsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K