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)
datacommonsorg · Nov 21, 2024 · e2a38bf · e2a38bf
1 parent 37de9d9
commit e2a38bf
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git 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
@@ -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>
     );
   }