📣 Dash 0.41.0 released

Changelogs
dash
dash-renderer
dash-core-components

Highlights

In Depth

Clientside Callbacks

Clientside JS code defined in the assets folder

if(!window.dash_clientside) {window.dash_clientside = {};}
window.dash_clientside.clientside = {
    display: function (value) {
        return 'Client says "' + value + '"';
    }
}

Example Dash App

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import ClientsideFunction, Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Input(id='input'),
    html.Div(id='output-clientside'),
    html.Div(id='output-serverside')
])

@app.callback(
    Output('output-serverside', 'children'),
    [Input('input', 'value')])
def update_output(value):
    return 'Server says "{}"'.format(value)


app.clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='display'
    ),
    Output('output-clientside', 'children'),
    [Input('input', 'value')]
)

if __name__ == "__main__":
    app.run_server(port=8070)

Partial Multi-output

no_update prevents updates for individual outputs:

from dash import Dash, no_update
from dash.dependencies import Input, Output
import dash_html_components as html

app = Dash(__name__)
app.scripts.config.serve_locally = True

app.layout = html.Div([
    html.Button('B', 'btn'),
    html.P('initial1', 'n1'),
    html.P('initial2', 'n2'),
    html.P('initial3', 'n3')
])

@app.callback([Output('n1', 'children'),
                Output('n2', 'children'),
                Output('n3', 'children')],
                [Input('btn', 'n_clicks')])
def show_clicks(n):
    # partial or complete cancelation of updates via no_update
    return [
        no_update if n and n > 4 else n,
        no_update if n and n > 2 else n,
        no_update
    ]

if __name__ == "__main__":
    app.run_server(port=8070)

React 16
Updating to React 16 will enable the use of newer React functionalities like the in progress dev-tools feature.

The upgrade has two immediate side-effects:

  • Any component still using React.PropTypes needs to use the prop-types library instead as it’s been removed entirely
  • Components relying on thrown / uncaught exceptions for control flow will stop working correctly. Unhandled exceptions now causes the component or the entire app to not render

Previous Releases
Dash 0.40
Dash 0.39

9 Likes

As ever, great improvements to the capabilities of Dash, I’m already experimenting with no_update and extendData to see what they can add to my Dash apps.

I’m very interested to see what other people come up with Clientside Callbacks, JavaScript is outside my area of expertise but it looks like writing small simple functions may be able to significantly improve some areas of UI responsiveness, hopefully people on this forum will be sharing some of their creations.

I still get an error in my console that:

Uncaught TypeError: Cannot set property ‘clientside’ of undefined
at clientside.js?m=1554935817.5441072:1

Am I doing this right for the clientside callback?
I used the example given above and saved the corresponding files as
client.py and assets/client.js

I can see the server-side callback working but the client-side callback gives the above error.

Sorry there was a typo in the post above. You’ll need to add:

if(!window.dash_clientside) {window.dash_clientside = {};}

to the top of your clientside JS files.

1 Like

Super! Thanks! Works like a charm. Now I can put time on developing my clientside callback.

1 Like

I see that dcc.Graph has new locale + locales properties. Didn’t realize language support was already built into the plotly.js library, that’s great. Will be taking a look this week.

The Plotly.js documentation mentions that the locale can be set globally, as …

Plotly.setPlotConfig({locale: 'de-CH'})

Think it is pretty rare that I would want different locales shown on the same page. What’s the best practice to set the locale globally in dash?

I love no_update. Great release!

1 Like

Love the new updates.

But Is dash_table_experiments no longer supported in the new version? When I upgraded my dash, the layout which contains a dash_table_experiment was not able to render anymore. it’s function of filtering on the fly is great though.

Is there such an option like no_update if I use the client-side callback?

There isn’t, but you can just raise an exception instead.

Thanks! it would work for single output callbacks but not for multiple.

Hey everyone,
I created a video tutorial on the clientside callback since it was something I always wanted to learn and because it’s very powerful. In it I explain some of the reasons for which we use clientside_callback.

For tutorial click here.