graph LR
App_App["App.App"]
AppNode["AppNode"]
WidgetStateManager["WidgetStateManager"]
Block["Block"]
ElementNodeRenderer["ElementNodeRenderer"]
components_widgets["components.widgets"]
StreamlitEndpoints["StreamlitEndpoints"]
Theme_and_Styling["Theme and Styling"]
App_App -- "dispatches deltas to" --> AppNode
AppNode -- "is used by" --> Block
AppNode -- "is used by" --> ElementNodeRenderer
WidgetStateManager -- "provides state to" --> components_widgets
Block -- "utilizes" --> ElementNodeRenderer
ElementNodeRenderer -- "queries" --> AppNode
components_widgets -- "retrieves/updates state via" --> WidgetStateManager
components_widgets -- "utilizes" --> StreamlitEndpoints
components_widgets -- "accesses theme from" --> Theme_and_Styling
Theme_and_Styling -- "provides styling to" --> App_App
Theme_and_Styling -- "provides styling to" --> components_widgets
The Streamlit frontend architecture is centered around the App.App component, which acts as the main orchestrator, processing data from the backend and managing the overall UI state. The AppNode component forms the core data model, representing the hierarchical structure of UI elements, which is dynamically updated by App.App through incoming deltas. The rendering of these UI elements is handled by ElementNodeRenderer, which dispatches to specific React components within components.widgets based on the element type. Interactive components.widgets manage their internal state and communicate updates back to the backend via the WidgetStateManager. Communication with the Streamlit backend for various services like file uploads and media URLs is facilitated by StreamlitEndpoints. Finally, Theme and Styling ensures a consistent visual appearance across all components, providing styling information to both the main App.App and individual components.widgets. This design promotes a clear separation of concerns, with data management, rendering, and interaction handled by distinct, interconnected components.
The top-level orchestrator, responsible for initializing the connection, processing incoming protobuf deltas, managing navigation, and dispatching updates to the UI state.
Related Classes/Methods:
Manages the hierarchical tree structure of UI elements, applying deltas to update this tree, which drives the rendering of UI components. It serves as the core data model for the frontend's view.
Related Classes/Methods:
Manages the state of all interactive widgets, storing values, providing methods for widgets to update their states, and sending updated widget states back to the Streamlit backend, including form submission logic.
Related Classes/Methods:
A foundational component for structuring the Streamlit UI, handling the layout and rendering of child elements and nested blocks (e.g., containers, columns, tabs).
Related Classes/Methods:
Responsible for rendering individual UI elements (widgets, charts, text) based on the AppNode structure, acting as a dispatcher to select the appropriate React component for each element type.
Related Classes/Methods:
A collection of individual React components representing interactive UI widgets (e.g., buttons, sliders, text inputs). Each handles its specific UI rendering, user input, and communicates state changes.
Related Classes/Methods:
Provides an interface for the frontend to communicate with the Streamlit backend server for operations suchs as building URLs for media files, handling file uploads/downloads, and checking source URL responses.
Related Classes/Methods:
Manages the application's visual theme and styling, providing utilities and hooks for components to access and apply consistent styling.
Related Classes/Methods: