Tweaks to new place page for the no data state (datacommonsorg#4827)

Hides the Overview panel when in another category (other than Overview): [screenshot](https://screenshot.googleplex.com/NanbV29seswndcw) Hides the Overview panel when there is no summary. [before](https://screenshot.googleplex.com/5GHepNWgPWom9QZ), [after](https://screenshot.googleplex.com/7jaqgBeeRqdJavY) Hides the child places when there are no child places. [after](https://screenshot.googleplex.com/BuniXa4CBeA6zFu) Shows error message for invalid DCID: [after](https://screenshot.googleplex.com/AtVVbfJkFM3bZhB) Shows missing data message when there is no data: [before](https://screenshot.googleplex.com/9mjJsnVZGq9v8x9) [after](https://screenshot.googleplex.com/573nHshTCnt8YfG) Adds a loading spinner while the charts are loading: [after](https://screenshot.googleplex.com/7c6zo9Csw9ScGmE)
hqpho · Jan 6, 2025 · 86a7943 · 86a7943
1 parent dba2831
commit 86a7943
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 10 deletions.
diff --git a/server/templates/dev_place.html b/server/templates/dev_place.html
@@ -14,6 +14,8 @@
   limitations under the License.
   #}
   {%- extends BASE_HTML -%}
+
+  {% from 'macros/icons.html' import inline_svg %}
 
   {% set main_id = 'dc-places' %}
   {% set page_id = 'page-dc-places' %}
@@ -53,6 +55,11 @@
     <div id="plage-page-main" class="container">
       <div id="place-page-content" class="page-content-container">
       </div>
+      <div id="page-loading" class="mt-4" style="display:none;">
+        {{ inline_svg('progress_activity') }}
+        {# TRANSLATORS: A message shown on the page while the content is loading. #}
+        <p>{% trans %}Loading{% endtrans %}</p>
+      </div>
     </div>
   </div>
   {% endblock %}

diff --git a/static/css/place/dev_place_page.scss b/static/css/place/dev_place_page.scss
@@ -173,3 +173,25 @@ main {
     padding-top: 16px;
   }
 }
+
+#page-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  svg {
+    font-size: 24px;
+    animation: rotating 2s linear infinite;
+  }
+  p {
+    margin: 3px 0 0 0;
+  }
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/static/js/place/dev_place_main.tsx b/static/js/place/dev_place_main.tsx
@@ -505,6 +505,7 @@ const PlaceCharts = (props: {
  * related places, and chart data.
  */
 export const DevPlaceMain = (): React.JSX.Element => {
+  const overviewString = "Overview";
   // Core place data
   const [place, setPlace] = useState<NamedTypedPlace>();
   const [placeSummary, setPlaceSummary] = useState<string>();
@@ -521,11 +522,18 @@ export const DevPlaceMain = (): React.JSX.Element => {
   const [childPlaces, setChildPlaces] = useState<NamedTypedPlace[]>([]);
   const [parentPlaces, setParentPlaces] = useState<NamedTypedPlace[]>([]);
   const [pageConfig, setPageConfig] = useState<SubjectPageConfig>();
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [categories, setCategories] = useState<string[]>();
 
   const urlParams = new URLSearchParams(window.location.search);
-  const category = urlParams.get("category") || "Overview";
+  const category = urlParams.get("category") || overviewString;
+  const isOverview = category === overviewString;
   const forceDevPlaces = urlParams.get("force_dev_places") === "true";
+  const hasPlaceCharts =
+    place && pageConfig && pageConfig.categories.length > 0;
+  const hasNoCharts =
+    place && pageConfig && pageConfig.categories.length == 0 && !isLoading;
 
   /**
    * On initial load, get place metadata from the page's metadata element
@@ -537,6 +545,12 @@ export const DevPlaceMain = (): React.JSX.Element => {
       console.error("Error loading place page metadata element");
       return;
     }
+    if (
+      pageMetadata.dataset.placeDcid != "" &&
+      pageMetadata.dataset.placeName === ""
+    ) {
+      setHasError(true);
+    }
     setPlace({
       name: pageMetadata.dataset.placeName,
       dcid: pageMetadata.dataset.placeDcid,
@@ -546,6 +560,14 @@ export const DevPlaceMain = (): React.JSX.Element => {
     setPlaceSubheader(pageMetadata.dataset.placeSubheader);
   }, []);
 
+  /**
+   * Set the visibility on the loading indicator on loading changes.
+   */
+  useEffect(() => {
+    const loadingElem = document.getElementById("page-loading");
+    loadingElem.style.display = isLoading ? "" : "none";
+  }, [isLoading, setIsLoading]);
+
   /**
    * Once we have place data, fetch chart and related places data from the API.
    * Updates state with API responses and derived data.
@@ -554,6 +576,7 @@ export const DevPlaceMain = (): React.JSX.Element => {
     if (!place) {
       return;
     }
+    setIsLoading(true);
     (async (): Promise<void> => {
       const [placeChartsApiResponse, relatedPlacesApiResponse] =
         await Promise.all([
@@ -575,8 +598,9 @@ export const DevPlaceMain = (): React.JSX.Element => {
       setChildPlaces(relatedPlacesApiResponse.childPlaces);
       setParentPlaces(relatedPlacesApiResponse.parentPlaces);
       setPageConfig(config);
+      setIsLoading(false);
     })();
-  }, [place]);
+  }, [place, category]);
 
   useEffect(() => {
     if (placeChartsApiResponse && placeChartsApiResponse.charts) {
@@ -589,11 +613,14 @@ export const DevPlaceMain = (): React.JSX.Element => {
         )
       );
     }
-  }, [placeChartsApiResponse, setPlaceChartsApiResponse, setCategories]);
+  }, [placeChartsApiResponse, setPlaceChartsApiResponse]);
 
   if (!place) {
     return <div>Loading...</div>;
   }
+  if (hasError) {
+    return <div>Place &quot;{place.dcid}&quot; not found.</div>;
+  }
   return (
     <RawIntlProvider value={intl}>
       <PlaceHeader
@@ -607,19 +634,29 @@ export const DevPlaceMain = (): React.JSX.Element => {
         place={place}
         forceDevPlaces={forceDevPlaces}
       />
-      <PlaceOverview
-        place={place}
-        placeSummary={placeSummary}
-        parentPlaces={parentPlaces}
-      />
-      <RelatedPlaces place={place} childPlaces={childPlaces} />
-      {place && pageConfig && (
+      {isOverview && placeSummary != "" && (
+        <PlaceOverview
+          place={place}
+          placeSummary={placeSummary}
+          parentPlaces={parentPlaces}
+        />
+      )}
+      {isOverview && childPlaces.length > 0 && (
+        <RelatedPlaces place={place} childPlaces={childPlaces} />
+      )}
+      {hasPlaceCharts && (
         <PlaceCharts
           place={place}
           childPlaceType={childPlaceType}
           pageConfig={pageConfig}
         />
       )}
+      {hasNoCharts && (
+        <div>
+          No {category === overviewString ? "" : category} data found for{" "}
+          {place.name}.
+        </div>
+      )}
     </RawIntlProvider>
   );
 };