Merge pull request #2675 from owid/grapher-redesign-entity-selector-e…

…mpty-state Grapher redesign: Add feedback for empty search result in entity selector
owid · Sep 29, 2023 · acae113 · acae113
2 parents cb42c88 + 789ae0d
commit acae113
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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]