pages/home.py

import streamlit as st
import streamlit.components.v1 as components
from streamlit_shortcuts import button, add_keyboard_shortcuts 

st.title("📘Named Entity Recognition")

def scroll_to_bottom():
    st.write('REACHED BOTTOM OF PAGE!')
#button('scroll_to_bottom', 'Ctrl+End', scroll_to_bottom)
add_keyboard_shortcuts({'Ctrl+End': 'scroll_to_end',})

st.header("Tags the below 41 medical entities")

'ACTIVITY'
'ADMINISTRATION'
'AGE'
'AREA'
'BIOLOGICAL_ATTRIBUTE'
'BIOLOGICAL_STRUCTURE'
'CLINICAL_EVENT'
'COLOR'
'COREFERENCE'
'DATE'
'DETAILED_DESCRIPTION'
'DIAGNOSTIC_PROCEDURE'
'DISEASE_DISORDER'
'DISTANCE'
'DOSAGE'
'DURATION'
'FAMILY_HISTORY'
'FREQUENCY'
'HEIGHT'
'HISTORY'
'LAB_VALUE'
'MASS'
'MEDICATION'
'NONBIOLOGICAL_LOCATION'
'OCCUPATION'
'OTHER_ENTITY'
'OUTCOME'
'PERSONAL_BACKGROUND'
'QUALITATIVE_CONCEPT'
'QUANTITATIVE_CONCEPT'
'SEVERITY'
'SEX'
'SHAPE'
'SIGN_SYMPTOM'
'SUBJECT'
'TEXTURE'
'THERAPEUTIC_PROCEDURE'
'TIME'
'VOLUME'
'WEIGHT'

def scrollToBottom():
  # JavaScript to scroll to bottom
  JS_code = """
  <script>
  // Wrap the code in an Immediately Invoked Function Expression (IIFE)
  // to create a private scope and potentially avoid conflicts.
  (function() {
    // Function to scroll to the bottom of a specific container
    function scrollToBottom() {
      console.log("Attempting to scroll container to bottom."); // Log when scroll function is called
      // --- Identify the scrollable container ---
      // Streamlit often uses a main container div. We'll try to find it.
      // YOU NEED TO INSPECT YOUR DEPLOYED APP'S HTML TO FIND THE CORRECT SELECTOR
      // FOR THE ELEMENT THAT ACTUALLY HAS THE SCROLLBAR.
      //
      // Common candidates based on Streamlit versions and structure:
      // - '.stAppViewContainer'
      // - '.main'
      // - '.block-container'
      // - Look for divs with class names starting with 'st-emotion-cache-' followed by random characters.
      // - A div directly containing your dynamic content (check its class or ID)
      // *** REPLACE THE SELECTOR BELOW with the correct one you found by inspecting your app's HTML ***
      // Use document.querySelector('.your-class-name') for a class, or document.getElementById('your-id') for an ID.
      const scrollableContainer = document.querySelector('.flex flex-1 flex-col'); // <--- REPLACE THIS ENTIRE LINE IF USING getElementById 
      // const scrollableContainer = document.getElementById('stMainBlockContainer'); // <--- REPLACE THIS ENTIRE LINE IF USING querySelector 
      if (scrollableContainer) {
        console.log("Scrollable container found. Scrolling...");
        // Scroll the found container to its bottom
        scrollableContainer.scrollTo({
          top: scrollableContainer.scrollHeight,
          behavior: 'smooth'
        });
      } else {
        console.warn("Scrollable container not found using the specified selector. Please inspect your app's HTML to find the correct class or ID.");
        // Fallback to body scroll (less likely to work for Streamlit's main content area)
        window.scrollTo({
          top: document.body.scrollHeight,
          behavior: 'smooth'
        });
      }
    }
    // --- Logic for handling dynamically added content ---
    // Create a MutationObserver instance.
    // This observer will watch for changes in the DOM.
    const observer = new MutationObserver(function(mutations) {
      console.log("MutationObserver detected changes."); // Log when observer fires
      // Use requestAnimationFrame to ensure the scroll happens after the browser
      // has potentially rendered the new content.
      requestAnimationFrame(scrollToBottom);
    });
    // Configure the observer to watch for changes to the child list of the body element.
    // We keep observing the body because Streamlit adds content there,
    // even if a child element is the one that scrolls.
    const config = { childList: true, subtree: true };
    console.log("Starting MutationObserver on document.body."); // Log when observer starts
    // Start observing the document body for the configured mutations.
    observer.observe(document.body, config);
    // --- Initial scroll on page load ---
    window.addEventListener('load', function() {
        console.log("Window loaded. Initial scroll attempt."); // Log on window load
        requestAnimationFrame(scrollToBottom);
    });
  })(); // End of IIFE
  </script>
  """
  # Render the JavaScript code
  html = f'<div style="display:none">{JS_code}</div>'
  st.components.v1.html(html, height=0, width=0)


scrollToBottom()