@buildcanada/charts 0.1.0

package/src/grapher/chart/ChartAreaContent.tsx

@@ -0,0 +1,172 @@
+import React from "react"
+import { observer } from "mobx-react"
+import { computed, makeObservable } from "mobx"
+import {
+    Bounds,
+    GRAPHER_MAP_TYPE,
+    GrapherChartOrMapType,
+    makeIdForHumanConsumption,
+} from "../../utils/index.js"
+import { DataTable } from "../dataTable/DataTable"
+import { CaptionedChartManager } from "../captionedChart/CaptionedChart"
+import { LoadingIndicator } from "../../components/index.js"
+import { FacetChart } from "../facet/FacetChart"
+import { getChartSvgProps, NoDataPattern } from "./ChartUtils"
+import { ChartComponent, makeChartState } from "./ChartTypeMap"
+import { GRAPHER_CHART_AREA_CLASS } from "../core/GrapherConstants"
+import { ChartState } from "./ChartInterface"
+import { FacetMap } from "../facet/FacetMap.js"
+
+interface ChartAreaContentProps {
+    manager: CaptionedChartManager
+    bounds: Bounds
+    padWidth?: number
+}
+
+@observer
+export class ChartAreaContent extends React.Component<ChartAreaContentProps> {
+    constructor(props: ChartAreaContentProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed private get manager(): CaptionedChartManager {
+        return this.props.manager
+    }
+
+    @computed private get bounds(): Bounds {
+        return this.props.bounds.padWidth(this.props.padWidth ?? 0)
+    }
+
+    @computed private get activeChartOrMapType():
+        | GrapherChartOrMapType
+        | undefined {
+        const { manager } = this
+        if (manager.isOnTableTab) return undefined
+        if (manager.isOnMapTab) return GRAPHER_MAP_TYPE
+        if (manager.isOnChartTab) return manager.activeChartType
+        return undefined
+    }
+
+    private renderNoDataPattern(): React.ReactElement {
+        return (
+            <defs>
+                <NoDataPattern />
+            </defs>
+        )
+    }
+
+    @computed private get chartState(): ChartState | undefined {
+        if (!this.activeChartOrMapType) return undefined
+        return makeChartState(this.activeChartOrMapType, this.manager)
+    }
+
+    private renderLoadingIndicatorIntoSvg(): React.ReactElement {
+        return (
+            <foreignObject {...this.bounds.toProps()}>
+                <LoadingIndicator title={this.manager.whatAreWeWaitingFor} />
+            </foreignObject>
+        )
+    }
+
+    private renderReadyChartOrMap(): React.ReactElement | null {
+        const { bounds, manager, activeChartOrMapType, chartState } = this
+
+        if (!activeChartOrMapType) return null
+
+        if (manager.isFaceted)
+            return activeChartOrMapType === GRAPHER_MAP_TYPE ? (
+                <FacetMap bounds={bounds} manager={manager} />
+            ) : (
+                <FacetChart
+                    bounds={bounds}
+                    manager={manager}
+                    chartTypeName={activeChartOrMapType}
+                />
+            )
+
+        if (!chartState) return null
+
+        return (
+            <ChartComponent
+                manager={manager}
+                chartType={activeChartOrMapType}
+                chartState={chartState}
+                variant={manager.variant}
+                bounds={bounds}
+            />
+        )
+    }
+
+    private renderChartOrMap(): React.ReactElement {
+        const { width, height } = this.props.bounds
+
+        const containerStyle: React.CSSProperties = {
+            position: "relative",
+            clear: "both",
+            height,
+        }
+
+        return (
+            <div style={containerStyle}>
+                <svg
+                    {...getChartSvgProps(this.manager)}
+                    width={width}
+                    height={height}
+                    viewBox={`0 0 ${width} ${height}`}
+                >
+                    {this.renderNoDataPattern()}
+                    {this.manager.isReady
+                        ? this.renderReadyChartOrMap()
+                        : this.renderLoadingIndicatorIntoSvg()}
+                </svg>
+            </div>
+        )
+    }
+
+    private renderDataTable(): React.ReactElement {
+        const { bounds } = this
+        const containerStyle: React.CSSProperties = {
+            position: "relative",
+            ...bounds.toCSS(),
+        }
+        return (
+            <div className="DataTableContainer" style={containerStyle}>
+                {this.manager.isReady ? (
+                    <DataTable bounds={bounds} manager={this.manager} />
+                ) : (
+                    <LoadingIndicator
+                        title={this.manager.whatAreWeWaitingFor}
+                    />
+                )}
+            </div>
+        )
+    }
+
+    renderStatic(): React.ReactElement | null {
+        // We cannot render a table to svg, but would rather display nothing at all to avoid issues.
+        // See https://github.com/owid/owid-grapher/issues/3283
+        if (this.manager.isOnTableTab) return null
+
+        return (
+            <g
+                id={makeIdForHumanConsumption(GRAPHER_CHART_AREA_CLASS)}
+                style={{ pointerEvents: "none" }}
+            >
+                {this.renderReadyChartOrMap()}
+            </g>
+        )
+    }
+
+    renderInteractive(): React.ReactElement | null {
+        return this.manager.isOnTableTab
+            ? this.renderDataTable()
+            : this.renderChartOrMap()
+    }
+
+    override render(): React.ReactElement | null {
+        return this.manager.isStatic
+            ? this.renderStatic()
+            : this.renderInteractive()
+    }
+}

package/src/grapher/chart/ChartDimension.ts

@@ -0,0 +1,121 @@
+// Todo: remove this.
+// Any display changes really can be computed columns. And then charts just need xColumnSlug, sizeColumnSlug, yColumnSlug (or yColumnSlugs) et cetera
+
+import { observable, computed, makeObservable } from "mobx"
+import {
+    trimObject,
+    ColumnSlug,
+    DimensionProperty,
+    OwidVariableId,
+    Persistable,
+    deleteRuntimeAndUnchangedProps,
+    updatePersistables,
+    OwidVariableDisplayConfig,
+    OwidChartDimensionInterface,
+    Time,
+    OwidChartDimensionInterfaceWithMandatorySlug,
+} from "../../utils/index.js"
+import { OwidTable, CoreColumn } from "../../core-table/index.js"
+
+// A chart "dimension" represents a binding between a chart
+// and a particular variable that it requests as data
+class ChartDimensionDefaults implements OwidChartDimensionInterface {
+    property!: DimensionProperty
+    variableId!: OwidVariableId
+
+    // check on: malaria-deaths-comparisons and computing-efficiency
+
+    display = new OwidVariableDisplayConfig() // todo: make persistable
+
+    // XXX move this somewhere else, it's only used for scatter x override and Marimekko override
+    targetYear: Time | undefined = undefined
+
+    constructor() {
+        makeObservable(this, {
+            property: observable,
+            variableId: observable,
+            display: observable,
+            targetYear: observable,
+        })
+    }
+}
+
+// todo: remove when we remove dimensions
+export interface LegacyDimensionsManager {
+    table: OwidTable
+}
+
+export function getDimensionColumnSlug(
+    variableId: OwidVariableId,
+    targetYear: Time | undefined
+): ColumnSlug {
+    if (targetYear) return `${variableId}-${targetYear}`
+    return variableId.toString()
+}
+
+export class ChartDimension
+    extends ChartDimensionDefaults
+    implements Persistable, OwidChartDimensionInterfaceWithMandatorySlug
+{
+    private manager: LegacyDimensionsManager
+
+    constructor(
+        obj: OwidChartDimensionInterface,
+        manager: LegacyDimensionsManager
+    ) {
+        super()
+
+        makeObservable(this, {
+            _slug: observable,
+        })
+        this.manager = manager
+        if (obj) this.updateFromObject(obj)
+    }
+
+    @computed private get table(): OwidTable {
+        return this.manager.table
+    }
+
+    updateFromObject(obj: OwidChartDimensionInterface): void {
+        if (obj.display) updatePersistables(this, { display: obj.display })
+
+        this.targetYear = obj.targetYear
+        this.variableId = obj.variableId
+        this.property = obj.property
+        this.slug = obj.slug
+    }
+
+    toObject(): OwidChartDimensionInterface {
+        return trimObject(
+            deleteRuntimeAndUnchangedProps(
+                {
+                    property: this.property,
+                    variableId: this.variableId,
+                    display: this.display,
+                    targetYear: this.targetYear,
+                },
+                new ChartDimensionDefaults()
+            )
+        )
+    }
+
+    // Do not persist yet, until we migrate off VariableIds
+    _slug: ColumnSlug | undefined = undefined
+
+    @computed get slug(): ColumnSlug {
+        if (this._slug) return this._slug
+        return getDimensionColumnSlug(this.variableId, this.targetYear)
+    }
+
+    set slug(value: ColumnSlug | undefined) {
+        this._slug = value
+    }
+
+    @computed get column(): CoreColumn {
+        return this.table.get(this.columnSlug)
+    }
+
+    @computed get columnSlug(): string {
+        return this.slug ?? this.variableId.toString()
+    }
+}

package/src/grapher/chart/ChartInterface.ts

@@ -0,0 +1,83 @@
+import { OwidTable } from "../../core-table/index.js"
+import {
+    FacetStrategy,
+    SeriesName,
+    SeriesStrategy,
+    Color,
+    ChartErrorInfo,
+} from "../../types/index.js"
+import { ColorScale } from "../color/ColorScale"
+import { HorizontalAxis, VerticalAxis } from "../axis/Axis"
+import { HorizontalColorLegendManager } from "../legend/HorizontalColorLegends"
+import { SelectionArray } from "../selection/SelectionArray"
+import { FocusArray } from "../focus/FocusArray"
+
+// The idea of this interface is to try and start reusing more code across our Chart classes and make it easier
+// for a dev to work on a chart type they haven't touched before if they've worked with another that implements
+// this interface.
+
+export interface ChartSeries {
+    seriesName: SeriesName
+    color: Color
+}
+
+export type ChartTableTransformer = (inputTable: OwidTable) => OwidTable
+
+/** Interface implemented by all chart state classes */
+export interface ChartState {
+    /** Fail message(s) to show to the user if something went wrong */
+    errorInfo: ChartErrorInfo
+
+    /** OwidTable coming into the chart */
+    inputTable: OwidTable
+    /** OwidTable after the chart has transformed the input table */
+    transformedTable: OwidTable
+
+    /** Array of selected entities for the chart */
+    selectionArray?: SelectionArray
+    /** Array of series that should be highlighted or focused */
+    focusArray?: FocusArray
+
+    /** Marks that the chart will render. Not placed yet */
+    series: readonly ChartSeries[]
+    /** Strategy for handling multiple data series in the chart */
+    seriesStrategy?: SeriesStrategy
+
+    /** Function to transform the input table into the format needed by the chart */
+    transformTable: ChartTableTransformer
+    /** Optional function to transform the table specifically for the rendered data table */
+    transformTableForDisplay?: ChartTableTransformer
+    /** Optional function to transform the table specifically for the entity selector */
+    transformTableForSelection?: ChartTableTransformer
+
+    /** Color scale used to assign colors to chart elements */
+    colorScale?: ColorScale
+
+    /**
+     * Available facet strategies that are supported by this chart type in its
+     * current configuration, if any. Does not necessarily contain
+     * FacetStrategy.None - there are situations where an unfaceted chart
+     * doesn't make sense.
+     */
+    availableFacetStrategies?: FacetStrategy[]
+}
+
+/** Interface implemented by all chart component classes */
+export interface ChartInterface {
+    chartState: ChartState
+
+    yAxis?: HorizontalAxis | VerticalAxis
+    xAxis?: HorizontalAxis | VerticalAxis
+
+    /**
+     * The legend that has been hidden from the chart plot (using `manager.hideLegend`).
+     * Used to create a global legend for faceted charts.
+     */
+    externalLegend?: HorizontalColorLegendManager
+
+    /**
+     * Opt-out of assigned colors and use a value-based color scheme instead.
+     * Only relevant for StackedBar charts.
+     */
+    shouldUseValueBasedColorScheme?: boolean
+}

package/src/grapher/chart/ChartManager.ts

@@ -0,0 +1,113 @@
+import * as React from "react"
+import {
+    EntitySelectionMode,
+    FacetStrategy,
+    SeriesColorMap,
+    SeriesStrategy,
+    MissingDataStrategy,
+    ColorScaleConfigInterface,
+    ComparisonLineConfig,
+    AxisConfigInterface,
+    ColorSchemeName,
+    EntityName,
+    DetailsMarker,
+    Color,
+    GrapherVariant,
+} from "../../types/index.js"
+import { TooltipManager } from "../tooltip/TooltipProps"
+import { OwidTable, CoreColumn } from "../../core-table/index.js"
+
+import { SelectionArray } from "../selection/SelectionArray"
+import { ColumnSlug, SortConfig, TimeBound } from "../../utils/index.js"
+import { ColorScaleBin } from "../color/ColorScaleBin"
+import { ColorScale } from "../color/ColorScale"
+import { FocusArray } from "../focus/FocusArray"
+
+// The possible options common across our chart types. Not all of these apply to every chart type, so there is room to create a better type hierarchy.
+
+export interface ChartManager {
+    base?: React.RefObject<SVGGElement | HTMLDivElement | null>
+    fontSize?: number
+
+    table: OwidTable
+    transformedTable?: OwidTable
+
+    variant?: GrapherVariant
+    isDisplayedAlongsideComplementaryTable?: boolean
+    chartAreaPadding?: number
+
+    isExportingToSvgOrPng?: boolean
+    isRelativeMode?: boolean
+    comparisonLines?: ComparisonLineConfig[]
+    showLegend?: boolean
+    tooltip?: TooltipManager["tooltip"]
+    baseColorScheme?: ColorSchemeName
+    invertColorScheme?: boolean
+    compareEndPointsOnly?: boolean
+    zoomToSelection?: boolean
+    matchingEntitiesOnly?: boolean
+
+    colorScale?: Readonly<ColorScaleConfigInterface>
+    // for consistent automatic color scales across facets
+    colorScaleColumnOverride?: CoreColumn
+    // for passing colorScale to sparkline in map charts
+    colorScaleOverride?: ColorScale
+    // If you want to use auto-assigned colors, but then have them preserved across selection and chart changes
+    seriesColorMap?: SeriesColorMap
+    // If you want to opt out of assigned colors and use a value-based color scheme instead
+    // (e.g. stacked bar charts coloring positive/negative values differently)
+    useValueBasedColorScheme?: boolean
+
+    yAxisConfig?: Readonly<AxisConfigInterface>
+    xAxisConfig?: Readonly<AxisConfigInterface>
+
+    addCountryMode?: EntitySelectionMode
+
+    yColumnSlug?: ColumnSlug
+    yColumnSlugs?: ColumnSlug[]
+    xColumnSlug?: ColumnSlug
+    sizeColumnSlug?: ColumnSlug
+    colorColumnSlug?: ColumnSlug
+
+    // if colorColumnSlug is given, either one of these is set
+    categoricalColorColumnSlug?: ColumnSlug
+    numericColorColumnSlug?: ColumnSlug
+
+    selection?: SelectionArray | EntityName[]
+    entityType?: string
+    entityTypePlural?: string
+
+    focusArray?: FocusArray
+
+    hidePoints?: boolean // for line options
+    startHandleTimeBound?: TimeBound // for relative-to-first-year line chart
+    hideNoDataSection?: boolean // for slope charts
+
+    // we need endTime so DiscreteBarCharts and StackedDiscreteBarCharts can
+    // know what date the timeline is set to. and let's pass startTime in, too.
+    startTime?: number
+    endTime?: number
+
+    facetStrategy?: FacetStrategy // todo: make a strategy? a column prop? etc
+    seriesStrategy?: SeriesStrategy
+
+    sortConfig?: SortConfig
+    showNoDataArea?: boolean // No data area in Marimekko charts
+
+    externalLegendHoverBin?: ColorScaleBin | undefined
+    disableIntroAnimation?: boolean
+
+    missingDataStrategy?: MissingDataStrategy
+
+    isNarrow?: boolean
+    isStatic?: boolean
+    isSemiNarrow?: boolean
+    isStaticAndSmall?: boolean
+    isExportingForSocialMedia?: boolean
+    isExportingForWikimedia?: boolean
+    backgroundColor?: Color
+    shouldPinTooltipToBottom?: boolean
+
+    detailsOrderedByReference?: string[]
+    detailsMarkerInSvg?: DetailsMarker
+}

package/src/grapher/chart/ChartTabs.ts

@@ -0,0 +1,178 @@
+import {
+    ALL_GRAPHER_CHART_TYPES,
+    GRAPHER_CHART_TYPES,
+    GRAPHER_TAB_NAMES,
+    GRAPHER_TAB_CONFIG_OPTIONS,
+    GRAPHER_TAB_QUERY_PARAMS,
+    GrapherChartType,
+    GrapherTabName,
+    GrapherTabConfigOption,
+    GrapherTabQueryParam,
+} from "../../types/index.js"
+import * as R from "remeda"
+import { match } from "ts-pattern"
+
+/**
+ * Chart type combinations that are currently supported. Every subset of these
+ * combinations is valid. For example, [LineChart, SlopeChart, DiscreteBar]
+ * makes all these combinations valid: [LineChart, SlopeChart, DiscreteBar],
+ * [LineChart, SlopeChart], [LineChart, DiscreteBar], [SlopeChart, DiscreteBar]
+ *
+ * This also determines the order of chart types in the UI.
+ */
+const VALID_CHART_TYPE_COMBINATIONS = [
+    [
+        GRAPHER_CHART_TYPES.LineChart,
+        GRAPHER_CHART_TYPES.SlopeChart,
+        GRAPHER_CHART_TYPES.DiscreteBar,
+        GRAPHER_CHART_TYPES.Marimekko,
+    ],
+]
+
+type ChartTabConfigOption = Exclude<
+    GrapherTabConfigOption,
+    "table" | "map" | "chart"
+>
+
+export const CHART_TYPE_LABEL: Record<GrapherChartType, string> = {
+    [GRAPHER_CHART_TYPES.LineChart]: "Line",
+    [GRAPHER_CHART_TYPES.SlopeChart]: "Slope",
+    [GRAPHER_CHART_TYPES.ScatterPlot]: "Scatter",
+    [GRAPHER_CHART_TYPES.StackedArea]: "Stacked area",
+    [GRAPHER_CHART_TYPES.StackedBar]: "Stacked bar",
+    [GRAPHER_CHART_TYPES.DiscreteBar]: "Bar",
+    [GRAPHER_CHART_TYPES.StackedDiscreteBar]: "Stacked bar",
+    [GRAPHER_CHART_TYPES.Marimekko]: "Marimekko",
+}
+
+export const LONG_CHART_TYPE_LABEL: Record<GrapherChartType, string> = {
+    [GRAPHER_CHART_TYPES.LineChart]: "Line chart",
+    [GRAPHER_CHART_TYPES.SlopeChart]: "Slope chart",
+    [GRAPHER_CHART_TYPES.ScatterPlot]: "Scatter plot",
+    [GRAPHER_CHART_TYPES.StackedArea]: "Stacked area chart",
+    [GRAPHER_CHART_TYPES.StackedBar]: "Bar chart",
+    [GRAPHER_CHART_TYPES.DiscreteBar]: "Bar chart",
+    [GRAPHER_CHART_TYPES.StackedDiscreteBar]: "Bar chart",
+    [GRAPHER_CHART_TYPES.Marimekko]: "Marimekko chart",
+}
+
+const MAP_CHART_TAB_CONFIG_OPTION_TO_CHART_TYPE_NAME: Record<
+    ChartTabConfigOption,
+    GrapherChartType
+> = {
+    [GRAPHER_TAB_CONFIG_OPTIONS.line]: GRAPHER_CHART_TYPES.LineChart,
+    [GRAPHER_TAB_CONFIG_OPTIONS.slope]: GRAPHER_CHART_TYPES.SlopeChart,
+    [GRAPHER_TAB_CONFIG_OPTIONS.scatter]: GRAPHER_CHART_TYPES.ScatterPlot,
+    [GRAPHER_TAB_CONFIG_OPTIONS["stacked-area"]]:
+        GRAPHER_CHART_TYPES.StackedArea,
+    [GRAPHER_TAB_CONFIG_OPTIONS["stacked-bar"]]: GRAPHER_CHART_TYPES.StackedBar,
+    [GRAPHER_TAB_CONFIG_OPTIONS["discrete-bar"]]:
+        GRAPHER_CHART_TYPES.DiscreteBar,
+    [GRAPHER_TAB_CONFIG_OPTIONS["stacked-discrete-bar"]]:
+        GRAPHER_CHART_TYPES.StackedDiscreteBar,
+    [GRAPHER_TAB_CONFIG_OPTIONS.marimekko]: GRAPHER_CHART_TYPES.Marimekko,
+}
+
+const MAP_CHART_TYPE_NAME_TO_CHART_TAB_CONFIG_OPTION = R.invert(
+    MAP_CHART_TAB_CONFIG_OPTION_TO_CHART_TYPE_NAME
+)
+
+export function mapTabConfigOptionToChartTypeName(
+    tabOption: ChartTabConfigOption
+): GrapherChartType {
+    return MAP_CHART_TAB_CONFIG_OPTION_TO_CHART_TYPE_NAME[tabOption]
+}
+
+export function mapChartTypeNameToTabConfigOption(
+    chartType: GrapherChartType
+): ChartTabConfigOption {
+    return MAP_CHART_TYPE_NAME_TO_CHART_TAB_CONFIG_OPTION[chartType]
+}
+
+export function mapTabQueryParamToChartTypeName(
+    tab: ChartTabConfigOption
+): GrapherChartType {
+    return MAP_CHART_TAB_CONFIG_OPTION_TO_CHART_TYPE_NAME[tab]
+}
+
+export function mapChartTypeNameToQueryParam(
+    chartType: GrapherChartType
+): ChartTabConfigOption {
+    return MAP_CHART_TYPE_NAME_TO_CHART_TAB_CONFIG_OPTION[chartType]
+}
+
+export function mapGrapherTabNameToConfigOption(
+    tabName: GrapherTabName
+): GrapherTabConfigOption {
+    return match(tabName)
+        .with(GRAPHER_TAB_NAMES.Table, () => GRAPHER_TAB_CONFIG_OPTIONS.table)
+        .with(GRAPHER_TAB_NAMES.WorldMap, () => GRAPHER_TAB_CONFIG_OPTIONS.map)
+        .otherwise((tabName) => mapChartTypeNameToTabConfigOption(tabName))
+}
+
+export const mapGrapherTabNameToQueryParam = mapGrapherTabNameToConfigOption
+
+export function makeLabelForGrapherTab(
+    tab: GrapherTabName,
+    options?: { useGenericChartLabel?: boolean; format?: "short" | "long" }
+): string {
+    const { useGenericChartLabel = false, format = "short" } = options ?? {}
+
+    if (tab === GRAPHER_TAB_NAMES.Table) return "Table"
+    if (tab === GRAPHER_TAB_NAMES.WorldMap)
+        return format === "short" ? "Map" : "World map"
+
+    if (useGenericChartLabel) return "Chart"
+
+    return format === "short"
+        ? CHART_TYPE_LABEL[tab]
+        : LONG_CHART_TYPE_LABEL[tab]
+}
+
+export function findPotentialChartTypeSiblings(
+    chartTypes: GrapherChartType[]
+): GrapherChartType[] | undefined {
+    for (const validCombination of VALID_CHART_TYPE_COMBINATIONS) {
+        const validSet: Set<GrapherChartType> = new Set(validCombination)
+        const hasIntersection = chartTypes.some((chartType) =>
+            validSet.has(chartType)
+        )
+        if (hasIntersection) return validCombination
+    }
+    return undefined
+}
+
+export function findValidChartTypeCombination(
+    chartTypes: GrapherChartType[]
+): GrapherChartType[] | undefined {
+    const validCombination = findPotentialChartTypeSiblings(chartTypes)
+    return validCombination?.filter((chartType) =>
+        chartTypes.includes(chartType)
+    )
+}
+
+export function isChartTypeName(
+    candidate: string
+): candidate is GrapherChartType {
+    return ALL_GRAPHER_CHART_TYPES.includes(candidate as any)
+}
+
+export function isValidTabQueryParam(
+    candidate: string
+): candidate is GrapherTabQueryParam {
+    return Object.values(GRAPHER_TAB_QUERY_PARAMS).includes(candidate as any)
+}
+
+export function isValidTabConfigOption(
+    candidate: string
+): candidate is GrapherTabConfigOption {
+    return Object.values(GRAPHER_TAB_CONFIG_OPTIONS).includes(candidate as any)
+}
+
+export const isChartTab = (tab: GrapherTabName): tab is GrapherChartType =>
+    tab !== GRAPHER_TAB_NAMES.Table && tab !== GRAPHER_TAB_NAMES.WorldMap
+
+export const isMapTab = (
+    tab: GrapherTabName
+): tab is typeof GRAPHER_TAB_NAMES.WorldMap =>
+    tab === GRAPHER_TAB_NAMES.WorldMap