Updated place page key demographics table display and fetch path (#4884)

- Updated key demographics variable names to match figma mocks
- Added localization support to display values, units, and dates
- Moved overview table data fetch path from the client side to the
server side (new endpoint: `/api/dev-place/overview-table/<place-dcid>`
for a performance boost.
- @juliawu - this also changes the data fetching strategy a bit. Can you
take a look and see if my comment from
#4875 still applies?

Before:

![overview_before](https://github.com/user-attachments/assets/ec97f4c6-ffc9-4c37-b97d-16c035e1a12b)


After: 

![overview_after](https://github.com/user-attachments/assets/f36fe87b-2a1e-41c1-9662-2dba1495f55b)

packages/client/src/data_commons_web_client.ts

@@ -22,6 +22,7 @@ import {
   ApiNodePropvalOutResponse,
   ObservationDatesApiResponse,
   PlaceChartsApiResponse,
+  PlaceOverviewTableApiResponse,
   PointApiResponse,
   RelatedPlacesApiResponse,
   SeriesApiResponse,
@@ -234,6 +235,7 @@ class DataCommonsWebClient {
    * Gets related place info charts for the given place
    * Uses /api/dev-place/related-places/<placeDcid> endpoint
    * @param params.placeDcid place dcid to fetch data for
+   * @param params.locale [optional] locale to fetch data for
    */
   async getRelatedPLaces(params: {
     placeDcid: string;
@@ -248,6 +250,26 @@ class DataCommonsWebClient {
     const response = await fetch(url);
     return (await response.json()) as RelatedPlacesApiResponse;
   }
+
+  /**
+   * Gets place overview table for the given place
+   * Uses /api/dev-place/overview-table/<placeDcid> endpoint
+   * @param params.placeDcid place dcid to fetch data for
+   * @param params.locale [optional] locale to fetch data for
+   */
+  async getPlaceOverviewTable(params: {
+    placeDcid: string;
+    locale?: string;
+  }): Promise<PlaceOverviewTableApiResponse> {
+    const queryString = toURLSearchParams({
+      [LOCALE_PARAM]: params.locale,
+    });
+    const url = `${this.apiRoot || ""}/api/dev-place/overview-table/${
+      params.placeDcid
+    }?${queryString}`;
+    const response = await fetch(url);
+    return (await response.json()) as PlaceOverviewTableApiResponse;
+  }
 }
 
 export { DataCommonsWebClient };

packages/client/src/data_commons_web_client_types.ts

@@ -201,3 +201,19 @@ export interface RelatedPlacesApiResponse {
   parentPlaces: Place[];
   peersWithinParent: string[];
 }
+
+export interface OverviewTableDataRow {
+  date: string;
+  name: string;
+  provenanceUrl: string;
+  value: number;
+  variableDcid: string;
+  unit?: string;
+}
+
+/**
+ * Website API response for /api/dev-place/overview-table/<place_dcid>
+ */
+export interface PlaceOverviewTableApiResponse {
+  data: OverviewTableDataRow[];
+}

server/i18n/de/LC_MESSAGES/all.po

@@ -748,4 +748,15 @@ msgid "singular_village"
 msgstr "Dorf"
 
 msgid "singular_zip_code"
-msgstr "Postleitzahl"
+msgstr "Postleitzahl"
+msgid "VARIABLE_NAME-Count_Person"
+msgstr "Population"
+
+msgid "VARIABLE_NAME-Median_Income_Person"
+msgstr "Median Income"
+
+msgid "VARIABLE_NAME-Median_Age_Person"
+msgstr "Median Age"
+
+msgid "VARIABLE_NAME-UnemploymentRate_Person"
+msgstr "Unemployment Rate"

server/i18n/en/LC_MESSAGES/all.po

@@ -1045,6 +1045,22 @@ msgstr "ZIP Code"
 msgid "plural_zip_code"
 msgstr "ZIP Codes"
 
+#. Name describing the statistical variable for population
+msgid "VARIABLE_NAME-Count_Person"
+msgstr "Population"
+
+#. Name describing the statistical variable for median income of the population
+msgid "VARIABLE_NAME-Median_Income_Person"
+msgstr "Median Income"
+
+#. Name describing the statistical variable for median age of the population
+msgid "VARIABLE_NAME-Median_Age_Person"
+msgstr "Median Age"
+
+#. Name describing the statistical variable for unemployment rate of the population
+msgid "VARIABLE_NAME-UnemploymentRate_Person"
+msgstr "Unemployment Rate"
+
 #~ msgid "CHART_TITLE-nitrous_oxide_emissions_nonbiogenic"
 #~ msgstr "Nitrous oxide emissions (non-biogenic)"
 
@@ -1158,4 +1174,3 @@ msgstr "ZIP Codes"
 
 #~ msgid "CHART_TITLE-CHART_CATEGORY-Climate"
 #~ msgstr "Climate"
-

server/i18n/es/LC_MESSAGES/all.po

@@ -749,3 +749,15 @@ msgstr "Pueblo"
 
 msgid "singular_zip_code"
 msgstr "Código postal"
+
+msgid "VARIABLE_NAME-Count_Person"
+msgstr "Population"
+
+msgid "VARIABLE_NAME-Median_Income_Person"
+msgstr "Median Income"
+
+msgid "VARIABLE_NAME-Median_Age_Person"
+msgstr "Median Age"
+
+msgid "VARIABLE_NAME-UnemploymentRate_Person"
+msgstr "Unemployment Rate"

server/i18n/fr/LC_MESSAGES/all.po

@@ -748,4 +748,16 @@ msgid "singular_village"
 msgstr "Village"
 
 msgid "singular_zip_code"
-msgstr "Code postal"
+msgstr "Code postal"
+
+msgid "VARIABLE_NAME-Count_Person"
+msgstr "Population"
+
+msgid "VARIABLE_NAME-Median_Income_Person"
+msgstr "Median Income"
+
+msgid "VARIABLE_NAME-Median_Age_Person"
+msgstr "Median Age"
+
+msgid "VARIABLE_NAME-UnemploymentRate_Person"
+msgstr "Unemployment Rate"

server/i18n/hi/LC_MESSAGES/all.po

@@ -748,4 +748,16 @@ msgid "singular_village"
 msgstr "गांव"
 
 msgid "singular_zip_code"
-msgstr "पिन कोड"
+msgstr "पिन कोड"
+
+msgid "VARIABLE_NAME-Count_Person"
+msgstr "Population"
+
+msgid "VARIABLE_NAME-Median_Income_Person"
+msgstr "Median Income"
+
+msgid "VARIABLE_NAME-Median_Age_Person"
+msgstr "Median Age"
+
+msgid "VARIABLE_NAME-UnemploymentRate_Person"
+msgstr "Unemployment Rate"

server/i18n/it/LC_MESSAGES/all.po

@@ -748,4 +748,16 @@ msgid "singular_village"
 msgstr "Villaggio"
 
 msgid "singular_zip_code"
-msgstr "Codice postale"
+msgstr "Codice postale"
+
+msgid "VARIABLE_NAME-Count_Person"
+msgstr "Population"
+
+msgid "VARIABLE_NAME-Median_Income_Person"
+msgstr "Median Income"
+
+msgid "VARIABLE_NAME-Median_Age_Person"
+msgstr "Median Age"
+
+msgid "VARIABLE_NAME-UnemploymentRate_Person"
+msgstr "Unemployment Rate"

server/i18n/ja/LC_MESSAGES/all.po

@@ -748,4 +748,16 @@ msgid "singular_village"
 msgstr "村"
 
 msgid "singular_zip_code"
-msgstr "郵便番号"
+msgstr "郵便番号"
+
+msgid "VARIABLE_NAME-Count_Person"
+msgstr "Population"
+
+msgid "VARIABLE_NAME-Median_Income_Person"
+msgstr "Median Income"
+
+msgid "VARIABLE_NAME-Median_Age_Person"
+msgstr "Median Age"
+
+msgid "VARIABLE_NAME-UnemploymentRate_Person"
+msgstr "Unemployment Rate"

server/i18n/ko/LC_MESSAGES/all.po

@@ -748,4 +748,16 @@ msgid "singular_village"
 msgstr "마을"
 
 msgid "singular_zip_code"
-msgstr "우편번호"
+msgstr "우편번호"
+
+msgid "VARIABLE_NAME-Count_Person"
+msgstr "Population"
+
+msgid "VARIABLE_NAME-Median_Income_Person"
+msgstr "Median Income"
+
+msgid "VARIABLE_NAME-Median_Age_Person"
+msgstr "Median Age"
+
+msgid "VARIABLE_NAME-UnemploymentRate_Person"
+msgstr "Unemployment Rate"

server/i18n/ru/LC_MESSAGES/all.po

@@ -749,3 +749,15 @@ msgstr "Поселок"
 
 msgid "singular_zip_code"
 msgstr "Почтовый индекс"
+
+msgid "VARIABLE_NAME-Count_Person"
+msgstr "Population"
+
+msgid "VARIABLE_NAME-Median_Income_Person"
+msgstr "Median Income"
+
+msgid "VARIABLE_NAME-Median_Age_Person"
+msgstr "Median Age"
+
+msgid "VARIABLE_NAME-UnemploymentRate_Person"
+msgstr "Unemployment Rate"

server/routes/dev_place/api.py

@@ -26,6 +26,7 @@
 from server.routes import TIMEOUT
 from server.routes.dev_place import utils as place_utils
 from server.routes.dev_place.types import PlaceChartsApiResponse
+from server.routes.dev_place.types import PlaceOverviewTableApiResponse
 from server.routes.dev_place.types import RelatedPlacesApiResponse
 
 # Define blueprint
@@ -186,3 +187,16 @@ def related_places(place_dcid: str):
                                       parentPlaces=parent_places,
                                       peersWithinParent=peers_within_parent)
   return jsonify(response)
+
+
+@bp.route('/overview-table/<path:place_dcid>')
+@log_execution_time
+@cache.cached(timeout=TIMEOUT, query_string=True)
+def overview_table(place_dcid: str):
+  """
+  Fetches and returns overview table data for the specified place.
+  """
+  data_rows = place_utils.fetch_overview_table_data(place_dcid, locale=g.locale)
+
+  response = PlaceOverviewTableApiResponse(data=data_rows)
+  return jsonify(response)

server/routes/dev_place/types.py

@@ -118,3 +118,24 @@ class ServerChartConfiguration:
   scaling: Optional[int] = None
   non_dividable: bool = False  # Read in from configs
   scale: bool = False
+
+
+@dataclass
+class OverviewTableDataRow:
+  """
+  A single row of overview table data for a place.
+  """
+  date: str
+  name: str
+  provenanceUrl: str
+  unit: Optional[str]
+  value: float
+  variableDcid: str
+
+
+@dataclass
+class PlaceOverviewTableApiResponse:
+  """
+  API Response for /api/dev-place/overview-table/<place_dcid>
+  """
+  data: List[OverviewTableDataRow]

server/routes/dev_place/utils.py

@@ -29,6 +29,7 @@
 from server.routes.dev_place.types import BlockConfig
 from server.routes.dev_place.types import Category
 from server.routes.dev_place.types import Chart
+from server.routes.dev_place.types import OverviewTableDataRow
 from server.routes.dev_place.types import Place
 from server.routes.dev_place.types import ServerBlockMetadata
 from server.routes.dev_place.types import ServerChartConfiguration
@@ -62,6 +63,27 @@
 PLACE_TYPE_IN_PARENT_PLACES_STR = '%(placeType)s in %(parentPlaces)s'
 NEIGHBORING_PLACES_IN_PARENT_PLACE_STR = 'Neighboring %(placeType)s in %(parentPlace)s'
 
+# Variables to include in overview table
+PLACE_OVERVIEW_TABLE_VARIABLES: List[Dict[str, str]] = [
+    {
+        "variable_dcid": "Count_Person",
+        "i18n_message_id": "VARIABLE_NAME-Count_Person"
+    },
+    {
+        "variable_dcid": "Median_Income_Person",
+        "i18n_message_id": "VARIABLE_NAME-Median_Income_Person"
+    },
+    {
+        "variable_dcid": "Median_Age_Person",
+        "i18n_message_id": "VARIABLE_NAME-Median_Age_Person"
+    },
+    {
+        "variable_dcid": "UnemploymentRate_Person",
+        "i18n_message_id": "VARIABLE_NAME-UnemploymentRate_Person",
+        "unit": "Percent"
+    },
+]
+
 
 def get_place_html_link(place_dcid: str, place_name: str) -> str:
   """Get <a href-place page url> tag linking to the place page for a place
@@ -870,3 +892,53 @@ def fetch_similar_place_dcids(place: Place, locale=DEFAULT_LOCALE) -> List[str]:
 
   # Return the list of similar place dcids
   return place_cohort_member_dcids
+
+
+def fetch_overview_table_data(place_dcid: str,
+                              locale=DEFAULT_LOCALE
+                             ) -> List[OverviewTableDataRow]:
+  """
+  Fetches overview table data for the specified place.
+  """
+  data_rows = []
+  variables = [v["variable_dcid"] for v in PLACE_OVERVIEW_TABLE_VARIABLES]
+
+  # Fetch the most recent observation for each variable
+  resp = dc.obs_point([place_dcid], variables)
+  facets = resp.get("facets", {})
+
+  # Iterate over each variable and extract the most recent observation
+  for item in PLACE_OVERVIEW_TABLE_VARIABLES:
+    variable_dcid = item["variable_dcid"]
+    name = gettext(item["i18n_message_id"])
+    ordered_facet_observations = resp.get("byVariable", {}).get(
+        variable_dcid, {}).get("byEntity", {}).get(place_dcid,
+                                                   {}).get("orderedFacets", [])
+    most_recent_facet = ordered_facet_observations[
+        0] if ordered_facet_observations else None
+    if not most_recent_facet:
+      continue
+
+    observations = most_recent_facet.get("observations", [])
+    most_recent_observation = observations[0] if observations else None
+    if not most_recent_observation:
+      continue
+
+    facet_id = most_recent_facet.get("facetId", "")
+    date = most_recent_observation.get("date", "")
+    value = most_recent_observation.get("value", "")
+    provenance_url = facets.get(facet_id, {}).get("provenanceUrl", "")
+    # Use the unit from the facet if available, otherwise use the unit from the variable definition
+    unit = facets.get(facet_id, {}).get("unit", None) or item.get("unit", None)
+
+    data_rows.append(
+        OverviewTableDataRow(
+            date=date,
+            name=name,
+            provenanceUrl=provenance_url,
+            unit=unit,
+            value=value,
+            variableDcid=variable_dcid,
+        ))
+
+  return data_rows