From 789ae0d24bb6c2cd1014ca49aec5ceedebafb114 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 29 Sep 2023 09:09:35 +0000
Subject: [PATCH] feat(grapher): give feedback when no entities could be found

---
 .../grapher/src/core/Grapher.tsx              |  4 ++
 .../grapher/src/dataTable/DataTable.tsx       | 11 ++----
 .../src/modal/EntitySelectorModal.scss        |  8 ++++
 .../grapher/src/modal/EntitySelectorModal.tsx | 37 ++++++++++++-------
 packages/@ourworldindata/utils/src/regions.ts |  4 +-
 5 files changed, 42 insertions(+), 22 deletions(-)

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<{
 
                     <div className="entities">
                         <div className="searchResults">
-                            <ul>
-                                {searchResults.map((result) => (
-                                    <EntitySearchResult
-                                        key={result.name}
-                                        result={result}
-                                        isMulti={this.isMulti}
-                                        isChecked={selectionArray.selectedSet.has(
-                                            result.name
-                                        )}
-                                        onSelect={this.onSelect}
-                                    />
-                                ))}
-                            </ul>
+                            {searchResults.length > 0 ? (
+                                <ul>
+                                    {searchResults.map((result) => (
+                                        <EntitySearchResult
+                                            key={result.name}
+                                            result={result}
+                                            isMulti={this.isMulti}
+                                            isChecked={selectionArray.selectedSet.has(
+                                                result.name
+                                            )}
+                                            onSelect={this.onSelect}
+                                        />
+                                    ))}
+                                </ul>
+                            ) : (
+                                <div className="empty">
+                                    {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."}
+                                </div>
+                            )}
                         </div>
                         {this.renderSelectedData()}
                     </div>
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<string, Country> = 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]