🎉 (entity selector) highlight user location (#3452)

[Cycle 2024.2: Entity selector](#3349) | [Designs](https://www.figma.com/file/X5mOEX8zULS6qyHocUYdmh/Grapher-UI?type=design&node-id=2523%3A6266&mode=design&t=7edFp79OOjz6RENz-1) ## Summary Detects the user's location and displays it at the top of the list. Also shows a little icon next to the user's country/region with a tooltip rendered on hover. ## Details - The user's location is displayed at the top if it's not currently selected (if it's already selected, then I don't think there is a need to move it to the top) ## SVG tester The SVG tester fails due to the changes in #3373
owid · May 3, 2024 · a6e32bf · a6e32bf
1 parent aff43ba
commit a6e32bf
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 24 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -2,7 +2,7 @@
     "files": [
         {
             "path": "./dist/assets/owid.mjs",
-            "maxSize": "2.4MB"
+            "maxSize": "2.6MB"
         },
         {
             "path": "./dist/assets/owid.css",

diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx
@@ -31,9 +31,8 @@ export class LabeledSwitch extends React.Component<{
                     {tooltip && (
                         <Tippy
                             content={tooltip}
-                            theme="settings"
+                            theme="grapher-explanation"
                             placement="top"
-                            // arrow={false}
                             maxWidth={338}
                         >
                             <FontAwesomeIcon icon={faInfoCircle} />

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -112,21 +112,6 @@ nav.controlsRow .chart-controls .settings-menu {
                     height: 13px;
                     padding: 0 0.333em;
                 }
-
-                // the tooltip triggered by hovering the circle-i
-                @at-root .tippy-box[data-theme="settings"] {
-                    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-content {
-                        padding: $indent;
-                    }
-                    .tippy-arrow {
-                        color: white;
-                    }
-                }
             }
 
             .labeled-switch .labeled-switch-subtitle,

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -204,6 +204,25 @@ $zindex-controls-drawer: 150;
     z-index: $zindex-Tooltip;
 }
 
+// white background tooltip for longer explanations
+// (the `--short` version has a little less padding)
+.tippy-box[data-theme="grapher-explanation"],
+.tippy-box[data-theme="grapher-explanation--short"] {
+    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;
+    }
+}
+.tippy-box[data-theme="grapher-explanation"] {
+    .tippy-content {
+        padding: 15px;
+    }
+}
+
 .markdown-text-wrap__line {
     display: block;
 }

diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -172,6 +172,22 @@
                 background: #ebeef2;
                 z-index: -1;
             }
+
+            .label-with-location-icon {
+                display: flex;
+                align-items: center;
+
+                svg {
+                    margin-left: 8px;
+                    font-size: 0.9em;
+                    color: #a1a1a1;
+
+                    // hide focus outline when clicked
+                    &:focus:not(:focus-visible) {
+                        outline: none;
+                    }
+                }
+            }
         }
 
         .animated-entity {

diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
@@ -14,12 +14,17 @@ import {
     CoreValueType,
     clamp,
     maxBy,
+    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"
@@ -41,6 +46,7 @@ import { ColumnSlug } from "@ourworldindata/types"
 export interface EntitySelectorState {
     searchInput: string
     sortConfig: SortConfig
+    localEntityNames?: string[]
     mostRecentlySelectedEntityName?: string
 }
 
@@ -59,7 +65,7 @@ interface SortConfig {
     order: SortOrder
 }
 
-type SearchableEntity = { name: string } & Record<
+type SearchableEntity = { name: string; local?: boolean } & Record<
     ColumnSlug,
     CoreValueType | undefined
 >
@@ -89,6 +95,8 @@ export class EntitySelector extends React.Component<{
     }
 
     componentDidMount(): void {
+        void this.populateLocalEntities()
+
         if (this.props.autoFocus && !isTouchDevice())
             this.searchField.current?.focus()
 
@@ -133,6 +141,32 @@ 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)
+            )
+
+            const localEntityNames = sortedUserRegions.map(
+                (region) => region.name
+            )
+
+            if (localEntityNames) this.set({ localEntityNames })
+        } catch (err) {}
+    }
+
     private clearSearchInput(): void {
         this.set({ searchInput: "" })
     }
@@ -178,6 +212,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
     }
@@ -252,6 +290,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) ?? []
                 searchableEntity[column.slug] = maxBy(
@@ -264,21 +307,46 @@ 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 =
             sortConfig.slug === this.table.entityNameSlug
 
-        // 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,
@@ -336,7 +404,7 @@ export class EntitySelector extends React.Component<{
         )
 
         return {
-            selected: this.sortEntities(selected),
+            selected: this.sortEntities(selected, { sortLocalsToTop: false }),
             unselected: this.sortEntities(unselected),
         }
     }
@@ -473,6 +541,7 @@ export class EntitySelector extends React.Component<{
                             checked={this.isEntitySelected(entity)}
                             bar={this.getBarConfigForEntity(entity)}
                             onChange={() => this.onChange(entity.name)}
+                            local={entity.local}
                         />
                     </li>
                 ))}
@@ -491,6 +560,7 @@ export class EntitySelector extends React.Component<{
                             checked={this.isEntitySelected(entity)}
                             bar={this.getBarConfigForEntity(entity)}
                             onChange={() => this.onChange(entity.name)}
+                            local={entity.local}
                         />
                     </li>
                 ))}
@@ -574,6 +644,7 @@ export class EntitySelector extends React.Component<{
                                         onChange={() =>
                                             this.onChange(entity.name)
                                         }
+                                        local={entity.local}
                                     />
                                 </li>
                             </Flipped>
@@ -614,6 +685,7 @@ export class EntitySelector extends React.Component<{
                                         onChange={() =>
                                             this.onChange(entity.name)
                                         }
+                                        local={entity.local}
                                     />
                                 </li>
                             </Flipped>
@@ -692,18 +764,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="grapher-explanation--short"
+                placement="top"
+            >
+                <FontAwesomeIcon icon={faLocationArrow} />
+            </Tippy>
+        </span>
+    ) : (
+        name
+    )
+
     return (
         <div
             className="selectable-entity"
@@ -717,7 +806,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}