feat(regions): include income groups

baker/algolia/indexChartsToAlgolia.ts

@@ -8,7 +8,7 @@ import {
     OwidGdocLinkType,
     excludeNullish,
     isNil,
-    countries,
+    regions,
     orderBy,
     removeTrailingParenthetical,
 } from "@ourworldindata/utils"
@@ -23,10 +23,14 @@ const computeScore = (record: Omit<ChartRecord, "score">): number => {
     return numRelatedArticles * 500 + views_7d
 }
 
-const countriesWithVariantNames = new Set(
-    countries
-        .filter((country) => country.variantNames?.length || country.shortName)
-        .map((country) => country.name)
+const regionsWithVariantNames = new Set(
+    regions
+        .filter(
+            (region) =>
+                ("variantNames" in region && region.variantNames?.length) ||
+                ("shortName" in region && region.shortName)
+        )
+        .map((region) => region.name)
 )
 
 const processAvailableEntities = (availableEntities: string[] | null) => {
@@ -45,7 +49,7 @@ const processAvailableEntities = (availableEntities: string[] | null) => {
         availableEntities,
         [
             (entityName) =>
-                countriesWithVariantNames.has(
+                regionsWithVariantNames.has(
                     removeTrailingParenthetical(entityName)
                 ),
             (entityName) => entityName.includes("-"),

devTools/regionsUpdater/update.ts

@@ -13,7 +13,7 @@ import _ from "lodash"
 
 const ETL_REGIONS_URL =
         process.env.ETL_REGIONS_URL ||
-        "https://catalog.ourworldindata.org/grapher/regions/latest/regions/regions.csv",
+        "https://catalog.ourworldindata.org/external/owid_grapher/latest/regions/regions.csv",
     GEO_JSON_URL =
         "https://raw.githubusercontent.com/alexabruck/worldmap-sensitive/master/dist/world.geo.json",
     GRAPHER_ROOT = __dirname.replace(/\/(itsJustJavascript\/)?devTools.*/, ""),
@@ -31,6 +31,10 @@ const ETL_REGIONS_URL =
         MKD: ["Macedonia"],
         SWZ: ["Swaziland"],
         USA: ["US", "USA"],
+        OWID_LIC: ["Low-income"],
+        OWID_LMC: ["Lower-middle income"],
+        OWID_UMC: ["Upper-middle income"],
+        OWID_HIC: ["High-income"],
     }
 
 interface Entity {

packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx

@@ -51,6 +51,7 @@ import { ColumnSlug, OwidColumnDef } from "@ourworldindata/types"
 import { buildVariableTable } from "../core/LegacyToOwidTable"
 import { loadVariableDataAndMetadata } from "../core/loadVariable"
 import { DrawerContext } from "../slideInDrawer/SlideInDrawer.js"
+import { P, match } from "ts-pattern"
 
 export interface EntitySelectorState {
     searchInput: string
@@ -1070,23 +1071,65 @@ function SelectableEntity({
     }[type]
 
     const nameWords = name.split(" ")
-    const label = local ? (
-        <span className="label-with-location-icon">
-            {nameWords.slice(0, -1).join(" ")}{" "}
-            <span className="label-with-location-icon label-with-location-icon--no-line-break">
-                {nameWords[nameWords.length - 1]}
-                <Tippy
-                    content="Your current location"
-                    theme="grapher-explanation--short"
-                    placement="top"
-                >
-                    <FontAwesomeIcon icon={faLocationArrow} />
-                </Tippy>
+    let label: React.ReactNode
+    if (local) {
+        const regionInfo = regions.find((region) => region.name === name)
+        const tooltipContent = match(regionInfo?.regionType)
+            .with("country", () => "Your current country")
+            .with(
+                P.union("continent", "aggregate"),
+                () => "Your current region"
+            )
+            .with("income_group", () => (
+                <>
+                    <p>
+                        The income group that your current country belongs to.
+                    </p>
+                    <p>
+                        See the{" "}
+                        <a href="/grapher/world-bank-income-groups">
+                            World Bank income group classification
+                        </a>
+                        .
+                        {/* <img
+                            src="/grapher/exports/world-bank-income-groups.svg"
+                            height={600}
+                            width={850}
+                        /> */}
+                    </p>
+                </>
+            ))
+            .with(P.union("other", undefined), () => "Your current location")
+            .exhaustive()
+
+        const dodId = match(regionInfo?.regionType)
+            .with("country", () => "location__country")
+            .with(P.union("continent", "aggregate"), () => "location__region")
+            .with("income_group", () => "location__income_group")
+            .with(P.union("other", undefined), () => "location__other")
+            .exhaustive()
+
+        label = (
+            <span className="label-with-location-icon">
+                {nameWords.slice(0, -1).join(" ")}{" "}
+                <span className="label-with-location-icon label-with-location-icon--no-line-break">
+                    {nameWords[nameWords.length - 1]}
+                    <Tippy
+                        content={tooltipContent}
+                        placement="top"
+                        theme="grapher-explanation--short"
+                        interactive
+                        appendTo={() => document.body}
+                    >
+                        <FontAwesomeIcon icon={faLocationArrow} />
+                    </Tippy>
+                    <span className="dod-span" data-id={dodId}>
+                        DoD
+                    </span>
+                </span>
             </span>
-        </span>
-    ) : (
-        name
-    )
+        )
+    } else label = name
 
     return (
         <div

packages/@ourworldindata/utils/src/Util.ts

@@ -596,7 +596,7 @@ export const fetchText = async (url: string): Promise<string> => {
 const _getUserCountryInformation = async (): Promise<
     UserCountryInformation | undefined
 > =>
-    await fetch("/detect-country")
+    await fetch("https://detect-country.owid.io")
         .then((res) => res.json())
         .then((res) => res.country)
         .catch(() => undefined)