How to prevent re-loading of streamlit page again and again?

[Annamalaisaravanan]

I’m currently working on a dashboard which has a dual axis chart on the top to see line plot. we have made it dynamic by adding a dropdown contains all the variable name in the data. whenever I select a variable the plot has to update according to it. but in my case, the whole page is re-freshing everytime i make a chnage which i don’t want. I also trying session_state to the graph but still it re-loads as whole. How to resolve this?

Thanks

[Caroline]

Hi @Annamalaisaravanan,

Thanks for posting!

You can use session state, caching, and st.form to prevent re-loading of the entire page.

If you can share a code snippet, we can make more specific suggestions.

Hope this helps!

Caroline

[Annamalaisaravanan]

import streamlit as st
import altair as alt
import pandas as pd
import numpy as np

time_steps14 =14

from lightgbm import LGBMRegressor
from skforecast.ForecasterAutoreg import ForecasterAutoreg

import warnings
warnings.filterwarnings('ignore')

st.set_page_config(page_title='demo app',layout='wide')
st.header('Forecaster demo')

data = pd.read_csv('all data.csv')

if 'Unnamed: 0' in data.columns:
       del data['Unnamed: 0']
       
cols = list(data.columns)

if 'date' in cols:
       cols.remove('date')

def sess_plot():
            
            st.subheader('Sales vs {} trend analysis'.format(st.session_state.graph_var))
            chart_row =st.empty()
            #c = alt.Chart(df1).mark_circle().encode(
            #     x='date', y='Sales',tooltip=['date','Sales']).interactive()

            #st.altair_chart(c, use_container_width=True)
            
            base = alt.Chart(data).encode(x=alt.X('date'),tooltip=['date','Sales',st.session_state.graph_var])
            line =  base.mark_line(color='red').encode(y=alt.Y('Sales', axis=alt.Axis(grid=True)))
            line2 = base.mark_line(color='blue').encode(y=alt.Y(st.session_state.graph_var, axis=alt.Axis(grid=True)))
             
            graph = (line + line2).resolve_scale(y='independent').properties(width=600).interactive()
            chart_row.altair_chart(graph, use_container_width=True)

def test_pred_model(test_data, train_df,forecaster_model,exog_var_gen):
    
    ........................................
    return train_df, forecast

def ma_forecast(orginal_test_col_df, train_df,forecaster1,exog_var,train_exog):
    ....................................................    
    return orginal_test_col_df_


def MAPE(Y_actual,Y_Predicted):
    mape = np.mean(np.abs((Y_actual - Y_Predicted)/Y_actual))*100
    return mape

def baseline_model(df):
                  ..................................................................
                   return orginal_test_col_df,exog_var, train_df, test_df, train_exog,train_y,train_X,test_y,test_X,date_vars,train_end

st.write('session state is ',st.session_state)

submit = st.button('submit')

col1,col2 = st.columns(2)

if 'load_state' not in st.session_state:
        st.session_state['load_state'] = False



if submit or st.session_state.load_state:
        st.session_state['load_state'] = True
        with col1:
            nh = st.selectbox('choose a variable',cols,key='graph_var')
            if 'graph_state' not in st.session_state:
                  st.session_state.graph_state = True
                  
            if st.session_state.graph_state:
                
                sess_plot()
            

        with col2:
           st.dataframe(data)


#st.dataframe(data)
orginal_test_col_df,exog_var,train_df,test_df,train_exog,train_y,train_x,test_y,test_x,date_vars,train_end = baseline_model(data)

exog_var[:] = [x for x in exog_var if "SMA" not in x]

#lgbm forecaster1
lgbm_forecaster1 = ForecasterAutoreg(
                regressor = LGBMRegressor(max_depth= 5, n_estimators= 150, learning_rate = 0.05, random_state=123),
                lags = 15)
lgbm_forecaster1.fit(y=train_y, exog = train_df[train_exog])
orginal_test_col_df_ = ma_forecast(orginal_test_col_df, train_df,lgbm_forecaster1,exog_var,train_exog)
lgbm_mape1 = MAPE((test_df['Sales'].reset_index(drop = True)),orginal_test_col_df_['Predicted_Sales'])
index = pd.Index(list(range(len(train_df),len(train_df)+time_steps14,1)))
orginal_test_col_df_ = orginal_test_col_df_.set_index(index)

x_loc = range(len(data['date']))
x_labels = data['date']

sol1,sol2 = st.columns(2)

cdf1 = line_plot(train_x,train_y,test_x,test_y,orginal_test_col_df_)

st.subheader('LGBM Baseline Model')
st.altair_chart(cdf1,use_container_width=True)
print('traing done')

In this code, sess_plot() is the function that plots the dual axis altair chart. nh variable gets the column names whose value get through graph_var in session_state. now, when the sess_plot() is called, the graph is plotted between three variables i.e. date(x-axis), sales(y1-axis) and nh(y2-axis). below that lgbm regressor is trained on the given dataset.
Every time when I change the nh variable in select box, the graph is dynamically changing for the given variable but at the sametime the training is running again and again.
In streamlit, is it possible to refresh only particular part?, In this case, I want only the graph to refresh according to the changes. I need other parts to be constant.