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 10e38bd commit 1d202e7
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 7 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
98 changes: 91 additions & 7 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 @@ -42,6 +46,7 @@ import { scaleLinear, type ScaleLinear } from "d3-scale"
export interface EntitySelectorState {
searchInput: string
sortConfig: SortConfig
localEntityNames?: string[]
mostRecentlySelectedEntityName?: string
}

Expand All @@ -63,7 +68,7 @@ interface SortConfig {
order: SortOrder
}

type SearchableEntity = { name: string } & Record<
type SearchableEntity = { name: string; local?: boolean } & Record<
Slug,
CoreValueType | undefined
>
Expand Down Expand Up @@ -93,6 +98,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 @@ -134,6 +141,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 @@ -179,6 +214,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
}
Expand Down Expand Up @@ -255,6 +294,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 @@ -264,20 +308,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,
Expand Down Expand Up @@ -338,7 +407,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 @@ -466,8 +535,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 @@ -486,6 +556,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 @@ -569,6 +640,7 @@ export class EntitySelector extends React.Component<{
onChange={() =>
this.onChange(entity.name)
}
local={entity.local}
/>
</li>
</Flipped>
Expand Down Expand Up @@ -609,6 +681,7 @@ export class EntitySelector extends React.Component<{
onChange={() =>
this.onChange(entity.name)
}
local={entity.local}
/>
</li>
</Flipped>
Expand Down Expand Up @@ -677,18 +750,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 @@ -701,7 +785,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 1d202e7

Please sign in to comment.