Streamlit displays always content of not selected page

Summary

Im switching pages by declaring a session_state[“page”] variable in Streamlit. There are 3 pages: landingpage, dashboard, settings. By clicking on a button the session_state gets updated and the corresponding function gets called in order to fill the pages content:

Steps to reproduce

Code snippet:

in my main.app :
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# app navigation
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# display selected page
if st.session_state["page"] == 'landingpage':
    navigate_landingpage()
elif st.session_state["page"] == 'dashboard':
    create_navigation()
    navigate_dashboard()
elif st.session_state["page"] == 'settings':
    create_navigation()
    navigate_settings()

Content of the functions “navigate_landingpage()”, “navigate_dashboard()”, “navigate_settings()” are just basic Streamlit functionalities.

Expected behavior:

Just showing content of the corresponding function.

Actual behavior:

Depending from which page Im switchting to “dashboard” everytime a part of the content of “landingpage” or “settings” are also shown on the bottom of the reloaded page.

Additional information

Im dealing with this behaviour since I added a while True function for calulations into the “dashboard” page. By switching from “settings” page into “landingpage” page, everything is normal, only problems by switching into or from “dashboard” page!

The code you posted works for me. I guess the issue lies in the part where st.session_state["page"] changes.

In this case, as @Goyo says, the issue most likely lies in some of the code that is not included in your snippet.

If I create this simplistic version of what you’re describing, it works fine

Thanks for the quick reply! I dont have any problems by switching pages. The only thing is that some part of the previous page are also displayed in addition to the selected page.

Ah, I see. Is the “while true” entirely necessary? I have seen that cause issues before with old pieces of UI still showing up blurred. Can you share a reproducible code snippet which shows this behavior?

Also, on a side note, have you considered using the built-in multipage app feature, rather than manually handling page switching?

1 Like

Yes the “while true” is necessary in order to get new data and update the plots continuously…

the main loop looks like:

while True:
        data = get_fresh_data()
        for idx, obj_x in enumerate(station_list):
            status = get_alarm_status(data, obj_x)
            
            if obj_x == "Quick Stats":
                metrics_obj = get_metrics_data(data)
            else:
                metrics_obj = None
            
            fig = build_figure(data, obj_x)
            if status == 'ok':
                fill_reaction_obj(reaction_obj, idx, "ok")
            else:
                fill_reaction_obj(reaction_obj, idx, "nok", ["Here you can advertise :)", "Here you can advertise :)", "Here you can advertise :)"])
            fill_monitoring_obj(monitor_obj, idx, metrics_obj, status, fig)

        time.sleep(st.session_state["refresh_rate"])

For the navigation Iam using the on_hover_tabs component:

For this i set the key to page in order to switch between the pages.

When I am doing only one iteration instead of the “while True”, the blurred area disappears in some seconds…

I have replaced the while True loop with the streamlit/autorefresh component. From now Im not facing with the problem I tried to describe.

Component:

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