Clearing/Reset State - Design Patterns

Dash Python
1

After researching for upwards of an hour on the best design patterns for clearing state, I’m reaching out for help!

How do you clear state in the app? We’ve attempted to implement a RESET button to clear out charts, but receive an error related to “Duplicate callback outputs”, indicating that “Any given output can only have one callback that sets it”.

Preferred behavior is to reset all output on the screen when initializing a query so that the user knows that all data presented after the search is related to their current search.

For background:

  • We have a dashboard with a set of input fields and roughly 10 output components.
  • We are hitting an Elasticsearch instance for query, and some queries can take upwards of a minute or two to return results.
  • Each component eventually updates with its results
  • However, after extended use, it’s clear that there is an exposure window where the old query data is on the dashboard along with new query data.
  • This in-between state is confusing to users, especially as some queries take longer to run than others.
  • To further compound the problem, we are using chained callbacks in which the output of one component writes to a hidden div to feed as input into another component’s query (further extending the exposure period)

We realize that staging data and not having long running queries is ideal.
We realize that chained callbacks are not ideal and that each output component should be independent of one another.

Any help is greatly appreciated!

1 Like
2

Would it be an option to write the data obtained from the queries to a Store? You could then do the plots based on the Store content, i.e the rendering callbacks would have the Store as Input. You could then clear the whole dashboard simply by clearing the Store.

3

I’ve also been wondering about this!