Page refresh after every click

🎈 Using Streamlit
1

I followed the tutorial in the document and put a slider in the page. It is x from 1-10, then it give the x^2 as the result. Everytime I drags it, there is a refresh of the whole web page even I am still dragging the slider. There are a lot of content above the slider. So I ends up in the top of the page and I have to scroll to the bottom to find the slider again. Is there a way to disable the refresh or disable the re-run of the whole script?

2

The script rerunning with every interaction is a fundamental property of Streamlit; that’s how it works to update in response to user input.

However, depending on how an app is written, the screen shouldn’t jump around. Please can you share your code to see what’s above your slider? (If you can trim it down to just the minimum to show what behavior you’re getting, that would be helpful.)

3

Below are the codes. They are just from the official document at:
#Main concepts of Streamlit - Streamlit Docs

import streamlit as st
import pandas as pd
import altair as alt
import plotly.express as px
import numpy as np
import time

df = pd.DataFrame({
‘first column’: [1, 2, 3, 4],
‘second column’: [10, 20, 30, 40]
})
df

st.write(“Here’s our first attempt at using data to create a table:”)
st.write(pd.DataFrame({
‘first column’: [1, 2, 3, 4],
‘second column’: [10, 20, 30, 40]
}))

dataframe = np.random.randn(10, 20)
st.dataframe(dataframe)

dataframe = pd.DataFrame(
np.random.randn(10, 20),
columns=(‘col %d’ % i for i in range(20)))

st.dataframe(dataframe.style.highlight_max(axis=0))

dataframe = pd.DataFrame(
np.random.randn(10, 20),
columns=(‘col %d’ % i for i in range(20)))
st.table(dataframe)

chart_data = pd.DataFrame(
np.random.randn(20, 3),
columns=[‘a’, ‘b’, ‘c’])

st.line_chart(chart_data)

map_data = pd.DataFrame(
np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
columns=[‘lat’, ‘lon’])

st.map(map_data)

x = st.slider(‘x’) # :point_left: this is a widget
st.write(x, ‘squared is’, x * x)

5

Tip: When you post code in the forum, enclose it with triple back ticks so that it will display as code. (Or you can use the </> icon in the toolbar.) That way its readable and easily copied.

As for your issue, I see what’s happening. That article is filled with a bunch of independent snippets not optimized to run together. I’m actually in the process of rewriting it. :grin: The problem is all the random generation; it goes beyond Streamlit’s ability to know what’s what, which is why they page jumps back to the top. All the random data gets rerandomized and Streamlit doesn’t know it’s “the same.”

Although this is a jump ahead in logic (you’ll learn more about Session State as you keep reading), here’s one way to get better behavior if you combine all those snippets:

Add a few lines at the top to make sure random data is only generated once and not regenerated with each rerun. That will create enough “sameness” that Streamlit won’t lose its place on the page:

import streamlit as st
import pandas as pd
import altair as alt
import plotly.express as px
import numpy as np
import time

if "data" not in st.session_state:
    st.session_state.data = np.random.randn(10, 20)
    st.session_state.data3 = np.random.randn(20, 3)
    st.session_state.mapdata = np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4]
data = st.session_state.data
data3 = st.session_state.data3
mapdata = st.session_state.mapdata

df = pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
})
df

st.write("Here's our first attempt at using data to create a table:")
st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))

dataframe = data
st.dataframe(dataframe)

dataframe = pd.DataFrame(
    data,
    columns=('col %d' % i for i in range(20))
)

st.dataframe(dataframe.style.highlight_max(axis=0))

dataframe = pd.DataFrame(
    data,
    columns=('col %d' % i for i in range(20))
)
st.table(dataframe)

chart_data = pd.DataFrame(
    data3,
    columns=['a', 'b', 'c']
)

st.line_chart(chart_data)

map_data = pd.DataFrame(
    mapdata,
    columns=['lat', 'lon']
)

st.map(map_data)

x = st.slider('x') # :point_left: this is a widget
st.write(x, 'squared is', x * x)

Like I said, this is a little jump forward in concept; you’ll learn more about Session State if you keep working through the Fundamentals section. The key point is it’s jumping because of all the uncontrolled random generation in the snippets. If you use random generation in an app, there are additional steps to take (such as I did with Session State) to control it properly. :smile: