Update app.py

app.py

@@ -1,120 +1,157 @@
 import streamlit as st 
 
-
 import time
 
 # Set page config
-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"]');
+st.set_page_config(page_title="Floating Status Button", layout="wide")
+
+# Initialize session state variables for tracking status
+if 'processing' not in st.session_state:
+    st.session_state.processing = False
+if 'section' not in st.session_state:
+    st.session_state.section = 'top'
+
+# Functions to update state
+def start_processing():
+    st.session_state.processing = True
     
-    // 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';
-        }
-    }
+def end_processing():
+    st.session_state.processing = False
     
-    // Continue checking
-    setTimeout(observeStatusWidget, 500);
-}
-
-// Start observing after a delay to ensure DOM is loaded
-setTimeout(observeStatusWidget, 1000);
-</script>
+def go_to_section(section):
+    st.session_state.section = section
 
+# Add CSS for floating button
+st.markdown("""
 <style>
-    /* Position the sticky container */
-    #sticky-status-container {
+    /* Floating action button style */
+    .float-button {
         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);
+        width: 60px;
+        height: 60px;
+        bottom: 40px;
+        right: 40px;
+        background-color: #0066ff;
+        color: #FFF;
+        border-radius: 50px;
+        text-align: center;
+        box-shadow: 2px 2px 3px #999;
+        z-index: 99999;
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
-    }
-    
-    /* Style the status indicators */
-    #custom-status-mirror {
-        padding: 5px 10px;
-        border-radius: 4px;
+        font-size: 16px;
+        text-decoration: none;
         font-weight: bold;
     }
     
-    .status-running {
-        background-color: #ffeb3b;
-        color: #000;
+    .float-button.processing {
+        background-color: #ff9800;
+        animation: pulse 1.5s infinite;
     }
     
-    .status-idle {
-        background-color: #4caf50;
-        color: white;
+    @keyframes pulse {
+        0% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
+        }
+        
+        70% {
+            transform: scale(1);
+            box-shadow: 0 0 0 10px rgba(255, 152, 0, 0);
+        }
+        
+        100% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
+        }
     }
     
-    /* Add padding to prevent content from being hidden */
-    body {
-        padding-top: 60px;
+    /* Hide the default scrollbar */
+    ::-webkit-scrollbar {
+        display: none;
     }
 </style>
+""", unsafe_allow_html=True)
+
+# Create a floating button that shows status and allows navigating to top
+button_class = "float-button processing" if st.session_state.processing else "float-button"
+button_text = "⌛" if st.session_state.processing else "⬆️"
 
-<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}")
+# Use a dummy button to navigate
+st.markdown(f"""
+<a href="#top" class="{button_class}" id="status-float-button">{button_text}</a>
+""", unsafe_allow_html=True)
+
+# Main content with sections and navigation
+st.title("App with Floating Status", anchor="top")
+st.write("This app demonstrates a floating status button that also lets you navigate back to top")
+
+# Create navigation tabs
+tabs = st.tabs(["Section 1", "Section 2", "Section 3"])
+
+with tabs[0]:
+    st.header("Section 1")
+    st.write("Content for section 1")
+    
+    # Add a button that triggers processing
+    if st.button("Start Process 1", on_click=start_processing):
+        with st.spinner("Running process..."):
+            # Simulate work
+            progress = st.progress(0)
+            for i in range(100):
+                time.sleep(0.02)
+                progress.progress(i + 1)
+            end_processing()
+            st.success("Process 1 completed!")
+    
+    # Add content for scrolling
+    for i in range(10):
+        st.write(f"Content line {i} in section 1")
+
+with tabs[1]:
+    st.header("Section 2")
+    st.write("Content for section 2")
+    
+    # Add a button that triggers processing
+    if st.button("Start Process 2", on_click=start_processing):
+        with st.spinner("Running process..."):
+            # Simulate more complex work
+            progress = st.progress(0)
+            for i in range(100):
+                time.sleep(0.03)
+                progress.progress(i + 1)
+            end_processing()
+            st.success("Process 2 completed!")
+    
+    # Add content for scrolling
+    for i in range(10):
+        st.write(f"Content line {i} in section 2")
+
+with tabs[2]:
+    st.header("Section 3")
+    st.write("Content for section 3")
+    
+    # Add a button that triggers processing
+    if st.button("Start Process 3", on_click=start_processing):
+        with st.spinner("Running process..."):
+            # Simulate complex work
+            progress = st.progress(0)
+            for i in range(100):
+                time.sleep(0.04)
+                progress.progress(i + 1)
+            end_processing()
+            st.success("Process 3 completed!")
+    
+    # Add content for scrolling
+    for i in range(10):
+        st.write(f"Content line {i} in section 3")
+
+# Add more content to ensure sufficient scrolling
+st.markdown("---")
+st.header("Additional Content")
+for i in range(20):
+    st.write(f"Additional content line {i}")
 
 # --- SHARED ON ALL PAGES ---
 st.logo(image="images/menu_book_60dp_75FBFD.png")