Skip to content

Commit

Permalink
🎉 (entity selector) highlight user location
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophiamersmann
sophiamersmann committed Apr 8, 2024
1 parent 582c251 commit 0891373
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 8 deletions.
11 changes: 11 additions & 0 deletions packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,17 @@
background: #ebeef2;
z-index: -1;
}

.label-with-location-icon {
display: flex;
align-items: center;

svg {
margin-left: 8px;
font-size: 0.9em;
color: #a1a1a1;
}
}
}

.animated-entity {
Expand Down
100 changes: 92 additions & 8 deletions packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,16 @@ import {
isFiniteWithGuard,
CoreValueType,
clamp,
getUserCountryInformation,
regions,
sortBy,
} 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"
Expand All @@ -44,6 +48,7 @@ export interface EntitySelectorState {
mostRecentlySelectedEntityName?: string
sortConfig: SortConfig
previousSortConfig?: SortConfig
localEntityNames?: string[]
}

export interface EntitySelectorManager {
Expand All @@ -64,7 +69,7 @@ interface SortConfig {
order: SortOrder
}

type SearchableEntity = { name: string } & Record<
type SearchableEntity = { name: string; local?: boolean } & Record<
Slug,
CoreValueType | undefined
>
Expand Down Expand Up @@ -97,6 +102,8 @@ export class EntitySelector extends React.Component<{
}

componentDidMount(): void {
void this.populateLocalEntities()

if (this.props.autoFocus && !isTouchDevice())
this.searchField.current?.focus()

Expand Down Expand Up @@ -171,6 +178,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: "" })
}
Expand Down Expand Up @@ -220,6 +255,10 @@ export class EntitySelector extends React.Component<{
return this.manager.entitySelectorState.previousSortConfig
}

@computed private get localEntityNames(): string[] | undefined {
return this.manager.entitySelectorState.localEntityNames
}

@computed private get table(): OwidTable {
return this.manager.tableForSelection
}
Expand Down Expand Up @@ -309,6 +348,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) {
searchableEntity[column.slug] =
this.table.getLatestValueForEntity(entityName, column.slug)
Expand All @@ -318,7 +362,10 @@ 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 =
Expand All @@ -336,15 +383,37 @@ export class EntitySelector extends React.Component<{
return entities
}

// 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(
Expand Down Expand Up @@ -383,7 +452,7 @@ export class EntitySelector extends React.Component<{
@computed get searchResults(): SearchableEntity[] | undefined {
if (!this.searchInput) return undefined
const searchResults = this.fuzzy.search(this.searchInput)
return this.sortEntities(searchResults)
return this.sortEntities(searchResults, { sortLocalsToTop: false })
}

@computed get partitionedSearchResults(): PartitionedEntities | undefined {
Expand All @@ -409,7 +478,7 @@ export class EntitySelector extends React.Component<{
)

return {
selected: this.sortEntities(selected),
selected: this.sortEntities(selected, { sortLocalsToTop: false }),
unselected: this.sortEntities(unselected),
}
}
Expand Down Expand Up @@ -541,8 +610,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>
))}
Expand All @@ -561,6 +631,7 @@ export class EntitySelector extends React.Component<{
checked={this.isEntitySelected(entity)}
bar={this.getBarConfigForEntity(entity)}
onChange={() => this.onChange(entity.name)}
local={entity.local}
/>
</li>
))}
Expand Down Expand Up @@ -648,6 +719,7 @@ export class EntitySelector extends React.Component<{
onChange={() =>
this.onChange(entity.name)
}
local={entity.local}
/>
</li>
</Flipped>
Expand Down Expand Up @@ -688,6 +760,7 @@ export class EntitySelector extends React.Component<{
onChange={() =>
this.onChange(entity.name)
}
local={entity.local}
/>
</li>
</Flipped>
Expand Down Expand Up @@ -754,18 +827,29 @@ 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}
<FontAwesomeIcon icon={faLocationArrow} />
</span>
) : (
name
)

return (
<div
className="selectable-entity"
Expand All @@ -778,7 +862,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}
Expand Down

0 comments on commit 0891373

Please sign in to comment.