Refresh clearing predictions on mobile when scrolling to the top

Using Streamlit
1

@Marisa_Smith, I think this question is the same as I have today. When we have too many options to select in the sidebar and we need to scroll to the top to check on x, all content is updated and we lose all data provided. I would like to know if there is how to hide the sidebar when the button to perform the prediction is pressed.

2

Hey @Hildebrando,

Are you able to do a screen recording of this happening so I can get a better understanding of the issue you’re facing?

also, a link to a GitHub repo or providing the code would be very helpful as well!

Happy Streamlit-ing!
Marisa

3

Hi @Marisa_Smit,
It happens when the sidebar covers the entire mobile screen and the user does not have the option to click outside the sidebar to hide it. When the user scrolls to the top of the sidebar, the page refreshes and the prediction is lost. Only occurs on cell phones due to automatic reflesh.
share.streamlit.io/hildebrando001
github
Video

I’d like to hide the sidebar when the button is pressed.

Exemple

if st.sidebar.button('Analyze profile'):
    my_function()
    st.sidebar(visibility=False)  # something like this
4

Hey @Hildebrando,

Thanks for the very helpful video recording. The issue you are showing me in the app is how Streamlit re-executes your script from the top every time a change in a widget state is detected. :level_slider:

That means that for all those sliders each time the user touches one of them it reruns, and the button you use to submit and load the predictions turns back to false and the prediction disappears! :speak_no_evil:

But no worries the team designed the form and form_submit_button for exactly these use cases! :dancer:

The form is designed so that it will not rerun your code until the submit button is pressed, checkout our docs here for more info. :open_book:

I mocked up a solution that would work for your case, with minimal changes to your code:

sidebar = st.sidebar

with sidebar:
    form = st.form("Tune Parameters") #creating the form

    # I will add the submit button at the top, but you could
    # put it at the end (after the "with form" statement)
    submit = form.form_submit_button("Run Predictions")

    with form: #add the sliders
        val_1 = st.slider("Parameter 1", value=10)
        val_2 = st.slider("Parameter 2", value =40)
        val_3 = st.slider("Parameter 3", value =80)

This is what you see in the sidebar:

Screen Shot 2021-06-21 at 12.27.09 PM
Screen Shot 2021-06-21 at 12.27.09 PM978Ă—1180 28.6 KB

ALSO, I have written this code to have your button at the top because there are so many sliders (50 in total! :scream:) this will allow people to immediately make predictions with the defaults and then they can browse to choose some of their own.

(side note: I wonder if there is a way to cut down on the number of sliders. to make the user experience a bit smoother? Maybe there is a multi-select and they choose which parameters they want to adjust and then a slider appears to let them adjust those few…?)

Hope this helps!
Happy Streamlit-ing!
Marisa

(P.S. I made this its own topic since it really deviated from the first topic)

1 Like