Dynamic Container with Active Tabs

[spatel]

I am loving Streamlit and grateful for all the work that has gone into this project!

I am creating an app with a side column that will display 2 select boxes. Test code can be found below. The first select box will allow the user to choose a Model. Depending on the model chosen, a different number of tabs will display. The second select box should be dynamic depending on the tab that is currently active which is where I run into trouble. I know this can be achieved with the empty layout api but am having trouble overriding the layout because I’m not able to actually see which tab is active.

Code:

import streamlit as st


# page config
st.set_page_config(layout="wide")

# split window into 2 column-wise sections
#     one for options, one for content
options_col, content_col = st.columns([2, 5], gap="large")

with options_col:
    # model options
    model_selection = st.selectbox('Model', ["Test 1", "Test 2"], key="model_selection")
    # dynamic filters
    filter_container = st.empty()

with content_col:
    if model_selection == "Test 1":
        st.markdown("## Test 1 Model")

        # list tabs
        test1_tab1, test1_tab2 = st.tabs(["Test 1 Tab 1", "Test 1 Tab 2"])
        with test1_tab1:
            with filter_container:
                test1_tab1_selectbox = st.selectbox('Test 1 Tab 1 Selectbox', ['Test 1 Select 1', 'Test 1 Select 2'],
                    key="test1_tab1_selectbox")

        with test1_tab2:
            with filter_container:
                test1_tab2_selectbox = st.selectbox('Test 1 Tab 2 Selectbox', ['Test 1 Select 1'],
                    key="test1_tab2_selectbox")

    elif model_selection == "Test 2":
        st.markdown("## Test 2 Model")

        # list tabs
        tabs = st.tabs(["Test 2 Tab 1"])
        with tabs[0]:
            with filter_container:
                test2_tab1_selectbox = st.selectbox('Test 2 Tab 1 Selectbox', ['Test 2 Select 1', 'Test 2 Select 2'],
                    key="test2_tab1_selectbox")

Here is a picture of the problem I am facing. When I am on Tab 1 for model Test 1, it’s coresponding select box doesnt appear. Is there a way around this or a way to determine which tab is active?

[rf134r131]

I have this exact issue.

For exclusive options, the tab container is not so useful unless it can be determined what the user selected.

Eager to see if there’s a solution.

[blackary]

Unfortunately at this point the tabs container is purely a visual element. At some point we may add functionality like this to allow more programmatic interaction with tabs, but for now it’s purely for visual organization.

For now, I would recommend a third selectbox in place of the tabs for selecting the model.