đź“Ł Dash v1.10.0 Release - New dcc.Graph features, updated dcc.Link, React upgrade and bug fixes

Dash Python
1

Update: version 1.16 has been released since this was posted.

Dash v1.10.0 is a minor release with minor bug fixes and incremental feature improvements :tada:

Official Changelog
Dash v1.10.0

Highlights

  • dash.run_server() host and port parameters through environment variables HOST and PORT
  • Update React version from 16.8.6 to 16.13.0
  • Improved dcc.Link:
    • New title prop which is used for tooltips
    • children defaults to href if not defined,
    • click modifiers. dcc.Link behaves more like a proper html.A. Most notably, this means that if you control-click on a link, it will open in a new tab just like a regular link.
    • absolute path bug fix
  • dcc.Location callback bug fix
  • Update Plotly.js, the library behind the dcc.Graph, component to v1.53.0, compatible with the recently-released Plotly.py 4.6
    • rangebreaks on date axes #4614 which allow you to exclude weekends from time series. This is especially important for financial charts displaying data when the markets are open and excluding when they are closed (like weekends).
    • (x|y) unified hovermode #4620. This allows you to combine your hover tooltips on the graph into a single hover label instead of having multiple hover labels for each trace.
    • “hovered data” mode to spikesnap #4665
    • “full-json” export format to Plotly.toImage and Plotly.dowloadImage #4593
    • node.customdata and link.customdata in sankey traces #4621
    • opacityscale for surface traces #4480

Previous Releases
Dash v1.9.0
Dash v1.8.0
Dash v1.7.0

Component developers
Upgrading from React 16.8.6 to 16.13.0 makes it possible to use all the latest React syntax and features when developing components.

Do note that unsafe lifecycle events componentWillMount, componentWillReceiveProps, componentWillUpdate have been deprecated and need to be updated to the UNSAFE_* version.

Documentation Updates

We will update this post when documentation is available for the new dcc.Graph features.

Upcoming Release

Support for dynamic callbacks via what we’re tentatively calling “Pattern Matching” callbacks will be available in the next release, alongside many bug fixes to callback updates. See preliminary documentation in Pull requests · plotly/dash-docs · GitHub. Coming soon, likely next week!

4 Likes
3

After updating to Dash v1.10.0 I get the following error:

Traceback (most recent call last):
File “index.py”, line 75, in
app.run_server(debug=True)
File “/usr/lib/python3.6/site-packages/dash/dash.py”, line 1973, in run_server
self.server.run(host=host, port=port, debug=debug, **flask_run_options)
File “/usr/lib/python3.6/site-packages/flask/app.py”, line 990, in run
run_simple(host, port, self, **options)
File “/usr/lib/python3.6/site-packages/werkzeug/serving.py”, line 988, in run_simple
s.bind(server_address)
socket.gaierror: [Errno -2] Name or service not known

Do I need to update my code to work with this new version?

4

@clausimu You shouldn’t need to update your code.

Can you tell me more about your environment? OS / Python / Flask / Werkzeug versions? We’ve run across some incompatible Flask / Werkzeug versions in the past and suspect that they may have become misaligned in your environment after the update. After doing a clean dash==1.10.0 install, I have Flash==1.1.1 with Werkzeug==1.0.1.

5

@Marc-Andre

Sure!

OS: openSUSE Leap15.1
Python: 3.6
Flask: 1.1.1
Werkzeug: 0.16.0
Dash: 1.10.0

[edit] I updated to Werkzeug 1.0.1, but the crash is the same…

6

And ICYMI, here is the link to the new dcc.Graph features available in this release and in the standalone plotly package: đź“Ł Announcing Plotly.py 4.6

7

After the update to 1.10 the layout updates using dcc.Location stoped working. Like for example in this example (that used to work before that) the layout is not updated after clicking on the links :

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

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}

sidebar = html.Div(
    [
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P(
            "A simple sidebar layout with navigation links", className="lead"
        ),
        dbc.Nav(
            [
                dbc.NavLink("Page 1", href="/page-1", id="page-1-link"),
                dbc.NavLink("Page 2", href="/page-2", id="page-2-link"),
                dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(id="page-content", style=CONTENT_STYLE)

app.layout = html.Div([dcc.Location(id="url"), sidebar, content])


# this callback uses the current pathname to set the active state of the
# corresponding nav link to true, allowing users to tell see page they are on
@app.callback(
    [Output(f"page-{i}-link", "active") for i in range(1, 4)],
    [Input("url", "pathname")],
)
def toggle_active_links(pathname):
    if pathname == "/":
        # Treat page 1 as the homepage / index
        return True, False, False
    return [pathname == f"/page-{i}" for i in range(1, 4)]


@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
    if pathname in ["/", "/page-1"]:
        return html.P("This is the content of page 1!")
    elif pathname == "/page-2":
        return html.P("This is the content of page 2. Yay!")
    elif pathname == "/page-3":
        return html.P("Oh cool, this is page 3!")
    # If the user tries to reach a different page, return a 404 message
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )


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

Do I need to make some changes in order to get the layout updates (for Multipage apps like the example ) to work with Dash 1.10?

8

Hey @ivaylo,

You might need to update dash-bootstrap-components also. Because the way navigation (with dcc.Location) works changed in Dash 1.9.0, you’ll need dash-bootstrap-components 0.9.0 or later for the NavLink to be compatible.

9

Thanks @tcbegley! Once I updated to the latest dash-bootstrap-components the layout update is working again.

1 Like