From c1c2425e8fc2ba32d8df8ad294f33ce9e781776a Mon Sep 17 00:00:00 2001
From: Julia Wu <juliawu@google.com>
Date: Thu, 23 Feb 2023 10:14:44 -0800
Subject: [PATCH] [NL] Fix blank place overview for non-US places. (#2281)

Fix blank space in the place overview tile when querying for non-US
places. This PR fixes the same issue as, and supersedes #2271. It uses
simpler logic which should be more robust. In particular we:
* Only show ranking tables for places in the US (geoId/ dcids)
* Updates CSS to fix spacing issues when ranking tables are missing
* Changes flavor text to "Learn about" instead of "Learn more about" per
offline discussion.

Before:

![image](https://user-images.githubusercontent.com/4034366/220425647-2c44715b-4258-4df4-ac62-50cc4adba31e.png)

After:
![Screenshot 2023-02-21 at 10 03 01
AM](https://user-images.githubusercontent.com/4034366/220425695-8e1efde8-ac52-426c-a05a-f2e81295bed5.png)


Other Screenshots:
![Screenshot 2023-02-21 at 10 03 16
AM](https://user-images.githubusercontent.com/4034366/220426234-882105cb-7846-4c46-b0b0-5aa793352488.png)
![Screenshot 2023-02-21 at 10 03 30
AM](https://user-images.githubusercontent.com/4034366/220426243-ffba2a7b-071d-477e-b4e4-f7bc1a723213.png)
![Screenshot 2023-02-21 at 10 03 48
AM](https://user-images.githubusercontent.com/4034366/220426261-fc5657f5-6d
![Screenshot 2023-02-21 at 10 04 05
AM](https://user-images.githubusercontent.com/4034366/220426272-f73d9744-432f-45ca-aedf-2eb14928028b.png)
3d-453b-850c-e0438343e9e7.png)


Also confir
![Screenshot 2023-02-21 at 9 47 57
AM](https://user-images.githubusercontent.com/4034366/220426285-120aabf9-b39c-432e-a5ad-6b1b2a388726.png)
med changes don't break place pages:
![Screenshot 2023-02-21 at 9 48 09
AM](https://user-images.githubusercontent.com/4034366/220426297-8e7f90a6-d281-41ac-9224-f2e87af11061.png)
![Screenshot 2023-02-21 at 9 48 28
AM](https://user-images.githubusercontent.com/4034366/220426305-baa557af-1f70-4e01-9a1b-6eeb085d370c.png)
![Screenshot 2023-02-21 at 9 48 48
AM](https://user-images.githubusercontent.com/4034366/220426322-3f4ae8da-b1f6-440c-8efd-d2e0774fff21.png)
![Screenshot 2023-02-21 at 9 49 12
AM](https://user-images.githubusercontent.com/4034366/220426329-7a1e2a2d-ece5-4671-913e-f33df4527754.png)
---
 static/css/nl_interface.scss                  |  5 +++-
 .../components/tiles/place_overview_tile.tsx  | 14 ++++++++--
 static/js/place/main_pane.tsx                 |  6 ++++-
 static/js/place/overview.tsx                  | 26 +++++++++++++------
 4 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/static/css/nl_interface.scss b/static/css/nl_interface.scss
index e3f550e65b..e6ec9affbc 100644
--- a/static/css/nl_interface.scss
+++ b/static/css/nl_interface.scss
@@ -199,9 +199,12 @@ $answer-min-height: 100vh;
       padding: 0.25rem;
     }
 
+    .overview-with-ranking .map-container {
+      margin-right: 15px;
+    }
+
     .map-container {
       height: 100%;
-      margin-right: 15px;
     }
   }
 }
diff --git a/static/js/components/tiles/place_overview_tile.tsx b/static/js/components/tiles/place_overview_tile.tsx
index 4c26f10f7c..3c9a7b5d5d 100644
--- a/static/js/components/tiles/place_overview_tile.tsx
+++ b/static/js/components/tiles/place_overview_tile.tsx
@@ -52,16 +52,26 @@ export function PlaceOverviewTile(
     return null;
   }
 
+  // Overview should only show ranking if the place is inside the USA
+  // Also use 'Learn _more_ about' if place is inside the USA
+  const isUsaPlace = props.place.dcid.startsWith("geoId/");
+
   return (
     <>
       <div className="chart-container place-overview-tile">
         <RawIntlProvider value={intl}>
-          <Overview dcid={props.place.dcid} locale="en" />
+          <Overview
+            dcid={props.place.dcid}
+            showRanking={isUsaPlace}
+            locale="en"
+          />
         </RawIntlProvider>
       </div>
       {!_.isEmpty(subtopics) && (
         <div className="subtopics-section">
-          <h3>Learn more about {props.place.name}:</h3>
+          <h3>
+            Learn {isUsaPlace && "more "}about {props.place.name}:
+          </h3>
           <div className="subtopic-links-container">
             {subtopics.map((subTopic, i) => {
               return (
diff --git a/static/js/place/main_pane.tsx b/static/js/place/main_pane.tsx
index 2f3bdf601d..52e3660453 100644
--- a/static/js/place/main_pane.tsx
+++ b/static/js/place/main_pane.tsx
@@ -132,7 +132,11 @@ class MainPane extends React.Component<MainPanePropType> {
     return (
       <RawIntlProvider value={intl}>
         {this.showOverview() && (
-          <Overview dcid={this.props.dcid} locale={this.props.locale} />
+          <Overview
+            dcid={this.props.dcid}
+            showRanking={true}
+            locale={this.props.locale}
+          />
         )}
         {topics.map((topic: string, index: number) => {
           if (isOverview) {
diff --git a/static/js/place/overview.tsx b/static/js/place/overview.tsx
index 08d061fb3e..4498a3bfca 100644
--- a/static/js/place/overview.tsx
+++ b/static/js/place/overview.tsx
@@ -28,22 +28,32 @@ interface OverviewPropType {
    * The locale of the page.
    */
   locale: string;
+  /**
+   * Whether to show ranking.
+   */
+  showRanking: boolean;
 }
 
 class Overview extends React.Component<OverviewPropType> {
   render(): JSX.Element {
     return (
-      <section className="factoid col-12">
+      <section
+        className={`factoid col-12 ${
+          this.props.showRanking && "overview-with-ranking"
+        }`}
+      >
         <div className="row">
-          <div className="col-12 col-md-4">
+          <div className={`col-12 ${this.props.showRanking && "col-md-4"}`}>
             <GoogleMap dcid={this.props.dcid}></GoogleMap>
           </div>
-          <div className="col-12 col-md-8">
-            <Ranking
-              dcid={this.props.dcid}
-              locale={this.props.locale}
-            ></Ranking>
-          </div>
+          {this.props.showRanking && (
+            <div className="col-12 col-md-8">
+              <Ranking
+                dcid={this.props.dcid}
+                locale={this.props.locale}
+              ></Ranking>
+            </div>
+          )}
         </div>
       </section>
     );