Page reloads on every selection with multiple selectionbox

Alexpic91 · May 10, 2024, 6:21pm

I would need support for a problem related to web page refresh on click of a selectionbox. I have two separate graphs, one below the other with the related selectionbox . Each selectionbox needs to refresh only one of these two graphs. The problem is that every time I select a field from a selectionbox it reloads the whole page. The goal is for it not to refresh the whole page but to refresh only the graph.

Thank you in advance for support

import streamlit as st
import plotly as py 
import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, plot, iplot
import pickle
import streamlit.components.v1 as components
import parsing_weekdate as pw
import plot as plt
import pandas as pd
import stype_font as sf
import calerror as ce



st.set_page_config(page_title=None, page_icon=None, layout="wide", initial_sidebar_state="collapsed", menu_items=None)

oneweek = pd.read_csv('/xxxxxxx')
oneweek = oneweek.iloc[:-2,1:]
fourweek = pd.read_csv('yyyyy')
fourweek = fourweek.iloc[:-2,1:]

make_sidebar()

margins_css = """
    <style>
        .main > div {
            padding-left: 10rem;
            padding-right: 10rem;
        }
    </style>
"""

st.markdown(margins_css, unsafe_allow_html=True)
st.markdown(""" <style> .font2{
font-size:30px ; font-family: 'Montserrat'; color: rgb(20,39,63);text-align: center} 
</style> """, unsafe_allow_html=True)
st.markdown(""" <style> .font {
font-size:50px ; font-family: 'Montserrat'; color: rgb(20,39,63);text-align: center; font-weight: bold} 
</style> """, unsafe_allow_html=True)
st.markdown('<p class="font">Forecasting</p>', unsafe_allow_html=True)
st.write("")
st.write("")
st.write("")
st.write("")

col1, col2, col3 = st.columns(3)

with col3:
    option_1 = st.selectbox(
        "Scegli la label di Analisi",
        ('naive','rf_noads','rf_isoweek_noads','rf_isoweek_prevsell_noads','rf_ads','rf_isoweek_ads','rf_isoweek_prevsell_ads'),
        key = 'oneweek'
    )
with col2:
    st.markdown(""" <style> .font2{
    font-size:30px ; font-family: 'Montserrat'; color: rgb(20,39,63);text-align: center} 
    </style> """, unsafe_allow_html=True)
    st.markdown('<p class="font2">1W Global Observation vs Forecast Values</p>', unsafe_allow_html=True)

if option_1 == 'naive':
    oneweekchart = ce.error(oneweek,'isoweek','observations','naive')
    st.bokeh_chart(plt.plot_timeseries(oneweekchart),use_container_width=True)
elif option_1 == 'rf_noads':
    oneweekchart = ce.error(oneweek,'isoweek','observations','rf_noads')
    st.bokeh_chart(plt.plot_timeseries(oneweekchart),use_container_width=True)
elif option_1 == 'rf_isoweek_noads':
    oneweekchart = ce.error(oneweek,'isoweek','observations','rf_isoweek_noads')
    st.bokeh_chart(plt.plot_timeseries(oneweekchart),use_container_width=True)
elif option_1 == 'rf_isoweek_prevsell_noads':
    oneweekchart = ce.error(oneweek,'isoweek','observations','rf_isoweek_prevsell_noads')
    st.bokeh_chart(plt.plot_timeseries(oneweekchart),use_container_width=True)
elif option_1 == 'rf_ads':
    oneweekchart = ce.error(oneweek,'isoweek','observations','rf_ads')
    st.bokeh_chart(plt.plot_timeseries(oneweekchart),use_container_width=True)
elif option_1 == 'rf_isoweek_ads':
    oneweekchart = ce.error(oneweek,'isoweek','observations','rf_isoweek_ads')
    st.bokeh_chart(plt.plot_timeseries(oneweekchart),use_container_width=True)
else:
    oneweekchart = ce.error(oneweek,'isoweek','observations','rf_isoweek_prevsell_ads')
    st.bokeh_chart(plt.plot_timeseries(oneweekchart),use_container_width=True)
st.write("")
st.write("")
st.write("")
st.write("")
st.write("")
st.write("")
st.write("")
st.write("")

col4, col5, col6 = st.columns(3)

with col6:
    option_2 = st.selectbox(
        "Scegli la label di Analisi",
        ('naive','rf_noads','rf_isoweek_noads','rf_isoweek_prevsell_noads','rf_ads','rf_isoweek_ads','rf_isoweek_prevsell_ads'),
        key = 'fourweek'
    )
with col5:
    st.markdown(""" <style> .font2{
    font-size:30px ; font-family: 'Montserrat'; color: rgb(20,39,63);text-align: center} 
    </style> """, unsafe_allow_html=True)
    st.markdown('<p class="font2">4W Global Observation vs Forecast Values</p>', unsafe_allow_html=True)

if option_2 == 'naive':
    fourweekchart = ce.error(fourweek,'isoweek','observations','naive')
    st.bokeh_chart(plt.plot_timeseries(fourweekchart),use_container_width=True)
elif option_2 == 'rf_noads':
    fourweekchart = ce.error(fourweek,'isoweek','observations','rf_noads')
    st.bokeh_chart(plt.plot_timeseries(fourweekchart),use_container_width=True)
elif option_2 == 'rf_isoweek_noads':
    fourweekchart = ce.error(fourweek,'isoweek','observations','rf_isoweek_noads')
    st.bokeh_chart(plt.plot_timeseries(fourweekchart),use_container_width=True)
elif option_2 == 'rf_isoweek_prevsell_noads':
    fourweekchart = ce.error(fourweek,'isoweek','observations','rf_isoweek_prevsell_noads')
    st.bokeh_chart(plt.plot_timeseries(fourweekchart),use_container_width=True)
elif option_2 == 'rf_ads':
    fourweekchart = ce.error(fourweek,'isoweek','observations','rf_ads')
    st.bokeh_chart(plt.plot_timeseries(fourweekchart),use_container_width=True)
elif option_2 == 'rf_isoweek_ads':
    fourweekchart = ce.error(fourweek,'isoweek','observations','rf_isoweek_ads')
    st.bokeh_chart(plt.plot_timeseries(fourweekchart),use_container_width=True)
else:
    fourweekchart = ce.error(fourweek,'isoweek','observations','rf_isoweek_prevsell_ads')
    st.bokeh_chart(plt.plot_timeseries(fourweekchart),use_container_width=True)

nkwachiabel · May 10, 2024, 6:39pm

You will need to use the st.experimental_fragment in version 1.34 st.fragment - Streamlit Docs

Alexpic91 · May 12, 2024, 9:04am

Thank you very much for your reply, I tried this way but I can’t figure out where I am going wrong because the whole page reloads. Thank you very much in advance for the answer

#from navigation import make_sidebar
import streamlit as st
#import plotly as py 
import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, plot, iplot
import pickle
import streamlit.components.v1 as components
import parsing_weekdate as pw
import plot as plt
import pandas as pd
import stype_font as sf
import calerror as ce

st.set_page_config(page_title=None, page_icon=None, layout="wide", initial_sidebar_state="collapsed", menu_items=None)

if "reruns" not in st.session_state:
    st.session_state.reruns = 0

st.session_state.reruns += 1

oneweek = pd.read_csv('xxxxxxx')
oneweek = oneweek.iloc[:-2,1:]
fourweek = pd.read_csv('xxxxx')
fourweek = fourweek.iloc[:-2,1:]

#make_sidebar()

@st.experimental_fragment
def four(df,type):
    option = option_1
    fourweekchart = ce.error(fourweek,'isoweek','observations',option)
    st.bokeh_chart(plt.plot_timeseries(fourweekchart),use_container_width=True)

margins_css = """
    <style>
        .main > div {
            padding-left: 10rem;
            padding-right: 10rem;
        }
    </style>
"""

st.markdown(margins_css, unsafe_allow_html=True)
st.markdown(""" <style> .font2{
font-size:30px ; font-family: 'Montserrat'; color: rgb(20,39,63);text-align: center} 
</style> """, unsafe_allow_html=True)
st.markdown(""" <style> .font {
font-size:50px ; font-family: 'Montserrat'; color: rgb(20,39,63);text-align: center; font-weight: bold} 
</style> """, unsafe_allow_html=True)
st.markdown('<p class="font">Forecasting</p>', unsafe_allow_html=True)
st.write("")
st.write("")
st.write("")
st.write("")

col1, col2, col3 = st.columns(3)

with col3:
    option_1 = st.selectbox(
        "Scegli la label di Analisi",
        ('naive','rf_noads','rf_isoweek_noads','rf_isoweek_prevsell_noads','rf_ads','rf_isoweek_ads','rf_isoweek_prevsell_ads'),
        key = 'oneweek'
    )
with col2:
    st.markdown(""" <style> .font2{
    font-size:30px ; font-family: 'Montserrat'; color: rgb(20,39,63);text-align: center} 
    </style> """, unsafe_allow_html=True)
    st.markdown('<p class="font2">1W Global Observation vs Forecast Values</p>', unsafe_allow_html=True)

four(oneweek,option_1)

st.write("")
st.write("")
st.write("")
st.write("")
st.write("")
st.write("")
st.write("")
st.write("")

col4, col5, col6 = st.columns(3)

with col6:
    option_2 = st.selectbox(
        "Scegli la label di Analisi",
        ('naive','rf_noads','rf_isoweek_noads','rf_isoweek_prevsell_noads','rf_ads','rf_isoweek_ads','rf_isoweek_prevsell_ads'),
        key = 'fourweek'
    )
with col5:
    st.markdown(""" <style> .font2{
    font-size:30px ; font-family: 'Montserrat'; color: rgb(20,39,63);text-align: center} 
    </style> """, unsafe_allow_html=True)
    st.markdown('<p class="font2">4W Global Observation vs Forecast Values</p>', unsafe_allow_html=True)


four(fourweek,option_2)

system · November 8, 2024, 9:04am

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

Topic		Replies	Views
Page reloads on every selection of selectbox Using Streamlit	2	2727	July 25, 2023
Multiple Selectboxes reload issue Using Streamlit selectbox , pandas , streamlit-cloud	4	631	January 13, 2024
Can't understand why my app always reload Using Streamlit session-state , debugging	2	184	December 28, 2024
Why does changing the value of streamlit selectbox cause the entire page to refresh each time? Using Streamlit session-state , selectbox , pandas , debugging	5	1522	September 21, 2024
Updating the graph display in plotly Using Streamlit windows , plotly	1	1529	August 15, 2022

Page reloads on every selection with multiple selectionbox

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies