Streamlit how to guide: advanced tips for Data Scientists

Amp X Data Scientist Dean Shabi provides his guide to navigating Streamlit.

Intro

At Amp X , we use Streamlit to create interactive Python-based web applications.

It allows our data scientists to convert their analyses into web apps without the need for front-end expertise.

In this blog post, we explore advanced Streamlit features and share tips for getting the most out of the tool. We cover topics such as creating a multipage app, adding a logo, setting page configuration, using third party libraries for additional functionality, caching data, and using query parameters to share contextual apps.

By leveraging these advanced techniques, you can enhance your data science workflow and create impressive Streamlit applications.

Advanced Multipage Streamlit app

Streamlit has native support for multipage apps, where page file names are the source of truth for page settings. However, this approach has its limitations and can be confusing.

Page ordering is done by numbering the file names, and to add page icons you add emojis to the file name, a very non-pythonic method.

With a complex application, your files may look like this (from the official documentation):

Streamlit-Pages add-on

Streamlit Pages is an experimental, third-party add-on for Streamlit's multipage apps, that allows you to set a page name, icon and order them as you wish.

There are two methods to configure the pages, by manually declaring them in code, or with a config file - which is easier to track and edit.

Here’s how we use it:

• Declare pages inside of a .streamlit/pages.toml config file

[[pages]]
path = "main.py"
name = "Home"
icon = "??"

[[pages]]
path = "more_pages/plots.py"
name = "Plots"
icon = "??"        

• Call show_pages_from_config() at the top of each page, or scroll down to our set_streamlit_page_config_once() tip for easier setup. You can also tweak the page title.

from st_pages import show_pages_from_config, add_page_title 

show_pages_from_config()        

Adding a logo to a multipage app

Sometimes you want to add a custom logo to your app, for example when sharing it with a customer.

• With a multipage app, adding a picture to the sidebar will show below the page selection.
• To add a logo across the app, above the pages, we will use HTML code:
• change IMAGE_URL to the relevant link to the image.

def add_logo():
    """
    Add logo to the sidebar, above multipage selection
    """
    st.markdown(
        """
        <style>
            [data-testid="stSidebarNav"] {
                background-image: url(IMAGE_URL);
                background-repeat: no-repeat;
                background-position: 20px 20px;
            }
        </style>
        """,
        unsafe_allow_html=True,
    )        

Setting page configuration with a multipage Streamlit app

• st.set_page_config helps configuring the page settings. It allows configuring titles, page icon, page layout and many more.
• However, due to Streamlit's nature, this must be the first command used on an app page, and must only be set once per page.
• A known issue with multipage streamlit apps is that the layout can “reset” when navigating between the pages. If you want to configure each page, you’ll hit a StreamlitAPIException error.
• A workaround for that is to use a function that does all the common setup that you want on each page, and then import and run that function on each of the pages.
• here’s how we did it, combining all of the above (setting config, streamlit-pages, adding a logo and more).

def set_streamlit_page_config_once():
    """
    Set streamlit page config once
    This is a workaround around multiple pages in streamlit
    """
    try:
        st.set_page_config(...)
        show_pages_from_config()
        add_logo()

    except st.errors.StreamlitAPIException as e:
        if "can only be called once per app" in e.__str__():
            # ignore this error
            return
        raise e        

Call set_streamlit_page_config_once() at the top of each page under /pages, and voila.

Smaller bits and pieces

Streamlit alerts with timeout

Streamlit alerts or banners are persistent by default.

• You can show Streamlit banners only for a short amount of time, to update your users on the progress of some processing.
• This method will display a warning message and clear it out after 1 second.

def alert_with_timeout(alert: str, timeout: int = 1):

    alert = st.warning(alert)
    time.sleep(timeout) 
    alert.empty() # hide alert        

• Then, call the alert_with_timeout() function with your custom message.

Use streamlit-extra to make your app shine

Streamlit-extras is a Python library putting together valuable Streamlit add-ons.

It adds very useful functionalities to Streamlit, that we hope will be added to the library itself in the future.

You can explore all the little plugins by the documentation.

Specifically, we’re using ?? Mandatory Date Range Picker:

• If you use st.date_input() to slice some pandas dataframe based on user's choice, your code might run into exceptions while the user is choosing the ending time, as the app will run only with the first starting point.
• Mandatory Date Range Picker is similar to st.date_input, but enforces that it always and only returns a start and end date, even if the user has only selected one of the dates. Until the user selects both dates, the app will not run.
• Now, you don’t need to handle such exceptions in your code!
• Import and use as a normal date_input widget!

from streamlit_extras.mandatory_date_range import date_range_picker 

start_time, end_time = date_range_picker("Select a date range")        

Make sure your cached widgets work with multipage navigation

• If you put Streamlit widgets inputs in the session state, you’ll discover that widget state for inputs with same keys is not synced when switching pages. What happens is that your session state will be preserved between pages, but your widgets will reset.
• For example, you could store the output of date_range_picker in a session state, to use in all of your pages, only to discover it gets reset when you come back to that page.
• This is a known bug that can be easily solved by calling this method at the top of each page.

def setup_widgets():
    for k, v in st.session_state.items():
        st.session_state[k] = v        

The Magic of Caching

Caching is a key feature in software development, and it's especially important in Streamlit, though it's often overlooked. In Streamlit, caching lets you save data in your app, meaning calculations only need to happen once, unless the input data changes.

Caching is crucial because it saves time. For example, if your Streamlit app is loading a large dataset from an API or doing a complex calculation, without caching, these tasks would have to be redone every time you make a change in the app. This can be very slow.

Streamlit offers two caching tools: @st.cache_data and @st.cache_resource.

When used with a function, these tools enable Streamlit to remember and reuse the function's result instead of recalculating it, as long as the inputs don't change. This makes things faster and more efficient.

The difference between these two tools is in their use. @st.cache_resource is for functions that return global resources like database connections or machine learning models. On the other hand, @st.cache_data is for functions that return data, like data frame transformations, database queries, or machine learning predictions.

st.cache_data()
def load_data():
    data = pd.read_csv('your_huge_dataset.csv')
    return data        

You can also set up time to clear the cache, like so:

st.cache_resource(ttl = timedelta(days = 1))        

Use Query Parameters to share contextual apps

Streamlit allows using the app URL to share apps in the exact widget/state configuration. This feature allows you to share the exact view you’re experiencing, rather than just plots, images, or exports.

https://your_app.streamlit.app/?first_key=1&second_key=two        

{
    "first_key" : "1",
    "second_key" : "two",
}        

The st.query_params feature in Streamlit, introduced in version 1.30.0, provides a way to access and manipulate URL query parameters in Streamlit apps.

It offers a dictionary-like interface, allowing you to read and modify the parameters. Notably, it can handle repeated keys in the URL, but returns only the last value for each key using standard methods.

For more detailed information, you can refer to the official Streamlit documentation here.

Wrapping Up

Streamlit is an excellent tool for any data scientist, offering a simple, Pythonic way to build interactive and beautiful data applications. By utilizing these advanced tips and tricks, you can maximise Streamlit's capabilities and streamline your data science workflow.

Look out for our upcoming articles on Streamlit , where we'll be looking at how to authenticate using Google Oath, and how to easily deploy a Streamlit app to k8s.