✨ (map) refine globe implementation

packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx

@@ -25,11 +25,7 @@ import { MapChartManager } from "../mapCharts/MapChartConstants"
 import { ChartManager } from "../chart/ChartManager"
 import { LoadingIndicator } from "../loadingIndicator/LoadingIndicator"
 import { FacetChart } from "../facetChart/FacetChart"
-import {
-    faEarthAmericas,
-    faExternalLinkAlt,
-    faMap,
-} from "@fortawesome/free-solid-svg-icons"
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { FooterManager } from "../footer/FooterManager"
 import { HeaderManager } from "../header/HeaderManager"
@@ -337,15 +333,6 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
             height: chartHeight,
         }
 
-        const globeSwitcher: React.CSSProperties = {
-            height: "40px",
-            width: "fit-content",
-            margin: "10px",
-            display: "flex",
-            position: "absolute",
-            bottom: "0",
-        }
-
         return (
             <div style={containerStyle}>
                 <svg

packages/@ourworldindata/grapher/src/chart/ChartManager.ts

@@ -34,7 +34,6 @@ export interface ChartManager {
     table: OwidTable
     transformedTable?: OwidTable
 
-    isGlobe?: boolean
     isExportingToSvgOrPng?: boolean
     isRelativeMode?: boolean
     comparisonLines?: ComparisonLineConfig[]

packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx

@@ -90,8 +90,9 @@ export class ContentSwitchers extends React.Component<{
         }
     }
 
-    render(): React.ReactElement {
+    render(): React.ReactElement | null {
         const { manager } = this
+        if (!this.showTabs) return null
         return (
             <ul
                 className={classnames({

packages/@ourworldindata/grapher/src/controls/Dropdown.scss

@@ -22,6 +22,10 @@
     display: grid;
     grid-template-columns: minmax(0, 1fr);
 
+    .placeholder {
+        white-space: nowrap;
+    }
+
     .control {
         min-height: auto;
         font: $medium 13px/16px $lato;

packages/@ourworldindata/grapher/src/controls/Dropdown.tsx

@@ -28,6 +28,7 @@ export function Dropdown(props: Props): React.ReactElement {
                     })
                 },
                 menu: () => "menu",
+                placeholder: () => "placeholder",
             }}
             {...props}
         />

packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss

@@ -13,7 +13,7 @@ $lato: $sans-serif-font-stack;
     .settings-menu-contents {
         // on/off switch with label written to the right
         .labeled-switch {
-            // keep in sync with TableFilterToggle.tsx
+            // keep in sync with TableFilterToggle.tsx and GlobeToggle.tsx
             // where the width of a labeled switch is calculated
 
             display: flex;

packages/@ourworldindata/grapher/src/controls/MapProjectionMenu.tsx

@@ -6,6 +6,7 @@ import { MapProjectionName } from "@ourworldindata/types"
 import { MapProjectionLabels } from "../mapCharts/MapProjections"
 import { Dropdown } from "./Dropdown"
 import { DEFAULT_BOUNDS } from "@ourworldindata/utils"
+import { GlobeController } from "../mapCharts/GlobeController"
 
 export { AbsRelToggle } from "./settings/AbsRelToggle"
 export { FacetStrategySelector } from "./settings/FacetStrategySelector"
@@ -18,6 +19,8 @@ export interface MapProjectionMenuManager {
     mapConfig?: MapConfig
     isOnMapTab?: boolean
     hideMapProjectionMenu?: boolean
+    globeController?: GlobeController
+    isGlobe?: boolean
 }
 
 interface MapProjectionMenuItem {
@@ -30,54 +33,61 @@ export class MapProjectionMenu extends React.Component<{
     manager: MapProjectionMenuManager
     maxWidth?: number
 }> {
-    static shouldShow(manager: MapProjectionMenuManager): boolean {
-        const menu = new MapProjectionMenu({ manager })
-        return menu.showMenu
-    }
-
-    @computed get showMenu(): boolean {
-        const { hideMapProjectionMenu, isOnMapTab, mapConfig } =
-                this.props.manager,
-            { projection } = mapConfig ?? {}
-        return !hideMapProjectionMenu && !!(isOnMapTab && projection)
-    }
-
     @computed private get maxWidth(): number {
         return this.props.maxWidth ?? DEFAULT_BOUNDS.width
     }
 
     @action.bound onChange(selected: unknown): void {
         const { mapConfig } = this.props.manager
-        if (selected && mapConfig)
-            mapConfig.projection = (selected as MapProjectionMenuItem).value
+        if (selected && mapConfig) {
+            const projection = (selected as MapProjectionMenuItem).value
+            mapConfig.projection = projection
+
+            void this.props.manager.globeController?.rotateToProjection(
+                projection
+            )
+        }
     }
 
     @computed get options(): MapProjectionMenuItem[] {
-        return Object.values(MapProjectionName).map((projectName) => {
-            return {
-                value: projectName,
-                label: MapProjectionLabels[projectName],
-            }
-        })
+        return Object.values(MapProjectionName)
+            .filter((projectionName) =>
+                this.props.manager.isGlobe
+                    ? projectionName !== MapProjectionName.World
+                    : true
+            )
+            .map((projectionName) => {
+                return {
+                    value: projectionName,
+                    label: MapProjectionLabels[projectionName],
+                }
+            })
     }
 
     @computed get value(): MapProjectionMenuItem | null {
         const { projection } = this.props.manager.mapConfig ?? {}
-        return this.options.find((opt) => projection === opt.value) ?? null
+        const option =
+            this.options.find((opt) => projection === opt.value) ?? null
+        if (this.props.manager.isGlobe) return option
+        const world =
+            this.options.find((opt) => opt.value === MapProjectionName.World) ??
+            null
+        return option ?? world
     }
 
     render(): React.ReactElement | null {
-        return this.showMenu ? (
+        return (
             <div
                 className="map-projection-menu"
                 style={{ maxWidth: this.maxWidth }}
             >
                 <Dropdown
+                    placeholder="Select continent..."
                     options={this.options}
                     onChange={this.onChange}
                     value={this.value}
                 />
             </div>
-        ) : null
+        )
     }
 }