Streamlit displays always content of not selected page

Using Streamlit
1

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!

2

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

3

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

4

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.

20230524_114022
20230524_1140221920×1080 121 KB

5

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
6

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…

7

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:

8

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