Update app.py

app.py

@@ -126,36 +126,40 @@ collection_url = f"https://www.loc.gov/search/?q={search_query}&fo=json"
 # Create an empty placeholder for Quick Stats
 stats_placeholder = st.sidebar.empty()
 
+# Create placeholder for Field Completeness Breakdown
+completeness_placeholder = st.sidebar.empty()
+
 # Helpful Resources (styled and moved below dropdown)
 st.sidebar.markdown("### Helpful Resources", unsafe_allow_html=True)
 # Helpful Resources styled section
+# 3. Helpful Resources Section (Fixed, under Completeness)
 st.sidebar.markdown("""
-<style>
-.sidebar-section h3 {
-    color: lightgray !important;
-    font-size: 1.1rem !important;
-    margin-top: 1.5rem;
-}
-.sidebar-links a {
-    color: lightgray !important;
-    text-decoration: none !important;
-}
-.sidebar-links a:hover {
-    text-decoration: underline !important;
-}
-</style>
-<div class="sidebar-section">
-  <h3>🔗 Helpful Resources</h3>
-  <div class="sidebar-links">
-    <ul style='padding-left: 1em'>
-      <li><a href="https://www.loc.gov/apis/" target="_blank">LOC API Info</a></li>
-      <li><a href="https://www.loc.gov/" target="_blank">Library of Congress Homepage</a></li>
-      <li><a href="https://www.loc.gov/collections/" target="_blank">LOC Digital Collections</a></li>
-      <li><a href="https://www.loc.gov/marc/" target="_blank">MARC Metadata Standards</a></li>
-      <li><a href="https://labs.loc.gov/about-labs/digital-strategy/" target="_blank">LOC Digital Strategy</a></li>
-    </ul>
-  </div>
-</div>
+    <style>
+        .sidebar-section h3 {
+            color: lightgray !important;
+            font-size: 1.1rem !important;
+            margin-top: 1.5rem;
+        }
+        .sidebar-links a {
+            color: lightgray !important;
+            text-decoration: none !important;
+        }
+        .sidebar-links a:hover {
+            text-decoration: underline !important;
+        }
+    </style>
+    <div class="sidebar-section">
+      <h3>🔗 Helpful Resources</h3>
+      <div class="sidebar-links">
+        <ul style='padding-left: 1em'>
+          <li><a href="https://www.loc.gov/apis/" target="_blank">LOC API Info</a></li>
+          <li><a href="https://www.loc.gov/" target="_blank">Library of Congress Homepage</a></li>
+          <li><a href="https://www.loc.gov/collections/" target="_blank">LOC Digital Collections</a></li>
+          <li><a href="https://www.loc.gov/marc/" target="_blank">MARC Metadata Standards</a></li>
+          <li><a href="https://labs.loc.gov/about-labs/digital-strategy/" target="_blank">LOC Digital Strategy</a></li>
+        </ul>
+      </div>
+    </div>
 """, unsafe_allow_html=True)
 
 
@@ -265,21 +269,42 @@ if fetch_data:
 
             # Metadata completeness analysis (enhanced)
             st.subheader("Metadata Completeness Analysis")
+            # Create the completeness table
             completeness = metadata_df.map(lambda x: not is_incomplete(x)).mean() * 100
-
             completeness_df = pd.DataFrame({
                 "Field": completeness.index,
                 "Completeness (%)": completeness.values
             })
-            
-            # ➕ Add this line to create the table used in the sidebar:
             completeness_table = completeness_df.set_index("Field")
+
+            # FILL THE PLACEHOLDER created earlier
             
-            # Main bar chart display
+            with completeness_placeholder:
+                st.markdown("""
+                    <div style='
+                        background-color: #2e2e2e;
+                        padding: 1.2rem;
+                        border-radius: 10px;
+                        margin-top: 1.5rem;
+                        color: lightgray;
+                    '>
+                    <h4 style='margin-bottom: 1rem;'>📊 Field Completeness Breakdown</h4>
+                """, unsafe_allow_html=True)
+            
+                st.dataframe(
+                    completeness_table.style.background_gradient(cmap="Greens").format("{:.1f}%"),
+                    use_container_width=True,
+                    height=240
+                )
+            
+                st.markdown("</div>", unsafe_allow_html=True)
+
+            # Then continue plotting in main panel
             fig = px.bar(completeness_df, x="Field", y="Completeness (%)", title="Metadata Completeness by Field")
             st.plotly_chart(fig)
 
 
+
             # Identify incomplete records
             incomplete_mask = metadata_df.map(is_incomplete).any(axis=1)
             incomplete_records = metadata_df[incomplete_mask]