Avoid re-computing the screen on checkbox tick

🎈 Using Streamlit
1

Summary

I am displaying a list of 100 items as the result of a model computation. With each result I have a checkbox associated with it that the user can tick. The idea is that the user is building a list of items it want to save at the end. How can I let the user tick these checkboxes without re-displaying all the results individually. I was able to cache the model computation result, however I am unsure as to how to do avoid each result to be re-rerendered on each tickbox click. (results are shown as images).

1 Like
2

Have you tried using a form? For example, here’s a little sample code with checkboxes. There’s a timestamp at the top so you can visually see when the page is loading or not. The two checkboxes above/outside of the form will reload the page with each interaction. The checkboxes inside the form won’t cause the page to reload until you click Submit to send them in batch.

import streamlit as st
import time

st.write(time.time()%10)

st.checkbox('thing1', key='thing1')
st.checkbox('thing2', key='thing2')

with st.form('thing_form'):
    st.checkbox('thing3', key='thing3')
    st.checkbox('thing4', key='thing4')
    st.form_submit_button('Submit')

image

3

Thanks. I ended up going with native HTML as this is better for my use-case. I want to have some dynamic update of the list of selected items. I hit another road block, it doesn’t let me inject javascript in the main scope of the page, only creates it inside iFrames which is not useful (using the components API or simply doesn’t work with the st.markdown API). Is there any non-hacky way to include a javascript script at the top-level scope?

This is a massive pain-point.

4

I see what you are saying about st.components.v1.html creating iframes and st.markdown('''...''', unsafe_allow_html=True) not working as desired with <script>...</script>.

I am not aware of any straightforward way to add scripts to <head>. The two above mentioned methods are the only entry points that I have learned about so far. When I stick a simple script definition in with the components API, it ran for me, but if it’s not workable in your use case, I’m afraid I don’t have a fundamentally different direction to go. There’s another discussion thread on injecting javascript here, but it’s just a discussion about the components API and creating a custom component if a simple script embedding isn’t enough, so not sure if there’s any new information there to glean. Sorry I can’t be more help.

1 Like
5

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