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<{
- + {searchResults.length > 0 ? ( + + ) : ( +
+ {this.manager.entitiesAreCountryLike && + isCountryName(this.searchInput) + ? "There is no data for the country, region or group you are looking for." + : "Nothing turned up. You may want to try using different keywords or checking for typos."} +
+ )}
{this.renderSelectedData()}
diff --git a/packages/@ourworldindata/utils/src/regions.ts b/packages/@ourworldindata/utils/src/regions.ts index ccdfcf2ce14..cbb94f9f62d 100644 --- a/packages/@ourworldindata/utils/src/regions.ts +++ b/packages/@ourworldindata/utils/src/regions.ts @@ -69,10 +69,10 @@ const countriesBySlug: Record = Object.fromEntries( const currentAndHistoricalCountryNames = regions .filter(({ regionType }) => regionType === "country") - .map(({ name }) => name) + .map(({ name }) => name.toLowerCase()) export const isCountryName = (name: string): boolean => - currentAndHistoricalCountryNames.includes(name) + currentAndHistoricalCountryNames.includes(name.toLowerCase()) export const getCountryBySlug = (slug: string): Country | undefined => countriesBySlug[slug]