Storing Dictionary of Dataframes in hidden Div?

Dash Python
1

Hey, I am trying to figure out how to store my data that I get from calling an API in hidden Divs. The data all needs to be loaded at once but the number of objects that will be returned will change, so I am populating a dictionary with the Jsoniefied dataframes, with the keys as a dropdown and want to store it in a hidden div, and let the user choose which data to display.

I have gotten this to work with single dataframes - but cant seem to get it to work with a dictionary - the server will start but I will get a “Error loading layout” message when I go the address, and a “Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR)” in the console.

Below is an example where I am trying to populate a range slider where data_dict is a dictionary of jsoniefied dataframes.

from helper_functions import data_dict

keys = list(data_dict.keys())
df = data_dict[keys[0]]

app = dash.Dash()

app.layout = html.Div(
    children = [
        html.Div([
            html.Div(id = 'date_selector'),
        ]),

        html.Div(
            id = 'data',
            children = [data_dict],
            style = {'display': 'none'}
        )
    ]
)

@app.callback(
    dd.Output('date_selector', 'children'),
    [dd.Input('data','children')]
)
def update_date_range_slider(data):
    df = data[keys[0]]
    times = pd.date_range(start= df.index.min().date(), end= df.index.max().date() + datetime.timedelta(days=1)).tolist()
    marksdict = {}
    for t in times:
        marksdict[int(time.mktime(t.timetuple()))] = time.strftime('%d %b %Y')

    slider = dcc.RangeSlider(
        min = min(list(marksdict.keys())),
        max = max(list(marksdict.keys())),
        marks = marksdict,
        values = [min(list(marksdict.keys())), max(list(marksdict.keys()))]
    )
    return slider

if __name__ == '__main__':
    app.run_server(debug=True)

Any help here would be greatly appreciated.

Thanks

Found a more Detailed Error Message:

bundle.js:2 Error: component.type is undefined
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
    at Array.map (<anonymous>)
    at s (bundle.js:14)
    at e.value (bundle.js:14)
    at p._renderValidatedComponentWithoutOwnerOrContext (react-dom.min.js:13)
    at p._renderValidatedComponent (react-dom.min.js:13)
    at performInitialMount (react-dom.min.js:13)
    at p.mountComponent (react-dom.min.js:13)
2

There is no need to put data in hidden Div’s to share data between callbacks as a component has been developed to handle this for us. :slightly_smiling_face:
See: 📣 Announcing the Storage component

3

What’s the limit of the DataFrame size by using Storage component?

4

See the first section of the documentation:
https://dash.plot.ly/dash-core-components/store