šŸ“£ Announcing the Storage component

Implement it the same way storing in hidden divs worked: using a callback retrieve localStorage contents as State, manipulate the data, and save. The default ā€œclick countā€ demo in the documentation illustrates how to read and update values stored in local/session/memory. Should be easy to extend to a updating a list of values or dict of list of values.

You can also use State('store-element', 'modified_timestamp') as a lookup for querying new data. Believe the modified timestamp is given as epoch time in milliseconds.

1 Like

This is a HUGE improvement over the hidden div method. Much appreciated. However, I wanted to verify one point: the Store method will incur the same network transport costs as a hidden div, right? In other words, I will still likely want to cache (memoize) very large files?

1 Like

A post was split to a new topic: Infinite loop with dcc.Store?

Just getting into Dashā€¦ so far Iā€™m finding it lets me develop better data visualisation GUIs in a fraction of the time it used to take me (with matlab or IDL) despite the fact that Iā€™m just starting up the learning curve. So, thanks!

Are there any dreams or possibilities to get this going without the overhead of passing the data through a string datatype at some point in the future? Or maybe there is a keyword/flag that Iā€™m missing and it already does this somehow?

Itā€™s much cleaner to have all that hidden div stuff outside of my program, but the fact that it still happens under the hood makes a big difference. In my case (started using larger data sets) I started using a store to keep a downsized copy of a downsampled/averaged portion of data Iā€™m actually visualising. This made it possible for the code to actually executeā€¦ but a variety of callbacks all use it, and converting it to/from strings to lists (and then, inside the callbacks, a numpy array) really slows things down. A few benchmark operations take > 2 minutes using a dash store, and < 15 seconds using a global variable.

A few benchmark operations take > 2 minutes using a dash store, and < 15 seconds using a global variable.

The store data is sent back and forth between the client and the server for each callback. This create network latency. You can try out multi-output and combine the callbacks so thereā€™s only one requests with the store data instead.

1 Like

Oh, wow - thatā€™s a game changing feature! I have yet to make a count, but Iā€™m guessing I could merge about 10 callbacks into a single one thatā€™s going to be faster and probably also easier to read and understand. Things just keep getting betterā€¦

2 Likes

Is this for every callback in the app or just the ones that use store data as input/state?

Is this for every callback in the app or just the ones that use store data as input/state?

Just those that use them in Input/State.

Can you initialize multiple stores from one global store?

Letā€™s say I have a multi-page app and want to store an expensive query in a global store on the index page. Then, I want each page to have its own store that only uses a part of the data obtained from the global store.

Is this theoretically feasible with the current implementation of dcc.Store?

Hi, Have you found a solution for this problem? I am new to Dash and trying to do something similar.

That was more my musing, wondering if an ā€œappendā€ operation were built into the Storage component somewhere, because that would be very efficient if I wanted to save a small live-stream into Dash.

A less efficient than the above (though still more efficient than the other alternatives I can think of), but practically the same thing, method of sending streaming data into a dcc.Store object would be to create a single callback where the same dcc.Store data attribute is both the Output, as well as a State input.

By doing this semi-circular logic, the first time data is sent to dcc.Store, you can send it normally, but once the stream gets going and you want to start appending, simply reference the same dcc.Store in the State (which has your streamā€™s beginning data already), append to that data object, and send it back to dcc.Store in the Output.

This ability to do this is one of Dashā€™s strong points. Let me know if you need more help.

1 Like

Has this issue been resolved? I am experiencing the exact same thing.

Does anyone know why I"m getting ValueError: Invalid file path or buffer object type
retrieving json from a dcc.Store?

1 Like

I face the same error :frowning: I am using PreventUpdate to prevent my updates and now itā€™s throwing Exceptions. Itā€™ll be great if I can suppress this specific Exception in my application.

app_layout = html.Div([

dcc.Store(id='storage-historical'),
dcc.Store(id='storage-quotes'),
dcc.Store(id='storage-option-chain-all'),
dbc.Navbar(
    [
        html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [
                    dbc.Col(dbc.NavbarBrand("TOS Options Wheel Dashboard", className="ml-2")),
                ],
                align="center",
                no_gutters=True,
            ),
            href="#",
        ),
    ],
    color="dark",
    dark=True,
),

Iam having problem with this

Hi @VELAZ, welcome to the forums.

Where exactly do you need help? Your code seems to be incomplete, your layout seems to be OKā€¦

1 Like

Exception has occurred: TypeError

The dash_bootstrap_components.Row component (version 1.2.1) received an unexpected keyword argument: no_gutters Allowed arguments: align, children, className, class_name, id, justify, key, loading_state, style

You can substitute this line with

className=ā€œg-0ā€

See also

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

@adamschroeder has a video about dbc layout:

hi @VELAZ
For future reference, Dash Bootstrap made some changes when it migrated to version 1. You can read more about the changes and the no_gutters being droppped in the migration guide.

Thanks for the possible solution, @AIMPED.