📣 Announcing multi output!


#1

:mega: Announcing multi output!

Update multiple component props from a single callback!

Try now:

$ pip install dash==0.38.0rc1

Features

  • Use a list/tuple of Output as output in callbacks.
  • Return a tuple/list of value from the callbacks
    • The returned list must have the same length as the list of output
    • The output props are applied in the order they were declared in the output list.

Example

import dash
import dash_core_components as dcc
import dash_table as dt
import dash_html_components as html

from dash.dependencies import Output, Input
from dash.exceptions import PreventUpdate

import plotly.graph_objs as go

sample_data = {
    'series': {
        'data': [
            {'title': 'Game of Thrones', 'score': 9.5},
            {'title': 'Stranger Things', 'score': 8.9},
            {'title': 'Vikings', 'score': 8.6}
        ],
        'style': {
            'backgroundColor': '#ff998a'
        }
    },
    'movies': {
        'data': [
            {'title': 'Rambo', 'score': 7.7},
            {'title': 'The Terminator', 'score': 8.0},
            {'title': 'Alien', 'score': 8.5}
        ],
        'style': {
            'backgroundColor': '#fff289'
        }
    }
}

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('Multi output example'),
    dcc.Dropdown(id='data-dropdown', options=[
        {'label': 'Movies', 'value': 'movies'},
        {'label': 'Series', 'value': 'series'}
    ], value='movies'),
    html.Div([
        dcc.Graph(id='graph'),
        dt.DataTable(id='data-table', columns=[
            {'name': 'Title', 'id': 'title'},
            {'name': 'Score', 'id': 'score'}
        ])
    ])
], id='container')


@app.callback([
    Output('graph', 'figure'),
    Output('data-table', 'data'),
    Output('data-table', 'columns'),
    Output('container', 'style')
], [Input('data-dropdown', 'value')])
def multi_output(value):
    if value is None:
        raise PreventUpdate

    selected = sample_data[value]
    data = selected['data']
    columns = [
        {'name': k.capitalize(), 'id': k}
        for k in data[0].keys()
    ]
    figure = go.Figure(
        data=[
            go.Bar(x=[x['score']], text=x['title'], name=x['title'])
            for x in data
        ]
    )

    return figure, data, columns, selected['style']


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

Feedback welcome!


Update multiple, with one callback
:mega: Announcing the Storage component
#2

Thanks Philippe!!

This is going to make a big impact on a lot of apps I have where 1 input is used in many callbacks where the output components aren’t close to each other in the layout or updating the parent layout messes with user state in an unacceptable way.


#3

Oh my god thank you so much. This is a game changer


#4

This is awesome! Much appreciated for all the hard work that went into this!


#5

wow nice!! this is indeed game changer. In all my dash apps I’ve needed to do very complicated things with local storage in order to achieve multioutput. Thanks a lot Philippe!!


#6

This is great! I’ve been looking forward to this. Is 38rc1 a safe version? When is the release of 38?

Also, if I use conda instead of pip, will I be even further out from getting the release code? Seems like the conda packages are updated later? I’m relatively new to Python so curious if anyone knows how that works. I’m just shy about upgrading to a release candidate version as I have some things I want to make sure don’t break.


#7

Awesome! Thanks, this is really helpful :muscle: