From c0da00a6f6dce77d796f1b3f99980793a3c67858 Mon Sep 17 00:00:00 2001
From: Christie Ellks <calinc@google.com>
Date: Thu, 21 Nov 2024 10:55:08 -0800
Subject: [PATCH] Remove "In Arcs" header when there are no arcs to display.
 (#4745)

One side effect of this change is that the footer does not stick to the
bottom of the page for short pages. This is non blocking for now might
may be addressed in follow up changes.

Before:

![image](https://github.com/user-attachments/assets/8bae02ac-c9a2-410b-b684-fee336a7fbb0)

After:

![image](https://github.com/user-attachments/assets/3a8e224f-aa4b-49ed-bbce-73c2d5e46bd5)
---
 static/js/browser/app.tsx            | 13 +++-----
 static/js/browser/in_arc_section.tsx | 49 ++++++++++++++++------------
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/static/js/browser/app.tsx b/static/js/browser/app.tsx
index 2695d4a2ad..cefcd2ea85 100644
--- a/static/js/browser/app.tsx
+++ b/static/js/browser/app.tsx
@@ -139,14 +139,11 @@ export class BrowserPage extends React.Component<
             </div>
           )}
           {showInArcSection && (
-            <div className="table-page-section">
-              <h3>In Arcs</h3>
-              <InArcSection
-                nodeName={this.props.nodeName}
-                dcid={this.props.dcid}
-                provDomain={this.state.provDomain}
-              />
-            </div>
+            <InArcSection
+              nodeName={this.props.nodeName}
+              dcid={this.props.dcid}
+              provDomain={this.state.provDomain}
+            />
           )}
           {this.props.pageDisplayType === PageDisplayType.PLACE_STAT_VAR && (
             <div className="table-page-section">
diff --git a/static/js/browser/in_arc_section.tsx b/static/js/browser/in_arc_section.tsx
index 1d81992a1f..8b9ab9e1dc 100644
--- a/static/js/browser/in_arc_section.tsx
+++ b/static/js/browser/in_arc_section.tsx
@@ -59,29 +59,36 @@ export class InArcSection extends React.Component<
   }
 
   render(): JSX.Element {
-    if (!_.isEmpty(this.state.errorMessage)) {
-      return <div className="error-message">{this.state.errorMessage}</div>;
+    if (_.isEmpty(this.state.parentTypes)) {
+      return null;
     }
     return (
-      <div id={LOADING_CONTAINER_ID} className="loading-spinner-container">
-        {this.state.parentTypes.map((parentType) => {
-          const arcsByPredicate = this.state.data[parentType];
-          return Object.keys(arcsByPredicate).map((predicate) => {
-            return (
-              <InArcSubsection
-                nodeName={this.props.nodeName}
-                parentType={parentType}
-                property={predicate}
-                arcValues={arcsByPredicate[predicate]}
-                provDomain={this.props.provDomain}
-                key={parentType + predicate}
-              />
-            );
-          });
-        })}
-        <div id="browser-screen" className="screen">
-          <div id="spinner"></div>
-        </div>
+      <div className="table-page-section">
+        <h3>In Arcs</h3>
+        {!_.isEmpty(this.state.errorMessage) ? (
+          <div className="error-message">{this.state.errorMessage}</div>
+        ) : (
+          <div id={LOADING_CONTAINER_ID} className="loading-spinner-container">
+            {this.state.parentTypes.map((parentType) => {
+              const arcsByPredicate = this.state.data[parentType];
+              return Object.keys(arcsByPredicate).map((predicate) => {
+                return (
+                  <InArcSubsection
+                    nodeName={this.props.nodeName}
+                    parentType={parentType}
+                    property={predicate}
+                    arcValues={arcsByPredicate[predicate]}
+                    provDomain={this.props.provDomain}
+                    key={parentType + predicate}
+                  />
+                );
+              });
+            })}
+            <div id="browser-screen" className="screen">
+              <div id="spinner"></div>
+            </div>
+          </div>
+        )}
       </div>
     );
   }