diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index 2ab258801be..7f8292c017c 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -2764,6 +2764,10 @@ export class Grapher ) } + @computed get entitiesAreCountryLike(): boolean { + return !!this.entityType.match(/\bcountry\b/i) + } + @computed get startSelectingWhenLineClicked(): boolean { return this.showAddEntityButton } diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx index e8b580dbaaa..4be9b24ed00 100644 --- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx +++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx @@ -83,6 +83,7 @@ export interface DataTableManager { startTime?: Time dataTableSlugs?: ColumnSlug[] showSelectionOnlyInDataTable?: boolean + entitiesAreCountryLike?: boolean isSmall?: boolean isMedium?: boolean isNarrow?: boolean @@ -164,10 +165,6 @@ export class DataTable extends React.Component<{ return this.manager.entityType ?? "Country/area" } - @computed private get entitiesAreCountryLike(): boolean { - return !!this.entityType.match(/\bcountry\b/i) - } - @computed private get sortValueMapper(): ( row: DataTableRow ) => number | string { @@ -893,18 +890,18 @@ export class DataTable extends React.Component<{ } @computed private get displayEntityRows(): DataTableRow[] { - if (!this.entitiesAreCountryLike) return this.displayRows + if (!this.manager.entitiesAreCountryLike) return this.displayRows return this.displayRows.filter((row) => isCountryName(row.entityName)) } @computed private get displayAggregateRows(): DataTableRow[] { - if (!this.entitiesAreCountryLike) return [] + if (!this.manager.entitiesAreCountryLike) return [] return this.displayRows.filter((row) => !isCountryName(row.entityName)) } @computed private get showTitleRows(): boolean { return ( - this.entitiesAreCountryLike && + !!this.manager.entitiesAreCountryLike && this.displayEntityRows.length > 0 && this.displayAggregateRows.length > 0 ) diff --git a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.scss b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.scss index a20c7e76280..4852b61acd5 100644 --- a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.scss +++ b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.scss @@ -79,6 +79,10 @@ } } + .searchResults .empty { + font-size: 0.8125em; + } + &.EntitySelectorSingle { ul { margin-top: 8px; @@ -109,6 +113,10 @@ font-weight: 900; } } + + .searchResults .empty { + margin-top: 1.5em; + } } &.EntitySelectorMulti { diff --git a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx index 671c3e6ee05..32a4ef46cca 100644 --- a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx +++ b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx @@ -8,6 +8,7 @@ import { DEFAULT_BOUNDS, isTouchDevice, sortBy, + isCountryName, } from "@ourworldindata/utils" import { Checkbox } from "../controls/Checkbox" import { FuzzySearch } from "../controls/FuzzySearch" @@ -24,6 +25,7 @@ export interface EntitySelectorModalManager { tabBounds?: Bounds entityType?: string entityTypePlural?: string + entitiesAreCountryLike?: boolean } interface SearchableEntity { @@ -228,19 +230,28 @@ export class EntitySelectorModal extends React.Component<{