✨ (entity selector) render drawer within the Grapher frame

owid · May 1, 2024 · b02c8f4 · b02c8f4
1 parent 7cd848d
commit b02c8f4
Show file tree

Hide file tree

Showing 10 changed files with 320 additions and 357 deletions.
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
@@ -86,10 +90,6 @@ $zindex-controls-drawer: 150;
 @import "../controls/globalEntitySelector/GlobalEntitySelector.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;
@@ -123,6 +123,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;
     }