[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)
datacommonsorg · Feb 23, 2023 · c1c2425 · c1c2425
1 parent fd8e4e4
commit c1c2425
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
     );