@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/entitySelector/EntitySelector.js

@@ -0,0 +1,1334 @@
+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 { observer } from "mobx-react";
+import {
+  computed,
+  action,
+  reaction,
+  when,
+  makeObservable
+} from "mobx";
+import cx from "classnames";
+import a from "indefinite";
+import {
+  isTouchDevice,
+  SortOrder,
+  isFiniteWithGuard,
+  getUserCountryInformation,
+  regions,
+  Tippy,
+  excludeUndefined,
+  FuzzySearch,
+  getUserNavigatorLanguagesNonEnglish,
+  getRegionAlternativeNames,
+  convertDaysSinceEpochToDate,
+  checkIsIncomeGroupName,
+  checkHasMembers,
+  getRegionByName,
+  makeSafeForCSS
+} from "../../utils/index.js";
+import {
+  Checkbox,
+  RadioButton,
+  OverlayHeader
+} from "../../components/index.js";
+import {
+  faLocationArrow,
+  faArrowRightArrowLeft,
+  faFilter
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Flipper, Flipped } from "react-flip-toolkit";
+import {
+  combineHistoricalAndProjectionColumns,
+  makeSelectionArray
+} from "../chart/ChartUtils.js";
+import {
+  DEFAULT_GRAPHER_ENTITY_TYPE,
+  DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL,
+  POPULATION_INDICATOR_ID_USED_IN_ENTITY_SELECTOR,
+  GDP_PER_CAPITA_INDICATOR_ID_USED_IN_ENTITY_SELECTOR,
+  isPopulationVariableETLPath,
+  isWorldEntityName
+} from "../core/GrapherConstants.js";
+import { SortIcon } from "../controls/SortIcon.js";
+import { Dropdown } from "../controls/Dropdown.js";
+import { scaleLinear } from "d3-scale";
+import { buildVariableTable } from "../core/LegacyToChartsTable.js";
+import { DrawerContext } from "../slideInDrawer/SlideInDrawer.js";
+import * as R from "remeda";
+import { MapConfig } from "../mapCharts/MapConfig.js";
+import { match } from "ts-pattern";
+import {
+  entityRegionTypeLabels,
+  isAggregateSource
+} from "../core/EntitiesByRegionType.js";
+import { SearchField } from "../controls/SearchField.js";
+import { MAP_REGION_LABELS } from "../mapCharts/MapChartConstants.js";
+const EXTERNAL_SORT_INDICATOR_DEFINITIONS = [
+  {
+    key: "population",
+    label: "Population",
+    indicatorId: POPULATION_INDICATOR_ID_USED_IN_ENTITY_SELECTOR,
+    slug: indicatorIdToSlug(
+      POPULATION_INDICATOR_ID_USED_IN_ENTITY_SELECTOR
+    ),
+    // checks if a column has population data
+    isMatch: (column) => {
+      const externalSlug = indicatorIdToSlug(
+        POPULATION_INDICATOR_ID_USED_IN_ENTITY_SELECTOR
+      );
+      if (column.slug === externalSlug) return true;
+      return isPopulationVariableETLPath(
+        column.def?.catalogPath ?? ""
+      );
+    }
+  },
+  {
+    key: "gdpPerCapita",
+    label: "GDP per capita (int. $)",
+    indicatorId: GDP_PER_CAPITA_INDICATOR_ID_USED_IN_ENTITY_SELECTOR,
+    slug: indicatorIdToSlug(
+      GDP_PER_CAPITA_INDICATOR_ID_USED_IN_ENTITY_SELECTOR
+    ),
+    // checks if a column has GDP per capita data
+    isMatch: (column) => {
+      const externalSlug = indicatorIdToSlug(
+        GDP_PER_CAPITA_INDICATOR_ID_USED_IN_ENTITY_SELECTOR
+      );
+      if (column.slug === externalSlug) return true;
+      const label = getTitleForSortColumnLabel(column);
+      const potentialMatches = label.match(/\(.*?\)|(\bgdp per capita\b)/gi) ?? [];
+      const matches = potentialMatches.filter(
+        (match2) => !match2.includes("(")
+      );
+      return matches.length > 0;
+    }
+  }
+];
+const regionNamesSet = new Set(regions.map((region) => region.name));
+let EntitySelector = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.scrollableContainer = React.createRef();
+    this.searchFieldRef = React.createRef();
+    this.contentRef = React.createRef();
+    this.sortConfigByName = {
+      slug: this.table.entityNameSlug,
+      order: SortOrder.asc
+    };
+    this.disposers = [];
+    makeObservable(this);
+  }
+  componentDidMount() {
+    void this.populateLocalEntities();
+    if (this.props.autoFocus && !isTouchDevice())
+      this.searchFieldRef.current?.focus();
+    this.disposers.push(
+      reaction(
+        () => this.searchInput,
+        () => {
+          if (this.scrollableContainer.current)
+            this.scrollableContainer.current.scrollTop = 0;
+        }
+      )
+    );
+    this.disposers.push(
+      when(
+        () => !!this.manager.isReady,
+        () => this.initSortConfig()
+      )
+    );
+    this.disposers.push(
+      reaction(
+        () => this.sortOptions,
+        () => this.updateSortConfigIfOptionHasBecomeUnavailable()
+      )
+    );
+  }
+  componentWillUnmount() {
+    if (this.timeoutId) clearTimeout(this.timeoutId);
+    this.disposers.forEach((dispose) => dispose());
+  }
+  set(newState) {
+    const correctedState = { ...newState };
+    if (newState.sortConfig !== void 0) {
+      const correctedSortConfig = { ...newState.sortConfig };
+      const shouldBeSortedByName = newState.sortConfig.slug === this.table.entityNameSlug;
+      if (shouldBeSortedByName && !this.isSortedByName) {
+        correctedSortConfig.order = SortOrder.asc;
+      }
+      if (!shouldBeSortedByName && this.isSortedByName) {
+        correctedSortConfig.order = SortOrder.desc;
+      }
+      correctedState.sortConfig = correctedSortConfig;
+    }
+    this.manager.entitySelectorState = {
+      ...this.manager.entitySelectorState,
+      ...correctedState
+    };
+  }
+  getDefaultSortConfig() {
+    const chartIndicatorSortOptions = this.sortOptions.filter(
+      (option) => option.type === "chart-indicator"
+    );
+    if (chartIndicatorSortOptions.length === 1) {
+      const { slug } = chartIndicatorSortOptions[0];
+      this.setInterpolatedSortColumnBySlug(slug);
+      return { slug, order: SortOrder.desc };
+    }
+    return this.sortConfigByName;
+  }
+  updateSortConfigIfOptionHasBecomeUnavailable() {
+    if (!this.manager.isReady) return;
+    if (!this.manager.activeColumnSlugs?.length) return;
+    if (!this.sortOptions.find(
+      (option) => option.slug === this.sortConfig.slug
+    )) {
+      this.set({ sortConfig: this.getDefaultSortConfig() });
+    }
+  }
+  initSortConfig() {
+    this.set({ sortConfig: this.getDefaultSortConfig() });
+  }
+  resetInterpolatedMapColumn() {
+    const { mapColumnSlug } = this.manager;
+    const sortSlug = this.sortConfig.slug;
+    if (!mapColumnSlug || !this.interpolatedSortColumnsBySlug[mapColumnSlug])
+      return;
+    if (sortSlug === mapColumnSlug) {
+      this.setInterpolatedSortColumn(
+        this.interpolateSortColumn(mapColumnSlug)
+      );
+    } else {
+      delete this.manager.entitySelectorState.interpolatedSortColumnsBySlug?.[mapColumnSlug];
+    }
+  }
+  async populateLocalEntities() {
+    try {
+      const localCountryInfo = await getUserCountryInformation();
+      if (!localCountryInfo) return;
+      const countryRegionsWithoutIncomeGroups = localCountryInfo.regions ? localCountryInfo.regions.filter(
+        (region) => !checkIsIncomeGroupName(region)
+      ) : [];
+      const userEntityCodes = [
+        localCountryInfo.code,
+        ...countryRegionsWithoutIncomeGroups
+      ];
+      const userRegions = regions.filter(
+        (region) => userEntityCodes.includes(region.code)
+      );
+      const sortedUserRegions = _.sortBy(
+        userRegions,
+        (region) => userEntityCodes.indexOf(region.code)
+      );
+      const localEntityNames = sortedUserRegions.map(
+        (region) => region.name
+      );
+      if (localEntityNames) this.set({ localEntityNames });
+    } catch {
+    }
+  }
+  setInterpolatedSortColumn(column) {
+    this.set({
+      interpolatedSortColumnsBySlug: {
+        ...this.interpolatedSortColumnsBySlug,
+        [column.slug]: column
+      }
+    });
+  }
+  setIsProjectionForSlug(slug, valuesByTimeAndEntityName) {
+    const { isProjectionBySlugAndTimeAndEntityName } = this;
+    isProjectionBySlugAndTimeAndEntityName.set(
+      slug,
+      valuesByTimeAndEntityName
+    );
+    this.set({ isProjectionBySlugAndTimeAndEntityName });
+  }
+  get toleranceOverride() {
+    const tolerance = this.manager.isOnMapTab ? this.mapConfig.timeTolerance : void 0;
+    const toleranceStrategy = this.manager.isOnMapTab ? this.mapConfig.toleranceStrategy : void 0;
+    return { value: tolerance, strategy: toleranceStrategy };
+  }
+  interpolateSortColumn(slug) {
+    return this.inputTable.interpolateColumnWithTolerance(slug, {
+      toleranceOverride: this.toleranceOverride.value,
+      toleranceStrategyOverride: this.toleranceOverride.strategy
+    }).get(slug);
+  }
+  interpolateAndCombineSortColumns(info) {
+    const { projectedSlug, historicalSlug } = info;
+    const table = this.table.interpolateColumnWithTolerance(historicalSlug, {
+      toleranceOverride: this.toleranceOverride.value,
+      toleranceStrategyOverride: this.toleranceOverride.strategy
+    }).interpolateColumnWithTolerance(projectedSlug, {
+      toleranceOverride: this.toleranceOverride.value,
+      toleranceStrategyOverride: this.toleranceOverride.strategy
+    });
+    return combineHistoricalAndProjectionColumns(table, info, {
+      shouldAddIsProjectionColumn: true
+    });
+  }
+  setInterpolatedSortColumnBySlug(slug) {
+    if (this.interpolatedSortColumnsBySlug[slug]) return;
+    const projectionInfo = this.projectionColumnInfoByCombinedSlug.get(slug);
+    if (projectionInfo) {
+      const table = this.interpolateAndCombineSortColumns(projectionInfo);
+      const combinedColumn = table.get(projectionInfo.combinedSlug);
+      const isProjectionValues = table.get(
+        projectionInfo.slugForIsProjectionColumn
+      ).valueByTimeAndEntityName;
+      this.setInterpolatedSortColumn(combinedColumn);
+      this.setIsProjectionForSlug(
+        projectionInfo.combinedSlug,
+        isProjectionValues
+      );
+      return;
+    }
+    const column = this.interpolateSortColumn(slug);
+    this.setInterpolatedSortColumn(column);
+  }
+  clearSearchInput() {
+    this.set({ searchInput: "" });
+  }
+  resetEntityFilter() {
+    this.set({ entityFilter: void 0 });
+  }
+  updateSortSlug(newSlug) {
+    this.set({
+      sortConfig: {
+        slug: newSlug,
+        order: this.sortConfig.order
+      }
+    });
+  }
+  toggleSortOrder() {
+    const newOrder = this.sortConfig.order === SortOrder.asc ? SortOrder.desc : SortOrder.asc;
+    this.set({
+      sortConfig: {
+        slug: this.sortConfig.slug,
+        order: newOrder
+      }
+    });
+  }
+  get chartHasDailyData() {
+    return this.numericalChartColumns.some(
+      (column) => column.display?.yearIsDay
+    );
+  }
+  /**
+   * Converts the given time to be compatible with the time format
+   * of the given column.
+   *
+   * This is necessary for external sort indicators when they're loaded
+   * for charts with daily data.
+   */
+  toColumnCompatibleTime(time, column) {
+    const isExternal = this.externalSortIndicatorDefinitions.some(
+      (external) => column.slug === external.slug
+    );
+    if (!isExternal) return time;
+    const year = this.chartHasDailyData ? convertDaysSinceEpochToDate(time).year() : time;
+    return R.clamp(year, { min: column.minTime, max: column.maxTime });
+  }
+  formatTimeForSortColumnLabel(time, column) {
+    const compatibleTime = this.toColumnCompatibleTime(time, column);
+    return column.formatTime(compatibleTime);
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get endTime() {
+    return this.manager.endTime ?? this.table.maxTime;
+  }
+  get mapConfig() {
+    return this.manager.mapConfig ?? new MapConfig();
+  }
+  isEntityMuted(entityName) {
+    return this.manager.isEntityMutedInSelector?.(entityName) ?? false;
+  }
+  get title() {
+    return this.manager.isOnMapTab ? `Select ${this.entityType.plural}` : this.manager.canHighlightEntities ? `Select ${this.entityType.plural}` : this.manager.canChangeEntity ? `Choose ${a(this.entityType.singular)}` : `Add/remove ${this.entityType.plural}`;
+  }
+  get searchPlaceholderEntityType() {
+    if (isAggregateSource(this.entityFilter)) return "region";
+    return match(this.entityFilter).with("all", () => this.entityType.singular).with("countries", () => "country").with("continents", () => "continent").with("incomeGroups", () => "income group").with("historicalCountries", () => "country or region").exhaustive();
+  }
+  get searchInput() {
+    return this.manager.entitySelectorState.searchInput ?? "";
+  }
+  get sortConfig() {
+    return this.manager.entitySelectorState.sortConfig ?? this.sortConfigByName;
+  }
+  isSortSlugValid(slug) {
+    return this.sortOptions.some((option) => option.value === slug);
+  }
+  isEntityFilterValid(entityFilter) {
+    return this.filterOptions.some(
+      (option) => option.value === entityFilter
+    );
+  }
+  get entityFilter() {
+    return this.manager.entitySelectorState.entityFilter ?? this.filterOptions[0]?.value ?? "all";
+  }
+  get localEntityNames() {
+    return this.manager.entitySelectorState.localEntityNames;
+  }
+  get interpolatedSortColumnsBySlug() {
+    return this.manager.entitySelectorState.interpolatedSortColumnsBySlug ?? {};
+  }
+  get isProjectionBySlugAndTimeAndEntityName() {
+    return this.manager.entitySelectorState.isProjectionBySlugAndTimeAndEntityName ?? /* @__PURE__ */ new Map();
+  }
+  get interpolatedSortColumns() {
+    return Object.values(this.interpolatedSortColumnsBySlug);
+  }
+  get isLoadingExternalSortColumn() {
+    return this.manager.entitySelectorState.isLoadingExternalSortColumn ?? false;
+  }
+  get inputTable() {
+    return this.manager.table;
+  }
+  get table() {
+    return this.manager.tableForSelection;
+  }
+  get someEntitiesAreRegions() {
+    if (!this.entitiesAreCountriesOrRegions) return false;
+    return this.availableEntities.some(
+      (entity) => checkHasMembers(entity.regionInfo)
+    );
+  }
+  get entitiesAreCountriesOrRegions() {
+    return this.availableEntityNames.some(
+      (entityName) => regionNamesSet.has(entityName) && !isWorldEntityName(entityName)
+    );
+  }
+  get supportsSortingByExternalIndicators() {
+    if (!this.manager.additionalDataLoaderFn) return false;
+    return this.entitiesAreCountriesOrRegions;
+  }
+  get numericalChartColumns() {
+    const {
+      activeColumnSlugs = [],
+      mapColumnSlug,
+      isOnMapTab
+    } = this.manager;
+    const activeSlugs = isOnMapTab ? [mapColumnSlug] : activeColumnSlugs;
+    return activeSlugs.map((slug) => this.table.get(slug)).filter((column) => column.hasNumberFormatting);
+  }
+  get chartColumnsByExternalSortIndicatorKey() {
+    const matchingColumns = {};
+    for (const external of EXTERNAL_SORT_INDICATOR_DEFINITIONS) {
+      const matchingColumn = this.numericalChartColumns.find(
+        (column) => external.isMatch(column)
+      );
+      if (matchingColumn) matchingColumns[external.key] = matchingColumn;
+    }
+    return matchingColumns;
+  }
+  get externalSortIndicatorDefinitions() {
+    if (!this.supportsSortingByExternalIndicators) return [];
+    const matchingKeys = Object.keys(
+      this.chartColumnsByExternalSortIndicatorKey
+    );
+    return EXTERNAL_SORT_INDICATOR_DEFINITIONS.filter(
+      (external) => !matchingKeys.includes(external.key)
+    );
+  }
+  get projectionColumnInfoByCombinedSlug() {
+    if (!this.manager.projectionColumnInfoBySlug) return /* @__PURE__ */ new Map();
+    const projectionColumnInfoByCombinedSlug = /* @__PURE__ */ new Map();
+    for (const info of this.manager.projectionColumnInfoBySlug.values()) {
+      projectionColumnInfoByCombinedSlug.set(info.combinedSlug, info);
+    }
+    return projectionColumnInfoByCombinedSlug;
+  }
+  combinedColumnHasHistoricalDataForTime(slug, time) {
+    const isProjectionByTimeAndEntityName = this.isProjectionBySlugAndTimeAndEntityName.get(slug);
+    if (!isProjectionByTimeAndEntityName) return null;
+    const values = isProjectionByTimeAndEntityName.get(time)?.values() ?? [];
+    return Array.from(values)?.some((isProjection) => !isProjection);
+  }
+  makeSortColumnLabelForCombinedColumn(info, time) {
+    const { table, isProjectionBySlugAndTimeAndEntityName } = this;
+    const projectedLabel = getTitleForSortColumnLabel(
+      table.get(info.projectedSlug)
+    );
+    const historicalLabel = getTitleForSortColumnLabel(
+      table.get(info.historicalSlug)
+    );
+    const hasHistoricalDataForTime = this.combinedColumnHasHistoricalDataForTime(info.combinedSlug, time);
+    if (hasHistoricalDataForTime === null) {
+      const arbitrarySlug = isProjectionBySlugAndTimeAndEntityName.keys().next().value;
+      if (arbitrarySlug) {
+        const hasHistoricalValues = this.combinedColumnHasHistoricalDataForTime(
+          arbitrarySlug,
+          time
+        );
+        return hasHistoricalValues ? historicalLabel : projectedLabel;
+      }
+      return projectedLabel;
+    }
+    return hasHistoricalDataForTime ? historicalLabel : projectedLabel;
+  }
+  get sortOptions() {
+    let options = [];
+    options.push({
+      type: "name",
+      value: this.table.entityNameSlug,
+      slug: this.table.entityNameSlug,
+      label: "Name"
+    });
+    if (this.supportsSortingByExternalIndicators) {
+      EXTERNAL_SORT_INDICATOR_DEFINITIONS.forEach((external) => {
+        const chartColumn = this.chartColumnsByExternalSortIndicatorKey[external.key];
+        if (chartColumn) {
+          options.push({
+            type: "chart-indicator",
+            value: chartColumn.slug,
+            slug: chartColumn.slug,
+            label: getTitleForSortColumnLabel(chartColumn),
+            formattedTime: this.formatTimeForSortColumnLabel(
+              this.endTime,
+              chartColumn
+            )
+          });
+        } else {
+          const column = this.interpolatedSortColumnsBySlug[external.slug];
+          options.push({
+            type: "external-indicator",
+            value: external.slug,
+            slug: external.slug,
+            label: external.label,
+            formattedTime: column ? this.formatTimeForSortColumnLabel(
+              this.endTime,
+              column
+            ) : void 0
+          });
+        }
+      });
+    }
+    const matchingSlugs = Object.values(
+      this.chartColumnsByExternalSortIndicatorKey
+    ).map((column) => column.slug);
+    const columns = this.numericalChartColumns.filter(
+      (column) => !matchingSlugs.includes(column.slug)
+    );
+    const slugsToExclude = /* @__PURE__ */ new Set();
+    for (const column of columns) {
+      const formattedTime = this.formatTimeForSortColumnLabel(
+        this.endTime,
+        column
+      );
+      const projectionInfo = this.manager.projectionColumnInfoBySlug?.get(
+        column.slug
+      );
+      if (projectionInfo) {
+        const time = this.toColumnCompatibleTime(this.endTime, column);
+        const label = this.makeSortColumnLabelForCombinedColumn(
+          projectionInfo,
+          time
+        );
+        options.push({
+          type: "chart-indicator",
+          value: projectionInfo.combinedSlug,
+          slug: projectionInfo.combinedSlug,
+          label,
+          formattedTime
+        });
+        slugsToExclude.add(projectionInfo.historicalSlug);
+      } else {
+        options.push({
+          type: "chart-indicator",
+          value: column.slug,
+          slug: column.slug,
+          label: getTitleForSortColumnLabel(column),
+          formattedTime
+        });
+      }
+    }
+    options = options.filter((option) => !slugsToExclude.has(option.value));
+    return options;
+  }
+  get sortValue() {
+    return this.sortOptions.find(
+      (option) => option.slug === this.sortConfig.slug
+    ) ?? null;
+  }
+  isEntityNameSlug(slug) {
+    return slug === this.table.entityNameSlug;
+  }
+  get isSortedByName() {
+    return this.isEntityNameSlug(this.sortConfig.slug);
+  }
+  get entityType() {
+    const entitiesAreCountriesOrRegions = this.manager.isOnMapTab || !this.manager.entityType && this.entitiesAreCountriesOrRegions;
+    if (entitiesAreCountriesOrRegions)
+      return this.someEntitiesAreRegions ? {
+        singular: "country or region",
+        plural: "countries and regions"
+      } : { singular: "country", plural: "countries" };
+    return {
+      singular: this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE,
+      plural: this.manager.entityTypePlural ?? DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL
+    };
+  }
+  get selectionArray() {
+    return makeSelectionArray(
+      this.props.selection ?? this.manager.selection
+    );
+  }
+  get allEntitiesSelected() {
+    return this.selectionArray.numSelectedEntities === this.availableEntityNames.length;
+  }
+  get availableEntityNames() {
+    return this.table.availableEntityNames;
+  }
+  get availableEntityNameSet() {
+    return this.table.availableEntityNameSet;
+  }
+  get availableEntities() {
+    const langs = getUserNavigatorLanguagesNonEnglish();
+    return this.availableEntityNames.map((entityName) => {
+      const searchableEntity = {
+        name: entityName,
+        sortColumnValues: {},
+        alternativeNames: getRegionAlternativeNames(entityName, langs),
+        regionInfo: getRegionByName(entityName)
+      };
+      if (this.localEntityNames) {
+        searchableEntity.isLocal = this.localEntityNames.includes(entityName);
+      }
+      for (const column of this.interpolatedSortColumns) {
+        const time = this.toColumnCompatibleTime(this.endTime, column);
+        const projectionInfo = this.projectionColumnInfoByCombinedSlug.get(column.slug);
+        if (projectionInfo) {
+          const isProjectedValue = this.isProjectionBySlugAndTimeAndEntityName?.get(projectionInfo.combinedSlug)?.get(time)?.get(entityName);
+          if (isProjectedValue) {
+            const hasHistoricalValues = this.combinedColumnHasHistoricalDataForTime(
+              projectionInfo.combinedSlug,
+              time
+            );
+            if (hasHistoricalValues) continue;
+          }
+        }
+        const row = column.dataRowByEntityNameAndTime.get(entityName)?.get(time);
+        searchableEntity.sortColumnValues[column.slug] = row?.value;
+      }
+      return searchableEntity;
+    });
+  }
+  get filteredAvailableEntities() {
+    const { availableEntities, entityFilter } = this;
+    if (entityFilter === "all")
+      return this.sortEntities(availableEntities, {
+        sortLocalsToTop: true
+      });
+    const entityNameSet = new Set(
+      this.manager.entityNamesByRegionType?.get(entityFilter) ?? []
+    );
+    const filteredAvailableEntities = availableEntities.filter(
+      (entity) => entityNameSet.has(entity.name)
+    );
+    return this.sortEntities(filteredAvailableEntities, {
+      // Sort locals and maybe World to the top if looking at the long countries list, not for others
+      sortLocalsToTop: entityFilter === "countries"
+    });
+  }
+  sortEntities(entities, options = {
+    sortLocalsToTop: true
+  }) {
+    const { sortConfig } = this;
+    const byName = (e) => e.name;
+    const byValue = (e) => e.sortColumnValues[sortConfig.slug];
+    if (this.isSortedByName) {
+      if (!options.sortLocalsToTop) {
+        return _.orderBy(entities, byName, sortConfig.order);
+      }
+      const [[worldEntity], rest] = _.partition(
+        entities,
+        (e) => isWorldEntityName(e.name)
+      );
+      const [locals, others] = _.partition(rest, (e) => e.isLocal);
+      const sortedLocals = _.sortBy(
+        locals,
+        (e) => this.localEntityNames?.indexOf(e.name)
+      );
+      const sortedOthers = _.orderBy(others, byName, sortConfig.order);
+      return excludeUndefined([
+        ...sortedLocals,
+        worldEntity,
+        ...sortedOthers
+      ]);
+    }
+    const [withValues, withoutValues] = _.partition(
+      entities,
+      (e) => isFiniteWithGuard(byValue(e))
+    );
+    let sortedWithValues;
+    if (options.sortLocalsToTop) {
+      const [localWith, otherWith] = _.partition(
+        withValues,
+        (e) => e.isLocal
+      );
+      const sortedLocalWith = _.sortBy(
+        localWith,
+        (e) => this.localEntityNames?.indexOf(e.name)
+      );
+      const sortedOtherWith = _.orderBy(
+        otherWith,
+        byValue,
+        sortConfig.order
+      );
+      sortedWithValues = excludeUndefined([
+        ...sortedLocalWith,
+        ...sortedOtherWith
+      ]);
+    } else {
+      sortedWithValues = _.orderBy(withValues, byValue, sortConfig.order);
+    }
+    const sortedWithoutValues = _.orderBy(
+      withoutValues,
+      byName,
+      SortOrder.asc
+    );
+    return [...sortedWithValues, ...sortedWithoutValues];
+  }
+  get isMultiMode() {
+    return !this.manager.canChangeEntity;
+  }
+  get fuzzy() {
+    return FuzzySearch.withKeyArray(
+      this.filteredAvailableEntities,
+      (entity) => [entity.name, ...entity.alternativeNames ?? []],
+      (entity) => entity.name
+    );
+  }
+  get searchResults() {
+    if (!this.searchInput) return void 0;
+    return this.fuzzy.search(this.searchInput);
+  }
+  get selectedEntities() {
+    const selected = this.availableEntities.filter(
+      (entity) => this.isEntitySelected(entity)
+    );
+    return this.sortEntities(selected, { sortLocalsToTop: false });
+  }
+  onTitleClick() {
+    if (this.scrollableContainer.current)
+      this.scrollableContainer.current.scrollTop = 0;
+  }
+  onSearchKeyDown(e) {
+    const { searchResults } = this;
+    if (e.key === "Enter" && searchResults && searchResults.length > 0) {
+      this.onChange(searchResults[0].name);
+      this.clearSearchInput();
+    }
+  }
+  onDeselectEntities(entityNames) {
+    for (const entityName of entityNames) {
+      this.manager.onDeselectEntity?.(entityName);
+    }
+  }
+  onChange(entityName) {
+    if (this.isMultiMode) {
+      this.selectionArray.toggleSelection(entityName);
+      if (this.selectionArray.selectedSet.has(entityName)) {
+        this.manager.onSelectEntity?.(entityName);
+        this.manager.logEntitySelectorEvent?.("select", entityName);
+      } else {
+        this.manager.onDeselectEntity?.(entityName);
+        this.manager.logEntitySelectorEvent?.("deselect", entityName);
+      }
+      if (this.selectionArray.numSelectedEntities === 0) {
+        this.manager.onClearEntities?.();
+      }
+    } else {
+      const dropEntityNames = this.selectionArray.selectedEntityNames;
+      this.selectionArray.setSelectedEntities([entityName]);
+      this.manager.onSelectEntity?.(entityName);
+      this.manager.logEntitySelectorEvent?.("select", entityName);
+      this.onDeselectEntities(dropEntityNames);
+      if (this.manager.isEntitySelectorModalOrDrawerOpen) {
+        this.timeoutId = window.setTimeout(() => this.close(), 200);
+      }
+    }
+    this.clearSearchInput();
+  }
+  onClear() {
+    const dropEntityNames = this.selectionArray.selectedEntityNames;
+    this.selectionArray.clearSelection();
+    this.onDeselectEntities(dropEntityNames);
+    this.manager.onClearEntities?.();
+    this.resetEntityFilter();
+    this.manager.logEntitySelectorEvent?.("clear");
+  }
+  async loadAndSetExternalSortColumn(external) {
+    const { slug, indicatorId } = external;
+    const { additionalDataLoaderFn } = this.manager;
+    if (this.interpolatedSortColumnsBySlug[slug]) return;
+    try {
+      this.set({ isLoadingExternalSortColumn: true });
+      if (additionalDataLoaderFn === void 0)
+        throw new Error(
+          "additionalDataLoaderFn is not set, can't load sort variables on demand"
+        );
+      const variable = await additionalDataLoaderFn(indicatorId);
+      const variableTable = buildVariableTable(variable);
+      const column = variableTable.filterByEntityNames(this.inputTable.availableEntityNames).interpolateColumnWithTolerance(slug, {
+        toleranceOverride: Infinity
+      }).get(slug);
+      if (column) this.setInterpolatedSortColumn(column);
+    } catch {
+      console.error(`Failed to load variable with id ${indicatorId}`);
+    } finally {
+      this.set({ isLoadingExternalSortColumn: false });
+    }
+  }
+  async onChangeSortSlug(selected) {
+    if (selected) {
+      const { slug } = selected;
+      const external = this.externalSortIndicatorDefinitions.find(
+        (external2) => external2.slug === slug
+      );
+      if (external) await this.loadAndSetExternalSortColumn(external);
+      if (!external && !this.isEntityNameSlug(slug)) {
+        this.setInterpolatedSortColumnBySlug(slug);
+      }
+      this.updateSortSlug(slug);
+      const sortByTarget = this.isEntityNameSlug(slug) ? "name" : external ? external.key : "value";
+      this.manager.logEntitySelectorEvent("sortBy", sortByTarget);
+    }
+  }
+  onChangeSortOrder() {
+    this.toggleSortOrder();
+    this.manager.logEntitySelectorEvent("sortOrder");
+  }
+  close() {
+    if (this.context.toggleDrawerVisibility) {
+      this.context.toggleDrawerVisibility();
+    } else {
+      this.manager.isEntitySelectorModalOrDrawerOpen = false;
+    }
+  }
+  get filterOptions() {
+    const { entityRegionTypeGroups = [] } = this.manager;
+    const options = entityRegionTypeGroups.map(({ regionType, entityNames }) => ({
+      value: regionType,
+      label: entityRegionTypeLabels[regionType],
+      count: entityNames.filter(
+        (entityName) => this.availableEntityNameSet.has(entityName)
+      ).length
+    })).filter(({ count }) => count > 0);
+    return [
+      {
+        value: "all",
+        label: "All",
+        count: this.availableEntities.length
+      },
+      ...options
+    ];
+  }
+  onChangeEntityFilter(selected) {
+    if (selected) {
+      const option = selected;
+      this.set({ entityFilter: option.value });
+      this.manager.logEntitySelectorEvent("filterBy", option.value);
+    }
+  }
+  get filterValue() {
+    return this.filterOptions.find(
+      (option) => option.value === this.entityFilter
+    ) ?? this.filterOptions[0];
+  }
+  get shouldShowFilterBar() {
+    return this.filterOptions.length > 1 && this.filterOptions[0].count !== this.filterOptions[1].count;
+  }
+  renderFilterBar() {
+    return /* @__PURE__ */ React.createElement("div", { className: "entity-selector__filter-bar" }, /* @__PURE__ */ React.createElement(
+      Dropdown,
+      {
+        options: this.filterOptions,
+        onChange: this.onChangeEntityFilter,
+        value: this.filterValue,
+        renderTriggerValue: renderFilterTriggerValue,
+        renderMenuOption: renderFilterMenuOption,
+        "aria-label": "Filter by type",
+        portalContainer: this.scrollableContainer.current ?? void 0
+      }
+    ));
+  }
+  renderSearchBar() {
+    return /* @__PURE__ */ React.createElement("div", { className: "entity-selector__search-bar" }, /* @__PURE__ */ React.createElement(
+      SearchField,
+      {
+        ref: this.searchFieldRef,
+        value: this.searchInput,
+        onChange: (value) => this.set({ searchInput: value }),
+        onClear: () => this.clearSearchInput(),
+        placeholder: `Search for ${a(
+          this.searchPlaceholderEntityType
+        )}`,
+        trackNote: "entity_selector_search",
+        onKeyDown: this.onSearchKeyDown
+      }
+    ));
+  }
+  renderSortBar() {
+    return /* @__PURE__ */ React.createElement("div", { className: "entity-selector__sort-bar" }, /* @__PURE__ */ React.createElement("div", { className: "entity-selector__sort-dropdown-and-button" }, /* @__PURE__ */ React.createElement(
+      Dropdown,
+      {
+        className: "entity-selector__sort-dropdown",
+        menuClassName: "entity-selector__sort-dropdown-menu",
+        options: this.sortOptions,
+        onChange: this.onChangeSortSlug,
+        value: this.sortValue,
+        isLoading: this.isLoadingExternalSortColumn,
+        renderTriggerValue: renderSortTriggerValue,
+        renderMenuOption: renderSortMenuOption,
+        "aria-label": "Sort by",
+        portalContainer: this.scrollableContainer.current ?? void 0
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "sort",
+        onClick: this.onChangeSortOrder
+      },
+      /* @__PURE__ */ React.createElement(
+        SortIcon,
+        {
+          type: this.isSortedByName ? "text" : "numeric",
+          order: this.sortConfig.order
+        }
+      )
+    )));
+  }
+  renderSearchResults() {
+    if (!this.searchResults || this.searchResults.length === 0) {
+      return /* @__PURE__ */ React.createElement("div", { className: "entity-search-results grapher_body-3-regular grapher_light" }, "There is no data for the ", this.entityType.singular, " you are looking for. You may want to try using different keywords or checking for typos.");
+    }
+    return /* @__PURE__ */ React.createElement("ul", { className: "entity-search-results" }, this.searchResults.map((entity) => /* @__PURE__ */ React.createElement("li", { key: entity.name }, /* @__PURE__ */ React.createElement(
+      SelectableEntity,
+      {
+        name: entity.name,
+        type: this.isMultiMode ? "checkbox" : "radio",
+        checked: this.isEntitySelected(entity),
+        bar: this.getBarConfigForEntity(entity),
+        onChange: this.onChange,
+        isLocal: entity.isLocal,
+        isMuted: this.isEntityMuted(entity.name)
+      }
+    ))));
+  }
+  renderAllEntitiesInSingleMode() {
+    const { filteredAvailableEntities, shouldShowFilterBar } = this;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldShowFilterBar && this.renderFilterBar(), /* @__PURE__ */ React.createElement("ul", { className: cx({ "hide-top-border": shouldShowFilterBar }) }, filteredAvailableEntities.map((entity) => /* @__PURE__ */ React.createElement("li", { key: entity.name }, /* @__PURE__ */ React.createElement(
+      SelectableEntity,
+      {
+        name: entity.name,
+        type: "radio",
+        checked: this.isEntitySelected(entity),
+        bar: this.getBarConfigForEntity(entity),
+        onChange: this.onChange,
+        isLocal: entity.isLocal,
+        isMuted: this.isEntityMuted(entity.name)
+      }
+    )))));
+  }
+  get selectedSortColumn() {
+    const { sortConfig } = this;
+    if (this.isSortedByName) return void 0;
+    return this.interpolatedSortColumnsBySlug[sortConfig.slug];
+  }
+  get selectedSortColumnMaxValue() {
+    const { selectedSortColumn, endTime } = this;
+    if (!selectedSortColumn) return void 0;
+    const time = this.toColumnCompatibleTime(endTime, selectedSortColumn);
+    const values = selectedSortColumn.valuesByTime.get(time);
+    return _.max(values);
+  }
+  get barScale() {
+    return scaleLinear().domain([0, this.selectedSortColumnMaxValue ?? 1]).range([0, 1]);
+  }
+  getBarConfigForEntity(entity) {
+    const { selectedSortColumn, barScale } = this;
+    if (!selectedSortColumn) return void 0;
+    const value = entity.sortColumnValues[selectedSortColumn.slug];
+    if (!isFiniteWithGuard(value)) return { formattedValue: "No data" };
+    const formattedValue = selectedSortColumn.formatValueShortWithAbbreviations(value);
+    if (value < 0) return { formattedValue, width: 0 };
+    return {
+      formattedValue: selectedSortColumn.formatValueShortWithAbbreviations(value),
+      width: R.clamp(barScale(value), { min: 0, max: 1 })
+    };
+  }
+  isEntitySelected(entity) {
+    return this.selectionArray.selectedSet.has(entity.name);
+  }
+  renderAllEntitiesInMultiMode() {
+    const {
+      filteredAvailableEntities,
+      selectedEntities,
+      shouldShowFilterBar
+    } = this;
+    const { numSelectedEntities, selectedEntityNames } = this.selectionArray;
+    const hasFewEntities = filteredAvailableEntities.length < 10;
+    const shouldHideAvailableEntities = !shouldShowFilterBar && hasFewEntities && this.allEntitiesSelected;
+    const availableEntitiesTitle = this.mapConfig.is2dContinentActive() ? `Countries in ${MAP_REGION_LABELS[this.mapConfig.region]}` : `All ${this.entityType.plural}`;
+    return /* @__PURE__ */ React.createElement(
+      Flipper,
+      {
+        spring: { stiffness: 300, damping: 33 },
+        flipKey: selectedEntityNames.join(",")
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "entity-section" }, selectedEntities.length > 0 && /* @__PURE__ */ React.createElement(Flipped, { flipId: "__selection", translate: true, opacity: true }, /* @__PURE__ */ React.createElement("div", { className: "entity-section__header" }, /* @__PURE__ */ React.createElement("div", { className: "entity-section__title grapher_body-3-regular-italic grapher_light" }, "Selection", " ", numSelectedEntities > 0 && `(${numSelectedEntities})`), /* @__PURE__ */ React.createElement("button", { type: "button", onClick: this.onClear }, "Clear"))), /* @__PURE__ */ React.createElement("ul", null, selectedEntities.map((entity, entityIndex) => /* @__PURE__ */ React.createElement(
+        FlippedListItem,
+        {
+          index: entityIndex,
+          key: entity.name,
+          flipId: `selected_${makeSafeForCSS(
+            entity.name
+          )}`
+        },
+        /* @__PURE__ */ React.createElement(
+          SelectableEntity,
+          {
+            name: entity.name,
+            type: "checkbox",
+            checked: true,
+            bar: this.getBarConfigForEntity(entity),
+            onChange: this.onChange,
+            isLocal: entity.isLocal,
+            isMuted: this.isEntityMuted(entity.name)
+          }
+        )
+      )))),
+      shouldShowFilterBar && /* @__PURE__ */ React.createElement(Flipped, { flipId: "__filter-bar", translate: true, opacity: true }, this.renderFilterBar()),
+      !shouldHideAvailableEntities && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cx("entity-section", {
+            "hide-top-border": shouldShowFilterBar
+          })
+        },
+        !shouldShowFilterBar && /* @__PURE__ */ React.createElement(Flipped, { flipId: "__available", translate: true, opacity: true }, /* @__PURE__ */ React.createElement("div", { className: "entity-section__title grapher_body-3-regular-italic grapher_light" }, availableEntitiesTitle)),
+        /* @__PURE__ */ React.createElement("ul", null, filteredAvailableEntities.map(
+          (entity, entityIndex) => /* @__PURE__ */ React.createElement(
+            FlippedListItem,
+            {
+              index: entityIndex,
+              key: entity.name,
+              flipId: `available_${makeSafeForCSS(
+                entity.name
+              )}`
+            },
+            /* @__PURE__ */ React.createElement(
+              SelectableEntity,
+              {
+                name: entity.name,
+                type: "checkbox",
+                checked: this.isEntitySelected(
+                  entity
+                ),
+                bar: this.getBarConfigForEntity(
+                  entity
+                ),
+                onChange: this.onChange,
+                isLocal: entity.isLocal,
+                isMuted: this.isEntityMuted(
+                  entity.name
+                )
+              }
+            )
+          )
+        ))
+      )
+    );
+  }
+  render() {
+    return /* @__PURE__ */ React.createElement("div", { className: "entity-selector" }, /* @__PURE__ */ React.createElement(
+      OverlayHeader,
+      {
+        title: this.title,
+        onTitleClick: this.onTitleClick,
+        onDismiss: this.close
+      }
+    ), this.renderSearchBar(), /* @__PURE__ */ React.createElement("div", { ref: this.scrollableContainer, className: "scrollable" }, !this.searchInput && this.sortOptions.length > 1 && this.renderSortBar(), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: this.contentRef,
+        className: "entity-selector__content"
+      },
+      this.searchInput ? this.renderSearchResults() : this.isMultiMode ? this.renderAllEntitiesInMultiMode() : this.renderAllEntitiesInSingleMode()
+    )));
+  }
+};
+EntitySelector.contextType = DrawerContext;
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "set", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "populateLocalEntities", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "toleranceOverride", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "chartHasDailyData", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "manager", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "endTime", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "mapConfig", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "title", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "searchPlaceholderEntityType", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "searchInput", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "sortConfig", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "entityFilter", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "localEntityNames", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "interpolatedSortColumnsBySlug", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "isProjectionBySlugAndTimeAndEntityName", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "interpolatedSortColumns", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "isLoadingExternalSortColumn", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "inputTable", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "table", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "someEntitiesAreRegions", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "entitiesAreCountriesOrRegions", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "supportsSortingByExternalIndicators", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "numericalChartColumns", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "chartColumnsByExternalSortIndicatorKey", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "externalSortIndicatorDefinitions", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "projectionColumnInfoByCombinedSlug", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "sortOptions", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "sortValue", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "isSortedByName", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "entityType", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "selectionArray", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "allEntitiesSelected", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "availableEntityNames", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "availableEntityNameSet", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "availableEntities", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "filteredAvailableEntities", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "isMultiMode", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "fuzzy", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "searchResults", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "selectedEntities", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "onTitleClick", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "onSearchKeyDown", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "onDeselectEntities", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "onChange", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "onClear", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "loadAndSetExternalSortColumn", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "onChangeSortSlug", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "onChangeSortOrder", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "close", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "filterOptions", 1);
+__decorateClass([
+  action.bound
+], EntitySelector.prototype, "onChangeEntityFilter", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "filterValue", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "shouldShowFilterBar", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "selectedSortColumn", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "selectedSortColumnMaxValue", 1);
+__decorateClass([
+  computed
+], EntitySelector.prototype, "barScale", 1);
+EntitySelector = __decorateClass([
+  observer
+], EntitySelector);
+function SelectableEntity({
+  name,
+  checked,
+  type,
+  bar,
+  onChange,
+  isLocal,
+  isMuted
+}) {
+  const Input = {
+    checkbox: Checkbox,
+    radio: RadioButton
+  }[type];
+  const nameWords = name.split(" ");
+  const label = isLocal ? /* @__PURE__ */ React.createElement("span", { className: "label-with-location-icon" }, nameWords.slice(0, -1).join(" "), " ", /* @__PURE__ */ React.createElement("span", { className: "label-with-location-icon label-with-location-icon--no-line-break" }, nameWords[nameWords.length - 1], /* @__PURE__ */ React.createElement(
+    Tippy,
+    {
+      content: "Your current location",
+      theme: "grapher-explanation--short",
+      placement: "top"
+    },
+    /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faLocationArrow })
+  ))) : name;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cx("selectable-entity", {
+        "selectable-entity--with-bar": bar && bar.width !== void 0,
+        "selectable-entity--muted": isMuted
+      })
+    },
+    bar && bar.width !== void 0 && /* @__PURE__ */ React.createElement("div", { className: "bar", style: { width: `${bar.width * 100}%` } }),
+    /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        label,
+        checked,
+        onChange: () => onChange(name)
+      }
+    ),
+    bar && /* @__PURE__ */ React.createElement("span", { className: "value grapher_label-1-regular" }, bar.formattedValue)
+  );
+}
+function FlippedListItem({
+  flipId,
+  index = 0,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(
+    Flipped,
+    {
+      flipId,
+      translate: true,
+      opacity: true,
+      spring: {
+        stiffness: Math.max(300 - index, 180),
+        damping: 33
+      }
+    },
+    /* @__PURE__ */ React.createElement("li", null, children)
+  );
+}
+function renderSortTriggerValue(option) {
+  if (!option) return void 0;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "label" }, /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faArrowRightArrowLeft, size: "sm" }), "Sort by: "), option.label, option.formattedTime && /* @__PURE__ */ React.createElement("span", { className: "detail" }, ", ", option.formattedTime));
+}
+function renderSortMenuOption(option) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, option.label, option.formattedTime && /* @__PURE__ */ React.createElement("span", { className: "detail" }, ", ", option.formattedTime));
+}
+function renderFilterTriggerValue(option) {
+  if (!option) return void 0;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "label" }, /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faFilter, size: "sm" }), "Filter by type: "), option.label, " ", /* @__PURE__ */ React.createElement("span", { className: "detail" }, "(", option.count, ")"));
+}
+function renderFilterMenuOption(option) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, option.label, " ", /* @__PURE__ */ React.createElement("span", { className: "detail" }, "(", option.count, ")"));
+}
+function getTitleForSortColumnLabel(column) {
+  return column.titlePublicOrDisplayName.title;
+}
+function indicatorIdToSlug(indicatorId) {
+  return indicatorId.toString();
+}
+export {
+  EntitySelector
+};