Show all place names from url params (#2502)

This is not the most cleanest way to do this in topic page. If we want
to support multiple places for all topic pages, might need to
re-structure the data fetch.

server/routes/topic_page.py

@@ -37,12 +37,11 @@
 bp = flask.Blueprint('topic_page', __name__, url_prefix='/topic')
 
 
-def get_sdg_config(place_dcid, topic_config):
+def get_sdg_config(place_dcid, more_places, topic_config):
   topic_place_config = topic_config
   topic_place_config.metadata.place_dcid.append(place_dcid)
   # Populuate comparison places (fixed places) for all tiles
   comparison_places = [place_dcid]
-  more_places = request.args.getlist('places')
   if more_places:
     comparison_places.extend(more_places)
   for p in _SDG_COMPARISON_PLACES:
@@ -95,10 +94,13 @@ def topic_page(topic_id=None, place_dcid=None):
         config={},
         topics_summary=topics_summary)
 
+  more_places = request.args.getlist('places')
+
   # Find the config for the topic & place.
   topic_place_config = None
   if topic_id == _SDG_TOPIC:
-    topic_place_config = get_sdg_config(place_dcid, topic_configs[0])
+    topic_place_config = get_sdg_config(place_dcid, more_places,
+                                        topic_configs[0])
   else:
     for config in topic_configs:
       if place_dcid in config.metadata.place_dcid:
@@ -119,6 +121,7 @@ def topic_page(topic_id=None, place_dcid=None):
       place_type=place_type,
       place_name=place_name,
       place_dcid=place_dcid,
+      more_places=json.dumps(more_places),
       topic_id=topic_id,
       topic_name=topic_place_config.metadata.topic_name or "",
       config=MessageToJson(topic_place_config),

server/templates/topic_page.html

@@ -31,7 +31,7 @@
 
 {% block content %}
 <div id="body" class="container-fluid"></div>
-<div id="metadata" class="d-none" data-place-dcid="{{ place_dcid }}" data-topic-id="{{ topic_id }}">
+<div id="metadata" class="d-none" data-place-dcid="{{ place_dcid }}" data-more-places="{{ more_places }}" data-topic-id="{{ topic_id }}">
   <div id="place-name" data-pn="{{ place_name }}"></div>
   <div id="place-type" data-pt="{{ place_type }}"></div>
   <div id="locale" data-lc="{{ locale }}"></div>

static/js/apps/topic_page/app.tsx

@@ -18,7 +18,6 @@
  * Main component for topic pages.
  */
 
-import _ from "lodash";
 import React from "react";
 
 import { SubjectPageMainPane } from "../../components/subject_page/main_pane";
@@ -33,6 +32,10 @@ interface AppPropType {
    * The place to show the page for.
    */
   place: NamedTypedPlace;
+  /**
+   * A list of additional places for the topic page.
+   */
+  morePlaces: string[];
   /**
    * The topic of the current page.
    */
@@ -62,6 +65,7 @@ export function App(props: AppPropType): JSX.Element {
         <div className="row col-md-9x col-lg-10">
           <PageSelector
             selectedPlace={props.place}
+            morePlaces={props.morePlaces}
             selectedTopic={props.topic}
             topicsSummary={props.topicsSummary}
           />

static/js/apps/topic_page/main.ts

@@ -40,6 +40,9 @@ function renderPage(): void {
   const topic = document.getElementById("metadata").dataset.topicId;
   // TODO(beets): remove these if they remain unused.
   const dcid = document.getElementById("metadata").dataset.placeDcid;
+  const morePlaces = JSON.parse(
+    document.getElementById("metadata").dataset.morePlaces
+  );
   const placeName = document.getElementById("place-name").dataset.pn;
   const placeType =
     document.getElementById("place-type").dataset.pt || DEFAULT_PAGE_PLACE_TYPE;
@@ -67,6 +70,7 @@ function renderPage(): void {
   ReactDOM.render(
     React.createElement(App, {
       place,
+      morePlaces,
       topic,
       pageConfig,
       topicsSummary,

static/js/apps/topic_page/page_selector.tsx

@@ -29,6 +29,7 @@ import { getPlaceNames } from "../../utils/place_utils";
 
 interface PageSelectorPropType {
   selectedPlace: NamedTypedPlace;
+  morePlaces: string[];
   selectedTopic: string;
   topicsSummary: TopicsSummary;
 }
@@ -38,19 +39,32 @@ export function PageSelector(props: PageSelectorPropType): JSX.Element {
     Record<string, string> | undefined
   >({});
 
+  const [morePlaces, setMorePlaces] = useState<NamedTypedPlace[] | undefined>(
+    []
+  );
+
   useEffect(() => {
     getPlaceOptions(props.selectedTopic, props.topicsSummary, setPlaceOptions);
   }, [props]);
 
+  useEffect(() => {
+    getMorePlaces(props.morePlaces, setMorePlaces);
+  }, [props]);
+
   const topicName =
     props.topicsSummary.topicNameMap[props.selectedTopic] ||
     props.selectedTopic;
 
+  const allNames = [props.selectedPlace.name];
+  for (const item of morePlaces) {
+    allNames.push(item.name);
+  }
+
   return (
     <div className="page-selector-container">
       <div className="page-selector-section">
         <h1>
-          {topicName} in {props.selectedPlace.name}
+          {topicName} in {allNames.join(", ")}
         </h1>
         {/* <div>
           <CustomInput
@@ -127,6 +141,22 @@ function getPlaceOptions(
     });
 }
 
+function getMorePlaces(
+  placeDcids: string[],
+  setMorePlaces: (places: NamedTypedPlace[]) => void
+): void {
+  getPlaceNames(placeDcids).then((placeNames) => {
+    const res: NamedTypedPlace[] = [];
+    for (const dcid in placeNames)
+      res.push({
+        dcid: dcid,
+        name: placeNames[dcid],
+        types: [],
+      });
+    setMorePlaces(res);
+  });
+}
+
 function selectPlace(
   currentTopic: string,
   event: React.ChangeEvent<HTMLInputElement>