diff --git a/server/routes/dev_place/utils.py b/server/routes/dev_place/utils.py index 92619e760b..a6152362d5 100644 --- a/server/routes/dev_place/utils.py +++ b/server/routes/dev_place/utils.py @@ -313,6 +313,7 @@ def chart_config_to_overview_charts(chart_config, child_place_type: str): # Maps each parent place type to a list of valid child place types. # This hierarchy defines how places are related in terms of containment. PLACE_TYPES_TO_CHILD_PLACE_TYPES = { + "Continent": ["Country"], "GeoRegion": ["Country", "City"], "Country": [ "State", "EurostatNUTS1", "EurostatNUTS2", "AdministrativeArea1" diff --git a/server/templates/place.html b/server/templates/place.html index 61a43f2f3b..0c0c5a92c3 100644 --- a/server/templates/place.html +++ b/server/templates/place.html @@ -62,8 +62,8 @@

{{ place_type_with_parent_places_

-
-
+
+ dcid: {{ place_dcid }}
diff --git a/server/webdriver/shared_tests/place_explorer_test.py b/server/webdriver/shared_tests/place_explorer_test.py index e7a66b457a..d03aa6f082 100644 --- a/server/webdriver/shared_tests/place_explorer_test.py +++ b/server/webdriver/shared_tests/place_explorer_test.py @@ -116,48 +116,6 @@ def test_page_serve_mtv(self): "place-highlight-in-overview").text self.assertTrue(place_type.startswith("Population:")) - def test_place_search(self): - """Test the place search box can work correctly.""" - california_title = "California - Place Explorer - " + self.dc_title_string - # Load USA page. - self.driver.get(self.url_ + USA_URL) - - # Wait until "Change Place" toggle has loaded. - element_present = EC.visibility_of_element_located( - (By.ID, 'change-place-toggle-text')) - WebDriverWait(self.driver, self.TIMEOUT_SEC).until(element_present) - - # Click on Change place - change_place_toggle = self.driver.find_element(By.ID, - 'change-place-toggle-text') - change_place_toggle.click() - - # Wait until the search bar is visible. - element_present = EC.visibility_of_element_located( - (By.ID, 'place-autocomplete')) - WebDriverWait(self.driver, self.TIMEOUT_SEC).until(element_present) - - # Search for California in search bar - search_box = self.driver.find_element(By.ID, "place-autocomplete") - search_box.send_keys(PLACE_SEARCH) - - # Wait until the place name has loaded. - element_present = EC.presence_of_element_located( - (By.CSS_SELECTOR, '.pac-item:nth-child(1)')) - WebDriverWait(self.driver, self.TIMEOUT_SEC).until(element_present) - - # Select the first result from the list and click on it. - first_result = self.driver.find_element(By.CSS_SELECTOR, - '.pac-item:nth-child(1)') - first_result.click() - - # Wait until the page loads and the title is correct. - WebDriverWait(self.driver, - self.TIMEOUT_SEC).until(EC.title_contains(california_title)) - - # Assert page title is correct. - self.assertEqual(california_title, self.driver.title) - def test_demographics_link(self): """Test the demographics link can work correctly.""" title_text = "Median age by gender: states near California" diff --git a/static/css/place/dev_place_page.scss b/static/css/place/dev_place_page.scss index 5eed901317..849125da8b 100644 --- a/static/css/place/dev_place_page.scss +++ b/static/css/place/dev_place_page.scss @@ -158,4 +158,16 @@ main { font-weight: 400; line-height: 28px; } + + .show-more-toggle { + align-items: center; + color: var(--link-color); + cursor: pointer; + display: flex; + gap: 2px; + font-size: 14px; + font-weight: 500; + padding-left: 8px; + padding-top: 16px; + } } diff --git a/static/css/place/place_page.scss b/static/css/place/place_page.scss index f5b77131e2..245861a5b0 100644 --- a/static/css/place/place_page.scss +++ b/static/css/place/place_page.scss @@ -210,6 +210,25 @@ $chart-border: 0.5px solid #dee2e6; flex-wrap: wrap; justify-content: space-between; + .dcid-and-knowledge-graph { + align-items: flex-end; + color: var(--gm-3-ref-neutral-neutral-40); + display: flex; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0.1px; + margin-left: auto; + padding: 10px 12px 10px 0; + text-align: right; + + a { + color: var(--link-color); + text-decoration: none; + } + } + @media only screen and (max-width: 420px) { flex-direction: column; } diff --git a/static/js/place/dev_place_main.tsx b/static/js/place/dev_place_main.tsx index 16e3db0151..c7e39d7c1d 100644 --- a/static/js/place/dev_place_main.tsx +++ b/static/js/place/dev_place_main.tsx @@ -411,16 +411,27 @@ const RelatedPlaces = (props: { place: NamedTypedPlace; childPlaces: NamedTypedPlace[]; }) => { + const [isCollapsed, setIsCollapsed] = useState(true); const { place, childPlaces } = props; if (!childPlaces || childPlaces.length === 0) { return null; } + + const NUM_PLACES = 15; + const showToggle = childPlaces.length > NUM_PLACES; + const truncatedPlaces = childPlaces.slice(0, NUM_PLACES); + const numPlacesCollapsed = childPlaces.length - NUM_PLACES; + + const toggleShowMore = () => { + setIsCollapsed(!isCollapsed); + }; + return (
Places in {place.name}
- {childPlaces.map((place) => ( + {(isCollapsed ? truncatedPlaces : childPlaces).map((place) => (
{place.name} @@ -429,6 +440,16 @@ const RelatedPlaces = (props: { ))}
+ {showToggle && ( +
+ + {isCollapsed ? `Show ${numPlacesCollapsed} more` : "Show less"} + + + {isCollapsed ? "expand_more" : "expand_less"} + +
+ )}
); }; diff --git a/static/js/place/place.ts b/static/js/place/place.ts index d627133cae..f146e9c23b 100644 --- a/static/js/place/place.ts +++ b/static/js/place/place.ts @@ -20,7 +20,6 @@ import React from "react"; import ReactDOM from "react-dom"; import { PageData } from "../chart/types"; -import { NlSearchBar } from "../components/nl_search_bar"; import { loadLocaleData } from "../i18n/i18n"; import { GA_EVENT_NL_SEARCH, @@ -34,13 +33,8 @@ import { MainPane, showOverview } from "./main_pane"; import { Menu } from "./menu"; import { PageSubtitle } from "./page_subtitle"; import { PlaceHighlight } from "./place_highlight"; -import { PlaceSearch } from "./place_search"; import { isPlaceInUsa } from "./util"; -// Temporarily hide NL search bar on frontend until backend pipelines are -// implemented. -const SHOW_NL_SEARCH_BAR = false; - // Window scroll position to start fixing the sidebar. let yScrollLimit = 0; // Max top position for the sidebar, relative to #sidebar-outer. @@ -198,24 +192,6 @@ function renderPage(): void { const data: PageData = landingPageData; const isUsaPlace = isPlaceInUsa(dcid, data.parentPlaces); - if (SHOW_NL_SEARCH_BAR) { - ReactDOM.render( - React.createElement(NlSearchBar, { - initialValue: "", - inputId: "query-search-input", - onSearch, - placeholder: `Enter a question to explore`, - shouldAutoFocus: false, - }), - document.getElementById("nl-search-bar") - ); - } - - ReactDOM.render( - React.createElement(PlaceSearch, {}), - document.getElementById("place-search-container") - ); - ReactDOM.render( React.createElement(Menu, { pageChart: data.pageChart,