🔨 (grapher) refactor modals and entity selector

owid · Apr 15, 2024 · a8b4116 · a8b4116
1 parent 28a40e3
commit a8b4116
Show file tree

Hide file tree

Showing 21 changed files with 404 additions and 421 deletions.
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -9,7 +9,6 @@ import {
     reaction,
 } from "mobx"
 import { bind } from "decko"
-import a from "indefinite"
 import {
     uniqWith,
     isEqual,
@@ -2606,10 +2605,7 @@ export class Grapher
                 <div className="CaptionedChartAndSidePanel">
                     <CaptionedChart manager={this} />
                     {this.sidePanelBounds && (
-                        <SidePanel
-                            title={this.entitySelectorTitle}
-                            bounds={this.sidePanelBounds}
-                        >
+                        <SidePanel bounds={this.sidePanelBounds}>
                             <EntitySelector manager={this} />
                         </SidePanel>
                     )}
@@ -2625,7 +2621,6 @@ export class Grapher
 
                 {/* entity selector in a slide-in drawer */}
                 <SlideInDrawer
-                    title={this.entitySelectorTitle}
                     active={this.isEntitySelectorDrawerOpen}
                     toggle={() => {
                         this.isEntitySelectorModalOrDrawerOpen =
@@ -3115,14 +3110,6 @@ export class Grapher
             : timeColumn.formatValue(value)
     }
 
-    @computed get entitySelectorTitle(): string {
-        return this.canHighlightEntities
-            ? `Select ${this.entityTypePlural}`
-            : this.canChangeEntity
-              ? `Choose ${a(this.entityType)}`
-              : `Add/remove ${this.entityTypePlural}`
-    }
-
     @computed get canSelectMultipleEntities(): boolean {
         if (this.numSelectableEntityNames < 2) return false
         if (this.addCountryMode === EntitySelectionMode.MultipleEntities)

diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -6,9 +6,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 GRAPHER_SCROLLABLE_CONTAINER_CLASS = "scrollable-container"
 export const GRAPHER_TIMELINE_CLASS = "timeline-component"
-export const GRAPHER_ENTITY_SELECTOR_CLASS = "entity-selector"
+export const GRAPHER_SIDE_PANEL_CLASS = "side-panel"
 
 export const DEFAULT_GRAPHER_CONFIG_SCHEMA =
     "https://files.ourworldindata.org/schemas/grapher-schema.004.json"

diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss b/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss
@@ -0,0 +1,12 @@
+.overlay-header {
+    --padding: var(--modal-padding, 16px);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--padding) var(--padding) 16px;
+
+    button {
+        margin-left: 8px;
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx
@@ -0,0 +1,17 @@
+import React from "react"
+import { CloseButton } from "../closeButton/CloseButton.js"
+
+export function OverlayHeader({
+    title,
+    onDismiss,
+}: {
+    title: string
+    onDismiss?: () => void
+}): JSX.Element {
+    return (
+        <div className="overlay-header">
+            <h2 className="grapher_h5-black-caps grapher_light">{title}</h2>
+            {onDismiss && <CloseButton onClick={onDismiss} />}
+        </div>
+    )
+}
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -90,6 +90,7 @@ $zindex-controls-drawer: 150;
 @import "../closeButton/CloseButton.scss";
 @import "../controls/RadioButton.scss";
 @import "../controls/Dropdown.scss";
+@import "../core/OverlayHeader.scss";
 
 .grapher_dark {
     color: $dark-text;