Stop switching tabs when I am adding in a new variable in tab

Using Streamlit
1

Hi all.

I’ve currently got some tabs I would wish to show alternative graphics within, specifically some plotly plots. I’ve made the tabs so that the names are:

default_tab, distribution_tab = st.tabs(["Historical Comparison - Violin", "Historical Comparison - Distribution"])

With this in mind, I am trying to make in the “Historical Comparison - Distribution” tab, some plotly plots like this:

with distribution_tab:
    if analysis_option == "Manual":

        efa_option = st.selectbox(
            "Please select the efa block you wish to view",
            (1,2,3,4,5,6),
        )

        complementary_option = st.selectbox(
            "Please select the complementary plot with the distribution",
            ("rug", "box", "violin"),
        )
        st.write(
            f"EFA {efa_option} Distribution"
        )

        efa_input_dat = df_input["Clearing Price"][df_input["EFA"] == efa_option].to_frame()
        efa_input_dat['type'] = 'Filtered'
        efa_default_dat = df_default["Clearing Price"][df_default["EFA"] == efa_option].to_frame()
        efa_default_dat['type'] = 'Total'
        total_df = pd.concat([efa_input_dat, efa_default_dat])
        fig = px.histogram(total_df, x="Clearing Price", color="type", marginal=complementary_option)
        st.plotly_chart(fig)

Now, within this tab I can get the data I want fine, but whenever I try to change the value of efa_option selectbox it switches back to the “Historical Comparison - Violin” tab.

I was wondering whether there was a wat to prevent this automatic tab reversal?

Thanks in advance!

2

Hey @sang_young_noh, Thanks for reporting this issue! Unfortunately, I wasn’t able to reproduce this problem with the provided snippet. Changing the value of efa_option selectbox does not switch the tab for me. Do you have a video/gif showing the tab switching issue or a full code snippet?

3

A bit late, but can you see if the workaround I posted here works for you: st.tabs() error with interactive widgets · Issue #4996 · streamlit/streamlit · GitHub

4

I have an app that dynamically adds/removes tabs (i.e. changes their set) based on a multiselect. There are a few problems:

  • The tab index doesn’t go back to zero on update, so if the tab set doesn’t include that index, then the tab selection is somewhere invalid (basically it hangs off the end of the tabs row). You can see this by making the tab set of size 3, selecting index 2, and then updating the tab set to size 2. Since index 2 is no longer valid, you’ll see a hanging tab selection at the end. Since the tab control doesn’t support callbacks, I can’t fix this without a rerun, which I don’t want to do.
  • If the tab set is too big causing the layout to overflow, there’s no way to get to the end tabs, without reducing the size of the tab set.
5

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