📣 Dash 1.16.0 - Brand New Debugging & Performance Tools, Improved Callback Graph, Date-Axis & Timeline Improvements, Faster Images, Content Security Policy, and Community Contributions

Dash Python
1

Update: Version 1.16.1 has been released since this was posted.

We’re pleased to announce that Dash 1.16.0 is out :tada:

pip install dash==1.16.0

Dash 1.16.0 is a backwards compatible feature release. Highlights include:

View the Official Changelog

This is the first Dash release where all of the major features were spearheaded by community members! Many thanks to jjaraalm & @anders.kiaer for their contributions :clap:

Callback Graph’s New Debugging & Performance Tools

This overview is pulled from the official docs of this feature.

The callback graph is a visual representation of your callbacks: which order they are fired in, how long they take, and what data is passed back and forth from the browser to your Python, R, or Julia code. This feature was originally sponsored by a customer in Dash v0.42.0 and was recently improved in this release.

Image of the callback graph

In 1.16.0, the callback graph is now rendered using Cytoscape.js, the network graphing library behind dash-cytoscape. With Cytoscape.js, this graph is now interactive: the elements animate when the callbacks are being fired, you can manually re-arrange elements, and you can click on elements to view timing, performance, & network details of the callback.

60 second video of the feature (no sound)

When you click on a element you’ll see a detailed view of your callback. This detailed view contains things like:

  • Call Frequency - How many times the callback has been fired in your session.
  • Variable Introspection - The current inputs, outputs, and state of your callback. This can be really helpful if you are puzzled about the shape of the data that is getting passed into your callback or even when you are writing a callback for the first time and want to take a glance at the component’s property.
  • Network Time - How long the network request took.
  • Compute Time - How long the callback function took.
  • Data Transfer - How much data was transferred from the browser to your callback and back.

You can also easily report your own custom timing functions in this view with dash.callback_context.record_timing. For example:

from timeit import default_timer as timer

@app.callback(Output('graph', 'figure'), Input('dropdown', 'value'))
def update_graph(value):
    start_1 = timer()
    # perform some action
    dash.callback_context.record_timing('task_1', timer() - start_1, 'The 1st task')

    start_2 = timer()
    # perform another action
    dash.callback_context.record_timing('task_2', timer() - start_2, 'The 2nd task')

    return px.scatter()

With this, the custom timing data is available in the detailed view:

This is a really easy way to get started debugging the performance of your callback. For example, you might add record_timing calls after a line that does SQL query, a computation, and creating a figure with px.scatter. You can only improve what you can measure!

We’re really excited about how much functionality is packed into this feature. Previously you would’ve had to use some combination of browser’s network tab, custom Python timeit functions, and your own logging to get all of this data. With the Callback Graph, it’s all built-in for free: nothing to configure.

For more details, view our official documentation on this feature, hot off the press!

New Docs on Dash Dev Tools

We revamped our documentation on Dash Dev Tools, our set of debugging and development tools for Dash. It’s much more comprehensive, enjoy the read! :books:

image
image1114×646 109 KB

dcc.Graph Improvements & Plotly.py 4.10

Plotly.py 4.10 was released this week and uses the same version of plotly.js as Dash 1.16.0. The plotly library is used to create the figure that goes into dcc.Graph. Improvements include:

:mantelpiece_clock: date -axis and px.timeline() improvements (ticklabelmode='period')


:hammer_and_wrench: Full Figures for Development

image
image1088×588 51.5 KB

:racehorse: A Faster px.imshow()

image
image1010×560 121 KB

:arrow_right: More details: 📣 Announcing Plotly.py 4.10: date-axis improvements, a Faster px.imshow() and Full Figures for Development

Content Security Policy

You can now get CSP script-src hashes of all added inline scripts by calling app.csp_hashes() (both Dash internal inline scripts, and those added with app.clientside_callback.

Some organizations have strict CSP security policies. This feature should help meet those requirements :lock:

Calculate these hashes after all inline callbacks are defined,
and add them to your CSP headers before starting the server, for example
with the flask-talisman package from PyPI:

flask_talisman.Talisman(app.server, content_security_policy={
    "default-src": "'self'",
     "script-src": ["'self'"] + app.csp_hashes()
})

In Other News

Previous Releases

Feedback, questions, thoughts? Let us know how it goes!

9 Likes