Update app.py

app.py

@@ -36,37 +36,44 @@ BOLD_FONT = "Arial Black, Arial, sans-serif"  # used for bold axis titles & tick
 # =========================
 st.set_page_config(page_title="ST_GeoMech_UCS", page_icon="logo.png", layout="wide")
 
-# General CSS (logo helpers etc.)
+# This is the new CSS block for the sticky header and message box
 st.markdown("""
 <style>
-  .brand-logo { width: 16px; height: auto; object-fit: contain; }
-  .sidebar-header { display:flex; align-items:center; gap:12px; }
-  .sidebar-header .text h1 { font-size: 1.05rem; margin:0; line-height:1.1; }
-  .sidebar-header .text .tag { font-size: .85rem; color:#6b7280; margin:2px 0 0; }
-  .centered-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-</style>
-""", unsafe_allow_html=True)
+/* Add a light gray background to the main app container */
+.stApp {
+    background-color: #f0f2f6;
+}
 
-# CSS to make sticky headers work correctly by overriding Streamlit's overflow property
-st.markdown("""
-<style>
-/* This targets the main content area */
+/* CSS to make the header sticky */
+.fixed-header-container {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    background-color: #f0f2f6; /* Ensure sticky header background matches app background */
+    padding: 10px 0;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* CSS to ensure main content doesn't get hidden under the sticky header */
 .main .block-container {
-    overflow: unset !important;
+    padding-top: 250px; /* Adjust this value to match the height of your sticky header */
 }
 
-/* This targets the vertical block that holds all your elements */
-div[data-testid="stVerticalBlock"] {
-    overflow: unset !important;
+/* General CSS */
+.brand-logo { width: 16px; height: auto; object-fit: contain; }
+.sidebar-header { display:flex; align-items:center; gap:12px; }
+.sidebar-header .text h1 { font-size: 1.05rem; margin:0; line-height:1.1; }
+.sidebar-header .text .tag { font-size: .85rem; color:#6b7280; margin:2px 0 0; }
+.centered-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
 }
 </style>
 """, unsafe_allow_html=True)
 
+
 # Hide uploader helper text ("Drag and drop file here", limits, etc.)
 st.markdown("""
 <style>
@@ -196,9 +203,9 @@ def df_centered_rounded(df: pd.DataFrame, hide_index=True):
     numcols = out.select_dtypes(include=[np.number]).columns
     styler = (
         out.style
-           .format({c: "{:.2f}" for c in numcols})
-           .set_properties(**{"text-align": "center"})
-           .set_table_styles(TABLE_CENTER_CSS)
+            .format({c: "{:.2f}" for c in numcols})
+            .set_properties(**{"text-align": "center"})
+            .set_table_styles(TABLE_CENTER_CSS)
     )
     st.dataframe(styler, use_container_width=True, hide_index=hide_index)
 
@@ -432,29 +439,32 @@ st.sidebar.markdown(f"""
 )
 
 # =========================
-# Reusable Sticky Header Function
+# The main sticky container is defined here, before the app logic
+# This ensures it's rendered at the top of the page regardless of state.
 # =========================
-def sticky_header(title, message):
-    st.markdown(
-        f"""
-        <style>
-        .sticky-container {{
-            position: sticky;
-            top: 0;
-            background-color: white;
-            z-index: 100;
-            padding-top: 10px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #eee;
-        }}
-        </style>
-        <div class="sticky-container">
-            <h3>{title}</h3>
-            <p>{message}</p>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
+with st.container():
+    st.markdown("<div class='fixed-header-container'>", unsafe_allow_html=True)
+    
+    # Conditional rendering for the headers and messages
+    if st.session_state.app_step == "dev":
+        st.header("Case Building")
+        if st.session_state.dev_file_loaded and st.session_state.dev_preview:
+            st.info("Previewed ✓ — now click **Run Model**.")
+        elif st.session_state.dev_file_loaded:
+            st.info("📄 Preview uploaded data using the sidebar button, then click **Run Model**.")
+        else:
+            st.info("Upload your data to build a case, then run the model to review development performance.")
+        
+    elif st.session_state.app_step == "validate":
+        st.header("Validate the Model")
+        st.info("Upload a dataset with the same **features** and **UCS** to evaluate performance.")
+        
+    elif st.session_state.app_step == "predict":
+        st.header("Prediction")
+        st.info("Upload a dataset with the feature columns (no **UCS**).")
+        
+    st.markdown("</div>", unsafe_allow_html=True)
+
 
 # =========================
 # INTRO
@@ -496,14 +506,6 @@ if st.session_state.app_step == "dev":
     if st.sidebar.button("Proceed to Validation ▶", use_container_width=True): st.session_state.app_step="validate"; st.rerun()
     if st.sidebar.button("Proceed to Prediction ▶", use_container_width=True): st.session_state.app_step="predict"; st.rerun()
 
-    # Apply sticky header
-    if st.session_state.dev_file_loaded and st.session_state.dev_preview:
-        sticky_header("Case Building", "Previewed ✓ — now click **Run Model**.")
-    elif st.session_state.dev_file_loaded:
-        sticky_header("Case Building", "📄 **Preview uploaded data** using the sidebar button, then click **Run Model**.")
-    else:
-        sticky_header("Case Building", "**Upload your data to build a case, then run the model to review development performance.**")
-
     if run and st.session_state.dev_file_bytes:
         book = read_book_bytes(st.session_state.dev_file_bytes)
         sh_train = find_sheet(book, ["Train","Training","training2","train","training"])
@@ -571,8 +573,6 @@ if st.session_state.app_step == "validate":
     if st.sidebar.button("⬅ Back to Case Building", use_container_width=True): st.session_state.app_step="dev"; st.rerun()
     if st.sidebar.button("Proceed to Prediction ▶", use_container_width=True): st.session_state.app_step="predict"; st.rerun()
 
-    sticky_header("Validate the Model", "Upload a dataset with the same **features** and **UCS** to evaluate performance.")
-
     if go_btn and up is not None:
         book = read_book_bytes(up.getvalue())
         name = find_sheet(book, ["Validation","Validate","validation2","Val","val"]) or list(book.keys())[0]
@@ -638,8 +638,6 @@ if st.session_state.app_step == "predict":
     go_btn = st.sidebar.button("Predict", type="primary", use_container_width=True)
     if st.sidebar.button("⬅ Back to Case Building", use_container_width=True): st.session_state.app_step="dev"; st.rerun()
 
-    sticky_header("Prediction", "Upload a dataset with the feature columns (no **UCS**).")
-
     if go_btn and up is not None:
         book = read_book_bytes(up.getvalue()); name = list(book.keys())[0]
         df = book[name].copy()
@@ -668,11 +666,11 @@ if st.session_state.app_step == "predict":
             table = pd.DataFrame({
                 "Metric": ["# points","Pred min","Pred max","Pred mean","Pred std","OOR %"],
                 "Value":  [sv["n"],
-                            round(sv["pred_min"],2),
-                            round(sv["pred_max"],2),
-                            round(sv["pred_mean"],2),
-                            round(sv["pred_std"],2),
-                            f'{sv["oor"]:.1f}%']
+                           round(sv["pred_min"],2),
+                           round(sv["pred_max"],2),
+                           round(sv["pred_mean"],2),
+                           round(sv["pred_std"],2),
+                           f'{sv["oor"]:.1f}%']
             })
             st.success("Predictions ready ✓")
             df_centered_rounded(table, hide_index=True)