🎉 (entity selector) highlight user location

owid · Apr 10, 2024 · 265c819 · 265c819
1 parent 95124cb
commit 265c819
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 8 deletions.
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -177,6 +177,21 @@
                 background: #ebeef2;
                 z-index: -1;
             }
+
+            .label-with-location-icon {
+                display: flex;
+                align-items: center;
+
+                svg {
+                    margin-left: 8px;
+                    font-size: 0.9em;
+                    color: #a1a1a1;
+
+                    &:focus {
+                        outline: none;
+                    }
+                }
+            }
         }
 
         .animated-entity {
@@ -287,4 +302,16 @@
             list-style-type: none;
         }
     }
+
+    // the tooltip triggered by hovering the location icon
+    .tippy-box[data-theme="location-icon"] {
+        background: white;
+        color: $dark-text;
+        font: 400 14px/1.5 $sans-serif-font-stack;
+        box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
+
+        .tippy-arrow {
+            color: white;
+        }
+    }
 }
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
@@ -13,14 +13,18 @@ import {
     isFiniteWithGuard,
     CoreValueType,
     clamp,
-    sortBy,
     last,
+    getUserCountryInformation,
+    regions,
+    sortBy,
+    Tippy,
 } from "@ourworldindata/utils"
 import { Checkbox } from "@ourworldindata/components"
 import { FuzzySearch } from "../controls/FuzzySearch"
 import {
     faCircleXmark,
     faMagnifyingGlass,
+    faLocationArrow,
 } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { SelectionArray } from "../selection/SelectionArray"
@@ -45,6 +49,7 @@ import { scaleLinear, type ScaleLinear } from "d3-scale"
 export interface EntitySelectorState {
     searchInput: string
     sortConfig: SortConfig
+    localEntityNames?: string[]
     mostRecentlySelectedEntityName?: string
 }
 
@@ -66,7 +71,7 @@ interface SortConfig {
     order: SortOrder
 }
 
-type SearchableEntity = { name: string } & Record<
+type SearchableEntity = { name: string; local?: boolean } & Record<
     Slug,
     CoreValueType | undefined
 >
@@ -96,6 +101,8 @@ export class EntitySelector extends React.Component<{
     }
 
     componentDidMount(): void {
+        void this.populateLocalEntities()
+
         if (this.props.autoFocus && !isTouchDevice())
             this.searchField.current?.focus()
 
@@ -137,6 +144,34 @@ export class EntitySelector extends React.Component<{
         }
     }
 
+    @action.bound async populateLocalEntities(): Promise<void> {
+        try {
+            const localCountryInfo = await getUserCountryInformation()
+            if (!localCountryInfo) return
+
+            const userEntityCodes = [
+                localCountryInfo.code,
+                ...(localCountryInfo.regions ?? []),
+            ]
+
+            const userRegions = regions.filter((region) =>
+                userEntityCodes.includes(region.code)
+            )
+
+            const sortedUserRegions = sortBy(userRegions, (region) =>
+                userEntityCodes.indexOf(region.code)
+            )
+
+            if (sortedUserRegions) {
+                this.set({
+                    localEntityNames: sortedUserRegions.map(
+                        (region) => region.name
+                    ),
+                })
+            }
+        } catch (err) {}
+    }
+
     private clearSearchInput(): void {
         this.set({ searchInput: "" })
     }
@@ -182,6 +217,10 @@ export class EntitySelector extends React.Component<{
         )
     }
 
+    @computed private get localEntityNames(): string[] | undefined {
+        return this.manager.entitySelectorState.localEntityNames
+    }
+
     @computed private get table(): OwidTable {
         return this.manager.tableForSelection
     }
@@ -258,6 +297,11 @@ export class EntitySelector extends React.Component<{
         return this.availableEntityNames.map((entityName) => {
             const searchableEntity: SearchableEntity = { name: entityName }
 
+            if (this.localEntityNames) {
+                searchableEntity.local =
+                    this.localEntityNames.includes(entityName)
+            }
+
             for (const column of this.sortColumns) {
                 const rows = column.owidRowsByEntityName.get(entityName) ?? []
                 const sortedRows = sortBy(rows, (row) => row.time)
@@ -268,20 +312,45 @@ export class EntitySelector extends React.Component<{
         })
     }
 
-    private sortEntities(entities: SearchableEntity[]): SearchableEntity[] {
+    private sortEntities(
+        entities: SearchableEntity[],
+        options: { sortLocalsToTop: boolean } = { sortLocalsToTop: true }
+    ): SearchableEntity[] {
         const { sortConfig } = this
 
         const shouldBeSortedByName = this.hasSlugName(sortConfig)
 
-        // sort by name
-        if (shouldBeSortedByName) {
+        // sort by name, ignoring local entities
+        if (shouldBeSortedByName && !options.sortLocalsToTop) {
             return orderBy(
                 entities,
                 (entity: SearchableEntity) => entity.name,
                 sortConfig.order
             )
         }
 
+        // sort by name, with local entities at the top
+        if (shouldBeSortedByName && options.sortLocalsToTop) {
+            const [localEntities, otherEntities] = partition(
+                entities,
+                (entity: SearchableEntity) => entity.local
+            )
+
+            const sortedLocalEntities = sortBy(
+                localEntities,
+                (entity: SearchableEntity) =>
+                    this.localEntityNames?.indexOf(entity.name)
+            )
+
+            const sortedOtherEntities = orderBy(
+                otherEntities,
+                (entity: SearchableEntity) => entity.name,
+                sortConfig.order
+            )
+
+            return [...sortedLocalEntities, ...sortedOtherEntities]
+        }
+
         // sort by number column, with missing values at the end
         const [withValues, withoutValues] = partition(
             entities,
@@ -342,7 +411,7 @@ export class EntitySelector extends React.Component<{
         )
 
         return {
-            selected: this.sortEntities(selected),
+            selected: this.sortEntities(selected, { sortLocalsToTop: false }),
             unselected: this.sortEntities(unselected),
         }
     }
@@ -474,8 +543,9 @@ export class EntitySelector extends React.Component<{
                             name={entity.name}
                             type={this.isMultiMode ? "checkbox" : "radio"}
                             checked={this.isEntitySelected(entity)}
-                            bar={this.getBarConfigForEntity(entity)}
                             onChange={() => this.onChange(entity.name)}
+                            bar={this.getBarConfigForEntity(entity)}
+                            local={entity.local}
                         />
                     </li>
                 ))}
@@ -494,6 +564,7 @@ export class EntitySelector extends React.Component<{
                             checked={this.isEntitySelected(entity)}
                             bar={this.getBarConfigForEntity(entity)}
                             onChange={() => this.onChange(entity.name)}
+                            local={entity.local}
                         />
                     </li>
                 ))}
@@ -577,6 +648,7 @@ export class EntitySelector extends React.Component<{
                                         onChange={() =>
                                             this.onChange(entity.name)
                                         }
+                                        local={entity.local}
                                     />
                                 </li>
                             </Flipped>
@@ -617,6 +689,7 @@ export class EntitySelector extends React.Component<{
                                         onChange={() =>
                                             this.onChange(entity.name)
                                         }
+                                        local={entity.local}
                                     />
                                 </li>
                             </Flipped>
@@ -693,18 +766,35 @@ function SelectableEntity({
     type,
     bar,
     onChange,
+    local,
 }: {
     name: React.ReactNode
     checked: boolean
     type: "checkbox" | "radio"
     bar?: BarConfig
     onChange: () => void
+    local?: boolean
 }) {
     const Input = {
         checkbox: Checkbox,
         radio: RadioButton,
     }[type]
 
+    const label = local ? (
+        <span className="label-with-location-icon">
+            {name}
+            <Tippy
+                content="Your current location"
+                theme="location-icon"
+                placement="top"
+            >
+                <FontAwesomeIcon icon={faLocationArrow} />
+            </Tippy>
+        </span>
+    ) : (
+        name
+    )
+
     return (
         <div
             className="selectable-entity"
@@ -718,7 +808,7 @@ function SelectableEntity({
             {bar && bar.width !== undefined && (
                 <div className="bar" style={{ width: `${bar.width * 100}%` }} />
             )}
-            <Input label={name} checked={checked} onChange={onChange} />
+            <Input label={label} checked={checked} onChange={onChange} />
             {bar && (
                 <span className="value grapher_label-1-medium">
                     {bar.formattedValue}