Implement synchronized scrolling feature in Streamlit app for document comparison

- Added CSS styles for synchronized scrolling layout and scrollbar customization.
- Enhanced JavaScript functionality for improved synchronization between original and redacted document views.
- Introduced a status indicator for active synchronization.
- Updated HTML structure to support new scrolling features and removed legacy code.

src/streamlit_app.py

@@ -95,7 +95,215 @@ st.markdown("""
     border-radius: 10px;
     border: 1px solid #e9ecef;
 }
+
+/* Synchronized scrolling styles */
+.sync-scroll-container {
+    display: flex;
+    gap: 20px;
+    height: 600px;
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+}
+
+.sync-scroll-panel {
+    flex: 1;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.sync-scroll-header {
+    background-color: #f8f9fa;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+    font-weight: bold;
+}
+
+.sync-scroll-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: #fff;
+    scroll-behavior: smooth;
+    transition: scroll-top 0.1s ease-out;
+}
+
+/* Prevent scroll chaining */
+.sync-scroll-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.sync-scroll-content::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+.sync-scroll-content::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+.sync-scroll-content::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
 </style>
+
+<script>
+// Improved synchronized scrolling implementation with better debugging
+console.log('Starting sync scroll setup...');
+
+function setupSyncScroll() {
+    console.log('setupSyncScroll called');
+    
+    // Wait for elements to be available
+    setTimeout(function() {
+        console.log('Looking for scroll elements...');
+        const originalContent = document.getElementById('original-content');
+        const redactedContent = document.getElementById('redacted-content');
+        
+        console.log('Original content element:', originalContent);
+        console.log('Redacted content element:', redactedContent);
+        
+        if (originalContent && redactedContent) {
+            console.log('Both elements found, setting up sync...');
+            
+            let isScrolling = false;
+            let scrollTimeout;
+            
+            function syncScroll(source, target) {
+                if (!isScrolling) {
+                    isScrolling = true;
+                    console.log('Syncing scroll from', source.id, 'to', target.id, 'scrollTop:', source.scrollTop);
+                    target.scrollTop = source.scrollTop;
+                    
+                    // Clear existing timeout
+                    if (scrollTimeout) {
+                        clearTimeout(scrollTimeout);
+                    }
+                    
+                    // Reset flag after a short delay
+                    scrollTimeout = setTimeout(() => { 
+                        isScrolling = false; 
+                        console.log('Scroll sync completed');
+                    }, 100);
+                }
+            }
+            
+            // Remove existing listeners to prevent duplicates
+            if (originalContent._syncScrollHandler) {
+                originalContent.removeEventListener('scroll', originalContent._syncScrollHandler);
+            }
+            if (redactedContent._syncScrollHandler) {
+                redactedContent.removeEventListener('scroll', redactedContent._syncScrollHandler);
+            }
+            
+            // Create new handlers
+            originalContent._syncScrollHandler = function(e) {
+                console.log('Original content scrolled:', e.target.scrollTop);
+                syncScroll(originalContent, redactedContent);
+            };
+            
+            redactedContent._syncScrollHandler = function(e) {
+                console.log('Redacted content scrolled:', e.target.scrollTop);
+                syncScroll(redactedContent, originalContent);
+            };
+            
+            // Add event listeners
+            originalContent.addEventListener('scroll', originalContent._syncScrollHandler, { passive: true });
+            redactedContent.addEventListener('scroll', redactedContent._syncScrollHandler, { passive: true });
+            
+            console.log('Event listeners added successfully');
+            
+            // Show status indicator
+            const statusElement = document.getElementById('sync-status');
+            if (statusElement) {
+                statusElement.style.display = 'block';
+                console.log('Status indicator shown');
+            }
+            
+            // Test the synchronization
+            setTimeout(() => {
+                console.log('Testing scroll sync...');
+                console.log('Original scrollTop:', originalContent.scrollTop);
+                console.log('Redacted scrollTop:', redactedContent.scrollTop);
+                
+                // Try a small scroll to test
+                originalContent.scrollTop = 10;
+                setTimeout(() => {
+                    console.log('After test scroll - Original:', originalContent.scrollTop, 'Redacted:', redactedContent.scrollTop);
+                }, 50);
+            }, 200);
+            
+        } else {
+            console.log('Elements not found, will retry...');
+            // Retry with exponential backoff
+            setTimeout(setupSyncScroll, 300);
+        }
+    }, 200);
+}
+
+// Multiple initialization strategies
+function initializeSyncScroll() {
+    console.log('Initializing sync scroll...');
+    
+    // Strategy 1: Immediate setup
+    setupSyncScroll();
+    
+    // Strategy 2: Setup after DOM ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM loaded, setting up sync scroll...');
+            setupSyncScroll();
+        });
+    }
+    
+    // Strategy 3: Setup after window load
+    window.addEventListener('load', function() {
+        console.log('Window loaded, setting up sync scroll...');
+        setupSyncScroll();
+    });
+    
+    // Strategy 4: Periodic retry for first 10 seconds
+    let attempts = 0;
+    const maxAttempts = 20;
+    const retryInterval = setInterval(function() {
+        attempts++;
+        console.log('Retry attempt', attempts);
+        
+        const originalContent = document.getElementById('original-content');
+        const redactedContent = document.getElementById('redacted-content');
+        
+        if (originalContent && redactedContent) {
+            console.log('Elements found on retry, setting up...');
+            setupSyncScroll();
+            clearInterval(retryInterval);
+        } else if (attempts >= maxAttempts) {
+            console.log('Max retry attempts reached, giving up');
+            clearInterval(retryInterval);
+        }
+    }, 500);
+}
+
+// Start initialization
+initializeSyncScroll();
+
+// Listen for Streamlit-specific events
+if (window.parent && window.parent.postMessage) {
+    console.log('Streamlit environment detected');
+    
+    // Listen for any messages that might indicate a rerun
+    window.addEventListener('message', function(event) {
+        console.log('Received message:', event.data);
+        if (event.data && (event.data.type === 'streamlit:rerun' || event.data.type === 'streamlit:setComponentValue')) {
+            console.log('Streamlit rerun detected, reinitializing sync scroll...');
+            setTimeout(setupSyncScroll, 1000);
+        }
+    });
+}
+
+console.log('Sync scroll script loaded');
+</script>
 """, unsafe_allow_html=True)
 
 # Configure root logger only once (avoid duplicate handlers on reruns)
@@ -385,130 +593,70 @@ if uploaded_files:
                 st.subheader("Original vs Redacted Content")
                 st.caption("Compare the original document content with the redacted version")
                 
+                # Add status indicator
+                st.markdown("""
+                <div id="sync-status" style="padding: 8px; background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 4px; margin-bottom: 10px; display: none;">
+                    ✅ <strong>Synchronized scrolling is active</strong> - Scroll either panel to sync both views
+                </div>
+                """, unsafe_allow_html=True)
+                
                 # Create a diff-like interface with synchronized scrolling and highlighting
                 diff_html = f"""
-                <div style="display: flex; gap: 20px; height: 600px; font-family: 'Courier New', monospace; font-size: 12px;">
-                    <div style="flex: 1; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;">
-                        <div style="background-color: #f8f9fa; padding: 10px; border-bottom: 1px solid #ddd; font-weight: bold; color: #1f77b4;">
+                <div class="sync-scroll-container">
+                    <div class="sync-scroll-panel">
+                        <div class="sync-scroll-header">
                             📋 Original Document
                         </div>
-                        <div id="original-content" style="height: 540px; overflow-y: auto; padding: 10px; background-color: #fff;">
+                        <div id="original-content" class="sync-scroll-content">
                             {create_diff_content(original_md, redacted_md, 'original')}
                         </div>
                     </div>
-                    <div style="flex: 1; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;">
-                        <div style="background-color: #f8f9fa; padding: 10px; border-bottom: 1px solid #ddd; font-weight: bold; color: #ff7f0e;">
+                    <div class="sync-scroll-panel">
+                        <div class="sync-scroll-header">
                             🔒 Redacted Document
                         </div>
-                        <div id="redacted-content" style="height: 540px; overflow-y: auto; padding: 10px; background-color: #fff;">
+                        <div id="redacted-content" class="sync-scroll-content">
                             {create_diff_content(original_md, redacted_md, 'redacted')}
                         </div>
                     </div>
                 </div>
-                
-                <script>
-                // Synchronized scrolling
-                function syncScroll(sourceId, targetId) {{
-                    const source = document.getElementById(sourceId);
-                    const target = document.getElementById(targetId);
-                    if (source && target) {{
-                        target.scrollTop = source.scrollTop;
-                    }}
-                }}
-                
-                // Add scroll event listeners
-                document.addEventListener('DOMContentLoaded', function() {{
-                    const original = document.getElementById('original-content');
-                    const redacted = document.getElementById('redacted-content');
-                    
-                    if (original && redacted) {{
-                        original.addEventListener('scroll', function() {{
-                            syncScroll('original-content', 'redacted-content');
-                        }});
-                        
-                        redacted.addEventListener('scroll', function() {{
-                            syncScroll('redacted-content', 'original-content');
-                        }});
-                    }}
-                }});
-                </script>
                 """
                 
                 st.markdown(diff_html, unsafe_allow_html=True)
                 
+                # Add a hidden component to trigger JavaScript setup after Streamlit reruns
+                st.markdown("""
+                <script>
+                // Trigger setup after Streamlit rerun
+                if (window.parent && window.parent.postMessage) {
+                    // Wait for Streamlit to finish rendering
+                    setTimeout(function() {
+                        setupSyncScroll();
+                    }, 500);
+                }
+                </script>
+                """, unsafe_allow_html=True)
+                
+                  
                 # Add legend for the diff highlighting
                 st.markdown("---")
-                col1, col2, col3 = st.columns(3)
+                col1, col2 = st.columns(2)
                 with col1:
                     st.markdown("**🎨 Diff Legend:**")
                     st.markdown("🔴 **Red background** = Removed content")
                     st.markdown("🟢 **Green background** = Added content")
-                    st.markdown("⚪ **White background** = Unchanged content")
+                    st.markdown("⚪ **White background** = Unchanged content")                
                 
                 with col2:
-                    st.markdown("**🔄 Scrolling:**")
-                    st.markdown("Scroll either panel to sync both views")
-                    st.markdown("Content is aligned for easy comparison")
-                
-                with col3:
                     st.markdown("**💡 Tips:**")
                     st.markdown("Look for red-highlighted sections")
                     st.markdown("These show what was redacted")
                     st.markdown("Use scroll to navigate long documents")
                 
-                # Add download buttons and other options
-                st.markdown("---")
-                st.subheader("📥 Download Options")
-                
-                col1, col2, col3 = st.columns(3)
-                with col1:
-                    st.download_button(
-                        label="📥 Download Original Markdown",
-                        data=original_md,
-                        file_name=f"{selected_file}_original.md",
-                        mime="text/markdown",
-                        use_container_width=True
-                    )
-                with col2:
-                    st.download_button(
-                        label="📥 Download Redacted Markdown", 
-                        data=redacted_md,
-                        file_name=f"{selected_file}_redacted.md",
-                        mime="text/markdown",
-                        use_container_width=True
-                    )
-                with col3:
-                    # Create a detailed diff view
-                    if st.button("🔍 Show Detailed Differences", use_container_width=True):
-                        st.session_state.show_diff = True
-                
-                # Show detailed diff if requested
-                if st.session_state.get("show_diff", False):
-                    st.markdown("---")
-                    st.subheader("🔍 Detailed Content Differences")
-                    
-                    # Simple diff visualization
-                    original_lines = original_md.split('\n')
-                    redacted_lines = redacted_md.split('\n')
-                    
-                    # Find removed lines
-                    removed_lines = []
-                    for line in original_lines:
-                        if line.strip() and line not in redacted_lines:
-                            removed_lines.append(line)
-                    
-                    if removed_lines:
-                        st.warning(f"**Removed {len(removed_lines)} lines containing medication information:**")
-                        for i, line in enumerate(removed_lines[:10]):  # Show first 10 removed lines
-                            st.text(f"❌ {line[:100]}{'...' if len(line) > 100 else ''}")
-                        if len(removed_lines) > 10:
-                            st.text(f"... and {len(removed_lines) - 10} more lines")
-                    else:
-                        st.info("No significant differences detected in the text content")
+             
             
             with tab2:
-                st.subheader("Document Structure Analysis")
-                
+                st.subheader("Document Structure Analysis")                
                 # Show JSON structure comparison
                 col1, col2 = st.columns(2)