diff --git a/adminSiteClient/ChartEditorPage.tsx b/adminSiteClient/ChartEditorPage.tsx
index 502df473cd8..4b35d41382d 100644
--- a/adminSiteClient/ChartEditorPage.tsx
+++ b/adminSiteClient/ChartEditorPage.tsx
@@ -249,7 +249,7 @@ export class ChartEditorPage
     @computed private get bounds(): Bounds {
         return this.isMobilePreview
             ? new Bounds(0, 0, 380, 525)
-            : this.grapher.idealBounds
+            : this.grapher.defaultBounds
     }
 
     @computed private get staticFormat(): GrapherStaticFormat {
diff --git a/baker/GrapherImageBaker.tsx b/baker/GrapherImageBaker.tsx
index a8232510b88..173ae4449df 100644
--- a/baker/GrapherImageBaker.tsx
+++ b/baker/GrapherImageBaker.tsx
@@ -46,7 +46,7 @@ export async function bakeGraphersToPngs(
             .then(() => console.log(`${outPath}.svg`)),
         sharp(Buffer.from(grapher.staticSVG), { density: 144 })
             .png()
-            .resize(grapher.idealBounds.width, grapher.idealBounds.height)
+            .resize(grapher.defaultBounds.width, grapher.defaultBounds.height)
             .flatten({ background: "#ffffff" })
             .toFile(`${outPath}.png`),
     ])
@@ -102,7 +102,7 @@ export async function bakeGrapherToSvg(
     verbose = true
 ) {
     const grapher = initGrapherForSvgExport(jsonConfig, queryStr)
-    const { width, height } = grapher.idealBounds
+    const { width, height } = grapher.defaultBounds
     const outPath = buildSvgOutFilepath(
         outDir,
         {
diff --git a/devTools/svgTester/utils.ts b/devTools/svgTester/utils.ts
index 26c43e473c7..83207632ef8 100644
--- a/devTools/svgTester/utils.ts
+++ b/devTools/svgTester/utils.ts
@@ -401,7 +401,7 @@ export async function renderSvg(
         },
         queryStr
     )
-    const { width, height } = grapher.idealBounds
+    const { width, height } = grapher.defaultBounds
     const outFilename = buildSvgOutFilename(
         {
             slug: configAndData.config.slug!,
diff --git a/packages/@ourworldindata/grapher/src/bodyPortal/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/bodyPortal/.eslintrc.yaml
new file mode 100644
index 00000000000..2972fb8a9d9
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/bodyPortal/.eslintrc.yaml
@@ -0,0 +1,3 @@
+rules:
+    "@typescript-eslint/explicit-function-return-type": "warn"
+    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/bodyPortal/BodyPortal.tsx b/packages/@ourworldindata/grapher/src/bodyPortal/BodyPortal.tsx
new file mode 100644
index 00000000000..8153c14a07f
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/bodyPortal/BodyPortal.tsx
@@ -0,0 +1,32 @@
+import React from "react"
+import ReactDOM from "react-dom"
+
+interface BodyPortalProps {
+    id?: string
+    tagName?: string // default: "div"
+    children: React.ReactNode
+}
+
+// Render a component on the Body instead of inside the current Tree.
+// https://reactjs.org/docs/portals.html
+export class BodyPortal extends React.Component<BodyPortalProps> {
+    el: HTMLElement
+
+    constructor(props: BodyPortalProps) {
+        super(props)
+        this.el = document.createElement(props.tagName || "div")
+        if (props.id) this.el.id = props.id
+    }
+
+    componentDidMount(): void {
+        document.body.appendChild(this.el)
+    }
+
+    componentWillUnmount(): void {
+        document.body.removeChild(this.el)
+    }
+
+    render(): any {
+        return ReactDOM.createPortal(this.props.children, this.el)
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss
index b44d634451b..06bd9ea88a6 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss
@@ -1,6 +1,10 @@
 // keep in sync with constant values in CaptionedChart.tsx
 $controlRowHeight: 32px; // keep in sync with CONTROLS_ROW_HEIGHT
 
+.CaptionedChart {
+    width: 100%;
+}
+
 .HeaderHTML,
 .SourcesFooterHTML {
     font-family: $sans-serif-font-stack;
@@ -22,7 +26,6 @@ $controlRowHeight: 32px; // keep in sync with CONTROLS_ROW_HEIGHT
     align-items: center;
     border-top: 1px solid $frame-color;
     position: absolute;
-    width: 100%;
     bottom: 0;
     color: $dark-text;
     font-weight: 700;
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.stories.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.stories.tsx
index c0522eda421..b832d6b9ae3 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.stories.tsx
@@ -21,7 +21,7 @@ export default {
 const table = SynthesizeGDPTable({ entityCount: 5 })
 
 const manager: CaptionedChartManager = {
-    tabBounds: DEFAULT_BOUNDS,
+    captionedChartBounds: DEFAULT_BOUNDS,
     table,
     selection: table.availableEntityNames,
     currentTitle: "This is the Title",
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
index c73851bcb8b..7a05b4a79be 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -45,7 +45,6 @@ import {
     GrapherTabOption,
     RelatedQuestionsConfig,
 } from "@ourworldindata/types"
-import { AxisConfig } from "../axis/AxisConfig"
 import { DataTable, DataTableManager } from "../dataTable/DataTable"
 import {
     ContentSwitchers,
@@ -68,33 +67,42 @@ export interface CaptionedChartManager
         MapProjectionMenuManager,
         SettingsMenuManager {
     containerElement?: HTMLDivElement
-    tabBounds?: Bounds
+    bakedGrapherURL?: string
+    isReady?: boolean
+    whatAreWeWaitingFor?: string
+
+    // bounds
+    captionedChartBounds?: Bounds
+    sidePanelBounds?: Bounds
     staticBounds?: Bounds
     staticBoundsWithDetails?: Bounds
+
+    // layout
+    isSmall?: boolean
+    isMedium?: boolean
+    framePaddingHorizontal?: number
+    framePaddingVertical?: number
     fontSize?: number
-    bakedGrapherURL?: string
+
+    // state
     tab?: GrapherTabOption
-    type: ChartTypeName
-    yAxis: AxisConfig
-    xAxis: AxisConfig
-    typeExceptWhenLineChartAndSingleTimeThenWillBeBarChart?: ChartTypeName
-    isReady?: boolean
-    whatAreWeWaitingFor?: string
-    entityType?: string
-    entityTypePlural?: string
-    shouldIncludeDetailsInStaticExport?: boolean
-    detailRenderers: MarkdownTextWrap[]
     isOnMapTab?: boolean
     isOnTableTab?: boolean
+    type: ChartTypeName
+    typeExceptWhenLineChartAndSingleTimeThenWillBeBarChart?: ChartTypeName
+    showEntitySelectionToggle?: boolean
+
+    // timeline
     hasTimeline?: boolean
     timelineController?: TimelineController
-    hasRelatedQuestion?: boolean
-    isRelatedQuestionTargetDifferentFromCurrentPage?: boolean
+
+    // details on demand
+    shouldIncludeDetailsInStaticExport?: boolean
+    detailRenderers: MarkdownTextWrap[]
+
+    // related question
     relatedQuestions?: RelatedQuestionsConfig[]
-    isSmall?: boolean
-    isMedium?: boolean
-    framePaddingHorizontal?: number
-    framePaddingVertical?: number
+    showRelatedQuestion?: boolean
 }
 
 interface CaptionedChartProps {
@@ -144,10 +152,6 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
         return this.manager.isMedium ? 8 : 16
     }
 
-    @computed protected get relatedQuestionHeight(): number {
-        return this.manager.isMedium ? 24 : 28
-    }
-
     @computed protected get header(): Header {
         return new Header({
             manager: this.manager,
@@ -181,7 +185,9 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
 
     @computed protected get bounds(): Bounds {
         const bounds =
-            this.props.bounds ?? this.manager.tabBounds ?? DEFAULT_BOUNDS
+            this.props.bounds ??
+            this.manager.captionedChartBounds ??
+            DEFAULT_BOUNDS
         // the padding ensures grapher's frame is not cut off
         return bounds.padRight(2).padBottom(2)
     }
@@ -258,28 +264,36 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
         return this.manager.selection
     }
 
-    @computed get showRelatedQuestion(): boolean {
-        return (
-            !!this.manager.relatedQuestions &&
-            !!this.manager.hasRelatedQuestion &&
-            !!this.manager.isRelatedQuestionTargetDifferentFromCurrentPage
-        )
+    @computed private get showRelatedQuestion(): boolean {
+        return !!this.manager.showRelatedQuestion
+    }
+
+    @computed get relatedQuestionHeight(): number {
+        if (!this.showRelatedQuestion) return 0
+        return this.manager.isMedium ? 24 : 28
+    }
+
+    @computed private get sidePanelWidth(): number {
+        return this.manager.sidePanelBounds?.width ?? 0
     }
 
     private renderControlsRow(): JSX.Element {
-        const { showContentSwitchers } = this
+        const { showEntitySelectionToggle } = this.manager
         return (
             <nav
                 className="controlsRow"
                 style={{ padding: `0 ${this.framePaddingHorizontal}px` }}
             >
                 <div>
-                    {showContentSwitchers && (
+                    {this.showContentSwitchers && (
                         <ContentSwitchers manager={this.manager} />
                     )}
                 </div>
                 <div className="chart-controls">
-                    <EntitySelectionToggle manager={this.manager} />
+                    {showEntitySelectionToggle && (
+                        <EntitySelectionToggle manager={this.manager} />
+                    )}
+
                     <SettingsMenu
                         manager={this.manager}
                         top={
@@ -290,6 +304,9 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
                             4 // margin between button and menu
                         }
                         bottom={this.framePaddingVertical}
+                        right={
+                            this.sidePanelWidth + this.framePaddingHorizontal
+                        }
                     />
                     <MapProjectionMenu manager={this.manager} />
                 </div>
@@ -303,6 +320,7 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
             <div
                 className="relatedQuestion"
                 style={{
+                    width: this.bounds.width,
                     height: this.relatedQuestionHeight,
                     padding: `0 ${this.framePaddingHorizontal}px`,
                 }}
@@ -433,7 +451,7 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
         //    #5 Footer
         //    #6 [Related question]
         return (
-            <>
+            <div className="CaptionedChart">
                 {/* #1 Header */}
                 <Header manager={this.manager} maxWidth={this.maxWidth} />
                 <VerticalSpace height={this.verticalPadding} />
@@ -461,7 +479,7 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
 
                 {/* #6 [Related question] */}
                 {this.showRelatedQuestion && this.renderRelatedQuestion()}
-            </>
+            </div>
         )
     }
 
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
index ff2925f1f81..50e7cf8df4c 100644
--- a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
+++ b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
@@ -34,8 +34,6 @@ export interface ChartManager {
     table: OwidTable
     transformedTable?: OwidTable
 
-    isSelectingData?: boolean
-    startSelectingWhenLineClicked?: boolean // used by lineLabels
     isExportingToSvgOrPng?: boolean
     isRelativeMode?: boolean
     comparisonLines?: ComparisonLineConfig[]
diff --git a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
index cc5595c5607..a79d7fe4a58 100644
--- a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
@@ -10,12 +10,12 @@ import {
 import classnames from "classnames"
 
 export interface EntitySelectionManager {
-    showSelectEntitiesButton?: boolean
-    showChangeEntityButton?: boolean
-    showAddEntityButton?: boolean
+    canHighlightEntities?: boolean
+    canChangeEntity?: boolean
+    canAddEntities?: boolean
     entityType?: string
     entityTypePlural?: string
-    isSelectingData?: boolean
+    isEntitySelectorModalOrDrawerOpen?: boolean
     isOnChartTab?: boolean
 }
 
@@ -43,42 +43,43 @@ export class EntitySelectionToggle extends React.Component<{
         const {
             entityType = "",
             entityTypePlural = "",
-            showSelectEntitiesButton,
-            showChangeEntityButton,
-            showAddEntityButton,
+            canHighlightEntities,
+            canChangeEntity,
+            canAddEntities,
         } = this.props.manager
 
-        return showSelectEntitiesButton
+        return canHighlightEntities
             ? {
                   action: "Select",
                   entity: entityTypePlural,
                   icon: <FontAwesomeIcon icon={faEye} />,
               }
-            : showChangeEntityButton
-              ? {
-                    action: "Change",
-                    entity: entityType,
-                    icon: <FontAwesomeIcon icon={faRightLeft} />,
-                }
-              : showAddEntityButton
-                ? {
-                      action: "Edit",
-                      entity: entityTypePlural,
-                      icon: <FontAwesomeIcon icon={faPencilAlt} />,
-                  }
-                : null
+            : canChangeEntity
+            ? {
+                  action: "Change",
+                  entity: entityType,
+                  icon: <FontAwesomeIcon icon={faRightLeft} />,
+              }
+            : canAddEntities
+            ? {
+                  action: "Edit",
+                  entity: entityTypePlural,
+                  icon: <FontAwesomeIcon icon={faPencilAlt} />,
+              }
+            : null
     }
 
     render(): JSX.Element | null {
         const { showToggle, label } = this
-        const { isSelectingData: active } = this.props.manager
+        const { isEntitySelectorModalOrDrawerOpen: active } = this.props.manager
 
         return showToggle && label ? (
             <div className="entity-selection-menu">
                 <button
                     className={classnames("menu-toggle", { active })}
                     onClick={(e): void => {
-                        this.props.manager.isSelectingData = !active
+                        this.props.manager.isEntitySelectorModalOrDrawerOpen =
+                            !active
                         e.stopPropagation()
                     }}
                     type="button"
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
index 1040d4b3807..23960cb25d8 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -61,7 +61,7 @@ export interface SettingsMenuManager
     type: ChartTypeName
     isRelativeMode?: boolean
     selection?: SelectionArray | EntityName[]
-    hasEntitySelectionToggle?: boolean
+    canChangeAddOrHighlightEntities?: boolean
     filledDimensions: ChartDimension[]
     xColumnSlug?: string
     xOverrideTime?: number
@@ -84,12 +84,13 @@ export class SettingsMenu extends React.Component<{
     manager: SettingsMenuManager
     top: number
     bottom: number
+    right: number
 }> {
     @observable.ref active: boolean = false
     contentRef: React.RefObject<HTMLDivElement> = React.createRef() // the menu contents & backdrop
 
     static shouldShow(manager: SettingsMenuManager): boolean {
-        const test = new SettingsMenu({ manager, top: 0, bottom: 0 })
+        const test = new SettingsMenu({ manager, top: 0, bottom: 0, right: 0 })
         return test.showSettingsMenuToggle
     }
 
@@ -184,10 +185,11 @@ export class SettingsMenu extends React.Component<{
     }
 
     @computed get showTableFilterToggle(): boolean {
-        const { hideTableFilterToggle, hasEntitySelectionToggle } = this.manager
+        const { hideTableFilterToggle, canChangeAddOrHighlightEntities } =
+            this.manager
         return (
             this.selectionArray.hasSelection &&
-            !!hasEntitySelectionToggle &&
+            !!canChangeAddOrHighlightEntities &&
             !hideTableFilterToggle
         )
     }
@@ -255,10 +257,10 @@ export class SettingsMenu extends React.Component<{
         return makeSelectionArray(this.manager.selection)
     }
 
-    @computed get layout(): { maxHeight: string; top: number } {
-        const { top, bottom } = this.props,
+    @computed get layout(): { maxHeight: string; top: number; right: number } {
+        const { top, bottom, right } = this.props,
             maxHeight = `calc(100% - ${top + bottom}px)`
-        return { maxHeight, top }
+        return { maxHeight, top, right }
     }
 
     @computed get menu(): JSX.Element | void {
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 74633e78ab2..699943ed0c0 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -9,6 +9,7 @@ import {
     reaction,
 } from "mobx"
 import { bind } from "decko"
+import a from "indefinite"
 import {
     uniqWith,
     isEqual,
@@ -102,6 +103,7 @@ import {
     GrapherStaticFormat,
     DetailsMarker,
     DetailDictionary,
+    GrapherWindowType,
 } from "@ourworldindata/types"
 import {
     BlankOwidTable,
@@ -125,6 +127,7 @@ import {
     STATIC_EXPORT_DETAIL_SPACING,
     GRAPHER_LIGHT_TEXT,
     GRAPHER_LOADED_EVENT_NAME,
+    GRAPHER_DRAWER_ID,
 } from "../core/GrapherConstants"
 import Cookies from "js-cookie"
 import {
@@ -198,6 +201,9 @@ import {
     type GrapherExport,
 } from "../captionedChart/StaticChartRasterizer.js"
 import { SlopeChartManager } from "../slopeCharts/SlopeChart"
+import { SidePanel } from "../sidePanel/SidePanel"
+import { EntitySelector } from "../entitySelector/EntitySelector"
+import { SlideInDrawer } from "../slideInDrawer/SlideInDrawer"
 
 declare global {
     interface Window {
@@ -805,7 +811,8 @@ export class Grapher
 
     tooltips?: TooltipManager["tooltips"] = observable.map({}, { deep: false })
     @observable isPlaying = false
-    @observable.ref isSelectingData = false
+
+    @observable.ref isEntitySelectorModalOrDrawerOpen = false
 
     @observable.ref isSourcesModalOpen = false
     @observable.ref isDownloadModalOpen = false
@@ -1763,7 +1770,7 @@ export class Grapher
         this.xDimension!.targetYear = value
     }
 
-    @computed get idealBounds(): Bounds {
+    @computed get defaultBounds(): Bounds {
         return new Bounds(0, 0, DEFAULT_GRAPHER_WIDTH, DEFAULT_GRAPHER_HEIGHT)
     }
 
@@ -1785,11 +1792,11 @@ export class Grapher
     getStaticBounds(format: GrapherStaticFormat): Bounds {
         switch (format) {
             case GrapherStaticFormat.landscape:
-                return this.idealBounds
+                return this.defaultBounds
             case GrapherStaticFormat.square:
                 return new Bounds(0, 0, 540, 540)
             default:
-                return this.idealBounds
+                return this.defaultBounds
         }
     }
 
@@ -2001,14 +2008,14 @@ export class Grapher
         return isMobile()
     }
 
-    @computed private get bounds(): Bounds {
+    @computed private get externalBounds(): Bounds {
         return this.props.bounds ?? DEFAULT_BOUNDS
     }
 
     @computed private get isPortrait(): boolean {
         return (
-            this.bounds.width < this.bounds.height &&
-            this.bounds.width < DEFAULT_GRAPHER_WIDTH
+            this.externalBounds.width < this.externalBounds.height &&
+            this.externalBounds.width < DEFAULT_GRAPHER_WIDTH
         )
     }
 
@@ -2024,7 +2031,7 @@ export class Grapher
         const {
             isEditor,
             isExportingToSvgOrPng,
-            bounds,
+            externalBounds,
             widthForDeviceOrientation,
             heightForDeviceOrientation,
             isInIFrame,
@@ -2062,8 +2069,8 @@ export class Grapher
 
         // If the available space is very small, we use all of the space given to us
         if (
-            bounds.height < heightForDeviceOrientation ||
-            bounds.width < widthForDeviceOrientation
+            externalBounds.height < heightForDeviceOrientation ||
+            externalBounds.width < widthForDeviceOrientation
         )
             return false
 
@@ -2072,20 +2079,9 @@ export class Grapher
 
     // If we have a big screen to be in, we can define our own aspect ratio and sit in the center
     @computed private get scaleToFitIdeal(): number {
-        const {
-            bounds,
-            isInFullScreenMode,
-            widthForDeviceOrientation,
-            heightForDeviceOrientation,
-            windowInnerWidth,
-            windowInnerHeight,
-        } = this
-        const givenBounds = isInFullScreenMode
-            ? { width: windowInnerWidth!, height: windowInnerHeight! }
-            : bounds
         return Math.min(
-            (givenBounds.width * 0.95) / widthForDeviceOrientation,
-            (givenBounds.height * 0.95) / heightForDeviceOrientation
+            (this.availableWidth * 0.95) / this.widthForDeviceOrientation,
+            (this.availableHeight * 0.95) / this.heightForDeviceOrientation
         )
     }
 
@@ -2095,53 +2091,74 @@ export class Grapher
         return windowInnerWidth < 940 ? 0 : 40
     }
 
-    // These are the final render dimensions
-    @computed private get renderWidth(): number {
+    @computed private get availableWidth(): number {
         const {
-            bounds,
+            externalBounds,
             isInFullScreenMode,
-            useIdealBounds,
-            widthForDeviceOrientation,
-            scaleToFitIdeal,
             windowInnerWidth,
             fullScreenPadding,
         } = this
 
-        if (useIdealBounds) {
-            return Math.floor(widthForDeviceOrientation * scaleToFitIdeal)
-        }
-
         return Math.floor(
             isInFullScreenMode
                 ? windowInnerWidth! - 2 * fullScreenPadding
-                : bounds.width
+                : externalBounds.width
         )
     }
 
-    @computed private get renderHeight(): number {
+    @computed private get availableHeight(): number {
         const {
-            bounds,
+            externalBounds,
             isInFullScreenMode,
-            useIdealBounds,
-            heightForDeviceOrientation,
-            scaleToFitIdeal,
             windowInnerHeight,
             fullScreenPadding,
         } = this
 
-        if (useIdealBounds) {
-            return Math.floor(heightForDeviceOrientation * scaleToFitIdeal)
-        }
-
         return Math.floor(
             isInFullScreenMode
                 ? windowInnerHeight! - 2 * fullScreenPadding
-                : bounds.height
+                : externalBounds.height
         )
     }
 
-    @computed get tabBounds(): Bounds {
-        return new Bounds(0, 0, this.renderWidth, this.renderHeight)
+    @computed private get idealWidth(): number {
+        return Math.floor(this.widthForDeviceOrientation * this.scaleToFitIdeal)
+    }
+
+    @computed private get idealHeight(): number {
+        return Math.floor(
+            this.heightForDeviceOrientation * this.scaleToFitIdeal
+        )
+    }
+
+    @computed get frameBounds(): Bounds {
+        return this.useIdealBounds
+            ? new Bounds(0, 0, this.idealWidth, this.idealHeight)
+            : new Bounds(0, 0, this.availableWidth, this.availableHeight)
+    }
+
+    @computed get captionedChartBounds(): Bounds {
+        // if there's no panel, the chart takes up the whole frame
+        if (!this.isEntitySelectorPanelActive) return this.frameBounds
+
+        return new Bounds(
+            0,
+            0,
+            // the chart takes up 9 columns in 12-column grid
+            (9 / 12) * this.frameBounds.width,
+            this.frameBounds.height
+        )
+    }
+
+    @computed get sidePanelBounds(): Bounds | undefined {
+        if (!this.isEntitySelectorPanelActive) return
+
+        return new Bounds(
+            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
+        )
     }
 
     base: React.RefObject<HTMLDivElement> = React.createRef()
@@ -2459,7 +2476,7 @@ export class Grapher
     @action.bound dismissFullScreen(): void {
         // if a modal is open, dismiss it instead of exiting full-screen mode
         if (this.isModalOpen || this.isShareMenuActive) {
-            this.isSelectingData = false
+            this.isEntitySelectorModalOrDrawerOpen = false
             this.isSourcesModalOpen = false
             this.isEmbedModalOpen = false
             this.isDownloadModalOpen = false
@@ -2471,7 +2488,7 @@ export class Grapher
 
     @computed get isModalOpen(): boolean {
         return (
-            this.isSelectingData ||
+            this.isEntitySelectorModalOpen ||
             this.isSourcesModalOpen ||
             this.isEmbedModalOpen ||
             this.isDownloadModalOpen
@@ -2548,7 +2565,7 @@ export class Grapher
 
         const activeBounds = this.renderToStatic
             ? this.staticBounds
-            : this.tabBounds
+            : this.frameBounds
 
         const containerStyle = {
             width: activeBounds.width,
@@ -2592,21 +2609,52 @@ export class Grapher
 
     private renderReady(): JSX.Element | null {
         if (!this.hasBeenVisible) return null
+
         if (this.renderToStatic) {
             return <StaticCaptionedChart manager={this} />
         }
+
         return (
             <>
-                <CaptionedChart manager={this} />
-                <TooltipContainer
-                    containerWidth={this.renderWidth}
-                    containerHeight={this.renderHeight}
-                    tooltipProvider={this}
-                />
+                {/* captioned chart and entity selector */}
+                <div className="CaptionedChartAndSidePanel">
+                    <CaptionedChart manager={this} />
+                    {this.sidePanelBounds && (
+                        <SidePanel
+                            title={this.entitySelectorTitle}
+                            bounds={this.sidePanelBounds}
+                        >
+                            <EntitySelector manager={this} />
+                        </SidePanel>
+                    )}
+                </div>
+
+                {/* modals */}
                 {this.isSourcesModalOpen && <SourcesModal manager={this} />}
                 {this.isDownloadModalOpen && <DownloadModal manager={this} />}
                 {this.isEmbedModalOpen && <EmbedModal manager={this} />}
-                {this.isSelectingData && <EntitySelectorModal manager={this} />}
+                {this.isEntitySelectorModalOpen && (
+                    <EntitySelectorModal manager={this} />
+                )}
+
+                {/* entity selector in a slide-in drawer */}
+                <SlideInDrawer
+                    title={this.entitySelectorTitle}
+                    active={this.isEntitySelectorDrawerOpen}
+                    toggle={() => {
+                        this.isEntitySelectorModalOrDrawerOpen =
+                            !this.isEntitySelectorModalOrDrawerOpen
+                    }}
+                >
+                    <EntitySelector manager={this} />
+                </SlideInDrawer>
+
+                {/* tooltip */}
+                <TooltipContainer
+                    containerWidth={this.captionedChartBounds.width}
+                    containerHeight={this.captionedChartBounds.height}
+                    tooltipProvider={this}
+                />
             </>
         )
     }
@@ -2663,7 +2711,9 @@ export class Grapher
     }
 
     @action.bound private setBaseFontSize(): void {
-        this.baseFontSize = this.computeBaseFontSizeFromWidth(this.tabBounds)
+        this.baseFontSize = this.computeBaseFontSizeFromWidth(
+            this.captionedChartBounds
+        )
     }
 
     @computed get fontSize(): number {
@@ -2680,27 +2730,27 @@ export class Grapher
 
     @computed get isNarrow(): boolean {
         if (this.isStatic) return false
-        return this.renderWidth <= 400
+        return this.frameBounds.width <= 400
     }
 
     // SemiNarrow charts shorten their button labels to fit within the controls row
     @computed get isSemiNarrow(): boolean {
         if (this.isStatic) return false
-        return this.renderWidth <= 550
+        return this.frameBounds.width <= 550
     }
 
     // Small charts are rendered into 6 or 7 columns in a 12-column grid layout
     // (e.g. side-by-side charts or charts in the All Charts block)
     @computed get isSmall(): boolean {
         if (this.isStatic) return false
-        return this.renderWidth <= 740
+        return this.frameBounds.width <= 740
     }
 
     // Medium charts are rendered into 8 columns in a 12-column grid layout
     // (e.g. stand-alone charts in the main text of an article)
     @computed get isMedium(): boolean {
         if (this.isStatic) return false
-        return this.renderWidth <= 845
+        return this.frameBounds.width <= 845
     }
 
     @computed get isStaticAndSmall(): boolean {
@@ -2709,8 +2759,8 @@ export class Grapher
     }
 
     @computed get areStaticBoundsSmall(): boolean {
-        const { idealBounds, staticBounds } = this
-        const idealPixelCount = idealBounds.width * idealBounds.height
+        const { defaultBounds, staticBounds } = this
+        const idealPixelCount = defaultBounds.width * defaultBounds.height
         const staticPixelCount = staticBounds.width * staticBounds.height
         return staticPixelCount < 0.66 * idealPixelCount
     }
@@ -2842,6 +2892,14 @@ export class Grapher
         )
     }
 
+    @computed get showRelatedQuestion(): boolean {
+        return (
+            !!this.relatedQuestions &&
+            !!this.hasRelatedQuestion &&
+            !!this.isRelatedQuestionTargetDifferentFromCurrentPage
+        )
+    }
+
     @action.bound clearSelection(): void {
         this.selection.clearSelection()
         this.applyOriginalSelectionAsAuthored()
@@ -3071,16 +3129,40 @@ export class Grapher
             : timeColumn.formatValue(value)
     }
 
-    @computed get hasChangeEntityButton(): boolean {
-        return this.canChangeEntity
+    @computed get entitySelectorTitle(): string {
+        return this.canHighlightEntities
+            ? `Select ${this.entityTypePlural}`
+            : this.canChangeEntity
+            ? `Change ${a(this.entityType)}`
+            : `Add/remove ${this.entityTypePlural}`
+    }
+
+    @computed get canSelectMultipleEntities(): boolean {
+        if (this.numSelectableEntityNames < 2) return false
+        if (this.addCountryMode === EntitySelectionMode.MultipleEntities)
+            return true
+        if (
+            this.addCountryMode === EntitySelectionMode.SingleEntity &&
+            this.facetStrategy !== FacetStrategy.none
+        )
+            return true
+
+        return false
     }
 
-    @computed get showChangeEntityButton(): boolean {
-        return !this.hideEntityControls && this.hasChangeEntityButton
+    @computed get canChangeEntity(): boolean {
+        return (
+            this.hasChartTab &&
+            !this.isScatter &&
+            !this.canSelectMultipleEntities &&
+            this.addCountryMode === EntitySelectionMode.SingleEntity &&
+            this.numSelectableEntityNames > 1
+        )
     }
 
-    @computed get hasAddEntityButton(): boolean {
+    @computed get canAddEntities(): boolean {
         return (
+            this.hasChartTab &&
             this.canSelectMultipleEntities &&
             (this.isLineChart ||
                 this.isStackedArea ||
@@ -3089,43 +3171,77 @@ export class Grapher
         )
     }
 
-    @computed get showAddEntityButton(): boolean {
-        return !this.hideEntityControls && this.hasAddEntityButton
-    }
-
-    @computed get hasSelectEntitiesButton(): boolean {
+    @computed get canHighlightEntities(): boolean {
         return (
+            this.hasChartTab &&
             this.addCountryMode !== EntitySelectionMode.Disabled &&
             this.numSelectableEntityNames > 1 &&
-            !this.showAddEntityButton &&
-            !this.showChangeEntityButton
+            !this.canAddEntities &&
+            !this.canChangeEntity
         )
     }
 
-    @computed get showSelectEntitiesButton(): boolean {
-        return !this.hideEntityControls && this.hasSelectEntitiesButton
+    @computed get canChangeAddOrHighlightEntities(): boolean {
+        return (
+            this.canChangeEntity ||
+            this.canAddEntities ||
+            this.canHighlightEntities
+        )
     }
 
-    @computed get hasEntitySelectionToggle(): boolean {
+    @computed get showEntitySelectorAs(): GrapherWindowType {
+        const isLarge = this.frameBounds.width > 940
+
+        // show the panel in full screen mode if the grapher is large enough
+        if (this.isInFullScreenMode && isLarge) return GrapherWindowType.panel
+
+        // don't use the panel or drawer if the grapher is embedded
+        if (this.isInIFrame || this.isEmbeddedInAnOwidPage)
+            return GrapherWindowType.modal
+
+        if (isLarge) return GrapherWindowType.panel
+
+        // if there is no empty drawer element on the page, use the modal
+        const hasDrawer =
+            document.querySelector(`nav#${GRAPHER_DRAWER_ID}`) !== null
+        if (!hasDrawer) return GrapherWindowType.modal
+
+        return this.isSemiNarrow
+            ? GrapherWindowType.modal
+            : GrapherWindowType.drawer
+    }
+
+    @computed get isEntitySelectorPanelActive(): boolean {
         return (
-            this.hasChartTab &&
-            (this.hasChangeEntityButton ||
-                this.hasAddEntityButton ||
-                this.hasSelectEntitiesButton)
+            !this.hideEntityControls &&
+            this.canChangeAddOrHighlightEntities &&
+            this.isOnChartTab &&
+            this.showEntitySelectorAs === GrapherWindowType.panel
         )
     }
 
-    @computed get canSelectMultipleEntities(): boolean {
-        if (this.numSelectableEntityNames < 2) return false
-        if (this.addCountryMode === EntitySelectionMode.MultipleEntities)
-            return true
-        if (
-            this.addCountryMode === EntitySelectionMode.SingleEntity &&
-            this.facetStrategy !== FacetStrategy.none
+    @computed get showEntitySelectionToggle(): boolean {
+        return (
+            !this.hideEntityControls &&
+            this.canChangeAddOrHighlightEntities &&
+            this.isOnChartTab &&
+            (this.showEntitySelectorAs === GrapherWindowType.modal ||
+                this.showEntitySelectorAs === GrapherWindowType.drawer)
         )
-            return true
+    }
 
-        return false
+    @computed get isEntitySelectorModalOpen(): boolean {
+        return (
+            this.isEntitySelectorModalOrDrawerOpen &&
+            this.showEntitySelectorAs === GrapherWindowType.modal
+        )
+    }
+
+    @computed get isEntitySelectorDrawerOpen(): boolean {
+        return (
+            this.isEntitySelectorModalOrDrawerOpen &&
+            this.showEntitySelectorAs === GrapherWindowType.drawer
+        )
     }
 
     // This is just a helper method to return the correct table for providing entity choices. We want to
@@ -3137,23 +3253,10 @@ export class Grapher
         return this.selection.numAvailableEntityNames
     }
 
-    @computed get canChangeEntity(): boolean {
-        return (
-            !this.isScatter &&
-            !this.canSelectMultipleEntities &&
-            this.addCountryMode === EntitySelectionMode.SingleEntity &&
-            this.numSelectableEntityNames > 1
-        )
-    }
-
     @computed get entitiesAreCountryLike(): boolean {
         return !!this.entityType.match(/\bcountry\b/i)
     }
 
-    @computed get startSelectingWhenLineClicked(): boolean {
-        return this.showAddEntityButton && !this.isMobile
-    }
-
     @observable hideTitle = false
     @observable hideSubtitle = false
     @observable hideNote = false
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
index 03eafe45fa1..7ec891810e5 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -5,6 +5,8 @@ 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_IS_IN_IFRAME_CLASS = "IsInIframe"
 
 export const DEFAULT_GRAPHER_CONFIG_SCHEMA =
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index ff2c13bbf12..5314ba871c0 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -33,6 +33,7 @@ $zindex-modal: 30;
 $zindex-full-screen: 120;
 $zindex-controls-backdrop: 130;
 $zindex-controls-popup: 140;
+$zindex-controls-drawer: 150;
 
 // needed for .global-entity-control-container
 @mixin xxlg-down {
@@ -59,9 +60,9 @@ $zindex-controls-popup: 140;
     @import "../controls/ActionButtons.scss";
     @import "../controls/ShareMenu.scss";
     @import "../modal/Modal.scss";
-    @import "../modal/EntitySelectorModal.scss";
     @import "../modal/EmbedModal.scss";
     @import "../modal/DownloadModal.scss";
+    @import "../entitySelector/EntitySelector.scss";
     @import "../dataTable/DataTable.scss";
     @import "../modal/SourcesModal.scss";
     @import "../tooltip/Tooltip.scss";
@@ -73,6 +74,8 @@ $zindex-controls-popup: 140;
     @import "../modal/SourcesDescriptions.scss";
     @import "../tabs/Tabs.scss";
     @import "../tabs/ExpandableTabs.scss";
+    @import "../slideInDrawer/SlideInDrawer.scss";
+    @import "../sidePanel/SidePanel.scss";
 }
 
 // These rules are currently used elsewhere in the site. e.g. Explorers
@@ -153,6 +156,10 @@ $zindex-controls-popup: 140;
         z-index: $zindex-table;
     }
 
+    .CaptionedChartAndSidePanel {
+        display: flex;
+    }
+
     // customize css of the <CodeSnippet> component
     .wp-code-snippet {
         --code-snippet-border: #e7e7e7;
diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
index eb7617909e8..922d86196bf 100644
--- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
+++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
@@ -91,7 +91,7 @@ export interface DataTableManager {
     isMedium?: boolean
     isNarrow?: boolean
     selection?: SelectionArray | EntityName[]
-    hasEntitySelectionToggle?: boolean
+    canChangeAddOrHighlightEntities?: boolean
     hasMapTab?: boolean
     hasChartTab?: boolean
 }
@@ -140,7 +140,7 @@ export class DataTable extends React.Component<{
     @computed get showSelectionOnlyInDataTable(): boolean {
         const {
             showSelectionOnlyInDataTable,
-            hasEntitySelectionToggle,
+            canChangeAddOrHighlightEntities,
             hasChartTab,
             hasMapTab,
         } = this.manager
@@ -148,7 +148,7 @@ export class DataTable extends React.Component<{
 
         // filter the table if the "Show selection only" toggle is hidden
         if (
-            !hasEntitySelectionToggle &&
+            !canChangeAddOrHighlightEntities &&
             selectionArray.hasSelection &&
             hasChartTab &&
             // if we have a map tab, we want to show all entities
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
new file mode 100644
index 00000000000..a42b4bc150a
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -0,0 +1,175 @@
+@at-root {
+    .EntitySelector {
+        $light-stroke: #e7e7e7;
+        $active-fill: #dbe5f0;
+
+        text-align: left;
+        margin-bottom: 1.5em;
+
+        ul {
+            margin: 0;
+            padding: 0;
+            font-size: 0.8125em;
+        }
+
+        li {
+            list-style-type: none;
+        }
+
+        .searchBar {
+            display: flex;
+            position: sticky;
+            top: 0;
+            left: 0;
+            background-color: #fff;
+            z-index: 1;
+        }
+
+        .searchInput {
+            flex-grow: 1;
+
+            // search icon
+            $svg-margin-left: 8px;
+            $svg-size: 12px;
+
+            $placeholder: #a1a1a1;
+            $focus-outline: 2px solid $controls-color;
+
+            svg {
+                position: absolute;
+                top: 50%;
+                left: $svg-margin-left;
+                color: $light-text;
+                transform: translateY(-50%);
+                font-size: $svg-size;
+                font-weight: 900;
+            }
+
+            input[type="search"] {
+                width: 100%;
+                height: 32px;
+                font-size: 0.8125em;
+                border: 1px solid $light-stroke;
+                padding-left: $svg-margin-left + $svg-size + 4px;
+                padding-right: 1em;
+                border-radius: 4px;
+
+                // style placeholder text in search input
+                &::placeholder {
+                    color: $placeholder;
+                    opacity: 1; /* Firefox */
+                }
+                &:-ms-input-placeholder {
+                    color: $placeholder;
+                }
+                &::-ms-input-placeholder {
+                    color: $placeholder;
+                }
+
+                // style focus state
+                &:focus {
+                    outline: $focus-outline;
+                }
+                &:focus:not(:focus-visible) {
+                    outline: 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;
+                }
+
+                svg {
+                    color: $active-text;
+                    font-size: 12px;
+                    font-weight: 900;
+                }
+            }
+
+            .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;
+                }
+            }
+
+            .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;
+                }
+            }
+        }
+    }
+
+    .SidePanel .EntitySelector,
+    .SlideInDrawer .EntitySelector {
+        margin-left: 16px;
+        margin-right: 16px;
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
new file mode 100644
index 00000000000..3bcfcfdc515
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
@@ -0,0 +1,221 @@
+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 { Checkbox } from "@ourworldindata/components"
+import { FuzzySearch } from "../controls/FuzzySearch"
+import { faMagnifyingGlass, faCheck } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { SelectionArray } from "../selection/SelectionArray"
+
+export interface EntitySelectorManager {
+    selection: SelectionArray
+    canChangeEntity: boolean
+    entitiesAreCountryLike?: boolean
+}
+
+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>
+            )
+        }
+    }
+}
+
+@observer
+export class EntitySelector extends React.Component<{
+    manager: EntitySelectorManager
+    onDismiss?: () => void
+    autoFocus?: boolean
+}> {
+    @observable searchInput: string = ""
+    searchField!: HTMLInputElement
+
+    @computed private get manager(): EntitySelectorManager {
+        return this.props.manager
+    }
+
+    @computed private get selectionArray(): SelectionArray {
+        return this.manager.selection
+    }
+
+    @computed get sortedAvailableEntities(): string[] {
+        return sortBy(this.selectionArray.availableEntityNames)
+    }
+
+    @computed get isMulti(): boolean {
+        return !this.manager.canChangeEntity
+    }
+
+    @computed get fuzzy(): FuzzySearch<SearchableEntity> {
+        return new FuzzySearch(this.searchableEntities, "name")
+    }
+
+    @computed private get searchableEntities(): SearchableEntity[] {
+        return this.sortedAvailableEntities.map((name) => {
+            return { name } as SearchableEntity
+        })
+    }
+
+    @computed get searchResults(): SearchableEntity[] {
+        return this.searchInput
+            ? this.fuzzy.search(this.searchInput)
+            : this.searchableEntities
+    }
+
+    @action.bound onSelect(entityName: string): void {
+        if (this.isMulti) {
+            this.selectionArray.toggleSelection(entityName)
+        } else {
+            this.selectionArray.setSelectedEntities([entityName])
+            if (this.props.onDismiss) this.props.onDismiss()
+        }
+    }
+
+    componentDidMount(): void {
+        if (this.props.autoFocus && !isTouchDevice()) this.searchField.focus()
+    }
+
+    @action.bound onSearchKeyDown(e: React.KeyboardEvent<HTMLElement>): void {
+        if (e.key === "Enter" && this.searchResults.length > 0) {
+            this.onSelect(this.searchResults[0].name)
+            this.searchInput = ""
+        }
+    }
+
+    @action.bound onClear(): void {
+        this.selectionArray.clearSelection()
+    }
+
+    renderSelectedData(): React.ReactNode {
+        const selectedEntityNames = this.selectionArray.selectedEntityNames
+
+        // 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>
+                </div>
+            )
+        } else return undefined
+    }
+
+    render(): JSX.Element {
+        const { selectionArray, searchResults, searchInput } = this
+
+        return (
+            <div
+                className={classnames(
+                    "EntitySelector",
+                    this.isMulti
+                        ? "EntitySelectorMulti"
+                        : "EntitySelectorSingle"
+                )}
+            >
+                <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>
+
+                <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>
+            </div>
+        )
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx b/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
index f6ab10ba05d..185aff3255f 100644
--- a/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
+++ b/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { BodyDiv } from "../bodyDiv/BodyDiv"
+import { GRAPHER_DRAWER_ID } from "../core/GrapherConstants"
 
 @observer
 export class FullScreen extends React.Component<{
@@ -12,10 +13,13 @@ export class FullScreen extends React.Component<{
     content: React.RefObject<HTMLDivElement> = React.createRef()
 
     @action.bound onDocumentClick(e: React.MouseEvent): void {
+        const drawer = document.getElementById(GRAPHER_DRAWER_ID)
         if (
             this.content?.current &&
             // check if the click was outside of the modal
             !this.content.current.contains(e.target as Node) &&
+            // check if the click was outside of the drawer
+            (!drawer || !drawer.contains(e.target as Node)) &&
             // check that the target is still mounted to the document; we also get click events on nodes that have since been removed by React
             document.contains(e.target as Node)
         )
diff --git a/packages/@ourworldindata/grapher/src/header/HeaderManager.ts b/packages/@ourworldindata/grapher/src/header/HeaderManager.ts
index 7e191c919e3..1f1d7b17985 100644
--- a/packages/@ourworldindata/grapher/src/header/HeaderManager.ts
+++ b/packages/@ourworldindata/grapher/src/header/HeaderManager.ts
@@ -8,7 +8,7 @@ export interface HeaderManager {
     shouldLinkToOwid?: boolean
     logo?: string
     canonicalUrl?: string
-    tabBounds?: Bounds
+    captionedChartBounds?: Bounds
     detailsOrderedByReference?: string[]
     shouldIncludeDetailsInStaticExport?: boolean
     isExportingToSvgOrPng?: boolean
diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts
index 9f43fd43499..9b7df844f86 100644
--- a/packages/@ourworldindata/grapher/src/index.ts
+++ b/packages/@ourworldindata/grapher/src/index.ts
@@ -12,6 +12,7 @@ export {
     GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR,
     GRAPHER_PAGE_BODY_CLASS,
     GRAPHER_IS_IN_IFRAME_CLASS,
+    GRAPHER_DRAWER_ID,
     DEFAULT_GRAPHER_WIDTH,
     DEFAULT_GRAPHER_HEIGHT,
     STATIC_EXPORT_DETAIL_SPACING,
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index 8d2ab30ba18..1f8d2416adb 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -620,10 +620,6 @@ export class LineChart
     defaultRightPadding = 1
 
     @observable hoveredSeriesName?: SeriesName
-    @action.bound onLineLegendClick(): void {
-        if (this.manager.startSelectingWhenLineClicked)
-            this.manager.isSelectingData = true
-    }
 
     @observable private hoverTimer?: NodeJS.Timeout
 
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
index 3f0bbd80ae1..e4f9a9b55a2 100644
--- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -146,9 +146,7 @@ class Label extends React.Component<{
 }
 
 export interface LineLegendManager {
-    startSelectingWhenLineClicked?: boolean
     canAddData?: boolean
-    isSelectingData?: boolean
     entityType?: string
     labelSeries: LineLabelSeries[]
     maxLineLegendWidth?: number
@@ -438,14 +436,7 @@ export class LineLegend extends React.Component<{
 
     render(): JSX.Element {
         return (
-            <g
-                className="LineLabels"
-                style={{
-                    cursor: this.manager.startSelectingWhenLineClicked
-                        ? "pointer"
-                        : "default",
-                }}
-            >
+            <g className="LineLabels">
                 {this.renderBackground()}
                 {this.renderFocus()}
             </g>
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
index 397ba8dcfda..d60c5f99694 100644
--- a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
@@ -34,7 +34,8 @@ export interface DownloadModalManager {
     shouldIncludeDetailsInStaticExport?: boolean
     detailsOrderedByReference?: string[]
     isDownloadModalOpen?: boolean
-    tabBounds?: Bounds
+    frameBounds?: Bounds
+    captionedChartBounds?: Bounds
     isOnChartOrMapTab?: boolean
     framePaddingVertical?: number
     showAdminControls?: boolean
@@ -46,12 +47,16 @@ interface DownloadModalProps {
 
 @observer
 export class DownloadModal extends React.Component<DownloadModalProps> {
+    @computed private get frameBounds(): Bounds {
+        return this.manager.frameBounds ?? DEFAULT_BOUNDS
+    }
+
     @computed private get staticBounds(): Bounds {
         return this.manager.staticBounds ?? DEFAULT_BOUNDS
     }
 
-    @computed private get tabBounds(): Bounds {
-        return this.manager.tabBounds ?? DEFAULT_BOUNDS
+    @computed private get captionedChartBounds(): Bounds {
+        return this.manager.captionedChartBounds ?? DEFAULT_BOUNDS
     }
 
     @computed private get isExportingSquare(): boolean {
@@ -64,8 +69,8 @@ export class DownloadModal extends React.Component<DownloadModalProps> {
 
     @computed private get modalBounds(): Bounds {
         const maxWidth = 640
-        const padWidth = Math.max(16, (this.tabBounds.width - maxWidth) / 2)
-        return this.tabBounds.padHeight(16).padWidth(padWidth)
+        const padWidth = Math.max(16, (this.frameBounds.width - maxWidth) / 2)
+        return this.frameBounds.padHeight(16).padWidth(padWidth)
     }
 
     @computed private get targetBounds(): Bounds {
@@ -213,18 +218,32 @@ export class DownloadModal extends React.Component<DownloadModalProps> {
     }
 
     private renderReady(): JSX.Element {
-        const { manager, svgPreviewUrl, tabBounds, targetWidth, targetHeight } =
-            this
+        const {
+            manager,
+            svgPreviewUrl,
+            captionedChartBounds,
+            targetWidth,
+            targetHeight,
+        } = this
         const pngPreviewUrl = this.pngPreviewUrl || this.fallbackPngUrl
 
         let previewWidth: number
         let previewHeight: number
         const boundScalar = 0.17
-        if (tabBounds.width / tabBounds.height > targetWidth / targetHeight) {
-            previewHeight = Math.min(72, tabBounds.height * boundScalar)
+        if (
+            captionedChartBounds.width / captionedChartBounds.height >
+            targetWidth / targetHeight
+        ) {
+            previewHeight = Math.min(
+                72,
+                captionedChartBounds.height * boundScalar
+            )
             previewWidth = (targetWidth / targetHeight) * previewHeight
         } else {
-            previewWidth = Math.min(102, tabBounds.width * boundScalar)
+            previewWidth = Math.min(
+                102,
+                captionedChartBounds.width * boundScalar
+            )
             previewHeight = (targetHeight / targetWidth) * previewWidth
         }
 
diff --git a/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx b/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx
index 14e00415c04..cb5abc31378 100644
--- a/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx
@@ -10,7 +10,7 @@ export interface EmbedModalManager {
     embedUrl?: string
     embedDialogAdditionalElements?: React.ReactElement
     isEmbedModalOpen?: boolean
-    tabBounds?: Bounds
+    frameBounds?: Bounds
 }
 
 interface EmbedModalProps {
@@ -19,14 +19,14 @@ interface EmbedModalProps {
 
 @observer
 export class EmbedModal extends React.Component<EmbedModalProps> {
-    @computed private get tabBounds(): Bounds {
-        return this.manager.tabBounds ?? DEFAULT_BOUNDS
+    @computed private get frameBounds(): Bounds {
+        return this.manager.frameBounds ?? DEFAULT_BOUNDS
     }
 
     @computed private get modalBounds(): Bounds {
         const maxWidth = 940
-        const padWidth = Math.max(16, (this.tabBounds.width - maxWidth) / 2)
-        return this.tabBounds.padHeight(16).padWidth(padWidth)
+        const padWidth = Math.max(16, (this.frameBounds.width - maxWidth) / 2)
+        return this.frameBounds.padHeight(16).padWidth(padWidth)
     }
 
     @computed private get codeSnippet(): string {
diff --git a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.scss b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.scss
deleted file mode 100644
index bb272ecdc26..00000000000
--- a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.scss
+++ /dev/null
@@ -1,179 +0,0 @@
-.EntitySelector {
-    $light-stroke: #e7e7e7;
-    $active-fill: #dbe5f0;
-
-    text-align: left;
-    margin-bottom: $modal-padding;
-
-    ul {
-        margin: 0;
-        padding: 0;
-        font-size: 0.8125em;
-    }
-
-    li {
-        list-style-type: none;
-    }
-
-    .searchBar {
-        display: flex;
-        position: sticky;
-        top: 0;
-        left: 0;
-        background-color: #fff;
-        z-index: 1;
-    }
-
-    .searchInput {
-        flex-grow: 1;
-
-        // search icon
-        $svg-margin-left: 8px;
-        $svg-size: 12px;
-
-        $placeholder: #a1a1a1;
-        $focus-outline: 2px solid $controls-color;
-
-        svg {
-            position: absolute;
-            top: 50%;
-            left: $svg-margin-left;
-            color: $light-text;
-            transform: translateY(-50%);
-            font-size: $svg-size;
-            font-weight: 900;
-        }
-
-        input[type="search"] {
-            width: 100%;
-            height: 32px;
-            font-size: 0.8125em;
-            border: 1px solid $light-stroke;
-            padding-left: $svg-margin-left + $svg-size + 4px;
-            padding-right: 1em;
-            border-radius: 4px;
-
-            // style placeholder text in search input
-            &::placeholder {
-                color: $placeholder;
-                opacity: 1; /* Firefox */
-            }
-            &:-ms-input-placeholder {
-                color: $placeholder;
-            }
-            &::-ms-input-placeholder {
-                color: $placeholder;
-            }
-
-            // style focus state
-            &:focus {
-                outline: $focus-outline;
-            }
-            &:focus:not(:focus-visible) {
-                outline: 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;
-            }
-
-            svg {
-                color: $active-text;
-                font-size: 12px;
-                font-weight: 900;
-            }
-        }
-
-        .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;
-            }
-        }
-
-        .searchResults {
-            width: 100%;
-        }
-
-        @media (min-width: 800px) {
-            .searchResults ul {
-                column-count: 2;
-            }
-        }
-
-        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;
-            }
-        }
-    }
-}
-
-&.GrapherPortraitClass .EntitySelectorMulti {
-    .selectedData {
-        min-width: 50%;
-    }
-}
diff --git a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
index 4b86fc90879..43985eda99c 100644
--- a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
@@ -1,261 +1,54 @@
 import React from "react"
 import { observer } from "mobx-react"
-import { computed, action, observable } from "mobx"
-import classnames from "classnames"
-import a from "indefinite"
-import {
-    Bounds,
-    DEFAULT_BOUNDS,
-    isTouchDevice,
-    sortBy,
-    isCountryName,
-} from "@ourworldindata/utils"
-import { Checkbox } from "@ourworldindata/components"
-import { FuzzySearch } from "../controls/FuzzySearch"
-import { faMagnifyingGlass, faCheck } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { SelectionArray } from "../selection/SelectionArray"
+import { computed, action } from "mobx"
+import { Bounds, DEFAULT_BOUNDS } from "@ourworldindata/utils"
 import { Modal } from "./Modal"
-import { DEFAULT_GRAPHER_ENTITY_TYPE } from "../core/GrapherConstants"
-
-export interface EntitySelectorModalManager {
-    selection: SelectionArray
-    canChangeEntity: boolean
-    isSelectingData?: boolean
-    tabBounds?: Bounds
-    entityType?: string
-    entityTypePlural?: string
-    entitiesAreCountryLike?: boolean
-}
-
-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>
-            )
-        }
-    }
+import {
+    EntitySelector,
+    EntitySelectorManager,
+} from "../entitySelector/EntitySelector"
+
+export interface EntitySelectorModalManager extends EntitySelectorManager {
+    isEntitySelectorModalOrDrawerOpen?: boolean
+    frameBounds?: Bounds
+    entitySelectorTitle?: string
 }
 
 @observer
 export class EntitySelectorModal extends React.Component<{
     manager: EntitySelectorModalManager
 }> {
-    @observable searchInput: string = ""
-    searchField!: HTMLInputElement
-
     @computed private get manager(): EntitySelectorModalManager {
         return this.props.manager
     }
 
-    @computed private get tabBounds(): Bounds {
-        return this.manager.tabBounds ?? DEFAULT_BOUNDS
+    @computed private get frameBounds(): Bounds {
+        return this.manager.frameBounds ?? DEFAULT_BOUNDS
     }
 
     @computed private get modalBounds(): Bounds {
-        const maxWidth = this.isMulti ? 740 : 640
-        const padWidth = Math.max(16, (this.tabBounds.width - maxWidth) / 2)
-        return this.tabBounds.padHeight(16).padWidth(padWidth)
-    }
-
-    @computed private get selectionArray(): SelectionArray {
-        return this.manager.selection
-    }
-
-    @computed get sortedAvailableEntities(): string[] {
-        return sortBy(this.selectionArray.availableEntityNames)
-    }
-
-    @computed get isMulti(): boolean {
-        return !this.manager.canChangeEntity
-    }
-
-    @computed private get entityType(): string {
-        return this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE
-    }
-
-    @computed get fuzzy(): FuzzySearch<SearchableEntity> {
-        return new FuzzySearch(this.searchableEntities, "name")
-    }
-
-    @computed private get searchableEntities(): SearchableEntity[] {
-        return this.sortedAvailableEntities.map((name) => {
-            return { name } as SearchableEntity
-        })
-    }
-
-    @computed get searchResults(): SearchableEntity[] {
-        return this.searchInput
-            ? this.fuzzy.search(this.searchInput)
-            : this.searchableEntities
+        const maxWidth = this.manager.canChangeEntity ? 640 : 740
+        const padWidth = Math.max(16, (this.frameBounds.width - maxWidth) / 2)
+        return this.frameBounds.padHeight(16).padWidth(padWidth)
     }
 
     @action.bound onDismiss(): void {
-        this.manager.isSelectingData = false
-    }
-
-    @action.bound onSelect(entityName: string): void {
-        if (this.isMulti) {
-            this.selectionArray.toggleSelection(entityName)
-        } else {
-            this.selectionArray.setSelectedEntities([entityName])
-            this.onDismiss()
-        }
-    }
-
-    componentDidMount(): void {
-        if (!isTouchDevice()) this.searchField.focus()
-    }
-
-    @action.bound onSearchKeyDown(e: React.KeyboardEvent<HTMLElement>): void {
-        if (e.key === "Enter" && this.searchResults.length > 0) {
-            this.onSelect(this.searchResults[0].name)
-            this.searchInput = ""
-        }
-    }
-
-    @action.bound onClear(): void {
-        this.selectionArray.clearSelection()
-    }
-
-    renderSelectedData(): React.ReactNode {
-        const selectedEntityNames = this.selectionArray.selectedEntityNames
-
-        // 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>
-                </div>
-            )
-        } else return undefined
+        this.manager.isEntitySelectorModalOrDrawerOpen = false
     }
 
     render(): JSX.Element {
-        const { selectionArray, searchResults, searchInput, isMulti, manager } =
-            this
-
-        const title = isMulti
-            ? `Add/remove ${manager.entityTypePlural}`
-            : `Choose ${a(this.entityType)}`
-
         return (
             <Modal
-                title={title}
+                title={this.manager.entitySelectorTitle}
                 onDismiss={this.onDismiss}
                 bounds={this.modalBounds}
                 isHeightFixed={true}
             >
-                <div
-                    className={classnames(
-                        "EntitySelector",
-                        this.isMulti
-                            ? "EntitySelectorMulti"
-                            : "EntitySelectorSingle"
-                    )}
-                >
-                    <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>
-
-                    <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>
-                </div>
+                <EntitySelector
+                    manager={this.manager}
+                    onDismiss={this.onDismiss}
+                    autoFocus={true}
+                />
             </Modal>
         )
     }
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
index 50c5838ec50..2e2f6af51dc 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -48,7 +48,7 @@ export interface SourcesModalManager {
     columnsWithSourcesExtensive: CoreColumn[]
     showAdminControls?: boolean
     isSourcesModalOpen?: boolean
-    tabBounds?: Bounds
+    frameBounds?: Bounds
     isEmbeddedInADataPage?: boolean
     isNarrow?: boolean
     fontSize?: number
@@ -78,15 +78,15 @@ export class SourcesModal extends React.Component<
         return this.props.manager
     }
 
-    @computed private get tabBounds(): Bounds {
-        return this.manager.tabBounds ?? DEFAULT_BOUNDS
+    @computed private get frameBounds(): Bounds {
+        return this.manager.frameBounds ?? DEFAULT_BOUNDS
     }
 
     @computed private get modalBounds(): Bounds {
         const maxWidth = MAX_CONTENT_WIDTH + 220
         // using 15px instead of 16px to make sure the modal fully covers the OWID logo in the header
-        const padWidth = Math.max(15, (this.tabBounds.width - maxWidth) / 2)
-        return this.tabBounds.padHeight(15).padWidth(padWidth)
+        const padWidth = Math.max(15, (this.frameBounds.width - maxWidth) / 2)
+        return this.frameBounds.padHeight(15).padWidth(padWidth)
     }
 
     @computed private get showStickyModalHeader(): boolean {
diff --git a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.stories.tsx b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.stories.tsx
index 178664777f0..b5a47c8ecf4 100644
--- a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.stories.tsx
@@ -15,7 +15,7 @@ export const WithAddDataButtons = (): JSX.Element => {
                     manager={{
                         canChangeEntity: true,
                         canAddData: true,
-                        isSelectingData: false,
+                        isEntitySelectorModalOrDrawerOpen: false,
                         entityType: "Country",
                     }}
                 />
diff --git a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
index 45fda75e836..dc56ad46a26 100644
--- a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
+++ b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
@@ -8,7 +8,7 @@ import { faPlus, faRightLeft } from "@fortawesome/free-solid-svg-icons"
 export interface NoDataModalManager {
     canChangeEntity?: boolean
     canAddData?: boolean
-    isSelectingData?: boolean
+    isEntitySelectorModalOrDrawerOpen?: boolean
     entityType?: string
 }
 
@@ -19,7 +19,7 @@ export class NoDataModal extends React.Component<{
     manager: NoDataModalManager
 }> {
     @action.bound private onDataSelect(): void {
-        this.props.manager.isSelectingData = true
+        this.props.manager.isEntitySelectorModalOrDrawerOpen = true
     }
 
     @computed private get bounds(): Bounds {
diff --git a/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.scss b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.scss
new file mode 100644
index 00000000000..b5b195aee5c
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.scss
@@ -0,0 +1,15 @@
+.SidePanel {
+    flex-grow: 0;
+    flex-shrink: 0;
+    border-left: 1px solid $frame-color;
+    overflow-y: auto;
+
+    .title {
+        text-transform: uppercase;
+        color: $light-text;
+        font-size: 12px;
+        font-weight: 900;
+        letter-spacing: 1.2px;
+        margin: 16px;
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx
new file mode 100644
index 00000000000..1989b2b6d3c
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx
@@ -0,0 +1,32 @@
+import React from "react"
+import { observer } from "mobx-react"
+import { computed } from "mobx"
+import { Bounds } from "@ourworldindata/utils"
+
+@observer
+export class SidePanel extends React.Component<{
+    bounds: Bounds
+    title?: string
+    children: React.ReactNode
+}> {
+    @computed private get bounds(): Bounds {
+        return this.props.bounds
+    }
+
+    render(): JSX.Element {
+        return (
+            <div
+                className="SidePanel"
+                style={{
+                    width: this.bounds.width,
+                    height: this.bounds.height,
+                }}
+            >
+                {this.props.title && (
+                    <h3 className="title">{this.props.title}</h3>
+                )}
+                {this.props.children}
+            </div>
+        )
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
new file mode 100644
index 00000000000..601e24f45db
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
@@ -0,0 +1,137 @@
+@at-root {
+    nav#grapher-drawer {
+        $light-stroke: #e7e7e7;
+
+        $active-fill: #dbe5f0;
+        $hover-fill: #f2f2f2;
+
+        $medium: 400;
+        $bold: 700;
+        $lato: $sans-serif-font-stack;
+
+        $indent: 15px;
+
+        .grapher-drawer-contents {
+            position: fixed;
+            right: 0;
+            top: 0;
+            width: 300px;
+            height: 100vh;
+            z-index: $zindex-controls-drawer;
+            overflow-y: scroll;
+            background: white;
+
+            .grapher-drawer-header {
+                position: static;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                background: white;
+                padding: 9px $indent 3px $indent;
+                position: sticky;
+                top: 0;
+                z-index: 1;
+                margin-bottom: 16px;
+
+                .grapher-drawer-title {
+                    text-transform: uppercase;
+                    letter-spacing: 0.1em;
+                    color: $light-text;
+                    font: $bold 12px/16px $lato;
+                }
+
+                button.close {
+                    position: relative;
+                    border-radius: 50%;
+                    height: 32px;
+                    width: 32px;
+                    text-align: center;
+                    justify-content: center;
+                    svg {
+                        height: 14px;
+                        width: 14px;
+                    }
+                }
+            }
+
+            button {
+                display: flex;
+                align-items: center;
+                color: $light-text;
+                background: white;
+                border: 1px solid $light-stroke;
+                font: $medium 13px/16px $lato;
+                letter-spacing: 0.01em;
+                border-radius: 4px;
+                padding: 7px;
+                height: 40px;
+
+                &:hover {
+                    background: $hover-fill;
+                    cursor: pointer;
+
+                    &:not(.active) {
+                        color: $dark-text;
+                    }
+                }
+
+                &.active,
+                &:active {
+                    background: $active-fill;
+                    border: 1px solid $active-fill;
+                }
+
+                &.active {
+                    cursor: default;
+                    color: $active-text;
+                }
+            }
+        }
+
+        .grapher-drawer-backdrop {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.2);
+            z-index: $zindex-controls-backdrop;
+        }
+    }
+}
+
+@keyframes grapher-drawer-backdrop-enter {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes grapher-drawer-backdrop-exit {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes grapher-drawer-contents-enter {
+    0% {
+        transform: translate(301px, 0);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+@keyframes grapher-drawer-contents-exit {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(301px, 0);
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
new file mode 100644
index 00000000000..b2f8266cbc7
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
@@ -0,0 +1,114 @@
+import React from "react"
+import { createPortal } from "react-dom"
+import { computed, action, observable } from "mobx"
+import { observer } from "mobx-react"
+import { GRAPHER_DRAWER_ID } from "../core/GrapherConstants"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { faXmark } from "@fortawesome/free-solid-svg-icons"
+
+@observer
+export class SlideInDrawer extends React.Component<{
+    title: string
+    active: boolean
+    toggle: () => void
+    children: React.ReactNode
+}> {
+    @observable.ref visible: boolean = this.props.active // true while the drawer is active and during enter/exit transitions
+    contentRef: React.RefObject<HTMLDivElement> = React.createRef()
+
+    componentDidMount(): void {
+        document.addEventListener("keydown", this.onDocumentKeyDown)
+        document.addEventListener("click", this.onDocumentClick, {
+            capture: true,
+        })
+    }
+
+    componentWillUnmount(): void {
+        document.removeEventListener("keydown", this.onDocumentKeyDown)
+        document.removeEventListener("click", this.onDocumentClick, {
+            capture: true,
+        })
+    }
+
+    @action.bound onDocumentKeyDown(e: KeyboardEvent): void {
+        // dismiss menu on esc
+        if (this.active && e.key === "Escape") this.toggleVisibility()
+    }
+
+    @action.bound onDocumentClick(e: MouseEvent): void {
+        if (
+            this.active &&
+            this.contentRef?.current &&
+            !this.contentRef.current.contains(e.target as Node) &&
+            document.contains(e.target as Node)
+        )
+            this.toggleVisibility()
+    }
+
+    @action.bound toggleVisibility(e?: React.MouseEvent): void {
+        this.props.toggle()
+        if (this.active) this.visible = true
+        this.drawer?.classList.toggle("active", this.active)
+        e?.stopPropagation()
+    }
+
+    @action.bound onAnimationEnd(): void {
+        if (!this.active) this.visible = false
+    }
+
+    @computed private get active(): boolean {
+        return this.props.active
+    }
+
+    @computed private get drawer(): Element | null {
+        return document.querySelector(`nav#${GRAPHER_DRAWER_ID}`)
+    }
+
+    private animationFor(selector: string): { animation: string } {
+        const phase = this.active ? "enter" : "exit"
+        return { animation: `${selector}-${phase} 333ms` }
+    }
+
+    @computed get drawerContents(): JSX.Element {
+        return (
+            <div className="SlideInDrawer" ref={this.contentRef}>
+                <div
+                    className="grapher-drawer-backdrop"
+                    onClick={this.toggleVisibility}
+                    style={this.animationFor("grapher-drawer-backdrop")}
+                    onAnimationEnd={this.onAnimationEnd} // triggers unmount
+                ></div>
+                <div
+                    className="grapher-drawer-contents"
+                    style={{
+                        ...this.animationFor("grapher-drawer-contents"),
+                    }}
+                >
+                    <div className="grapher-drawer-header">
+                        <div className="grapher-drawer-title">
+                            {this.props.title}
+                        </div>
+                        <button
+                            className="clickable close"
+                            onClick={this.toggleVisibility}
+                        >
+                            <FontAwesomeIcon icon={faXmark} />
+                        </button>
+                    </div>
+
+                    {this.props.children}
+                </div>
+            </div>
+        )
+    }
+
+    render(): JSX.Element | null {
+        const { visible, drawer, active } = this
+
+        if (drawer && (active || visible)) {
+            return createPortal(this.drawerContents, drawer)
+        }
+
+        return null
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index c6486e08d46..5ba5133ada1 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -304,10 +304,6 @@ export class StackedAreaChart
     }
 
     @observable hoverSeriesName?: SeriesName
-    @action.bound onLineLegendClick(): void {
-        if (this.manager.startSelectingWhenLineClicked)
-            this.manager.isSelectingData = true
-    }
 
     @computed protected get paddingForLegend(): number {
         const { legendDimensions } = this
diff --git a/packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts b/packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts
index 4f6d399064e..04796ab5116 100644
--- a/packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts
+++ b/packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts
@@ -686,3 +686,9 @@ export interface ChartRedirect {
     slug: string
     chartId: number
 }
+
+export enum GrapherWindowType {
+    panel = "panel",
+    modal = "modal",
+    drawer = "drawer",
+}
diff --git a/packages/@ourworldindata/types/src/index.ts b/packages/@ourworldindata/types/src/index.ts
index 054dddccf06..2c49fcab61b 100644
--- a/packages/@ourworldindata/types/src/index.ts
+++ b/packages/@ourworldindata/types/src/index.ts
@@ -110,6 +110,7 @@ export {
     GrapherStaticFormat,
     type ChartRedirect,
     type DetailsMarker,
+    GrapherWindowType,
 } from "./grapherTypes/GrapherTypes.js"
 
 export {
diff --git a/site/DataPageV2.tsx b/site/DataPageV2.tsx
index c32e8050656..e85f6abc531 100644
--- a/site/DataPageV2.tsx
+++ b/site/DataPageV2.tsx
@@ -2,6 +2,7 @@ import {
     getVariableDataRoute,
     getVariableMetadataRoute,
     GrapherProgrammaticInterface,
+    GRAPHER_DRAWER_ID,
 } from "@ourworldindata/grapher"
 import {
     uniq,
@@ -142,6 +143,7 @@ export const DataPageV2 = (props: {
                 <SiteHeader baseUrl={baseUrl} />
                 <main>
                     <>
+                        <nav id={GRAPHER_DRAWER_ID}></nav>
                         <script
                             dangerouslySetInnerHTML={{
                                 __html: `window._OWID_DATAPAGEV2_PROPS = ${JSON.stringify(
diff --git a/site/GrapherPage.tsx b/site/GrapherPage.tsx
index 2aac7e0d1de..2ee74b20fe9 100644
--- a/site/GrapherPage.tsx
+++ b/site/GrapherPage.tsx
@@ -3,6 +3,7 @@ import {
     getVariableMetadataRoute,
     GRAPHER_PAGE_BODY_CLASS,
     LoadingIndicator,
+    GRAPHER_DRAWER_ID,
 } from "@ourworldindata/grapher"
 import {
     flatten,
@@ -119,6 +120,7 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
             <body className={GRAPHER_PAGE_BODY_CLASS}>
                 <SiteHeader baseUrl={baseUrl} />
                 <main>
+                    <nav id={GRAPHER_DRAWER_ID}></nav>
                     <figure data-grapher-src={`/grapher/${grapher.slug}`}>
                         <LoadingIndicator />
                     </figure>