dcc.Store Support

[kjans123]

Do predefined templates in dash_labs support using the dcc.Store component (https://dash.plotly.com/dash-core-components/store)? If so, what might be the best way to use them in conjunction with a predefined template? When I attempt to have them as an output:

app = dash.Dash(__name__, plugins=[dl.plugins.FlexibleCallbacks()])
tpl = dl.templates.DbcRow(
    app, title="Select Correct Contours")

store = dcc.Store(id='store')
tpl.add_component(store, location='left')
@app.callback(
    args=dict(good=tpl.new_button("Good", label=None, id='GOOD'),
              bad=tpl.new_button('Bad', label=None, id='BAD')),
    output=[tpl.new_div(), tpl.new_div(), store],
    template=tpl)
def callback(good, bad, store):
     pass

app.layout = dbc.Container(fluid=True, children=tpl.children)
if __name__ == "__main__":
    app.run_server(debug=True)

I get this error:

Traceback (most recent call last):
  File "E:\kjans\Anaconda\coordinates\AI_Project\select_dashboard\main.py", line 59, in <module>
    @app.callback(
  File "C:\Users\KyleJanson\.conda\envs\py39\lib\site-packages\dash_labs\_callback.py", line 278, in _callback
    all_outputs, output_form = _normalize_output(output, template)
  File "C:\Users\KyleJanson\.conda\envs\py39\lib\site-packages\dash_labs\_callback.py", line 152, in _normalize_output
    raise ValueError("Invalid dependency: {}".format(dep))
ValueError: Invalid dependency: Store(id='store')

I've tried a few different approaches, but so far, the above error has been consistent across all of them.

[AnnMarieW]

Hi @kjans123 Currently there is no predefined helper function for dcc.Store() (like there is for tpl.new_div() etc) but it's still possible to use this component with a template.

Below is MWE based on your sample code. You can also find a few more examples using dcc.Store in this discussion on the forum.

import dash
import dash_core_components as dcc
import dash_labs as dl
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, plugins=[dl.plugins.FlexibleCallbacks()])
tpl = dl.templates.DbcRow(app, title="Select Correct Contours")

store = dcc.Store(id="store")

@app.callback(
    args=dict(
        good=tpl.new_button("Good", label=None, id="GOOD"),
        bad=tpl.new_button("Bad", label=None, id="BAD"),
    ),
    output=[tpl.new_div(), tpl.new_div(), dl.Output(store, "data")],
    template=tpl,
)
def callback(good, bad):
    return (
        f"Good clicked {good} times",
        f"Bad clicked {bad} times",
        {"good": good, "bad": bad},
    )

@app.callback(dl.Input("store", "data"), template=tpl)
def display_store(stored_data):
    return f"store={stored_data}"

app.layout = dbc.Container(fluid=True, children=tpl.children)

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

[kjans123]

Thank you very much! This solves the issue,