diff --git a/server/routes/topic_page.py b/server/routes/topic_page.py index e5e1a089c6..aaff1bb5af 100644 --- a/server/routes/topic_page.py +++ b/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), diff --git a/server/templates/topic_page.html b/server/templates/topic_page.html index b03f87d0e4..8fa7586a21 100644 --- a/server/templates/topic_page.html +++ b/server/templates/topic_page.html @@ -31,7 +31,7 @@ {% block content %}
-
+
diff --git a/static/js/apps/topic_page/app.tsx b/static/js/apps/topic_page/app.tsx index f3944e3ce9..6b5bf8872f 100644 --- a/static/js/apps/topic_page/app.tsx +++ b/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 {
diff --git a/static/js/apps/topic_page/main.ts b/static/js/apps/topic_page/main.ts index 6e59251ad3..3775bdda85 100644 --- a/static/js/apps/topic_page/main.ts +++ b/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, diff --git a/static/js/apps/topic_page/page_selector.tsx b/static/js/apps/topic_page/page_selector.tsx index 0170923684..8d24d130c2 100644 --- a/static/js/apps/topic_page/page_selector.tsx +++ b/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 | undefined >({}); + const [morePlaces, setMorePlaces] = useState( + [] + ); + 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 (

- {topicName} in {props.selectedPlace.name} + {topicName} in {allNames.join(", ")}

{/*
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