Multi-page app with session state

Hello there :wave:

For a project I needed to build multi-page app with a settings page. As I’ve seen this topic requesting the feature, I decided to share the solution I came up with. It features a custom version of @thiago’s SessionState.

It still relies on hacks, but it should work in most cases. It was tested with Streamlit version 0.61.0.

Things you must be aware of before using it:

  • You must call state.sync() at the end of your app. This function triggers a rerun if you store a new state value or update an already stored object. This is how I fix rollback issues when you interact with widgets bound to a state value. In my demo I call it at the end of main().

  • If I start to drag a slider, 1 second later the mouse is released, probably because of my rerun :man_shrugging:

streamlit-app-2020-05-27-12-05-97.webm

8 Likes

Thanks for this demo! So when calling _get_state, I can then just declare any input/data to store in the session state within any page function?

Hello @vnguyendc,

Exactly. To sum up how you can interact with the state object:

  • You can assign data like so : state.my_value = "my value"
  • Accessing an undefined value will return None instead of throwing an exception
  • You can initialize a value only once by using the state object as a function: `state(my_value=“init value”).

I’ll add a little bit more documentation to the gist later on.

One thing I want to do is preserve a pandas dataframe across pages, however I get this error when trying to store a dataframe in a session state:

ValueError: The truth value of a DataFrame is ambiguous. Use a.empty, a.bool(), a.item(), a.any() or a.all().

Mainly due to the comparison being done in this line:

 if (item not in data or data[item] != value) and item not in self._item_rerun:

Any idea how to work around this?

1 Like

Thanks for your feedback.

I’ve updated the session state implementation in the gist. Instead of doing a naive value comparison, I normalize them first using an internal streamlit function used in their caching system. Now, every object supported by st.cache should work fine.

I’ve also added the possibility to access state values like so : state["my_input"]. This can be useful when you need to assign values dynamically.

Tell me if it works better for you now.

Thanks a lot for this. This is very helpful. I’ll definitely provide more feedback as I continue to implement this code in the application I’m building.

1 Like

Hi Synode,

The session state implementation is working great so far. However, I was wondering if you would be able to implement something where all stored inputs could be reset after a certain action? for example for my application, if I upload a new dataset, I would like to have all inputs reset. I dont want the end user to have to refresh the page every time.

Hello @vnguyendc,

Thanks for your feedback!
I’ve updated the gist. Now you can use state.clear() to clear saved values.

Wow @Synode. This is an awesome implementation! :sunny:

Programmable state is on our roadmap (after custom components and one-click deploy), and this example will definitely provide inspiration. I can see better why you want to tie the state to a page.

We are not implementing (or even designing) yet, but we’d love to collaborate at some point. In particualr, I’d be curious to know if there are any features in Streamlit which would unblock progress on programmable state for you, or any other thoughts you have.

3 Likes

Hello @Adrien_Treuille,

Thanks for your message, and also to your team for this amazing framework!

I had some small ideas related to widgets’ key parameter, and I think it could possibly be useful in designing an easy-to-use session state, and bring even more interaction to Streamlit apps : Proposal for a more useful key parameter (feat. session state, RESTful app and HTTP query string)

3 Likes

This is so neat! I really like what you’re doing Synode! :slight_smile:

1 Like