diff --git a/explorer/Explorer.tsx b/explorer/Explorer.tsx index 155a5ba4b86..4ae8052105d 100644 --- a/explorer/Explorer.tsx +++ b/explorer/Explorer.tsx @@ -952,14 +952,14 @@ export class Explorer }) private updateEntityPickerTable(): void { - if (this.entityPickerMetric) { - this.entityPickerTableIsLoading = true - this.futureEntityPickerTable.set( - this.tableLoader.get( - this.getTableSlugOfColumnSlug(this.entityPickerMetric) - ) - ) - } + // If we don't currently have a entity picker metric, then set pickerTable to the currently-used table anyways, + // so that when we start sorting by entity name we can infer that the column is a string column immediately. + const tableSlugToLoad = this.entityPickerMetric + ? this.getTableSlugOfColumnSlug(this.entityPickerMetric) + : this.explorerProgram.grapherConfig.tableSlug + + this.entityPickerTableIsLoading = true + this.futureEntityPickerTable.set(this.tableLoader.get(tableSlugToLoad)) } setEntityPicker({ @@ -1036,7 +1036,9 @@ export class Explorer ]) return allColumnDefs.filter( (def) => - def.type === undefined || !discardColumnTypes.has(def.type) + (def.type === undefined || + !discardColumnTypes.has(def.type)) && + def.slug !== undefined ) } } diff --git a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx index ee1a221c194..98179241abd 100644 --- a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx +++ b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx @@ -21,6 +21,8 @@ import { getUserCountryInformation, regions, sortBy, + upperFirst, + compact, } from "@ourworldindata/utils" import { VerticalScrollContainer } from "../../controls/VerticalScrollContainer" import { SortIcon } from "../../controls/SortIcon" @@ -120,8 +122,17 @@ export class EntityPicker extends React.Component<{ label: string value: string | undefined }[] { - return [ + const entityNameColumn = this.grapherTable?.entityNameColumn + const entityNameColumnInPickerColumnDefs = !!this.pickerColumnDefs.find( + (col) => col.slug === entityNameColumn?.slug + ) + return compact([ { label: "Relevance", value: undefined }, + !entityNameColumnInPickerColumnDefs && + entityNameColumn && { + label: upperFirst(this.manager.entityType) || "Name", + value: entityNameColumn?.slug, + }, ...this.pickerColumnDefs.map( ( col @@ -135,16 +146,24 @@ export class EntityPicker extends React.Component<{ } } ), - ] + ]) } - private getColumn(slug: ColumnSlug | undefined): CoreColumn | undefined { - if (slug === undefined) return undefined - return this.manager.entityPickerTable?.get(slug) + @computed private get metricTable(): OwidTable | undefined { + if (this.metric === undefined) return undefined + + // If the slug is "entityName", then try to get it from grapherTable first, because it might + // not be present in pickerTable (for indicator-powered explorers, for example). + if ( + this.metric === OwidTableSlugs.entityName && + this.grapherTable?.has(this.metric) + ) + return this.grapherTable + return this.pickerTable } @computed private get activePickerMetricColumn(): CoreColumn | undefined { - return this.getColumn(this.metric) + return this.metricTable?.get(this.metric) } @computed private get availableEntitiesForCurrentView(): Set { @@ -178,13 +197,13 @@ export class EntityPicker extends React.Component<{ @computed private get entitiesWithMetricValue(): EntityOptionWithMetricValue[] { - const { pickerTable, selection, localEntityNames } = this + const { metricTable, selection, localEntityNames } = this const col = this.activePickerMetricColumn const entityNames = selection.availableEntityNames.slice().sort() return entityNames.map((entityName) => { const plotValue = - col && pickerTable - ? (pickerTable.getLatestValueForEntity( + col && metricTable?.has(col.slug) + ? (metricTable.getLatestValueForEntity( entityName, col.slug ) as string | number) @@ -435,7 +454,7 @@ export class EntityPicker extends React.Component<{ } @action private updateMetric(columnSlug: ColumnSlug): void { - const col = this.getColumn(columnSlug) + const col = this.pickerTable?.get(columnSlug) this.manager.setEntityPicker?.({ metric: columnSlug, @@ -453,6 +472,7 @@ export class EntityPicker extends React.Component<{ return ( // If columnSlug is undefined, we're sorting by relevance, which is (mostly) by country name. columnSlug !== undefined && + columnSlug !== OwidTableSlugs.entityName && // If the column is currently missing (not loaded yet), assume it is numeric. (col === undefined || col.isMissing || @@ -461,12 +481,7 @@ export class EntityPicker extends React.Component<{ } private get pickerMenu(): JSX.Element | null { - if ( - this.isDropdownMenu || - !this.manager.entityPickerColumnDefs || - this.manager.entityPickerColumnDefs.length === 0 - ) - return null + if (this.isDropdownMenu) return null return (
Sort by