✨ (entity selector) render drawer within the Grapher frame

owid · Apr 16, 2024 · 58508ee · 58508ee
1 parent 6efe51d
commit 58508ee
Show file tree

Hide file tree

Showing 11 changed files with 317 additions and 358 deletions.
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -9,7 +9,6 @@ import { SelectionArray } from "../selection/SelectionArray"
 import { ChartDimension } from "../chart/ChartDimension"
 import { makeSelectionArray } from "../chart/ChartUtils.js"
 import { AxisConfig } from "../axis/AxisConfig"
-import { CloseButton } from "../closeButton/CloseButton.js"
 
 import { AxisScaleToggle } from "./settings/AxisScaleToggle"
 import { AbsRelToggle, AbsRelToggleManager } from "./settings/AbsRelToggle"

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -124,7 +124,6 @@ import {
     STATIC_EXPORT_DETAIL_SPACING,
     GRAPHER_LIGHT_TEXT,
     GRAPHER_LOADED_EVENT_NAME,
-    GRAPHER_DRAWER_ID,
     isContinentsVariableId,
     isPopulationVariableId,
 } from "../core/GrapherConstants"
@@ -3163,21 +3162,14 @@ export class Grapher
     }
 
     @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
+        if (
+            this.frameBounds.width > 940 &&
+            // don't use the panel if the grapher is embedded
+            ((!this.isInIFrame && !this.isEmbeddedInAnOwidPage) ||
+                // unless we're in full-screen mode
+                this.isInFullScreenMode)
+        )
+            return GrapherWindowType.panel
 
         return this.isSemiNarrow
             ? GrapherWindowType.modal

diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -4,7 +4,6 @@ export const GRAPHER_EMBEDDED_FIGURE_ATTR = "data-grapher-src"
 export const GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR = "data-grapher-config"
 
 export const GRAPHER_PAGE_BODY_CLASS = "StandaloneGrapherOrExplorerPage"
-export const GRAPHER_DRAWER_ID = "grapher-drawer"
 export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe"
 export const GRAPHER_TIMELINE_CLASS = "timeline-component"
 export const GRAPHER_SIDE_PANEL_CLASS = "side-panel"

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -78,6 +78,10 @@ $zindex-controls-drawer: 150;
     @import "../tabs/ExpandableTabs.scss";
     @import "../slideInDrawer/SlideInDrawer.scss";
     @import "../sidePanel/SidePanel.scss";
+    @import "../closeButton/CloseButton.scss";
+    @import "../controls/RadioButton.scss";
+    @import "../controls/Dropdown.scss";
+    @import "../core/OverlayHeader.scss";
 }
 
 // These rules are currently used elsewhere in the site. e.g. Explorers
@@ -87,10 +91,6 @@ $zindex-controls-drawer: 150;
 @import "../sparkBars/SparkBars.scss";
 @import "../fullScreen/FullScreen.scss";
 @import "../../../components/src/Checkbox.scss";
-@import "../closeButton/CloseButton.scss";
-@import "../controls/RadioButton.scss";
-@import "../controls/Dropdown.scss";
-@import "../core/OverlayHeader.scss";
 
 .grapher_dark {
     color: $dark-text;
@@ -124,6 +124,9 @@ $zindex-controls-drawer: 150;
     border: 1px solid $frame-color;
     z-index: $zindex-chart;
 
+    // important for the slide-in drawer
+    overflow-x: clip;
+
     * {
         box-sizing: border-box;
     }