Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a better way to perform multiple output with Dash by Plotly?

As we can see in Interactivity part of Getting started, one callback function can accept multiple inputs but always has single output.

Assume that we have two blocks separately that must be updated after input change. Of course, the simplest way is to make two callbacks with same input for each of the blocks. The problem is that request performs twice while one is enough to get all data.

@app.callback(
    dash.dependencies.Output('element_1', 'children'),
    [dash.dependencies.Input('filter', 'value')])
def callback_element_1(filter):
    return get_data(filter).el1

@app.callback(
    dash.dependencies.Output('element_2', 'children'),
    [dash.dependencies.Input('filter', 'value')])
def callback_element_2(filter):
    return get_data(filter).el2

Solution I find is to wrap these elements in single block and re-render it completely with a single request. But in this case all static content in the wrapper will be refreshed too, especially if initial elements are far from each other in DOM.

@app.callback(
    dash.dependencies.Output('wrapper', 'children'),
    [dash.dependencies.Input('filter', 'value')])
def callback_element_wrapper(filter):
    data = get_data(filter)
    return html.Div(
        children=[
            data.el1,
            # more static content
            data.el2,
        ]
    )

So maybe there are more elegant way to output in two or more elements with a single request?

like image 879
Oleh Rybalchenko Avatar asked Aug 23 '17 10:08

Oleh Rybalchenko


People also ask

Can dash callback have multiple outputs?

Dash App With Multiple Outputs So far all the callbacks we've written only update a single Output property. We can also update several outputs at once: list all the properties you want to update in app. callback , and return that many items from the callback.

How does dash handle multiple users?

Dash is designed to work in multi-user environments where multiple people view the application at the same time and have independent sessions. If your app uses and modifies a global variable, then one user's session could set the variable to some value which would affect the next user's session.

Can we add multiple input components to a dash callback function?

Dash doesn't at the moment provide a convenient way for determining which component was the triggering input of a callback. The simplest way to do this is to just have two separate callbacks, each which target the same output but only have one of the inputs each.

What is children in Plotly dash?

The children property is special. By convention, it's always the first attribute which means that you can omit it: html. H1(children='Hello Dash') is the same as html. H1('Hello Dash'). Also, it can contain a string, a number, a single component, or a list of components.


1 Answers

Now, Plotly Dash supporting multiple outputs in single event. This is with latest version of dash==0.38.0rc1

@app.callback(
    [
        Output('output1', 'children'), 
        Output('output2', 'children')
    ],
    [
        Input('output-btn', 'n_clicks'),
        State('output-btn', 'n_clicks_timestamp')
    ]
)
def on_click(n_clicks, n_clicks_timestamp):
    if n_clicks is None:
        raise PreventUpdate

    return n_clicks, n_clicks_timestamp

Git Sample

like image 135
Dimuthu Avatar answered Oct 15 '22 10:10

Dimuthu