Hi there,
so I made this app for data visualization and it creates loads of checkboxes to show / hide lines, show annotations, and so on. Unfortunately, it looks like the more check-boxes I use in a form, the slower the UI gets.
I recorded a screencast where it takes about 30 seconds for clicks to register:
Is there anything I can do about this, or do I have to find a way to get what I want without so many widgets?
Thanks for your help.
Hi @lasinludwig,
That is very problematic indeed. I just tried some code to mass-generate checkboxes like this
with st.form("A form"):
for column in st.columns(4):
with column:
for i in range(1000):
st.checkbox(f"Checkbox {i}", key=f"{i}{column}")
submit_button = st.form_submit_button("Submit")
But, even with 4000 checkboxes I didnât see the behavior you were seeing. Do you have any sort of logic happening that depends on the checkbox state? It shouldnât really matter, since itâs inside a form, but Iâm trying to figure out what could be causing that slowness.
If you have a code snippet that demonstrates the issue, that could be helpful.
Hi blackary,
thank you very much for your help. Iâm glad that the problem is not the number of boxes. That means I must be doing something wrong - which is good, because then it can be fixed. 
Do you know what happens in the background, when a check box inside a form is clicked? Does streamlit still go through the entire code, just without executing anything or something?
I have some little css-âhacksâ in my code to make the color pickers look the way I want them to and to have headings with hover text. I donât think they are the problem though (removed them in a test with no change).
Not sure if this helps, but here is the function I use to create the check boxes:
@dics.timer()
def display_options_main():
with st.expander("Anzeigeoptionen", False):
with st.form("Anzeigeoptionen"):
# columns
col_vis_1, col_vis_2, col_fill, col_anno = st.columns(4)
# change color picker
st.markdown(
"""
<style>
div.css-1me30nu {
gap: 0.5rem;
}
div.css-96rroi {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
line-height: 1.6;
}
div.css-96rroi > label {
margin-bottom: 0px;
padding-left: 8px;
font-size: 1rem;
}
div.css-96rroi > div {
height: 20px;
width: 20px;
vertical-align: middle;
}
div.css-96rroi > div > div {
height: 20px;
width: 20px;
padding: 0px;
vertical-align: middle;
}
</style>
""",
unsafe_allow_html=True,
)
# Ăberschriften
with col_vis_1:
text_with_hover("Anzeigen", "Linien, die angezeigt werden sollen")
with col_vis_2:
text_with_hover("Farbe", "Linienfarbe wÀhlen")
with col_fill:
text_with_hover(
"FĂŒllen", "Linien, die zur x-Achse ausgefĂŒllt werden sollen"
)
with col_anno:
text_with_hover("Maximum", "Maxima als Anmerkung mit Pfeil")
# Check Boxes for line visibility, fill and color
for line in st.session_state["fig_base"].data:
l_n = line.name
l_c = line.line.color
if (
len(line.x) > 0
and "hline" not in l_n
and l_n is not None
and l_c is not None
):
with col_vis_1:
st.checkbox(label=l_n, value=True, key="cb_vis_" + l_n)
with col_vis_2:
st.color_picker(
label=l_n,
value=l_c,
key="cp_" + l_n,
)
with col_fill:
st.checkbox(label=l_n, value=False, key="cb_fill_" + l_n)
# Check Boxes for annotations
for anno in [
anno.name
for anno in st.session_state["fig_base"].layout.annotations
if "hline" not in anno.name
]:
with col_anno:
st.checkbox(label=anno, value=False, key="cb_anno_" + anno)
st.markdown("###")
but_upd_main = st.form_submit_button("Knöpfle")
st.markdown("###")
return but_upd_main
Hereâs my attempt to make a fully-complete standalone version of your script, and with the amount of data I used, it didnât show any lag at all. What does disc.timer do?
from dataclasses import dataclass
import streamlit as st
# dummy
def text_with_hover(text, hover):
st.write(text)
@dataclass
class Line:
name: str
line: dict
x: str
@dataclass
class Annotation:
name: str
data = {
"fig_base": {
"data": [
Line("line1", {"color": "#000"}, "abc"),
Line("line2", {"color": "#080"}, "abc"),
Line("line3", {"color": "#008"}, "abc"),
Line("line4", {"color": "#880"}, "abc"),
Line("line5", {"color": "#808"}, "abc"),
Line("line6", {"color": "#088"}, "abc"),
Line("line7", {"color": "#888"}, "abc"),
Line("line8", {"color": "#000"}, "abc"),
Line("line9", {"color": "#080"}, "abc"),
Line("line10", {"color": "#008"}, "abc"),
],
"layout": {
"annotations": [
Annotation("anno1"),
Annotation("anno2"),
Annotation("anno3"),
Annotation("anno4"),
Annotation("anno5"),
Annotation("anno6"),
Annotation("anno7"),
]
},
}
}
st.session_state["fig_base"] = data["fig_base"]
def display_options_main():
with st.expander("Anzeigeoptionen", False):
with st.form("Anzeigeoptionen"):
# columns
col_vis_1, col_vis_2, col_fill, col_anno = st.columns(4)
# change color picker
st.markdown(
"""
<style>
div.css-1me30nu {
gap: 0.5rem;
}
div.css-96rroi {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
line-height: 1.6;
}
div.css-96rroi > label {
margin-bottom: 0px;
padding-left: 8px;
font-size: 1rem;
}
div.css-96rroi > div {
height: 20px;
width: 20px;
vertical-align: middle;
}
div.css-96rroi > div > div {
height: 20px;
width: 20px;
padding: 0px;
vertical-align: middle;
}
</style>
""",
unsafe_allow_html=True,
)
# Ăberschriften
with col_vis_1:
text_with_hover("Anzeigen", "Linien, die angezeigt werden sollen")
with col_vis_2:
text_with_hover("Farbe", "Linienfarbe wÀhlen")
with col_fill:
text_with_hover(
"FĂŒllen", "Linien, die zur x-Achse ausgefĂŒllt werden sollen"
)
with col_anno:
text_with_hover("Maximum", "Maxima als Anmerkung mit Pfeil")
# Check Boxes for line visibility, fill and color
for line in st.session_state["fig_base"]["data"]:
l_n = line.name
l_c = line.line["color"]
if (
len(line.x) > 0
and "hline" not in l_n
and l_n is not None
and l_c is not None
):
with col_vis_1:
st.checkbox(label=l_n, value=True, key="cb_vis_" + l_n)
with col_vis_2:
st.color_picker(
label=l_n,
value=l_c,
key="cp_" + l_n,
)
with col_fill:
st.checkbox(label=l_n, value=False, key="cb_fill_" + l_n)
# Check Boxes for annotations
for anno in [
anno.name
for anno in st.session_state["fig_base"]["layout"]["annotations"]
if "hline" not in anno.name
]:
with col_anno:
st.checkbox(label=anno, value=False, key="cb_anno_" + anno)
st.markdown("###")
but_upd_main = st.form_submit_button("Knöpfle")
st.markdown("###")
return but_upd_main
display_options_main()
Thanks for trying this. I think the problem is not with the way the check boxes are created - probably nothing to do with the check boxes at all.
This project is a bit of a mess by now. Iâm not a very experienced programmer and every time I learn something new, I try to shove it in this thing. 
@dics.timer() is a good example. I learned about decorators and made one in this project, that logs the time it takes a function to run. It looks like this:
def timer():
def decorator(func):
def wrapper(*args, **kwargs):
start_time = time.perf_counter()
if "dic_exe_time" not in st.session_state:
st.session_state["dic_exe_time"] = {}
result = func(*args, **kwargs)
st.session_state["dic_exe_time"][func.__name__] = (
time.perf_counter() - start_time
)
return result
return wrapper
return decorator
Unfortunately it doesnât help me to find the problem with the slow UI since no function is running while I click stuff in the form.
I think the problem is somewhere else. Iâll try to find it and post it here if I do.
Any tips what could cause something like this?
I definitely understand what itâs like to have a project scale out of control 
I donât have any great ideas off the top of my head, since one of the benefits of putting things in forms is that they shouldnât make anything happen (i.e. no app reruns) until you actually hit the submit button. So, this seems quite strange.
My general recommendation for debugging something like this is to try and isolate the problem by either:
The ideal case is that you come up with two different code snippets, and can say âthis one works fine, but if I add this extra thing, it starts being slowâ. That can be tremendously challenging, but is often the best way to get the bottom of an issue, and either help you solve it, or help someone on our end fix the bug.
Please post again if you have any success, especially if you get a small bit of stand-alone code that reproduces the issue. This looks like a serious issue, but itâs hard to be sure whatâs behind it because itâs part of a bigger app.
I havenât found the issue yet, but Iâve noticed that the amount of data makes a difference. In the screencast, the app uses data from a pandas data frame with about 700,000 data points. When I use a data frame with around 2,000 data points, the UI is significantly more responsive. (The search for the issue continues though, because even with the tiny data frame, itâs not as responsive as expected.)
Do you maybe have any tips for handling larger data frames in streamlit? Could this be a resources-issue? Are there any limits of how big the st.session_state dictionary can be? Maybe I put too much stuff in thereâŠ
(btw, plotly, which I use for the graphs, has no problems with this amount of data and the interactive charts are very responsive, so I donât think those are the issue either.)
That is interesting. You may be running into the resource limitations of what is offered with Streamlit Cloud. Do you notice the same issue when running locally, or only when itâs deployed on Streamlit Cloud?
I have the issue locally as well, so it shouldnât be a problem with the cloudâŠ
Since this is happening only in forms, I donât think it would be a session_state issue. Session state should be able to handle lots of data easily, since it is implemented as some regular python dicts storing values and metadata.
Since I donât have your full code, I canât tell how dataframes tie into the checkbox form code. My initial guess from the screencast is that either the frontend is doing some very slow dataframe computation and blocking the rerendering, or that the rendering itself has some pathological performance issue. I would probably need to do some profiling to determine more.
If you could share some minimal reproduction code, Iâd be happy to investigate whatâs going on. If not, I can at least put this together in a github issue to keep track of it, since it seems like a severe problem.
I just noticed this issue thread, which is also about poor responsiveness of widgets in forms when there is a plotly chart on the page. Seems related, and suggests something about our plotly chart rendering causing performance problems.
Thank you very much for your reply @AnOctopus. It looks like you found the issue. I just tested it and the plotly plots seem to be the problem. When I simply hide the graphs on the page, all the check boxes and other widgets work normally.
This is very unfortunate for me, as the whole point of my app is to show pretty plotly graphs and there doesnât seem to be an easy fix. I guess Iâll have to learn how to use Altair or somethingâŠ
Thanks again for your help.
It is a severe enough issue that I expect to look into it this week, so it will hopefully be fixed in 1.13.1 or 1.14 (a bit late to get it into 1.13.0).
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.