Update app.py

app.py

@@ -1,153 +1,120 @@
 import streamlit as st 
 
+
 import time
-from datetime import datetime
 
 # Set page config
-st.set_page_config(page_title="Custom Status Indicator", layout="wide")
-
-# Initialize session state for our custom status indicator
-if 'last_update' not in st.session_state:
-    st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
-if 'is_running' not in st.session_state:
-    st.session_state.is_running = False
-
-# Function to toggle the running state
-def toggle_running_state():
-    st.session_state.is_running = not st.session_state.is_running
-    st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
-
-# Function to simulate a computation/process
-def run_process():
-    with st.spinner("Running process..."):
-        # Simulate work
-        time.sleep(3)
-        st.success("Process completed!")
-        st.session_state.is_running = False
-        st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
-
-# Create a container for our fixed header
-header = st.container()
-
-# Add CSS to fix our custom status indicator at the top
-st.markdown("""
+st.set_page_config(page_title="Reliable Sticky Status", layout="wide")
+
+# Create an empty container at the top that will serve as our sticky status container
+sticky_container = st.empty()
+
+# Use JavaScript to track the real status widget and mirror its state to our custom container
+js_code = """
+<script>
+// Function to observe changes in the status widget
+function observeStatusWidget() {
+    // Try to find the actual status widget
+    const statusWidget = document.querySelector('[data-testid="stStatusWidget"]');
+    const runningIndicator = document.querySelector('.stStatusWidget span:contains("Running")');
+    const stopButton = document.querySelector('button[kind="formSubmit"]');
+    
+    // Update our custom status mirror
+    const customStatus = document.getElementById('custom-status-mirror');
+    if (customStatus) {
+        if (runningIndicator) {
+            customStatus.className = 'status-running';
+            customStatus.textContent = 'RUNNING';
+        } else {
+            customStatus.className = 'status-idle';
+            customStatus.textContent = 'IDLE';
+        }
+    }
+    
+    // Continue checking
+    setTimeout(observeStatusWidget, 500);
+}
+
+// Start observing after a delay to ensure DOM is loaded
+setTimeout(observeStatusWidget, 1000);
+</script>
+
 <style>
-    /* Fix the first container to serve as our header */
-    .stApp > div:first-child {
-        position: sticky !important;
-        top: 0 !important;
-        background-color: white !important;
-        z-index: 999 !important;
-        padding: 1rem !important;
-        border-bottom: 1px solid #f0f0f0 !important;
-        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
+    /* Position the sticky container */
+    #sticky-status-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background-color: white;
+        padding: 10px;
+        z-index: 9999;
+        border-bottom: 1px solid #ddd;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
     }
     
-    /* Custom status indicator styles */
-    .status-indicator {
-        display: inline-block;
+    /* Style the status indicators */
+    #custom-status-mirror {
         padding: 5px 10px;
         border-radius: 4px;
-        margin-right: 10px;
+        font-weight: bold;
     }
+    
     .status-running {
         background-color: #ffeb3b;
         color: #000;
     }
+    
     .status-idle {
         background-color: #4caf50;
         color: white;
     }
+    
+    /* Add padding to prevent content from being hidden */
+    body {
+        padding-top: 60px;
+    }
 </style>
-""", unsafe_allow_html=True)
 
-# Create our custom status indicator in the header container
-with header:
-    cols = st.columns([3, 1])
-    
-    with cols[0]:
-        st.title("App with Custom Status Indicator")
-    
-    with cols[1]:
-        status_class = "status-running" if st.session_state.is_running else "status-idle"
-        status_text = "RUNNING" if st.session_state.is_running else "IDLE"
-        
-        st.markdown(f"""
-        <div style="display: flex; align-items: center; justify-content: flex-end;">
-            <div class="status-indicator {status_class}">{status_text}</div>
-            <div>Last update: {st.session_state.last_update}</div>
-        </div>
-        """, unsafe_allow_html=True)
-        
-        if st.button("Run Process" if not st.session_state.is_running else "Stop", 
-                    key="run_button", 
-                    on_click=toggle_running_state):
-            # If we're now in running state, execute the process
-            if st.session_state.is_running:
-                run_process()
-
-# Main content area
-st.write("Scroll down to test if the custom status indicator stays visible")
-
-# Add a separator
-st.markdown("---")
-
-# Create some tabs to organize content
-tab1, tab2, tab3 = st.tabs(["Tab 1", "Tab 2", "Tab 3"])
-
-with tab1:
-    st.header("Tab 1 Content")
-    st.write("This is the content of tab 1")
-    
-    # Add some sample content for scrolling
-    for i in range(10):
-        st.write(f"Content line {i} in tab 1")
-    
-    if st.button("Run Process in Tab 1"):
-        with st.spinner("Running process in Tab 1..."):
-            st.session_state.is_running = True
-            time.sleep(2)
-            st.session_state.is_running = False
-            st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
-            st.success("Process completed in Tab 1!")
-
-with tab2:
-    st.header("Tab 2 Content")
-    st.write("This is the content of tab 2")
-    
-    # Add some sample content for scrolling
-    for i in range(10):
-        st.write(f"Content line {i} in tab 2")
-    
-    if st.button("Run Process in Tab 2"):
-        with st.spinner("Running process in Tab 2..."):
-            st.session_state.is_running = True
-            time.sleep(3)
-            st.session_state.is_running = False
-            st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
-            st.success("Process completed in Tab 2!")
-
-with tab3:
-    st.header("Tab 3 Content")
-    st.write("This is the content of tab 3")
-    
-    # Add some sample content for scrolling
-    for i in range(10):
-        st.write(f"Content line {i} in tab 3")
-    
-    if st.button("Run Process in Tab 3"):
-        with st.spinner("Running process in Tab 3..."):
-            st.session_state.is_running = True
-            time.sleep(4)
-            st.session_state.is_running = False
-            st.session_state.last_update = datetime.now().strftime("%H:%M:%S")
-            st.success("Process completed in Tab 3!")
-
-# Add more content to ensure we have enough to scroll
-st.markdown("---")
-st.header("Additional Content")
-for i in range(10):
-    st.write(f"Additional content line {i}")
+<div id="sticky-status-container">
+    <h3>My Application</h3>
+    <div class="status-container">
+        <span id="custom-status-mirror" class="status-idle">IDLE</span>
+    </div>
+</div>
+"""
+
+# Add our JavaScript and custom sticky header
+st.components.v1.html(js_code, height=50)
+
+# Create a function to simulate a long-running process
+def run_long_process():
+    progress_bar = st.progress(0)
+    for i in range(100):
+        time.sleep(0.05)  # Simulate work being done
+        progress_bar.progress(i + 1)
+    st.success("Process completed!")
+
+# Add a spacer to prevent content overlap with our sticky header
+st.markdown("<div style='height: 20px'></div>", unsafe_allow_html=True)
+
+# Main content of the application
+st.title("Application with Status Mirror")
+st.write("This app demonstrates a custom sticky status indicator")
+
+# Add a button to trigger a process
+if st.button("Run Process"):
+    run_long_process()
+
+# Add content to demonstrate scrolling
+st.markdown("## Sample Content")
+for i in range(30):
+    st.write(f"Content line {i}")
+    if i % 10 == 0:
+        st.markdown(f"### Section {i//10 + 1}")
 
 # --- SHARED ON ALL PAGES ---
 st.logo(image="images/menu_book_60dp_75FBFD.png")