Duplicated sidebar in streamlit app because of calling function

Question

I am building stream lit app, I defined two function, sidebar, tab, etc. output of first function is simply a data frame, and output of the second function is chart. this way the sidebar checkbox are duplicated.. And I don’t know how to fix it?


def func(key1, key2, key3):
    option_1 = st.sidebar.checkbox('x1', key={key1}, value=True)
    option_2 = st.sidebar.checkbox('x2', key={key2})
    option_3 = st.sidebar.checkbox('x3', key={key3})

    dfall = read()
    dfs = []
    if option_1 :
        dfs.append(dfall[0])
    if option_2 :
        dfs.append(dfall[1])
    if option_3 :
        dfs.append(dfall[2])

    if len(dfs) > 1:

        df = pd.concat(dfs)
       
    elif len(dfs) == 1:
        df = dfs[0]

   do something on df..
   return df

def chart():
   df= func(key1="8reh", key2="hdfu03", key3="ryyw32")

   plot the chart 
   return 


with tab1:
    intro()

with tab2:
    func(key1="wwr93", key2="rpt49", key3="rt40")
    
with tab3:
    chart()

Asked By: user14269252

||

Source

Answer 1

One possible solution to avoid the duplicated checkboxes issue is to extract the options selection part from the func() function and place it outside in a separate function, for example:

def checkbox_options(key1, key2, key3):
    option_1 = st.sidebar.checkbox('x1', key=key1, value=True)
    option_2 = st.sidebar.checkbox('x2', key=key2)
    option_3 = st.sidebar.checkbox('x3', key=key3)
    return option_1, option_2, option_3

def func(key1, key2, key3, option_1, option_2, option_3):
    dfall = read()
    dfs = []
    if option_1:
        dfs.append(dfall[0])
    if option_2:
        dfs.append(dfall[1])
    if option_3:
        dfs.append(dfall[2])

    if len(dfs) > 1:
        df = pd.concat(dfs)
    elif len(dfs) == 1:
        df = dfs[0]

    # do something on df..
    return df

def chart():
    option_1, option_2, option_3 = checkbox_options(key1="8reh", key2="hdfu03", 
                                   key3="ryyw32")
    df = func(key1="wwr93", key2="rpt49", key3="rt40", option_1=option_1, 
                                  option_2=option_2, option_3=option_3)

    # plot the chart 
    return

# define the tabs and their contents
with tab1:
    intro()

with tab2:
    option_1, option_2, option_3 = checkbox_options(key1="8reh", key2="hdfu03", key3="ryyw32")
    func(key1="wwr93", key2="rpt49", key3="rt40", option_1=option_1, option_2=option_2, option_3=option_3)

with tab3:
    chart()

his way, the checkbox_options() function extracts the checkbox selection part and returns the results, which are passed as arguments to the func() function. The chart() function also calls checkbox_options() and passes the returned options to func() for processing. By doing this, the duplicate checkboxes issue should be resolved.

Another possible solution is to move the checkbox options from func to chart. This way, the options will only be displayed once in the sidebar, and the user can select their desired options for both func and chart. Here is an example code snippet:

def func(dfall, option_1, option_2, option_3):
    dfs = []
    if option_1 :
        dfs.append(dfall[0])
    if option_2 :
        dfs.append(dfall[1])
    if option_3 :
        dfs.append(dfall[2])

    if len(dfs) > 1:
        df = pd.concat(dfs)
    elif len(dfs) == 1:
        df = dfs[0]

    # Do something on df..
    return df

def chart(dfall, option_1, option_2, option_3):
    df = func(dfall, option_1, option_2, option_3)

    # Plot the chart
    return

with st.sidebar:
    option_1 = st.checkbox('x1', value=True)
    option_2 = st.checkbox('x2')
    option_3 = st.checkbox('x3')

with tab2:
    dfall = read()
    func(dfall, option_1, option_2, option_3)

with tab3:
    dfall = read()
    chart(dfall, option_1, option_2, option_3)

In this example, the checkbox options are displayed once in the sidebar, and their values are passed as arguments to both func and chart.

Answered By: Thomas J Childers

Duplicated sidebar in streamlit app because of calling function

Question:

Answers: