Improve "place in" box on dev place pages (datacommonsorg#4774)

## 1) Fix long list of child places on continent place pages

On continent place pages, the list of child places will contain places
that are more than one level down in containment (e.g, showing
municipalities, not just countries). This PR adds a child place type
entry for continents to the child place fetch logic.

### Before:

![Screenshot 2024-12-05 at 6 18
26 PM](https://github.com/user-attachments/assets/40ff5f18-107b-451e-9657-b2d9c970c534)

### After:

![Screenshot 2024-12-05 at 6 18
33 PM](https://github.com/user-attachments/assets/c18eacb7-d2a3-4108-b844-713a81533466)



## 2) Add a "show more" toggle when the list of child places is long

Sometimes the list of child places is very long, which overwhelms the
page. This PR also adds a "show more" toggle when the number of child
places is greater than 15.

### Long lists are truncated initially
![Screenshot 2024-12-09 at 9 57
08 AM](https://github.com/user-attachments/assets/8cd0747d-5322-4d05-b1dc-69cb3fb7a376)



### Show full list after clicking "show more"
![Screenshot 2024-12-05 at 6 12
25 PM](https://github.com/user-attachments/assets/764e48ee-5cda-4dad-9cf6-4e674dd05ca4)


### Short lists don't show a toggle
![Screenshot 2024-12-05 at 6 11
53 PM](https://github.com/user-attachments/assets/127796db-0bb9-4d25-ba88-237025afc810)

## 3) Replace place search with link to knowledge graph on current place
pages

In preparation for the changes made in PR datacommonsorg#4740, this PR also removes
the place search bar to avoid showing users double search bars, and
instead shows the DCID and a link to the knowledge graph entry, fixing a
longstanding feature regression.

Before:
![Screenshot 2024-12-09 at 11 53
21 AM](https://github.com/user-attachments/assets/6c1be20b-aaa4-47cc-8b41-8c592d538082)


After:
![Screenshot 2024-12-09 at 11 47
12 AM](https://github.com/user-attachments/assets/04305558-9c62-4bb1-a2a8-66e5f713dab5)

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"

server/templates/place.html

@@ -62,8 +62,8 @@ <h3 id="place-type" data-pt="{{ place_type }}">{{ place_type_with_parent_places_
             <h3 id="locale" data-lc="{{ locale }}"></h3>
             <div id="place-highlight"></div>
           </div>
-          <div id="place-change-ui">
-            <div id="place-search-container"></div>
+          <div class="dcid-and-knowledge-graph">
+            dcid:&nbsp;<a href="/browser/{{ place_dcid }}">{{ place_dcid }}</a>
           </div>
         </div>
       </div>

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"

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;
+  }
 }

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;
   }

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 (
     <div className="related-places">
       <div className="related-places-callout">Places in {place.name}</div>
       <div className="item-list-container">
         <div className="item-list-inner">
-          {childPlaces.map((place) => (
+          {(isCollapsed ? truncatedPlaces : childPlaces).map((place) => (
             <div key={place.dcid} className="item-list-item">
               <a className="item-list-text" href={`/place/${place.dcid}`}>
                 {place.name}
@@ -429,6 +440,16 @@ const RelatedPlaces = (props: {
           ))}
         </div>
       </div>
+      {showToggle && (
+        <div className="show-more-toggle" onClick={toggleShowMore}>
+          <span className="show-more-toggle-text">
+            {isCollapsed ? `Show ${numPlacesCollapsed} more` : "Show less"}
+          </span>
+          <span className="material-icons-outlined">
+            {isCollapsed ? "expand_more" : "expand_less"}
+          </span>
+        </div>
+      )}
     </div>
   );
 };

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,