@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/controls/entityPicker/EntityPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/entityPicker/EntityPicker.tsx"],
+  "sourcesContent": ["import * as _ from \"lodash-es\"\nimport * as React from \"react\"\nimport * as R from \"remeda\"\nimport {\n    action,\n    computed,\n    observable,\n    runInAction,\n    reaction,\n    makeObservable,\n} from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport { Flipper, Flipped } from \"react-flip-toolkit\"\nimport {\n    bind,\n    FuzzySearch,\n    scrollIntoViewIfNeeded,\n    sortByUndefinedLast,\n    ColumnSlug,\n    getUserCountryInformation,\n    regions,\n    SortOrder,\n    EntityName,\n    CoreColumnDef,\n    ChartsTableSlugs,\n} from \"../../../utils/index.js\"\nimport classnames from \"classnames\"\nimport { scaleLinear, ScaleLinear } from \"d3-scale\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { faSearch, faTimes } from \"@fortawesome/free-solid-svg-icons\"\nimport { VerticalScrollContainer } from \"../../controls/VerticalScrollContainer.js\"\nimport { SortIcon } from \"../../controls/SortIcon.js\"\nimport { Dropdown, BasicDropdownOption } from \"../Dropdown.js\"\nimport {\n    ColumnTypeMap,\n    CoreColumn,\n    ChartsTable,\n} from \"../../../core-table/index.js\"\nimport { EntityPickerManager } from \"./EntityPickerConstants.js\"\nimport { SelectionArray } from \"../../selection/SelectionArray.js\"\n\nconst toggleSort = (order: SortOrder): SortOrder =>\n    order === SortOrder.desc ? SortOrder.asc : SortOrder.desc\n\nenum FocusDirection {\n    first = \"first\",\n    last = \"last\",\n    up = \"up\",\n    down = \"down\",\n}\n\ninterface EntityOptionWithMetricValue {\n    entityName: EntityName\n    plotValue: number | string | undefined\n    formattedValue: any\n    localEntitiesIndex: number | undefined\n}\n\n/** Modulo that wraps negative numbers too */\nconst mod = (n: number, m: number): number => ((n % m) + m) % m\n\ninterface EntityPickerProps {\n    manager: EntityPickerManager\n    selection: SelectionArray\n    isDropdownMenu?: boolean\n    onSelectEntity?: (entityName: EntityName) => void\n    onDeselectEntity?: (entityName: EntityName) => void\n    onClearEntities?: () => void\n}\n\n@observer\nexport class EntityPicker extends React.Component<EntityPickerProps> {\n    private searchInput: string | undefined = undefined\n    private searchInputRef = React.createRef<HTMLInputElement>()\n\n    private focusIndex: number | undefined = undefined\n    private focusRef = React.createRef<HTMLLabelElement>()\n    private scrollFocusedIntoViewOnUpdate = false\n\n    private blockOptionHover = false\n\n    private mostRecentlySelectedEntityName: string | null = null\n\n    private scrollContainerRef = React.createRef<HTMLDivElement>()\n\n    private isOpen = false\n\n    private localEntityNames: string[] | undefined = undefined\n\n    constructor(props: EntityPickerProps) {\n        super(props)\n\n        makeObservable<\n            EntityPicker,\n            | \"searchInput\"\n            | \"searchInputRef\"\n            | \"focusIndex\"\n            | \"focusRef\"\n            | \"scrollFocusedIntoViewOnUpdate\"\n            | \"blockOptionHover\"\n            | \"mostRecentlySelectedEntityName\"\n            | \"scrollContainerRef\"\n            | \"isOpen\"\n            | \"localEntityNames\"\n        >(this, {\n            searchInput: observable,\n            searchInputRef: observable,\n            focusIndex: observable,\n            focusRef: observable,\n            scrollFocusedIntoViewOnUpdate: observable,\n            blockOptionHover: observable,\n            mostRecentlySelectedEntityName: observable,\n            scrollContainerRef: observable,\n            isOpen: observable,\n            localEntityNames: observable,\n        })\n    }\n\n    @computed private get isDropdownMenu(): boolean {\n        return !!this.props.isDropdownMenu\n    }\n\n    @action.bound private selectEntity(\n        name: EntityName,\n        checked?: boolean\n    ): void {\n        this.props.selection.toggleSelection(name)\n\n        if (this.props.selection.selectedSet.has(name)) {\n            this.props.onSelectEntity?.(name)\n        } else {\n            this.props.onDeselectEntity?.(name)\n        }\n\n        // Clear search input\n        this.searchInput = \"\"\n        this.manager.analytics?.logEntityPickerEvent(\n            checked ? \"select\" : \"deselect\",\n            name\n        )\n\n        this.mostRecentlySelectedEntityName = name\n    }\n\n    @computed private get manager(): EntityPickerManager {\n        return this.props.manager\n    }\n\n    @computed private get metric(): string | undefined {\n        return this.manager.entityPickerMetric\n    }\n\n    @computed private get sortOrder(): SortOrder {\n        // On mobile, only allow sorting by entityName (ascending)\n        if (this.isDropdownMenu) return SortOrder.asc\n        return this.manager.entityPickerSort ?? SortOrder.asc\n    }\n\n    @computed private get pickerColumnDefs(): CoreColumnDef[] {\n        return this.manager.entityPickerColumnDefs ?? []\n    }\n\n    @computed private get metricOptions(): {\n        label: string\n        value: string | undefined\n    }[] {\n        const entityNameColumn = this.grapherTable?.entityNameColumn\n        const entityNameColumnInPickerColumnDefs = !!this.pickerColumnDefs.find(\n            (col) => col.slug === entityNameColumn?.slug\n        )\n        return _.compact([\n            { label: \"Relevance\", value: undefined },\n            !entityNameColumnInPickerColumnDefs &&\n                entityNameColumn && {\n                    label: _.upperFirst(this.manager.entityType) || \"Name\",\n                    value: entityNameColumn?.slug,\n                },\n            ...this.pickerColumnDefs.map(\n                (\n                    col\n                ): {\n                    label: string\n                    value: string\n                } => {\n                    return {\n                        label: col.name || col.slug,\n                        value: col.slug,\n                    }\n                }\n            ),\n        ])\n    }\n\n    @computed private get metricDropdownOptions(): BasicDropdownOption[] {\n        return this.metricOptions.map((option) => ({\n            // Use a special string value for undefined metric (relevance)\n            value: option.value ?? \"\",\n            label: option.label,\n        }))\n    }\n\n    @computed\n    private get selectedMetricDropdownOption():\n        | BasicDropdownOption\n        | undefined {\n        const targetValue = this.metric ?? \"\"\n        return this.metricDropdownOptions.find(\n            (option) => option.value === targetValue\n        )\n    }\n\n    @computed private get metricTable(): ChartsTable | undefined {\n        if (this.metric === undefined) return undefined\n\n        // If the slug is \"entityName\", then try to get it from grapherTable first, because it might\n        // not be present in pickerTable (for indicator-powered explorers, for example).\n        if (\n            this.metric === ChartsTableSlugs.entityName &&\n            this.grapherTable?.has(this.metric)\n        )\n            return this.grapherTable\n        return this.pickerTable\n    }\n\n    @computed private get activePickerMetricColumn(): CoreColumn | undefined {\n        return this.metricTable?.get(this.metric)\n    }\n\n    @computed private get availableEntitiesForCurrentView(): Set<string> {\n        if (!this.grapherTable)\n            return new Set(this.manager.availableEntityNames)\n        if (!this.manager.requiredColumnSlugs?.length)\n            return this.grapherTable.availableEntityNameSet\n        return this.grapherTable.entitiesWith(this.manager.requiredColumnSlugs)\n    }\n\n    @action.bound async populateLocalEntity(): Promise<void> {\n        try {\n            const localCountryInfo = await getUserCountryInformation()\n            if (!localCountryInfo) return\n\n            const userEntityCodes = [\n                localCountryInfo.code,\n                ...(localCountryInfo.regions ?? []),\n                \"WRL\",\n            ]\n\n            const userRegionNames = _.sortBy(\n                regions.filter((region) =>\n                    userEntityCodes.includes(region.code)\n                ),\n                (region) => userEntityCodes.indexOf(region.code)\n            ).map((region) => region.name)\n\n            if (userRegionNames) this.localEntityNames = userRegionNames\n        } catch {\n            // ignore\n        }\n    }\n\n    @computed\n    private get entitiesWithMetricValue(): EntityOptionWithMetricValue[] {\n        const { metricTable, localEntityNames } = this\n        const col = this.activePickerMetricColumn\n        const entityNames = this.manager.availableEntityNames?.toSorted() ?? []\n        return entityNames.map((entityName) => {\n            const plotValue =\n                col && metricTable?.has(col.slug)\n                    ? (metricTable.getLatestValueForEntity(\n                          entityName,\n                          col.slug\n                      ) as string | number)\n                    : undefined\n\n            const formattedValue =\n                plotValue !== undefined\n                    ? col?.formatValueShortWithAbbreviations(plotValue)\n                    : undefined\n\n            const localEntitiesIndex = localEntityNames?.indexOf(entityName)\n            return {\n                entityName,\n                plotValue,\n                formattedValue,\n                localEntitiesIndex:\n                    localEntitiesIndex !== undefined && localEntitiesIndex >= 0\n                        ? localEntitiesIndex\n                        : undefined,\n            }\n        })\n    }\n\n    @computed private get grapherTable(): ChartsTable | undefined {\n        return this.manager.grapherTable\n    }\n\n    @computed private get pickerTable(): ChartsTable | undefined {\n        return this.manager.entityPickerTable\n    }\n\n    @computed get selection(): SelectionArray {\n        return this.props.selection\n    }\n\n    @computed get selectionSet(): Set<string> {\n        return new Set(this.selection.selectedEntityNames)\n    }\n\n    @computed private get fuzzy(): FuzzySearch<EntityOptionWithMetricValue> {\n        return FuzzySearch.withKey(\n            this.entitiesWithMetricValue,\n            (entity) => entity.entityName\n        )\n    }\n\n    @computed private get searchResults(): EntityOptionWithMetricValue[] {\n        if (this.searchInput) return this.fuzzy.search(this.searchInput)\n        const { entitiesWithMetricValue, sortOrder, selectionSet } = this\n\n        // Show the selected up top and in order.\n        const sorted = sortByUndefinedLast(\n            entitiesWithMetricValue,\n            (option) => option.plotValue,\n            sortOrder\n        )\n\n        let [selected, unselected] = _.partition(sorted, (option) =>\n            selectionSet.has(option.entityName)\n        )\n        if (this.metric === undefined) {\n            // only sort local entity names first if we're not sorting by some other metric already\n            unselected = sortByUndefinedLast(\n                unselected,\n                (option) => option.localEntitiesIndex\n            )\n        }\n        return [...selected, ...unselected]\n    }\n\n    private normalizeFocusIndex(index: number): number | undefined {\n        if (this.searchResults.length === 0) return undefined\n        return mod(index, this.searchResults.length)\n    }\n\n    @computed private get focusedOption(): string | undefined {\n        return this.focusIndex !== undefined\n            ? this.searchResults[this.focusIndex].entityName\n            : undefined\n    }\n\n    @computed private get showDoneButton(): boolean {\n        return this.isDropdownMenu && this.isOpen\n    }\n\n    @action.bound private focusOptionDirection(\n        direction: FocusDirection\n    ): void {\n        if (direction === FocusDirection.first)\n            this.focusIndex = this.normalizeFocusIndex(0)\n        else if (direction === FocusDirection.last)\n            this.focusIndex = this.normalizeFocusIndex(-1)\n        else if (direction === FocusDirection.up) {\n            const newIndex =\n                this.focusIndex === undefined ? -1 : this.focusIndex - 1\n            this.focusIndex = this.normalizeFocusIndex(newIndex)\n        } else if (direction === FocusDirection.down) {\n            const newIndex =\n                this.focusIndex === undefined ? 0 : this.focusIndex + 1\n            this.focusIndex = this.normalizeFocusIndex(newIndex)\n        } else return // Exit without updating scroll\n        this.scrollFocusedIntoViewOnUpdate = true\n    }\n\n    @action.bound private clearSearchInput(): void {\n        if (this.searchInput) this.searchInput = \"\"\n    }\n\n    @action.bound private onKeyDown(\n        event: React.KeyboardEvent<HTMLDivElement>\n    ): void {\n        // We want to block hover if a key is pressed.\n        // The hover will be unblocked iff the user moves the mouse (relative to the menu).\n        this.blockHover()\n        switch (event.key) {\n            case \"Enter\": {\n                if (event.keyCode === 229) {\n                    // ignore the keydown event from an Input Method Editor(IME)\n                    // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode\n                    break\n                }\n                if (!this.focusedOption) return\n                const name = this.focusedOption\n                this.selectEntity(name)\n                this.clearSearchInput()\n                this.manager.analytics?.logEntityPickerEvent(\"enter\", name)\n                break\n            }\n            case \"ArrowUp\":\n                this.focusOptionDirection(FocusDirection.up)\n                break\n            case \"ArrowDown\":\n                this.focusOptionDirection(FocusDirection.down)\n                break\n            default:\n                return\n        }\n        event.preventDefault()\n    }\n\n    @bind private focusSearch(): void {\n        this.searchInputRef.current?.focus()\n    }\n\n    @action.bound private onSearchFocus(): void {\n        this.isOpen = true\n        if (this.focusIndex === undefined)\n            this.focusOptionDirection(FocusDirection.first)\n    }\n\n    @action.bound private onSearchBlur(): void {\n        // Do not allow focus on elements inside menu; shift focus back to search input.\n        if (\n            this.scrollContainerRef.current &&\n            this.scrollContainerRef.current.contains(document.activeElement)\n        ) {\n            this.focusSearch()\n            return\n        }\n        this.isOpen = false\n        this.focusIndex = undefined\n    }\n\n    @action.bound private onHover(index: number): void {\n        if (!this.blockOptionHover) this.focusIndex = index\n    }\n\n    @action.bound private blockHover(): void {\n        this.blockOptionHover = true\n    }\n\n    @action.bound private unblockHover(): void {\n        this.blockOptionHover = false\n    }\n\n    @action.bound private onMenuMouseDown(\n        event: React.MouseEvent<HTMLDivElement, MouseEvent>\n    ): void {\n        event.stopPropagation()\n        event.preventDefault()\n        this.focusSearch()\n    }\n\n    @bind private highlightLabel(label: string): string | React.ReactElement {\n        if (!this.searchInput) return label\n\n        const result = this.fuzzy.single(this.searchInput, label)\n        if (!result) return label\n\n        const tokens: { match: boolean; text: string }[] = []\n        for (let i = 0; i < result.target.length; i++) {\n            const currentToken = R.last(tokens)\n            const match = result.indexes.includes(i)\n            const char = result.target[i]\n            if (!currentToken || currentToken.match !== match) {\n                tokens.push({\n                    match,\n                    text: char,\n                })\n            } else currentToken.text += char\n        }\n        return (\n            <span translate=\"no\">\n                {tokens.map((token, i) =>\n                    token.match ? (\n                        <mark key={i}>{token.text}</mark>\n                    ) : (\n                        <span key={i}>{token.text}</span>\n                    )\n                )}\n            </span>\n        )\n    }\n\n    @computed private get barScale(): ScaleLinear<number, number> {\n        const maxValue = _.max(\n            this.entitiesWithMetricValue\n                .map((option) => option.plotValue)\n                .filter(_.isNumber)\n        )\n        return scaleLinear()\n            .domain([0, maxValue ?? 1])\n            .range([0, 1])\n    }\n\n    override componentDidMount(): void {\n        // Whenever the search term changes, shift focus to first option in the list\n        reaction(\n            () => this.searchInput,\n            () => this.focusOptionDirection(FocusDirection.first)\n        )\n\n        void this.populateLocalEntity()\n    }\n\n    override componentDidUpdate(): void {\n        if (\n            this.focusIndex !== undefined &&\n            this.scrollFocusedIntoViewOnUpdate &&\n            this.scrollContainerRef.current &&\n            this.focusRef.current\n        ) {\n            scrollIntoViewIfNeeded(\n                this.scrollContainerRef.current,\n                this.focusRef.current\n            )\n            runInAction(() => (this.scrollFocusedIntoViewOnUpdate = false))\n        }\n    }\n\n    @action.bound private onMetricSelectionChange(\n        option: BasicDropdownOption | null\n    ): void {\n        if (!option) return\n        // Empty string means undefined/relevance option\n        const columnSlug = option.value === \"\" ? undefined : option.value\n        this.updateMetric(columnSlug)\n    }\n\n    @action private updateMetric(columnSlug: ColumnSlug | undefined): void {\n        const col = this.pickerTable?.get(columnSlug)\n\n        this.manager.setEntityPicker?.({\n            metric: columnSlug,\n            sort: this.isColumnTypeNumeric(columnSlug, col)\n                ? SortOrder.desc\n                : SortOrder.asc,\n        })\n        this.manager.analytics?.logEntityPickerEvent(\"sortBy\", columnSlug)\n    }\n\n    private isColumnTypeNumeric(\n        columnSlug: ColumnSlug | undefined,\n        col: CoreColumn | undefined\n    ): boolean {\n        return (\n            // If columnSlug is undefined, we're sorting by relevance, which is (mostly) by country name.\n            // If the column is currently missing (not loaded yet), assume it is numeric.\n            columnSlug !== undefined &&\n            columnSlug !== ChartsTableSlugs.entityName &&\n            (col === undefined ||\n                col.isMissing ||\n                col instanceof ColumnTypeMap.Numeric)\n        )\n    }\n\n    private get pickerMenu(): React.ReactElement | null {\n        if (this.isDropdownMenu) return null\n\n        return (\n            <div className=\"MetricSettings\">\n                <label id=\"metric-dropdown-label\" className=\"mainLabel\">\n                    Sort by\n                </label>\n                <Dropdown\n                    className=\"metricDropdown\"\n                    options={this.metricDropdownOptions}\n                    value={this.selectedMetricDropdownOption ?? null}\n                    onChange={this.onMetricSelectionChange}\n                    isLoading={this.manager.entityPickerTableIsLoading}\n                    aria-labelledby=\"metric-dropdown-label\"\n                />\n                <span\n                    className=\"sort\"\n                    onClick={(): void => {\n                        const sortOrder = toggleSort(this.sortOrder)\n                        this.manager.setEntityPicker?.({\n                            metric: this.metric,\n                            sort: sortOrder,\n                        })\n                        this.manager.analytics?.logEntityPickerEvent(\n                            \"sortOrder\",\n                            sortOrder\n                        )\n                    }}\n                >\n                    <SortIcon\n                        type={\n                            this.isColumnTypeNumeric(\n                                this.metric,\n                                this.activePickerMetricColumn\n                            )\n                                ? \"numeric\"\n                                : \"text\"\n                        }\n                        order={this.sortOrder}\n                    />\n                </span>\n            </div>\n        )\n    }\n\n    override render(): React.ReactElement {\n        const { selection } = this\n        const { entityType } = this.manager\n        const entities = this.searchResults\n        const selectedEntityNames = selection.selectedEntityNames\n        const availableEntities = this.availableEntitiesForCurrentView\n\n        const selectedDebugMessage = `${selectedEntityNames.length} selected. ${availableEntities.size} available. ${this.entitiesWithMetricValue.length} options total.`\n\n        return (\n            <div className=\"EntityPicker\">\n                <div\n                    className=\"EntityPickerSearchInput\"\n                    onKeyDown={this.onKeyDown}\n                >\n                    <input\n                        className={classnames(\"input-field\", {\n                            \"with-done-button\": this.showDoneButton,\n                        })}\n                        type=\"text\"\n                        placeholder={`Type to add a ${entityType}...`}\n                        value={this.searchInput ?? \"\"}\n                        onChange={(e): string =>\n                            (this.searchInput = e.currentTarget.value)\n                        }\n                        onFocus={this.onSearchFocus}\n                        onBlur={this.onSearchBlur}\n                        ref={this.searchInputRef}\n                        data-track-note=\"entity_picker_search_input\"\n                    />\n                    <div className=\"search-icon\">\n                        <FontAwesomeIcon icon={faSearch} />\n                    </div>\n                    {this.showDoneButton && (\n                        <div className=\"done\">\n                            <button>Done</button>\n                        </div>\n                    )}\n                </div>\n                {this.pickerMenu}\n                <div className=\"EntityListContainer\" onKeyDown={this.onKeyDown}>\n                    {(!this.isDropdownMenu || this.isOpen) && (\n                        <div\n                            className={classnames(\"EntityList\", {\n                                isDropdown: this.isDropdownMenu,\n                            })}\n                            onMouseDown={this.onMenuMouseDown}\n                        >\n                            <VerticalScrollContainer\n                                scrollingShadows={true}\n                                scrollLock={true}\n                                className=\"EntitySearchResults\"\n                                contentsId={entities\n                                    .map((c) => c.entityName)\n                                    .join(\",\")}\n                                onMouseMove={this.unblockHover}\n                                ref={this.scrollContainerRef}\n                            >\n                                <Flipper\n                                    spring={{\n                                        stiffness: 300,\n                                        damping: 33,\n                                    }}\n                                    // We only want to animate when the selection changes, but not on changes due to\n                                    // searching\n                                    flipKey={selectedEntityNames.join(\",\")}\n                                >\n                                    {entities.map((option, index) => (\n                                        <PickerOption\n                                            key={index}\n                                            hasDataForActiveMetric={availableEntities.has(\n                                                option.entityName\n                                            )}\n                                            optionWithMetricValue={option}\n                                            highlight={this.highlightLabel}\n                                            barScale={this.barScale}\n                                            onChange={this.selectEntity}\n                                            onHover={(): void =>\n                                                this.onHover(index)\n                                            }\n                                            isSelected={this.selectionSet.has(\n                                                option.entityName\n                                            )}\n                                            isFocused={\n                                                this.focusIndex === index\n                                            }\n                                            innerRef={\n                                                this.focusIndex === index\n                                                    ? this.focusRef\n                                                    : undefined\n                                            }\n                                            className={\n                                                this\n                                                    .mostRecentlySelectedEntityName ===\n                                                option.entityName\n                                                    ? \"most-recently-selected\"\n                                                    : undefined\n                                            }\n                                        />\n                                    ))}\n                                </Flipper>\n                            </VerticalScrollContainer>\n                            <div>\n                                <div\n                                    title={selectedDebugMessage}\n                                    className=\"ClearSelectionButton\"\n                                    data-track-note=\"entity_picker_clear_selection\"\n                                    onClick={(): void => {\n                                        selection.clearSelection()\n                                        this.props.onClearEntities?.()\n                                    }}\n                                >\n                                    <FontAwesomeIcon icon={faTimes} /> Clear\n                                    selection\n                                </div>\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </div>\n        )\n    }\n}\n\ninterface PickerOptionProps {\n    optionWithMetricValue: EntityOptionWithMetricValue\n    highlight: (label: string) => React.ReactElement | string\n    onChange: (name: string, checked: boolean) => void\n    onHover?: () => void\n    innerRef?: React.RefObject<HTMLLabelElement | null>\n    isFocused?: boolean\n    isSelected?: boolean\n    barScale?: ScaleLinear<number, number>\n    hasDataForActiveMetric: boolean\n    className?: string\n}\n\nclass PickerOption extends React.Component<PickerOptionProps> {\n    @bind onClick(event: React.MouseEvent<HTMLLabelElement, MouseEvent>): void {\n        event.stopPropagation()\n        event.preventDefault()\n        this.props.onChange(\n            this.props.optionWithMetricValue.entityName,\n            !this.props.isSelected\n        )\n    }\n\n    override render(): React.ReactElement {\n        const {\n            barScale,\n            optionWithMetricValue,\n            innerRef,\n            isSelected,\n            isFocused,\n            hasDataForActiveMetric,\n            highlight,\n            className,\n        } = this.props\n        const { entityName, plotValue, formattedValue } = optionWithMetricValue\n        const metricValue = formattedValue === entityName ? \"\" : formattedValue // If the user has this entity selected, don't show the name twice.\n\n        return (\n            <Flipped flipId={entityName} translate opacity>\n                <label\n                    className={classnames(\n                        \"EntityPickerOption\",\n                        className,\n                        {\n                            selected: isSelected,\n                            focused: isFocused,\n                            \"local-country\":\n                                optionWithMetricValue.localEntitiesIndex !==\n                                undefined,\n                        },\n                        hasDataForActiveMetric ? undefined : \"MissingData\"\n                    )}\n                    onMouseMove={this.props.onHover}\n                    onMouseOver={this.props.onHover}\n                    onClick={this.onClick}\n                    ref={innerRef}\n                >\n                    <div className=\"input-container\">\n                        <input\n                            type=\"checkbox\"\n                            checked={isSelected}\n                            value={entityName}\n                            tabIndex={-1}\n                            readOnly\n                        />\n                    </div>\n                    <div className=\"info-container\">\n                        <div className=\"labels-container\">\n                            <div className=\"name\">{highlight(entityName)}</div>\n                            {plotValue !== undefined && (\n                                <div className=\"metric\">{metricValue}</div>\n                            )}\n                        </div>\n                        {barScale && _.isNumber(plotValue) ? (\n                            <div className=\"plot\">\n                                <div\n                                    className=\"bar\"\n                                    style={{\n                                        width: `${barScale(plotValue) * 100}%`,\n                                    }}\n                                />\n                            </div>\n                        ) : (\n                            <div className=\"plot\"></div>\n                        )}\n                    </div>\n                </label>\n            </Flipped>\n        )\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["FocusDirection"]
+}

package/dist/grapher/controls/entityPicker/EntityPickerConstants.d.ts

@@ -0,0 +1,23 @@
+import { ColumnSlug } from "../../../utils/index.js";
+import { GrapherAnalytics } from "../../core/GrapherAnalytics.js";
+import { ChartsTable } from "../../../core-table/index.js";
+import { CoreColumnDef, EntityName, SortOrder } from "../../../types/index.js";
+import { MapConfig } from "../../mapCharts/MapConfig.js";
+export interface EntityPickerManager {
+    entityPickerMetric?: ColumnSlug;
+    entityPickerSort?: SortOrder;
+    setEntityPicker?: (options: {
+        metric: string | undefined;
+        sort?: SortOrder;
+    }) => void;
+    requiredColumnSlugs?: ColumnSlug[];
+    entityPickerColumnDefs?: CoreColumnDef[];
+    entityPickerTable?: ChartsTable;
+    entityPickerTableIsLoading?: boolean;
+    grapherTable?: ChartsTable;
+    entityType?: string;
+    analytics?: GrapherAnalytics;
+    availableEntityNames?: EntityName[];
+    mapConfig?: MapConfig;
+}
+//# sourceMappingURL=EntityPickerConstants.d.ts.map

package/dist/grapher/controls/entityPicker/EntityPickerConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityPickerConstants.d.ts","sourceRoot":"","sources":["../../../../src/grapher/controls/entityPicker/EntityPickerConstants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,MAAM,WAAW,mBAAmB;IAChC,kBAAkB,CAAC,EAAE,UAAU,CAAA;IAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE;QACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;QAC1B,IAAI,CAAC,EAAE,SAAS,CAAA;KACnB,KAAK,IAAI,CAAA;IACV,mBAAmB,CAAC,EAAE,UAAU,EAAE,CAAA;IAClC,sBAAsB,CAAC,EAAE,aAAa,EAAE,CAAA;IACxC,iBAAiB,CAAC,EAAE,WAAW,CAAA;IAC/B,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,oBAAoB,CAAC,EAAE,UAAU,EAAE,CAAA;IACnC,SAAS,CAAC,EAAE,SAAS,CAAA;CACxB"}

package/dist/grapher/controls/entityPicker/EntityPickerConstants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/grapher/controls/globalEntitySelector/GlobalEntitySelector.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { IReactionDisposer } from "mobx";
+import { SelectionArray } from "../../selection/SelectionArray.js";
+declare enum GlobalEntitySelectionModes {
+    none = "none",
+    override = "override"
+}
+interface GlobalEntitySelectorProps {
+    selection: SelectionArray;
+    graphersAndExplorersToUpdate?: Set<SelectionArray>;
+    environment?: string;
+}
+export declare class GlobalEntitySelector extends React.Component<GlobalEntitySelectorProps> {
+    refContainer: React.RefObject<HTMLDivElement>;
+    disposers: IReactionDisposer[];
+    mode: GlobalEntitySelectionModes;
+    private isNarrow;
+    private isOpen;
+    private localEntityName;
+    selection: SelectionArray;
+    private optionGroups;
+    constructor(props: GlobalEntitySelectorProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private onResizeThrottled;
+    private onResize;
+    populateLocalEntity(): Promise<void>;
+    private prepareOptionGroups;
+    private analytics;
+    private updateURL;
+    updateSelection(newSelectedEntities: string[]): void;
+    private onChange;
+    private updateAllGraphersAndExplorersOnPage;
+    private onRemove;
+    private onMenuOpen;
+    private onMenuClose;
+    private onButtonOpen;
+    private onButtonClose;
+    private get selectedOptions();
+    private renderNarrow;
+    private renderWide;
+    render(): React.ReactElement;
+}
+export declare const hydrateGlobalEntitySelectorIfAny: (selection: SelectionArray, graphersAndExplorersToUpdate: Set<SelectionArray>) => void;
+export {};
+//# sourceMappingURL=GlobalEntitySelector.d.ts.map

package/dist/grapher/controls/globalEntitySelector/GlobalEntitySelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalEntitySelector.d.ts","sourceRoot":"","sources":["../../../../src/grapher/controls/globalEntitySelector/GlobalEntitySelector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAGH,iBAAiB,EAIpB,MAAM,MAAM,CAAA;AAuBb,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAIlE,aAAK,0BAA0B;IAC3B,IAAI,SAAS;IAOb,QAAQ,aAAa;CACxB;AA2GD,UAAU,yBAAyB;IAC/B,SAAS,EAAE,cAAc,CAAA;IACzB,4BAA4B,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,qBACa,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,yBAAyB,CAAC;IAChF,YAAY,kCAAoC;IAChD,SAAS,EAAE,iBAAiB,EAAE,CAAK;IAEnC,IAAI,6BAAkC;IAEtC,OAAO,CAAC,QAAQ,CAAO;IACvB,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,eAAe,CAAwB;IAE/C,SAAS,iBAAuB;IAEhC,OAAO,CAAC,YAAY,CAAkC;gBAE1C,KAAK,EAAE,yBAAyB;IAoBnC,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,iBAAiB,CAAiC;IAC5C,OAAO,CAAC,QAAQ;IAKV,mBAAmB,IAAI,OAAO,CAAC,IAAI,CAAC;IAc1C,OAAO,CAAC,mBAAmB;IAsCzC,OAAO,CAAC,SAAS,CAEhB;IAEa,OAAO,CAAC,SAAS;IASjB,eAAe,CAAC,mBAAmB,EAAE,MAAM,EAAE,GAAG,IAAI;IAMpD,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,mCAAmC;IAS3C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAUzB,OAAO,KAAK,eAAe,GAEpC;IAED,OAAO,CAAC,YAAY;IAyDpB,OAAO,CAAC,UAAU;IAsBT,MAAM,IAAI,KAAK,CAAC,YAAY;CAgBxC;AAED,eAAO,MAAM,gCAAgC,GACzC,WAAW,cAAc,EACzB,8BAA8B,GAAG,CAAC,cAAc,CAAC,KAClD,IAWF,CAAA"}

package/dist/grapher/controls/globalEntitySelector/GlobalEntitySelector.js

@@ -0,0 +1,384 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as _ from "lodash-es";
+import * as React from "react";
+import ReactDOM from "react-dom/client";
+import {
+  action,
+  observable,
+  reaction,
+  computed,
+  makeObservable
+} from "mobx";
+import { observer } from "mobx-react";
+import Select, {
+  components
+} from "react-select";
+import classnames from "classnames";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import {
+  countries,
+  getUserCountryInformation,
+  getWindowUrl,
+  setWindowUrl,
+  lazy,
+  RegionType
+} from "../../../utils/index.js";
+import { GrapherAnalytics } from "../../core/GrapherAnalytics.js";
+import { WORLD_ENTITY_NAME } from "../../core/GrapherConstants.js";
+import { GLOBAL_ENTITY_SELECTOR_ELEMENT } from "./GlobalEntitySelectorConstants.js";
+import { setSelectedEntityNamesParam } from "../../core/EntityUrlBuilder.js";
+var GlobalEntitySelectionModes = /* @__PURE__ */ ((GlobalEntitySelectionModes2) => {
+  GlobalEntitySelectionModes2["none"] = "none";
+  GlobalEntitySelectionModes2["override"] = "override";
+  return GlobalEntitySelectionModes2;
+})(GlobalEntitySelectionModes || {});
+const getAllEntitiesSortedWithWorld = lazy(
+  () => _.sortBy(countries, (c) => c.name).concat([
+    {
+      name: WORLD_ENTITY_NAME,
+      code: "WRL",
+      slug: "world",
+      regionType: RegionType.Other
+    }
+  ])
+);
+const Option = (props) => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(components.Option, { ...props }, /* @__PURE__ */ React.createElement("input", { type: "checkbox", checked: props.isSelected, readOnly: true }), " ", /* @__PURE__ */ React.createElement("label", null, props.label)));
+};
+const SelectOptions = {
+  components: {
+    IndicatorSeparator: null,
+    Option
+  },
+  menuPlacement: "bottom",
+  isClearable: false,
+  isMulti: true,
+  backspaceRemovesValue: false,
+  blurInputOnSelect: false,
+  closeMenuOnSelect: false,
+  controlShouldRenderValue: false,
+  hideSelectedOptions: false,
+  placeholder: "Add a country to all charts...",
+  styles: {
+    placeholder: (base) => ({
+      ...base,
+      whiteSpace: "nowrap"
+    }),
+    valueContainer: (base) => ({
+      ...base,
+      paddingTop: 0,
+      paddingBottom: 0
+    }),
+    control: (base) => ({
+      ...base,
+      minHeight: "initial"
+    }),
+    dropdownIndicator: (base) => ({
+      ...base,
+      padding: "0 5px"
+    })
+  }
+};
+function SelectedItems(props) {
+  const canRemove = (props.canRemove ?? true) && props.onRemove !== void 0;
+  const onRemove = props.onRemove || _.noop;
+  const isEmpty = props.selectedEntityNames.length === 0;
+  return /* @__PURE__ */ React.createElement("div", { className: "selected-items-container" }, isEmpty ? /* @__PURE__ */ React.createElement("div", { className: "empty" }, props.emptyLabel) : /* @__PURE__ */ React.createElement("div", { className: "selected-items" }, props.selectedEntityNames.map((entityName) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: entityName,
+      className: classnames("selected-item", {
+        removable: canRemove
+      })
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "label" }, entityName),
+    canRemove && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "remove-icon",
+        onClick: () => onRemove(entityName)
+      },
+      /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faTimes })
+    )
+  ))));
+}
+let GlobalEntitySelector = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.refContainer = React.createRef();
+    this.disposers = [];
+    this.mode = "none" /* none */;
+    this.isNarrow = true;
+    this.isOpen = false;
+    this.selection = this.props.selection;
+    this.optionGroups = [];
+    this.onResizeThrottled = _.throttle(this.onResize, 200);
+    this.analytics = new GrapherAnalytics(
+      this.props.environment ?? "development"
+    );
+    makeObservable(this, {
+      mode: observable,
+      isNarrow: observable,
+      isOpen: observable,
+      localEntityName: observable,
+      optionGroups: observable.ref,
+      onResizeThrottled: action.bound
+    });
+  }
+  componentDidMount() {
+    this.onResize();
+    window.addEventListener("resize", this.onResizeThrottled);
+    this.disposers.push(
+      reaction(
+        () => this.isOpen,
+        () => this.prepareOptionGroups()
+      )
+    );
+    void this.populateLocalEntity();
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.onResizeThrottled);
+    this.disposers.forEach((dispose) => dispose());
+  }
+  onResize() {
+    const container = this.refContainer.current;
+    if (container) this.isNarrow = container.offsetWidth <= 640;
+  }
+  async populateLocalEntity() {
+    try {
+      const localCountryCode = await getUserCountryInformation();
+      if (!localCountryCode) return;
+      const country = getAllEntitiesSortedWithWorld().find(
+        (entity) => entity.code === localCountryCode.code
+      );
+      if (country) this.localEntityName = country.name;
+    } catch {
+    }
+  }
+  prepareOptionGroups() {
+    let optionGroups = [];
+    if (this.localEntityName && !this.selection.selectedSet.has(this.localEntityName)) {
+      optionGroups = optionGroups.concat([
+        {
+          label: "Suggestions",
+          options: [entityNameToOption(this.localEntityName)]
+        }
+      ]);
+    }
+    if (this.selection.hasSelection) {
+      optionGroups = optionGroups.concat([
+        {
+          label: "Selected",
+          options: this.selection.selectedEntityNames.map(
+            entityNameToOption
+          )
+        }
+      ]);
+    }
+    optionGroups = optionGroups.concat([
+      {
+        label: "All countries",
+        options: getAllEntitiesSortedWithWorld().map((entity) => entity.name).map(entityNameToOption)
+      }
+    ]);
+    this.optionGroups = optionGroups;
+    return optionGroups;
+  }
+  updateURL() {
+    setWindowUrl(
+      setSelectedEntityNamesParam(
+        getWindowUrl(),
+        this.selection.selectedEntityNames
+      )
+    );
+  }
+  updateSelection(newSelectedEntities) {
+    this.selection.setSelectedEntities(newSelectedEntities);
+    this.updateAllGraphersAndExplorersOnPage();
+    this.updateURL();
+  }
+  onChange(options) {
+    this.updateSelection(
+      options.map((option) => option.label)
+    );
+    this.analytics.logGlobalEntitySelector(
+      "change",
+      this.selection.selectedEntityNames.join(",")
+    );
+  }
+  updateAllGraphersAndExplorersOnPage() {
+    if (!this.props.graphersAndExplorersToUpdate) return;
+    Array.from(this.props.graphersAndExplorersToUpdate.values()).forEach(
+      (value) => {
+        value.setSelectedEntities(this.selection.selectedEntityNames);
+      }
+    );
+  }
+  onRemove(option) {
+    this.selection.toggleSelection(option);
+    this.updateAllGraphersAndExplorersOnPage();
+    this.updateURL();
+  }
+  onMenuOpen() {
+    this.isOpen = true;
+  }
+  onMenuClose() {
+    this.isOpen = false;
+  }
+  onButtonOpen(event) {
+    this.analytics.logGlobalEntitySelector(
+      "open",
+      event.currentTarget.innerText
+    );
+    this.onMenuOpen();
+  }
+  onButtonClose(event) {
+    this.analytics.logGlobalEntitySelector(
+      "close",
+      event.currentTarget.innerText
+    );
+    this.onMenuClose();
+  }
+  get selectedOptions() {
+    return this.selection.selectedEntityNames.map(entityNameToOption);
+  }
+  renderNarrow() {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classnames("narrow-summary", {
+          "narrow-summary-selected-items": !this.isOpen
+        })
+      },
+      this.isOpen ? /* @__PURE__ */ React.createElement(
+        Select,
+        {
+          ...SelectOptions,
+          options: this.optionGroups,
+          value: this.selectedOptions,
+          onChange: this.onChange,
+          menuIsOpen: this.isOpen,
+          autoFocus: true
+        }
+      ) : /* @__PURE__ */ React.createElement("div", null, !this.selection.hasSelection ? "None selected" : this.selection.selectedEntityNames.map((entityName) => /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: "narrow-summary-selected-item",
+          key: entityName
+        },
+        entityName
+      )).reduce(
+        (acc, item) => acc.length === 0 ? [item] : [...acc, ", ", item],
+        []
+      ))
+    ), /* @__PURE__ */ React.createElement("div", { className: "narrow-actions" }, this.isOpen ? /* @__PURE__ */ React.createElement("button", { className: "button", onClick: this.onButtonClose }, "Done") : /* @__PURE__ */ React.createElement("button", { className: "button", onClick: this.onButtonOpen }, !this.selection.hasSelection ? "Select countries" : "Edit")));
+  }
+  renderWide() {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "select-dropdown-container" }, /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        ...SelectOptions,
+        options: this.optionGroups,
+        onChange: this.onChange,
+        value: this.selectedOptions,
+        onMenuOpen: this.onMenuOpen,
+        onMenuClose: this.onMenuClose
+      }
+    )), /* @__PURE__ */ React.createElement(
+      SelectedItems,
+      {
+        selectedEntityNames: this.selection.selectedEntityNames,
+        onRemove: this.onRemove,
+        emptyLabel: "Select countries to show on all charts"
+      }
+    ));
+  }
+  render() {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classnames("global-entity-control", {
+          "is-narrow": this.isNarrow,
+          "is-wide": !this.isNarrow
+        }),
+        ref: this.refContainer,
+        onClick: this.isNarrow && !this.isOpen ? this.onMenuOpen : void 0
+      },
+      this.isNarrow ? this.renderNarrow() : this.renderWide()
+    );
+  }
+};
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "onResize", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "populateLocalEntity", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "prepareOptionGroups", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "updateURL", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "updateSelection", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "onChange", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "updateAllGraphersAndExplorersOnPage", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "onRemove", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "onMenuOpen", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "onMenuClose", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "onButtonOpen", 1);
+__decorateClass([
+  action.bound
+], GlobalEntitySelector.prototype, "onButtonClose", 1);
+__decorateClass([
+  computed
+], GlobalEntitySelector.prototype, "selectedOptions", 1);
+GlobalEntitySelector = __decorateClass([
+  observer
+], GlobalEntitySelector);
+const hydrateGlobalEntitySelectorIfAny = (selection, graphersAndExplorersToUpdate) => {
+  const element = document.querySelector(GLOBAL_ENTITY_SELECTOR_ELEMENT);
+  if (!element) return;
+  ReactDOM.hydrateRoot(
+    element,
+    /* @__PURE__ */ React.createElement(
+      GlobalEntitySelector,
+      {
+        selection,
+        graphersAndExplorersToUpdate
+      }
+    )
+  );
+};
+const entityNameToOption = (label) => ({
+  label,
+  value: label
+});
+export {
+  GlobalEntitySelector,
+  hydrateGlobalEntitySelectorIfAny
+};

package/dist/grapher/controls/globalEntitySelector/GlobalEntitySelector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/globalEntitySelector/GlobalEntitySelector.tsx"],
+  "sourcesContent": ["import * as _ from \"lodash-es\"\nimport * as React from \"react\"\nimport ReactDOM from \"react-dom/client\"\nimport {\n    action,\n    observable,\n    IReactionDisposer,\n    reaction,\n    computed,\n    makeObservable,\n} from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport Select, {\n    components,\n    CSSObjectWithLabel,\n    GroupBase,\n    OptionProps,\n    Props,\n} from \"react-select\"\nimport classnames from \"classnames\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { faTimes } from \"@fortawesome/free-solid-svg-icons\"\nimport {\n    countries,\n    getUserCountryInformation,\n    getWindowUrl,\n    setWindowUrl,\n    lazy,\n    RegionType,\n} from \"../../../utils/index.js\"\nimport { GrapherAnalytics } from \"../../core/GrapherAnalytics.js\"\nimport { WORLD_ENTITY_NAME } from \"../../core/GrapherConstants.js\"\nimport { GLOBAL_ENTITY_SELECTOR_ELEMENT } from \"./GlobalEntitySelectorConstants.js\"\nimport { SelectionArray } from \"../../selection/SelectionArray.js\"\nimport { EntityName } from \"../../../types/index.js\"\nimport { setSelectedEntityNamesParam } from \"../../core/EntityUrlBuilder.js\"\n\nenum GlobalEntitySelectionModes {\n    none = \"none\",\n    // Possibly might need the `add` state in the future to\n    // add country from geolocation without clearing others.\n    // One thing to figure out is what its behaviour should\n    // be for single-entity charts.\n\n    // add = \"add\",\n    override = \"override\",\n}\n\ninterface DropdownEntity {\n    label: string\n    value: string\n}\n\nconst getAllEntitiesSortedWithWorld = lazy(() =>\n    _.sortBy(countries, (c) => c.name)\n        // Add 'World'\n        .concat([\n            {\n                name: WORLD_ENTITY_NAME,\n                code: \"WRL\",\n                slug: \"world\",\n                regionType: RegionType.Other,\n            },\n        ])\n)\n\nconst Option = (\n    props: OptionProps<DropdownEntity, true, any>\n): React.ReactElement => {\n    return (\n        <div>\n            <components.Option {...props}>\n                <input type=\"checkbox\" checked={props.isSelected} readOnly />{\" \"}\n                <label>{props.label}</label>\n            </components.Option>\n        </div>\n    )\n}\n\nconst SelectOptions: Props<DropdownEntity, true, any> = {\n    components: {\n        IndicatorSeparator: null,\n        Option,\n    },\n    menuPlacement: \"bottom\",\n    isClearable: false,\n    isMulti: true,\n    backspaceRemovesValue: false,\n    blurInputOnSelect: false,\n    closeMenuOnSelect: false,\n    controlShouldRenderValue: false,\n    hideSelectedOptions: false,\n    placeholder: \"Add a country to all charts...\",\n    styles: {\n        placeholder: (base: CSSObjectWithLabel): CSSObjectWithLabel => ({\n            ...base,\n            whiteSpace: \"nowrap\",\n        }),\n        valueContainer: (base: CSSObjectWithLabel): CSSObjectWithLabel => ({\n            ...base,\n            paddingTop: 0,\n            paddingBottom: 0,\n        }),\n        control: (base: CSSObjectWithLabel): CSSObjectWithLabel => ({\n            ...base,\n            minHeight: \"initial\",\n        }),\n        dropdownIndicator: (base: CSSObjectWithLabel): CSSObjectWithLabel => ({\n            ...base,\n            padding: \"0 5px\",\n        }),\n    },\n}\n\nfunction SelectedItems(props: {\n    selectedEntityNames: EntityName[]\n    emptyLabel: string\n    canRemove?: boolean\n    onRemove?: (item: EntityName) => void\n}): React.ReactElement {\n    const canRemove = (props.canRemove ?? true) && props.onRemove !== undefined\n    const onRemove = props.onRemove || _.noop\n    const isEmpty = props.selectedEntityNames.length === 0\n    return (\n        <div className=\"selected-items-container\">\n            {isEmpty ? (\n                <div className=\"empty\">{props.emptyLabel}</div>\n            ) : (\n                <div className=\"selected-items\">\n                    {props.selectedEntityNames.map((entityName) => (\n                        <div\n                            key={entityName}\n                            className={classnames(\"selected-item\", {\n                                removable: canRemove,\n                            })}\n                        >\n                            <div className=\"label\">{entityName}</div>\n                            {canRemove && (\n                                <div\n                                    className=\"remove-icon\"\n                                    onClick={(): void => onRemove(entityName)}\n                                >\n                                    <FontAwesomeIcon icon={faTimes} />\n                                </div>\n                            )}\n                        </div>\n                    ))}\n                </div>\n            )}\n        </div>\n    )\n}\n\ninterface GlobalEntitySelectorProps {\n    selection: SelectionArray\n    graphersAndExplorersToUpdate?: Set<SelectionArray>\n    environment?: string\n}\n\n@observer\nexport class GlobalEntitySelector extends React.Component<GlobalEntitySelectorProps> {\n    refContainer = React.createRef<HTMLDivElement>()\n    disposers: IReactionDisposer[] = []\n\n    mode = GlobalEntitySelectionModes.none\n\n    private isNarrow = true\n    private isOpen = false\n    private localEntityName: EntityName | undefined\n\n    selection = this.props.selection\n\n    private optionGroups: GroupBase<DropdownEntity>[] = []\n\n    constructor(props: GlobalEntitySelectorProps) {\n        super(props)\n\n        makeObservable<\n            GlobalEntitySelector,\n            | \"isNarrow\"\n            | \"isOpen\"\n            | \"localEntityName\"\n            | \"optionGroups\"\n            | \"onResizeThrottled\"\n        >(this, {\n            mode: observable,\n            isNarrow: observable,\n            isOpen: observable,\n            localEntityName: observable,\n            optionGroups: observable.ref,\n            onResizeThrottled: action.bound,\n        })\n    }\n\n    override componentDidMount(): void {\n        this.onResize()\n        window.addEventListener(\"resize\", this.onResizeThrottled)\n        this.disposers.push(\n            reaction(\n                () => this.isOpen,\n                () => this.prepareOptionGroups()\n            )\n        )\n        void this.populateLocalEntity()\n    }\n\n    override componentWillUnmount(): void {\n        window.removeEventListener(\"resize\", this.onResizeThrottled)\n        this.disposers.forEach((dispose): void => dispose())\n    }\n\n    private onResizeThrottled = _.throttle(this.onResize, 200)\n    @action.bound private onResize(): void {\n        const container = this.refContainer.current\n        if (container) this.isNarrow = container.offsetWidth <= 640\n    }\n\n    @action.bound async populateLocalEntity(): Promise<void> {\n        try {\n            const localCountryCode = await getUserCountryInformation()\n            if (!localCountryCode) return\n\n            const country = getAllEntitiesSortedWithWorld().find(\n                (entity): boolean => entity.code === localCountryCode.code\n            )\n            if (country) this.localEntityName = country.name\n        } catch {\n            // ignore\n        }\n    }\n\n    @action.bound private prepareOptionGroups(): GroupBase<DropdownEntity>[] {\n        let optionGroups: GroupBase<DropdownEntity>[] = []\n        // We want to include the local country, but not if it's already selected, it adds\n        // unnecessary duplication.\n        if (\n            this.localEntityName &&\n            !this.selection.selectedSet.has(this.localEntityName)\n        ) {\n            optionGroups = optionGroups.concat([\n                {\n                    label: \"Suggestions\",\n                    options: [entityNameToOption(this.localEntityName)],\n                },\n            ])\n        }\n        if (this.selection.hasSelection) {\n            optionGroups = optionGroups.concat([\n                {\n                    label: \"Selected\",\n                    options:\n                        this.selection.selectedEntityNames.map(\n                            entityNameToOption\n                        ),\n                },\n            ])\n        }\n        optionGroups = optionGroups.concat([\n            {\n                label: \"All countries\",\n                options: getAllEntitiesSortedWithWorld()\n                    .map((entity) => entity.name)\n                    .map(entityNameToOption),\n            },\n        ])\n        this.optionGroups = optionGroups\n        return optionGroups\n    }\n\n    private analytics = new GrapherAnalytics(\n        this.props.environment ?? \"development\"\n    )\n\n    @action.bound private updateURL(): void {\n        setWindowUrl(\n            setSelectedEntityNamesParam(\n                getWindowUrl(),\n                this.selection.selectedEntityNames\n            )\n        )\n    }\n\n    @action.bound updateSelection(newSelectedEntities: string[]): void {\n        this.selection.setSelectedEntities(newSelectedEntities)\n        this.updateAllGraphersAndExplorersOnPage()\n        this.updateURL()\n    }\n\n    @action.bound private onChange(options: readonly DropdownEntity[]): void {\n        this.updateSelection(\n            options.map((option: DropdownEntity) => option.label)\n        )\n\n        this.analytics.logGlobalEntitySelector(\n            \"change\",\n            this.selection.selectedEntityNames.join(\",\")\n        )\n    }\n\n    @action.bound private updateAllGraphersAndExplorersOnPage(): void {\n        if (!this.props.graphersAndExplorersToUpdate) return\n        Array.from(this.props.graphersAndExplorersToUpdate.values()).forEach(\n            (value) => {\n                value.setSelectedEntities(this.selection.selectedEntityNames)\n            }\n        )\n    }\n\n    @action.bound private onRemove(option: EntityName): void {\n        this.selection.toggleSelection(option)\n        this.updateAllGraphersAndExplorersOnPage()\n        this.updateURL()\n    }\n\n    @action.bound private onMenuOpen(): void {\n        this.isOpen = true\n    }\n\n    @action.bound private onMenuClose(): void {\n        this.isOpen = false\n    }\n\n    @action.bound private onButtonOpen(\n        event: React.MouseEvent<HTMLButtonElement>\n    ): void {\n        this.analytics.logGlobalEntitySelector(\n            \"open\",\n            event.currentTarget.innerText\n        )\n        this.onMenuOpen()\n    }\n\n    @action.bound private onButtonClose(\n        event: React.MouseEvent<HTMLButtonElement>\n    ): void {\n        this.analytics.logGlobalEntitySelector(\n            \"close\",\n            event.currentTarget.innerText\n        )\n        this.onMenuClose()\n    }\n\n    @computed private get selectedOptions(): DropdownEntity[] {\n        return this.selection.selectedEntityNames.map(entityNameToOption)\n    }\n\n    private renderNarrow(): React.ReactElement {\n        return (\n            <>\n                <div\n                    className={classnames(\"narrow-summary\", {\n                        \"narrow-summary-selected-items\": !this.isOpen,\n                    })}\n                >\n                    {this.isOpen ? (\n                        <Select\n                            {...SelectOptions}\n                            options={this.optionGroups}\n                            value={this.selectedOptions}\n                            onChange={this.onChange}\n                            menuIsOpen={this.isOpen}\n                            autoFocus={true}\n                        />\n                    ) : (\n                        <div>\n                            {!this.selection.hasSelection\n                                ? \"None selected\"\n                                : this.selection.selectedEntityNames\n                                      .map((entityName) => (\n                                          <span\n                                              className=\"narrow-summary-selected-item\"\n                                              key={entityName}\n                                          >\n                                              {entityName}\n                                          </span>\n                                      ))\n                                      .reduce(\n                                          (acc, item) =>\n                                              acc.length === 0\n                                                  ? [item]\n                                                  : [...acc, \", \", item],\n                                          [] as (React.ReactElement | string)[]\n                                      )}\n                        </div>\n                    )}\n                </div>\n                <div className=\"narrow-actions\">\n                    {this.isOpen ? (\n                        <button className=\"button\" onClick={this.onButtonClose}>\n                            Done\n                        </button>\n                    ) : (\n                        <button className=\"button\" onClick={this.onButtonOpen}>\n                            {!this.selection.hasSelection\n                                ? \"Select countries\"\n                                : \"Edit\"}\n                        </button>\n                    )}\n                </div>\n            </>\n        )\n    }\n\n    private renderWide(): React.ReactElement {\n        return (\n            <>\n                <div className=\"select-dropdown-container\">\n                    <Select\n                        {...SelectOptions}\n                        options={this.optionGroups}\n                        onChange={this.onChange}\n                        value={this.selectedOptions}\n                        onMenuOpen={this.onMenuOpen}\n                        onMenuClose={this.onMenuClose}\n                    />\n                </div>\n                <SelectedItems\n                    selectedEntityNames={this.selection.selectedEntityNames}\n                    onRemove={this.onRemove}\n                    emptyLabel=\"Select countries to show on all charts\"\n                />\n            </>\n        )\n    }\n\n    override render(): React.ReactElement {\n        return (\n            <div\n                className={classnames(\"global-entity-control\", {\n                    \"is-narrow\": this.isNarrow,\n                    \"is-wide\": !this.isNarrow,\n                })}\n                ref={this.refContainer}\n                onClick={\n                    this.isNarrow && !this.isOpen ? this.onMenuOpen : undefined\n                }\n            >\n                {this.isNarrow ? this.renderNarrow() : this.renderWide()}\n            </div>\n        )\n    }\n}\n\nexport const hydrateGlobalEntitySelectorIfAny = (\n    selection: SelectionArray,\n    graphersAndExplorersToUpdate: Set<SelectionArray>\n): void => {\n    const element = document.querySelector(GLOBAL_ENTITY_SELECTOR_ELEMENT)\n    if (!element) return\n\n    ReactDOM.hydrateRoot(\n        element,\n        <GlobalEntitySelector\n            selection={selection}\n            graphersAndExplorersToUpdate={graphersAndExplorersToUpdate}\n        />\n    )\n}\n\nconst entityNameToOption = (label: EntityName): DropdownEntity => ({\n    label,\n    value: label,\n})\n"],
+  "mappings": "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",
+  "names": ["GlobalEntitySelectionModes"]
+}

package/dist/grapher/controls/globalEntitySelector/GlobalEntitySelectorConstants.d.ts

@@ -0,0 +1,4 @@
+export declare const GLOBAL_ENTITY_SELECTOR_DATA_ATTR = "data-global-entity-control";
+export declare const GLOBAL_ENTITY_SELECTOR_ELEMENT = "*[data-global-entity-control]";
+export declare const GLOBAL_ENTITY_SELECTOR_DEFAULT_COUNTRY = "data-default-country";
+//# sourceMappingURL=GlobalEntitySelectorConstants.d.ts.map

package/dist/grapher/controls/globalEntitySelector/GlobalEntitySelectorConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalEntitySelectorConstants.d.ts","sourceRoot":"","sources":["../../../../src/grapher/controls/globalEntitySelector/GlobalEntitySelectorConstants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gCAAgC,+BAA+B,CAAA;AAC5E,eAAO,MAAM,8BAA8B,kCAA2C,CAAA;AACtF,eAAO,MAAM,sCAAsC,yBAAyB,CAAA"}