Reloading an app from within a tab

Using Streamlit
,
1

I have an app that uses tabs. Whenever it is rerun from inside one of the tab, the app reloads with selected tab the first one, and not the one from where the reload was triggered. Example code below:

import streamlit as st
import pandas as pd

def click_function():
    st.warning("I have clicked the button!")

data = pd.DataFrame({"name": ["cat", "dog", "owl"]})
st.session_state['success'] = False

tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"])

with tab1:
            st.header("A cat")
            st.image("https://static.streamlit.io/examples/cat.jpg", width=200)

with tab2:
            st.header("A dog")
            st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

with tab3:
            st.header("An owl")
            st.image("https://static.streamlit.io/examples/owl.jpg", width=200)
            animal = st.selectbox("Select which animal do you like more", data.name, index = None)
            if not st.session_state['success']:
                st.button("Click me", on_click=click_function)

Any orientation on how to deal with it?

Thanks!

2

Why do you need to do that?

Reloading the app means that the current session ends (and its state is forgotten) and a new session is created.

3

Sorry, maybe I did not explain it correctly, but for example on the attached code, there is a button inside tab3, when the button is clicked, the app reloads itself and you appear to tab1. My desired behaviour is to stay on tab3 after clicking the button.

4

I missed the more idiomatic “rerun” in the body of the post.

I would call that a bug, there is no apparent reason for the selected tab changing. That said, I have seen unexpected things happening when callbacks try to change the UI, so I’ve gotten used to not doing it. The simplest way to avoid that in your case is probably getting rid of the callback and just checking the return value of the button:

if st.button("Click me"):
    st.warning("I have clicked the button!")

But that would put the warning below the button. If you want it at the top of the page, you can use a container.

import pandas as pd
import streamlit as st

data = pd.DataFrame({"name": ["cat", "dog", "owl"]})
st.session_state["success"] = False

container = st.container()
tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"])

with tab1:
    st.header("A cat")
    st.image("https://static.streamlit.io/examples/cat.jpg", width=200)

with tab2:
    st.header("A dog")
    st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

with tab3:
    st.header("An owl")
    st.image("https://static.streamlit.io/examples/owl.jpg", width=200)
    animal = st.selectbox("Select which animal do you like more", data.name, index=None)
    if not st.session_state["success"]:
        if st.button("Click me"):
            with container:
                st.warning("I have clicked the button!")
5

The main issue is that st.tabs is not integrated with the state of the app. A request for that to be changed/fixed is old but it’s still open…

With version 1.40, they introduced what could be an alternative with st.segmented_control. It’s basically another style for a selectbox, so the logic is going to be closer to those widgets that to the contexts managers used in st.tabs:

segmented_control

Code: 
import streamlit as st
import pandas as pd


def click_function():
    st.warning("I have clicked the button!")


data = pd.DataFrame({"name": ["cat", "dog", "owl"]})
st.session_state["success"] = False

tab = st.segmented_control(
    "Tab options",
    ["Cat", "Dog", "Owl"],
    selection_mode="single",
    default="Cat",
    label_visibility="collapsed",
)

if tab == "Cat":
    st.header("A cat")
    st.image("https://static.streamlit.io/examples/cat.jpg", width=200)

elif tab == "Dog":
    st.header("A dog")
    st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

elif tab == "Owl":
    st.header("An owl")
    st.image("https://static.streamlit.io/examples/owl.jpg", width=200)
    animal = st.selectbox("Select which animal do you like more", data.name, index=None)
    if not st.session_state["success"]:
        st.button("Click me", on_click=click_function)
1 Like
6

That works perfectly. Thanks a lot!

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.