Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Plotly

Last update: Dec 31, 2022

Related tags

Data Visualization react python productivity flask finance data-science bioinformatics r jupyter julia web-app modeling plotly data-visualization dash rstats gui-framework charting technical-computing plotly-dash

Overview

Dash

Dash is the most downloaded, trusted Python framework for building ML & data science web apps.

Built on top of Plotly.js, React and Flask, Dash ties modern UI elements like dropdowns, sliders, and graphs directly to your analytical Python code. Read our tutorial proudly crafted ❤️ by Dash itself.

User Guide
Dash Docs on Heroku (for corporate network that cannot access plotly.com)
Open-Source App Gallery With sample code and templates!

App Samples

App	Description
	Here’s a simple example of a Dash App that ties a Dropdown to a D3.js Plotly Graph. As the user selects a value in the Dropdown, the application code dynamically exports data from Google Finance into a Pandas DataFrame. This app was written in just 43 lines of code (view the source).
	Dash app code is declarative and reactive, which makes it easy to build complex apps that contain many interactive elements. Here’s an example with 5 inputs, 3 outputs, and cross filtering. This app was composed in just 160 lines of code, all of which were Python.
	Dash uses Plotly.js for charting. Over 35 chart types are supported, including maps.
	Dash isn't just for dashboards. You have full control over the look and feel of your applications. Here's a Dash App that's styled to look like a PDF report.

To learn more about Dash, read the extensive announcement letter or jump in with the user guide.

Dash OSS & Dash Enterprise

With Dash Open Source, Dash apps run on your local laptop or workstation, but cannot be easily accessed by others in your organization.

Scale up with Dash Enterprise when your Dash app is ready for department or company-wide consumption. Or, launch your initiative with Dash Enterprise from the start to unlock developer productivity gains and hands-on acceleration from Plotly's team.

ML Ops Features: A one-stop shop for ML Ops: Horizontally scalable hosting, deployment, and authentication for your Dash apps. No IT or DevOps required.

App manager Deploy & manage Dash apps without needing IT or a DevOps team. App Manager gives you point & click control over all aspects of your Dash deployments.
Kubernetes scaling Ensure high availability of Dash apps and scale horizontally with Dash Enterprise’s Kubernetes architecture. No IT or Helm required.
No code auth Control Dash app access in a few clicks. Dash Enterprise supports LDAP, AD, PKI, Okta, SAML, OpenID Connect, OAuth, SSO, and simple email authentication.
Job Queue The Job Queue is the key to building scalable Dash apps. Move heavy computation from synchronous Dash callbacks to the Job Queue for asynchronous background processing.

Low-Code Features: Low-code Dash app capabilities that supercharge developer productivity.

Design Kit Design like a pro without writing a line of CSS. Easily arrange, style, brand, and customize your Dash apps.
Snapshot Engine Save & share Dash app views as links or PDFs. Or, run a Python job through Dash and have Snapshot Engine email a report when the job is done.
Dashboard Toolkit Drag & drop layouts, chart editing, and crossfilter for your Dash apps.
Embedding Natively embed Dash apps in an existing web application or website without the use of IFrames.

Enterprise AI Features: Everything that your data science team needs to rapidly deliver AI/ML research and business initiatives.

AI App Marketplace Dash Enterprise ships with dozens of Dash app templates for business problems where AI/ML is having the greatest impact.
Big Data for Pything Connect to Python's most popular big data back ends: Dask, Databricks, NVIDIA RAPIDS, Snowflake, Postgres, Vaex, and more.
GPU & Dask Acceleration Dash Enterprise puts Python’s most popular HPC stack for GPU and parallel CPU computing in the hands of business users.
Data Science Workspaces Be productive from Day 1. Write and execute Python, R, & Julia code from Dash Enterprise's onboard code editor.

See https://plotly.com/contact-us/ to get in touch.

Comments

A simple working example for embedding dash in flask under a path

Dash documentation lacks a simple but full working example of how to embed dash layout as a path in a flask app, so that the dash layout becomes a div in the flask and follows the base template. For example path '/plot&type=plot1' return dash layout for plot type 1. I know that one can get the underlying flask app in dash, but how to get rendered dash layout in flask is not well documented.

opened by Aso1977 48
475 Pattern Matching Callbacks (codenamed wildcards)
Pattern Matching Callbacks! (Codenamed, Wildcards!)

➡️ See official documentation here: https://dash.plotly.com/pattern-matching-callbacks

Closes #475 - using the API discussed there (I'll post some examples soon, but for now here's the description):

String IDs still work the same way in both layout and callbacks

Now you can also make dict IDs. Keys should be strings, values can be strings, numbers, booleans, like:

id={"type": "cat", "age": 4, "purrs": True}

IDs must still be unique

Callbacks can use dict IDs with wildcard values for any of the keys. The supported wildcards are MATCH, ALL, and ALLSMALLER - and can be imported from dash.dependencies. There are various rules about how these can combine, driven by the need to resolve these to a unique callback invocation for each set of outputs and identify uniquely the inputs required for this invocation...

To do before this is ready:

[x] Move most callback validation logic to the front end (so it doesn't need to be replicated in R)

[x] Do something with the callback graph when there are wildcards

[x] Test that this PR closes callback failure bugs: #1053, #1071, #1084, #1105

[x] See if it also closes redundant callback bugs #635, #832

Contributor Checklist

[x] I have run the tests locally and they passed. (refer to testing section in contributing)

[x] I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

[x] I have added entry in the CHANGELOG.md

[ ] If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follow

[ ] this github #PR number updates the dash docs

[ ] here is the show and tell thread in plotly dash community

Closes #832 (among other callback bugs - the others all have commits that close them with matching tests, but #832 is a bit heavy for a test of its own) Closes #1146
size: 25
opened by alexcjohnson 38

Validate component properties #264

PR for #264

Current Prerelease

pip install dash==0.29.0rc8
pip install dash-renderer==0.15.0rc1
pip install dash-core-components==0.31.0rc2
pip install dash-html-components==0.14.0rc3

Validation is on by default. To turn it off, you can set app.config.disable_component_validation = True

Test Cases to run for demo

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objs as go
from dash.dependencies import Input, Output

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

app.layout = html.Div([
    html.Button(id='click1', children='click to return bad Div children'),
    html.Div(id='output1', **{'data-cb': 'foo'}),
    html.Button(id='click2', children='click to return a bad figure'),
    dcc.Graph(id='output2', figure={'data': [], 'layout': {}}),
    html.Button(id='click3', children='click to return a bad radio'),
    dcc.RadioItems(id='output3', options=[{'value': 'okay', 'label': 'okay'}]),
    html.Button(id='click4', children='click to make a figure with no id'),
    html.Div(id='output4'),
])



@app.callback(Output('output1', 'children'),
              [Input('click1', 'n_clicks')])
def crash_it1(clicks):
    if clicks:
        return [[]]
    return clicks

@app.callback(Output('output2', 'figure'),
              [Input('click2', 'n_clicks')])
def crash_it2(clicks):
    if clicks:
        return {'data': {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'scatter'}, 'layout': {}}
    return go.Figure(data=[go.Scatter(x=[1,2,3], y=[1,2,3])], layout=go.Layout()) 

@app.callback(Output('output3', 'options'),
              [Input('click3', 'n_clicks')])
def crash_it3(clicks):
    if clicks:
        return [{'value': {'not okay': True}, 'labl': 'not okay'}]
    return [{'value': 'okay', 'label': 'okay'}]

@app.callback(Output('output4', 'children'),
              [Input('click4', 'n_clicks')])
def crash_it4(clicks):
    if clicks:
        return dcc.Graph()
    return dcc.Graph(id='hi')

app.run_server(debug=True, port=8050)

Example Error Messages

CallbackOutputValidationError: 


A Dash Callback produced an invalid value!

Dash tried to update the `figure` prop of the
`Graph` with id `output2` by calling the
`crash_it2` function with `(1)` as arguments.

This function call returned `{'layout': {}, 'data': {'y': [1, 2, 3], 'x': [1, 2, 3], 'type': 'scatter'}}`, which did not pass
validation tests for the `Graph` component.

The expected schema for the `figure` prop of the
`Graph` component is:

***************************************************************
{'validator': 'plotly_figure'}
***************************************************************

The errors in validation are as follows:

* figure	<- Invalid Plotly Figure:


    Invalid value of type '__builtin__.dict' received for the 'data' property of 
        Received value: {'y': [1, 2, 3], 'x': [1, 2, 3], 'type': 'scatter'}

    The 'data' property is a tuple of trace instances
    that may be specified as:
      - A list or tuple of trace instances
        (e.g. [Scatter(...), Bar(...)])
      - A list or tuple of dicts of string/value properties where:
        - The 'type' property specifies the trace type
            One of: ['mesh3d', 'splom', 'scattercarpet',
                     'scattergl', 'scatterternary', 'pie',
                     'surface', 'histogram', 'ohlc', 'heatmapgl',
                     'cone', 'scatterpolar', 'table',
                     'scatterpolargl', 'histogram2d', 'contour',
                     'carpet', 'box', 'violin', 'bar',
                     'contourcarpet', 'area', 'choropleth',
                     'candlestick', 'streamtube', 'parcoords',
                     'heatmap', 'barpolar', 'scattermapbox',
                     'scatter3d', 'pointcloud',
                     'histogram2dcontour', 'scatter', 'scattergeo',
                     'sankey']

        - All remaining properties are passed to the constructor of
          the specified trace type

        (e.g. [{'type': 'scatter', ...}, {'type': 'bar, ...}])

CallbackOutputValidationError: 


A Dash Callback produced an invalid value!

Dash tried to update the `options` prop of the
`RadioItems` with id `output3` by calling the
`crash_it3` function with `(1)` as arguments.

This function call returned `[{'value': {'not okay': True}, 'labl': 'not okay'}]`, which did not pass
validation tests for the `RadioItems` component.

The expected schema for the `options` prop of the
`RadioItems` component is:

***************************************************************
{'schema': {'allow_unknown': False,
            'nullable': False,
            'schema': {'disabled': {'type': 'boolean'},
                       'label': {'type': 'string'},
                       'value': {'type': 'string'}},
            'type': 'dict'},
 'type': 'list'}
***************************************************************

The errors in validation are as follows:

* options
 * 0
  * value	<- must be of string type
  * labl	<- unknown field

ComponentInitializationValidationError: 


A Dash Component was initialized with invalid properties!

Dash tried to create a `RadioItems` component with the
following arguments, which caused a validation failure:

***************************************************************
{'id': 'output3', 'options': [{'label': 'okay', 'value': {}}]}
***************************************************************

The expected schema for the `RadioItems` component is:

***************************************************************
{'className': {'type': 'string'},
 'dashEvents': {'allowed': ['change'], 'type': ('string', 'number')},
 'fireEvent': {},
 'id': {'type': 'string'},
 'inputClassName': {'type': 'string'},
 'inputStyle': {'type': 'dict'},
 'labelClassName': {'type': 'string'},
 'labelStyle': {'type': 'dict'},
 'options': {'schema': {'allow_unknown': False,
                        'nullable': False,
                        'schema': {'disabled': {'type': 'boolean'},
                                   'label': {'type': 'string'},
                                   'value': {'type': 'string'}},
                        'type': 'dict'},
             'type': 'list'},
 'setProps': {},
 'style': {'type': 'dict'},
 'value': {'type': 'string'}}
***************************************************************

The errors in validation are as follows:


* options
 * 0
  * value	<- must be of string type

PropTypes to Cerberus reference

| PropType | Cerberus Schema Validated Against | Known Current Limitations | | ---------- | ------------------------------------ | -------------------------- | | array | {'type': 'list'} | | | bool | {'type': 'boolean'} | | | func | {} | No validation occurs. | | object | {'type': 'dict'} | Validates that input is explicitly a dict object. We cannot be more general (e.g. collections.abc.Mapping) since the core Component is an instance of that.| | string | {'type': 'string'} | | | symbol | {} | No validation occurs | | node | {'anyof': [{'type': 'component'}, {'type': 'boolean'}, {'type': 'number'}, {'type': 'string'}, {'type': 'list', 'schema': {'anyof': [{'type': 'component'}, {'type': 'boolean'}, {'type': 'number'}, {'type': 'string'}]}}]} | | | instanceOf(Object) | {} | No validation occurs | | oneOf(['val1', 2]) | {'allowed': [None, 'val1', 2]} | Strings will have ' characters stripped off each end. This is because metadata.json generation serializes the literal values as json, so for example PropTypes.oneOf(['News', 'Photos']) serializes to ["'News'", "'Photos'"]. https://github.com/reactjs/react-docgen/issues/57 | | oneOfType( [ PropTypes.string, PropTypes.bool ] ) | {'anyof': [{'type': 'string', 'type': 'boolean'}]} | If one of the types is a PropType that cannot be validated individually (e.g. PropType.func), no validation will occur and the schema will effectively be {} | | arrayOf( PropTypes.number ) | {'type': 'list', 'schema': {'type': 'number'}} | | | objectOf( PropTypes.number ) | {'type': 'dict', 'valueschema': {'type': 'number'}} | | | shape( { k1: PropTypes.string, k2: PropTypes.number } ) | {'type': 'dict', 'allow_unknown': False, 'schema': {'k1': {'type': 'string}, 'k2': {'type': 'number'}}} | | | any | {'type': ('boolean', 'number', 'string', 'dict', 'list')} | |

opened by rmarren1 37

Clientside Callbacks
In Dash, changes to component properties in the front-end trigger user-supplied Python functions (@app.callback). This framework is very flexible: users have full control over the Python code that they write in their app.callback functions.

However, app.callback functions are simple. They filter some data or change the color of the chart or display some text. These data transformations, although simple, currently need to be processed entirely over the network in the Python backend. This makes the apps slower than they could be (because of the network delay) and less portable than they could be (because they require a running Python server).

Clientside Callbacks will introduce an interface for describing data transformation relationships between components in JavaScript. These data transformations will happen entirely in the client-side without passing data over the network. The Clientside callbacks Dash framework will enable developers to swap out their python-driven @app.callback functions with javascript-executed data transformations, enabling more performant apps.

As a quick background, here is what Dash Apps currently look like in Python:

The first part describes what the app looks like. These classes just declaratively describe the names and the props of the React components that they generate. These objects get serialized as JSON.

app.layout = html.Div([ html.H1('Example'), comonents.TextInput( id='my-text-input', value='Initial value' ), components.Dropdown( id='my-dropdown', options=[ 'Option A', 'Option B', 'Option C' ] value='Option A' ), components.Graph( id='my-graph' figure={ # Just a plotly figure 'data': [...], 'layout': {...} } ) ])

The second part of dash apps describe the relationship between graphs. This sets up "sources" ("inputs") and "sinks" ("outputs") in the Dash front-end. Whenever any of the Input properties change, the AJAX call gets made.

It's Reactive like a spreadsheet: as inputs change, the new values propagate down the dependency graph, updating components in the correct order:

@callback( Input( id='my-dropdown', property='value' ), Input( id='my-text-input', property='value' ), Output( id='my-graph', property='figure' ) ) def update_graph(new_dropdown_value, new_text_input_value): # compute a new figure based off of the new values of the dropdown # or text input return { 'data': [{ 'x': [1, 2, 3], 'y': ({ 'Option A': [3, 1, 2], 'Option B': [4, 3, 5], 'Option C': [1, 2, 4] })[dropdown] }], 'layout': {'title': text} }

These reactive updates happen entirely server-side through HTTP requests. (This allows dash developers to do complicated updates or analytics through their python context).

I think that we could extend this framework to work client-side as well. Instead of a custom function defining how Inputs ("sources") update Outputs ("sinks"), we could define a library of transformations components and a syntax for relating input properties to output properties. These transformations could be just be functional React components.

Here are some conceptual examples:

from dash.serverless import Selector as S layout = Div([ Input(id='my-input', value='initial-value'), H3(children=S('my-input', 'value')) ])

In this example, we're setting the "children" property of the HTML H3 element to just be the "value" of the "my-input" component. When "value" changes, the content of the H3 element updates to match the new value.

I'm wrapping the ID and property with S to denote that the string represents a "reactive" property corresponding to the component with the specified ID and that component's property. (The actual API might be different, just using s for conceptual purposes.)

Now, consider a "Dataset" component and a "Graph":

layout = Div([ Dataset( id='my-dataset' columns={ 'column-1': [1, 2, 3], 'column-2': [3, 1, 4] }, column_names={ 'column-1': 'My first column', 'column-2': 'My second column' } ), Graph( figure={ 'data': [{ 'x': S('my-dataset', 'column-1'), 'y': S('my-dataset', 'column-2') }] } ) ])

Note that not all components actually get rendered in the DOM. In this case, the Dataset component isn't actually visible. It's just included as state. If you wanted to view it as a table, it would look like:

layout = Div([ Dataset( id='my-dataset' columns={ 'column-1': [1, 2, 3], 'column-2': [3, 1, 4] }, column_names={ 'column-1': 'My first column', 'column-2': 'My second column' } ), Table(data='::my-dataset.columns'), Graph( figure={ 'data': [{ 'x': S('my-dataset', 'columns', 'column-1'), 'y': S('my-dataset', 'columns', 'column-2') }] } ) ])

You can imagine how there might be several datasets and several graphs in one (like a dashboard or a report).

layout = Div([ Dataset(id='dataset-1', columns={...}), Dataset(id='dataset-2', columns={...}), Dataset(id='dataset-3', columns={...}), Graph(id='graph-1', data=[{'x': S('dataset-1', 'columns', 'column-1'), ...}] ), Graph(id='graph-2', data=[{'x': S('dataset-2', 'columns', 'column-1'), ...}] ), Graph(id='graph-3', data=[{'x': S('dataset-3, 'columns', 'column-1'), ...}] ) ])

Now, we would also need a library for lightweight data transformations. I'm thinking something like Ramda.

import dash.clientside.transformations as T import dash.clientside.selector as S df = pd.DataFrame([ {'col-1': 1, 'col-2': 5, 'col-3': 10}, {'col-1': 2, 'col-2': 6, 'col-3': 11}, {'col-1': 3, 'col-2': 7, 'col-3': 12}, # ... ]) app.layout = html.Div([ # "Virtual" component that doesn't render anything # to the screen, it just contains the data for other # components to reference dcc.Dataset( id='my-dataset', columns=df.columns, rows=df.to_dict(), ), # `Table` renders an actual table to the screen dcc.Table( rows=S('my-dataset', 'rows'), columns=S('my-dataset', 'rows') ), dcc.Graph( figure={ # T.pluck('col-1', [{'col-1': 1}, {'col-1': 2}]) -> [1, 2] 'x': T.pluck( 'col-1', S('my-dataset', 'rows') ), 'y': T.pluck( 'col-2', S('my-dataset', 'rows') ) } ) ])

Or, extending this with dynamic components:

app.layout = html.Div([ dcc.Dataset( id='my-dataset', columns=df.columns, rows=df.to_dict(), ), dcc.Dropdown( id='my-dropdown', options=[ {'option': i, 'label': i} for i in df.columns ], value=df.columns[0] ), dcc.Graph( figure={ 'x': T.pluck( 'col-1', S('my-dataset', 'rows') ), 'y': T.pluck( S('my-dropdown', 'value'), S('my-dataset', 'rows') ) } ) ])

Here are some high-level architectural requirements and goals for this work item:

The Dash Apps will still be created with Python

The clientside callbacks will be executed in JavaScript

The existing set of Dash components will be available (with the exception of network-connected components like the mapbox charts)

We will introduce a new syntax or language ("data transformation language") for declaratively describing the relationships and simple operations between component properties. This language will have a Python interface, will be serialized as JSON, and executed in JavaScript.

This client-side data transformation will be available in server-connected Dash apps as well, enabling certain simple updates to happen quickly

The app will not run arbitrary JavaScript, it will be designed in a way to be safe from XSS injections

The "data transformation language" will operations like filtering, plucking values from nested objects, sorting, and arithmetic. It will draw inspiration from functional programming libraries and languages that enable concise, chainable, and immutable data transformations. See Ramda (http://ramdajs.com/) for an example.

dash-meta-sponsored
opened by chriddyp 37
Dash Dev Tools
In https://github.com/orgs/plotly/projects/3, many of our issues involve Dash's front-end: Front-end error handling, front-end live-DAG, front-end hot-reload.

I'd like to open this issue to discuss an architecture for handling these requirements.

Some framing:

JavaScript Error Handling

We should expose Dash's front-end errors to the users. Currently, they are only available in the browser's dev tools, which is too hidden for our community.

For example, consider Atom's plugins:

Python Error Handling Could we use the same architecture that we use for JavaScript errors to display python errors? That way, the user never needs to look at the terminal for errors, they only need to focus on their app.

For example, consider create-react-app:

or werkzeug:

Hot Reloading If we had hot-reloading, could we build a nice little "control bar" that users could use to configure hot reloading? For example, it could:

Tell the user if hot-reloading is on or off

Users could turn hot-reloading on and off

It could provide build times or "last updated" times

Displaying the DAG If we wanted to display the DAG to the user, could we place this in the Dash Dev Tools container as well?

cc @plotly/dash
dash-meta-sponsored
opened by chriddyp 31
error UnsupportedOperation: not writable

I had dash running on my pc before without problems. I had to reinstall and now I can't get it to work. Even when I use the most basic code I get the same error. Here I used the very first code example of the tutorial with montreal and sf https://dash.plot.ly/getting-started#installation

I still always get this error:

File "", line 25, in app.run_server(debug=True)

File "/Users/Wheez/anaconda3/envs/py36/lib/python3.6/site-packages/dash/dash.py", line 568, in run_server self.server.run(port=port, debug=debug, **flask_run_options)

File "/Users/Wheez/anaconda3/envs/py36/lib/python3.6/site-packages/flask/app.py", line 938, in run cli.show_server_banner(self.env, self.debug, self.name, False)

File "/Users/Wheez/anaconda3/envs/py36/lib/python3.6/site-packages/flask/cli.py", line 629, in show_server_banner click.echo(message)

File "/Users/Wheez/anaconda3/envs/py36/lib/python3.6/site-packages/click/utils.py", line 259, in echo file.write(message)

UnsupportedOperation: not writable

I run it on python 3.6 with anaconda and spyder and followed the installation tutorial. I have no idea what to do. Thanks for any help.

opened by wheeeee 29
Embedding or displaying local images

I can't find a way to embed or display local images, either through html or in a plotly graph. This seems to be a limitation with the server can do (in the former case) or a lack of support (in the later case).

My intended use case is have a user point to a directory of images. I want to display the image that the user selects. The image is then classified using a model built in Keras.

Is there any way to display an image locally?

opened by FaustineLi 27
Proposal for Offline CSS and JS and Customizable `index.html`
Opening this issue to propose the officially endorsed and documented method for embedding custom, local CSS and JavaScript in Dash apps.

This development for this issue has been sponsored by an organization. Many thanks! If your company or organization would like to sponsor development, please reach out.

Background: In Dash, HTML tags and higher-level components are embedded in the App by assigning the app.layout property to a nested hierarchy of Dash components (e.g. the components in the dash-core-components or the dash-html-components library). These components are serialized as JSON and then rendered client-side with React.js. On page load, Dash serves a very minimal HTML string which includes the blank container for rendering the app within, the component library's JavaScript and CSS, and a few meta HTML tags like the page title and the encoding (see https://github.com/plotly/dash/blob/6a1809fc619671f8bf7e1294d12ef1180e90df6b/dash/dash.py#L293-L318).

This architecture doesn't work well for embedding custom JavaScript scripts and CSS Stylesheets because these scripts and stylesheets usually need to be included in the HTML that is served on page load.

We will support user-supplied JavaScript and CSS through two enhancements:

Enhancement 1 - Automatic

This "automatic" method will template in all stylesheets (CSS) and scripts (JavaScript) that are included in a static folder

These links will be included in alphabetical order

These links will be included after the component library's stylesheets and scripts

The server route (/static/<path:string>) for serving these files will be configured automatically by Dash

This method will be what most Dash users will use. It's very easy to use and easy to document ("To include custom CSS, just place your CSS files in static folder. Dash will take care of the rest"). Since the files will be templated alphabetically, the user can control the order (if necessary) by prefixing ordered numbers to the files (e.g. 1-loading.css, 2-app.css).

With this method, we'll be able to add custom CSS processing middleware like minifying CSS or creating cache-busting URLs completely automatically.

If the user needs more control over the placement of these files, they can use the method in "Enhancement 2 - Manual Override".

Enhancement 2 - Manual Override

Currently on page load, Dash serves this HTML string: https://github.com/plotly/dash/blob/6a1809fc619671f8bf7e1294d12ef1180e90df6b/dash/dash.py#L293-L318.

This enhancement will make this overridable:

The user will assign a HTML string or a function that returns an HTML string to a property on the app object (e.g. app.index).

This HTML string will include several predefined template variable names that will correspond to the stylesheets and scripts that Dash needs to include to render the component libraries.

The user can include extra meta tags in their template or even include other HTML around their Dash app container.

Here is an example:

def custom_index(): return ''' <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta description="This is my dash app"> <title>My Custom Dash App</title> <link ref="stylesheet" href="/static/my-custom-css-normalize.css"> {dash_renderer_css_bundle} {dash_component_css_bundles} <link ref="stylesheet" href="/static/my-component-css-override.css"> </head> <body> <div> My Custom Header </div> <div id="react-entry-point"> <div class="_dash-loading"> Loading... </div> </div> </body> <footer> <script type="javascript" src="/static/my-custom-javascript-bundle.js"> {dash_renderer_javascript_bundle} {dash_component_javascript_bundles} <script type="javascript" src="/static/my-custom-javascript-override.js"> </footer> </html> ''' app.index = custom_index

The following items will be required in creating an index string:

The dash_component_css_bundles, dash_component_javascript_bundles, dash_renderer_css_bundle, dash_renderer_javascript_bundle template names. Dash will look for these names and fill them in with the appropriate component CSS and JavaScript on page load.

A <div/> with an id react-entry-point. Dash's front-end will render the app within this div once the JavaScript has been evaluated.

Note the level of customizability in this solution:

The user has full control over the location of the custom JS and CSS files with respect to the auto-templated CSS and JavaScript files

The user can include custom meta tags in the <head/>. In the example, see the custom <title/> and custom <meta/> description.

The user can include custom HTML around their Dash app container (see the <div/> with My Custom Header)

The user can omit the templated tags if they want to supply their own front-end JavaScript bundles. This ties in nicely with the "Custom JavaScript Hooks" requirement: if the user adds their own hooks to a custom dash-renderer build, they could remove the default dash_renderer template variable and include their own version.

If the tags depend on the URL of the page, they could program in different values that depend on the flask.request.url variable.

dash-meta-sponsored
opened by chriddyp 23
allow optional header and footer
This PR depends on html components having a HTML serializer, see https://github.com/plotly/dash-html-components/pull/29

This PR simplifies adding custom JavaScript and CSS to Dash apps - a more flexible and declarative alternative to app.css.append_css and app.scripts.append_script

Example usage:

app.head = [ html.Link( href='https://codepen.io/chriddyp/pen/bWLwgP.css', rel='stylesheet' ), (''' <style type="text/css"> html { font-size: 50px; } </style> '''), html.Title(path) ] app.footer = [ html.Script(type='text/javascript', children='alert("hello world")') ]

app.head and app.footer can also be functions, which enables setting variables dynamically based off of the URL (i.e. unique page titles)

def head(): path = request.path return html.Title(path) app.head = head

Unlike app.layout, app.head and app.footer are templated directly into the HTML (as HTML!) rather than generated in Dash’s front-end. This allows the components to be rendered immediately on page load rather than after page load (required for things like page title and meta descriptions and for preventing a “Flash of Unstyled Content” https://en.wikipedia.org/wiki/Flash_of_unstyled_content).

This makes the components in app.head and app.footer different than the components in app.layout. In particular:

Callbacks can’t be applied to components rendered in app.head or app.footer

Only dash_html_components can be applied to the app.head and app.footer as these are the only valid HTML tags (a `dash_core_components.Graph is not a valid HTML tag, it’s a rich component generated by React.js with dynamic javascript and CSS)

Fixes #https://github.com/plotly/dash/issues/170 and several issues brought up in the dash community forum (https://community.plot.ly/c/dash)
opened by chriddyp 23
Improve Callback Graph
Attempt to improve and significantly expand the features available in the callback graph to improve its usefulness in debugging and testing. Will try to cover the ideas given in https://github.com/plotly/dash/issues/1176. Comments/suggestions would be welcome, especially for styling.

Current Status

Changes

Replaced viz.js with cytoscape.js via react-cytoscape. This results in some minor visual and layout changes.

CallbackGraphContainer now subscribes to layout and paths so it can introspect the current state.

Added new reducers to compute profiling information and report all changed props (not just those that are inputs).

Issues

State layout is finicky. dagre was giving horrible results even when cycles were pruned away. Using breadthfirst for now, but layout properties may need to be tailored to viewport size instead of being fixed.

Outputs that return no_update are still being flashed during execution highlighting. No way to detect them right now.

Contributor Checklist

[ ] I have broken down my PR scope into the following TODO tasks

[X] Zoom in/out functionality for large/complex callback chains

[ ] Callback graph accessible from a dedicated url.

[X] Distinguish between clientside and serverside callbacks using different node colors.

[x] Add state information to the callback graph

[x] Report profiling information

[x] Number of times a callback was invoked per node

[x] Time spent (total or average) in the callback. Maybe link to the node color?

[ ] Label each edge with the number of times that input triggered a callback

[ ] Live introspection

[X] Components, properties, and callback inputs/outputs are inspect-able in real time.

[ ] Component properties are modifiable.

[ ] Live debugging

[x] Highlight currently executing callbacks and modified outputs

[ ] Probe the last input/output by hovering/focusing an edge

[ ] Manually emit a property changed event to trigger callback paths

[x] I have run the tests locally and they passed. (refer to testing section in contributing)

[x] I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

optionals

[x] I have added entry in the CHANGELOG.md

[ ] If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follow

[ ] this github #PR number updates the dash docs

[ ] here is the show and tell thread in plotly dash community

size: 2 feature
opened by jjaraalm 22
Plotly express scatter_mapbox does not show map[BUG]

I am trying to insert a scatter_mapbox map with openstreetmap layer following this example:

https://plot.ly/python/mapbox-layers/#openstreetmap-tiles-no-token-needed

But I only get a blank figure. scatter_geo works normally. The above example works in a Jupyter notebook but not in m dash app

Is this a known bug?
dash-type-bug

opened by fccoelho 21
[BUG] Flaky project dir parsing in debug mode.
Environment

Windows 10

Python 10

dash 2.7.1

Describe the bug

I am willing to run dash in a non standard way, by running python -c 'from dash_app import app; app.run()'.

It works fine when it does not run in debug mode, but breaks in debug mode as shown below.

> DASH_DEBUG=true python -c 'from dash_app import app; app.run()' Dash is running on http://127.0.0.1:8050/ * Serving Flask app 'dash_app.app' * Debug mode: on C:\Path\to\python.exe: can't open file 'C:\\Users\\slmg\\dash-app\\-c': [Err no 2] No such file or directory]

We can see dash was able to run fine in the first place, but (presumably the watcher) got confused by python's arg -c, which hints assumption was made app would always be run via a python path/to/app.py command, leading to a parsing error.

Expected behavior

Run the app without issue in debug mode and watch the whole app dir for changes.
opened by slmg 2
[Feature Request] Long Polling instead of Short Polling

Is your feature request related to a problem? Please describe. Sometimes with some values for background callback interval (less than 50 ms for an example), user may have some issues in browser connected with high amount of requests to the BE.

Describe the solution you'd like Implement Long Polling instead of Short Polling, or provide clear explanation of why Short Polling approach is used now.

Describe alternatives you've considered Web Sockets may be investigated too as an alternative.

opened by ArtsiomAntropau 0
[BUG] Background callback returns 502
Thank you so much for helping improve the quality of Dash!

We do our best to catch bugs during the release process, but we rely on your help to find the ones that slip through.

Describe your context I have some high CPU/RAM efficient workflow that handling by celery and in the same time I have background callback that triggering this workflow and partially doing some CPU-related calculations too.

replace the result of pip list | grep dash below

│ dash │ 2.7.0 │ │ │ dash-dv2 │ 1.0.95 │ │ │ fef-dash │ 4.4.4 │ │ │ dash-table │ 5.0.0 │ │ │ dash-core-components │ 2.0.0 │ │ │ dash-html-components │ 2.0.0 │ │

if frontend related, tell us your Browser, Version and OS

OS: macOS

Browser Chrome

Version 108

Describe the bug

When I'm starting only one this loading in parallel – all is ok, when more than three (including) – I'm receiving 502 error: The issue reproducing regularly, not one-time issue and not fixing by restarting containers (we're using k8s: 2 pods of dash app, 2 Redis instances, 2 scalable pods of nginx-ingress).

HTTP/1.1 502 Bad Gateway Date: Thu, 29 Dec 2022 03:15:18 GMT Content-Type: text/html Content-Length: 552 Connection: keep-alive Content-Security-Policy: <HIDDEN> Referrer-Policy: no-referrer Strict-Transport-Security: max-age=31536000; includeSubDomains; preload X-Content-Type-Options: nosniff X-Frame-Options: SAMEORIGIN X-XSS-Protection: 1; mode=block

Expected behavior

Not receiving 502 or with described output.

Screenshots
opened by ArtsiomAntropau 0

[BUG] Inconsistent callback behavior when adding new items to layout

In the example below I a have button that triggers 2 new items to be added to layout every time it is clicked -> a button and a div. Clicking on the newly added button triggers an update on the div showing how many times the button was clicked, using pattern matching callbacks.

This is the callback used to add the new divs to the layout (via a dcc store that then updates via clientside callback, see full code below)

@app.callback(
    Output("items-store", "data"),
    Input("add-view", "n_clicks"),
    prevent_initial_call=True,
)
def add_view(index):
    return {
        "left": left_view(index),
        "right": right_view(index)
    }

However, when this div exists inside a different parent, the click callback is triggered for EVERY button whenever I add a new button to layout.

This code does not cause the callbacks to be triggered

def right_view(index):
    return html.Div([
    ])


def left_view(index):
    return html.Div([
        html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"}),
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])

But this code DOES cause the callbacks to be triggered

def right_view(index):
    return html.Div([
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])


def left_view(index):
    return html.Div([
        html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"}),
    ])

The full discussion around this issue can be found HERE with more animations of the bad behavior

from dash import html, Output, Input, State, ctx, MATCH, ALL, dcc, Dash

app = Dash( __name__, suppress_callback_exceptions=True)

def right_view(index):
    return html.Div([
        # This causes callbacks to fire whenever added to the layout
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])


def left_view(index):
    return html.Div([
        html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"}),
        # Moving the div here does not cause the callbacks to fire when added to the layout
        # html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])

@app.callback(
    Output({"type": "output-txt", "index": MATCH}, "children"),
    Input({"type": "action-btn", "index": MATCH}, "n_clicks"),
    Input({"type": "output-txt", "index": MATCH}, "children"),
    prevent_initial_call=True
)
def inc_counter_for_view(clicks, triggered):
    return f"Triggered {int(triggered.split()[1]) + 1}"

app.layout = html.Div([
        html.Button("Add View", id="add-view"),
        dcc.Store("items-store", data=[], storage_type="memory"),

        html.Div([
            html.Div([], id="left", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
            html.Div([], id="right", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
    ],
    style={"display": "flex", "flex-direction": "row", "gap": "5px", "margin-top": "5px"}
        )]
)

app.clientside_callback(
    """
    function(data, left, right) {
        left.push(data.left)
        right.push(data.right)
        return [left, right]
    }
    """,
    Output("left", "children"),
    Output("right","children"),
    Input("items-store", "data"),
    State("left","children"),
    State("right","children"),
    prevent_initial_call=True
)

@app.callback(
    Output("items-store", "data"),
    Input("add-view", "n_clicks"),
    prevent_initial_call=True,
)
def add_view(index):
    return {
            "left": left_view(index),
            "right": right_view(index)
        }

app.run_server(debug=True)

opened by dales 0

added static prop to remove event listener
As reported on the forum, components with event listeners can cause issues with screen readers.

https://community.plotly.com/t/how-to-remove-events-from-dash-html-components-to-avoid-misinterpretation-by-screen-readers/70477

This PR adds a static prop to all html components, giving the ability to disable n_clicks and remove the event listener.

By default, n_clicks will be enabled on any html component that has an id. If n_clicks is not used in a callback for that component, the event listener can be removed by setting static=True

For example:

No event listener: html.Div() html.Div(id="my-id", static=True)

onClick event listener: html.Div(id="my-id")

Contributor Checklist

[x] I have run the tests locally and they passed. (refer to testing section in contributing)

[x] I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

optionals

[x] I have added entry in the CHANGELOG.md

[ ] If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows

[ ] this GitHub #PR number updates the dash docs

[ ] here is the show and tell thread in Plotly Dash community
opened by AnnMarieW 1

Long callback function executed without being triggered in Dash Pages with Background callback [BUG]

Background callback works fine with Dash Pages. However, if we use a dcc.Store() (defined in the app.py) as an Output in the background callback, a long callback function is executed upon page load without being triggered.

[2022-12-21 18:54:55,564: INFO/MainProcess] Task long_callback_145c7444e8da7496daf8e16142713cc0c5b46902[224f59f9-aabe-4e60-942b-16f23fad09ee] received
[2022-12-21 18:54:57,582: INFO/ForkPoolWorker-1] Task long_callback_145c7444e8da7496daf8e16142713cc0c5b46902[224f59f9-aabe-4e60-942b-16f23fad09ee] succeeded in 2.0161583395674825s: None

I have attached a sample app to reproduce this issue. app.py

from dash import Dash, html, dcc, DiskcacheManager, CeleryManager, Input, Output, html
import dash
from celery import Celery
import os

if 'REDIS_URL' in os.environ:
    # Use Redis & Celery if REDIS_URL set as an env variable
    from celery import Celery
    celery_app = Celery(__name__, broker=os.environ['REDIS_URL'], backend=os.environ['REDIS_URL'])
    background_callback_manager = CeleryManager(celery_app)
    print('using Redis caching')
else:
    # Diskcache for non-production apps when developing locally
    import diskcache
    cache = diskcache.Cache("./cache")
    background_callback_manager = DiskcacheManager(cache)

app = Dash(__name__, use_pages=True,background_callback_manager=background_callback_manager)


app.layout = html.Div([
	html.H1('Multi-page app with Dash Pages'),
    html.Div(
        [
            html.Div(
                dcc.Link(
                    f"{page['name']} - {page['path']}", href=page["relative_path"]
                )
            )
            for page in dash.page_registry.values()
        ]
    ),
    dcc.Store(id='main-store'),
	dash.page_container
])

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

pages/background_callback.py

import time
import dash
import pandas as pd
import json
import plotly.express as px
from dash import Output, Input, State, html, dcc, callback

dash.register_page(__name__,path='/')

layout = html.Div(
    [
        html.Div([html.P(id="paragraph_id", children=["Button not clicked"])]),
        html.Button(id="button_id", children="Run Job!"),
    ]
)

@callback(
    Output("paragraph_id", "children"),
    Output('main-store','data'),
    Input("button_id", "n_clicks"),
    background=True,
    prevent_initial_call=True
)
def update_clicks(n_clicks):
    time.sleep(2.0)
    return [f"Clicked {n_clicks} times"], [f"Clicked {n_clicks} times"]

DOKKU_SCALE

web=1
queue=1

requirements.txt

dash==2.7.0
gunicorn==20.0.4
pandas==1.1.4
diskcache
celery==5.2.7
redis==4.3.4

Procfile

web: gunicorn app:server --workers 4
queue: celery -A app:celery_app worker --loglevel=INFO --concurrency=2

opened by RunQi-Han 1

Releases(v2.7.0)

v2.7.0(Nov 3, 2022)
Removed

#2282 Dropped support for Internet Explorer. Our build process now targets vendor-supported browsers released in the last 7 years. Currently this means ES2015 but over time this will natually advance as older browser versions pass the 7-year threshold.

Added

#2261 Added new placeholder_text property to filterOptions for DataTable which allows overriding the default filter field placeholder.

Updated

#2282 Widespread dependency upgrades

Update Plotly.js to v2.16.1 (from v2.13.3)

Feature release 2.14.0 adds arrows to sankey links, and editSelection option to config.

Feature release 2.15.0 adds directed arrowheads and markers to scatter and scatter-like traces and increased control of automargin and legend sizing

Feature release 2.16.0 adds clustering to scattermapbox traces and restricted bounds to mapbox plots.

Patch releases 2.15.1 and 2.16.1 fix several bugs.

Fixed

#2292 Pages: find the 404 page even if pages_folder is nested, or the 404 page is nested inside pages_folder.

#2265 Removed deprecated before_first_request as reported in #2177.

#2257 Fix tuple types in the TypeScript component generator.

#2293 Fix Dropdown useMemo not detecting equal objects

#2277 Use dropdown styles from node_modules, instead of from stored css file

#2105 Fix order of dash component libraries imports.

Changed

#2291 Move flask-compress dependency to new extras requires dash[compress]

Source code(tar.gz)
Source code(zip)
v2.6.2(Sep 23, 2022)
Fixed

#2237 Ensure calls to plotly.js from dcc.Graph are properly sequenced even if React initiates multiple render cycles in quick succession.

#2218 Fix bug #1348 Validate children prop (required or not).

#2223 Exclude hidden folders when building dash.page_registry.

#2182 Fix #2172 Make it so that when using pages, if suppress_callback_exceptions=True the validation_layout is not set.

#2152 Fix bug #2128 preventing rendering of multiple components inside a dictionary.

#2187 Fix confusing error message when trying to use pytest fixtures but dash[testing] is not installed.

#2202 Fix bug #2185 when you copy text with multiple quotes into a table

#2226 Fix #2219 pages register & background callbacks.

Source code(tar.gz)
Source code(zip)
v2.6.1(Aug 2, 2022)
Fixed

#2175 Fix #2173 callback output of ndarray and no_update check.

#2146 Remove leftover debug console.log statement.

#2168 Reverts #2126 (supporting redirect from root when using pages) until the new bugs introduced by that PR are fixed.

Updated

#2167 Update Plotly.js to v2.13.3 (from v2.13.1) including patch release v2.13.2 and patch release v2.13.3.

Emit plotly_selected event on plot API calls and GUI edits.

Fix sankey select error (regression introduced in 2.13.0).

Handle missing drag layer of invisible sankey traces to fix select error.

Emit selection event in shape drawing dragmodes when an existing selection is modified.

Source code(tar.gz)
Source code(zip)
v2.6.0(Jul 15, 2022)
Added

#2109 Add maxHeight to Dropdown options menu.

#2039 Long callback changes:

Add background=False to dash.callback to use instead of app.long_callback.

Add previous app.long_callback arguments to dash.callback (interval, running, cancel, progress, progress_default, cache_args_to_ignore, manager)

#2110 Add search prop to dcc.Dropdown options, allowing to search the dropdown options with something other than the label or value.

Fixed

#2126 Fix bug where it was not possible to redirect from root when using pages.

#2114 Fix bug #1978 where text could not be copied from cells in tables with cell_selectable=False.

#2102 Fix bug as reported in dash-labs #113 where files starting with . were not excluded when building dash.page_registry.

#2100 Fixes bug where module name in for a custom not_found_404 page is incorrect in the dash.page_registry when not using the pages folder.

#2098 Accept HTTP code 400 as well as 401 for JWT expiry

#2097 Fix bug #2095 with TypeScript compiler and React.FC empty valueDeclaration error & support empty props components.

#2104 Fix bug #2099 with Dropdown clearing search value when a value is selected.

#2039 Fix bugs in long callbacks:

Fix #1769 and #1852 short interval makes job run in loop.

Fix #1974 returning no_update or raising PreventUpdate not supported with celery.

Fix use of the callback context in celery long callbacks.

Fix support of pattern matching for long callbacks.

#2110 Fix dcc.Dropdown search with component as prop for option label.

#2131 Add encoding to file open calls. Fix bug #2127.

Changed

#2116 Rename long callbacks to background callbacks

Deprecated dash.long_callback.managers.CeleryLongCallbackManager, use dash.CeleryManager instead.

Deprecated dash.long_callback.managers.DiskcacheLongCallbackManager, use dash.DiskcacheManager instead.

Deprecated dash constructor argument long_callback_manager in favor of background_callback_manager.

Updated

#2134 Upgrade Plotly.js to v2.13.1 (from v2.12.1) including feature release 2.13.0 and patch release 2.13.1

Add persistent selections via layout attributes selections, newselection, and activeselection, along with an updated UI allowing you to modify a selection you created.

Add unselected line styling to parcoords traces.

Add more quartile algorithms to violin traces.

More flexible axis automargin behavior.

And several other enhancements and bug fixes.

Source code(tar.gz)
Source code(zip)
v2.5.1(Jun 13, 2022)
Fixed

#2087 Fix bug #2086 in which using id as a key within a component's id breaks the new callback context's args_grouping function.

#2084 In dash 2.5.0, a default viewport meta tag was added as recommended for mobile-optimized sites by mdn This feature can be disabled by providing an empty viewport meta tag. e.g. app = Dash(meta_tags=[{"name": "viewport"}])

#2090, #2092. Fixed bug where the path to the pages_folder was incorrect on Windows.

Removed

#2087 Removed the undocumented callback context args_grouping_values property which was incompatible with pattern-matching callbacks.

Source code(tar.gz)
Source code(zip)
v2.5.0(Jun 7, 2022)
Added

#1947 Added pages - a better way to build multi-page apps. For more information see the forum post.

#1965 Add component as props.

#2049 Added wait_for_class_to_equal and wait_for_contains_class methods to dash.testing

Changed

#2050 Changed find_element and find_elements to accept an attribute argument that aligns with Selenium's By class, allowing you to search elements by other attributes. Default value is CSS_SELECTOR to maintain backwards compatibility with previous find_elements.

Fixed

#2043 Fix bug #2003 in which dangerously_allow_html=True + mathjax=True works in some cases, and in some cases not.

#2065 Fix bug #2064 rendering of dcc.Dropdown with a value but no options.

#2047 Fix bug #1979 in which DASH_DEBUG as environment variable gets ignored.

#2070 Fix bug #2066 nested types triggering maximum call stack error when building typescript components.

Source code(tar.gz)
Source code(zip)
v2.4.1(May 11, 2022)
Fixed

Fix #2045 import error when using pytest but dash[testing] is not installed.

Source code(tar.gz)
Source code(zip)
v2.4.0(May 11, 2022)
Added

#1952 Improved callback_context

Closes #1818 Closes #1054

adds dash.ctx, a more concise name for dash.callback_context

adds ctx.triggered_prop_ids, a dictionary of the component ids and props that triggered the callback.

adds ctx.triggered_id, the id of the component that triggered the callback.

adds ctx.args_grouping, a dict of the inputs used with flexible callback signatures.

#2009 Add support for Promises within Client-side callbacks as requested in #1364.

#1956 Add TypeScript components generation.

#2034 Add link_target prop to dcc.Markdown component. Closes #1827

#2035 Add type annotations to testing fixtures.

Fixed

#2029 Restrict the number of props listed explicitly in generated component constructors - default is 250. This prevents exceeding the Python 3.6 limit of 255 arguments. The omitted props are still in the docstring and can still be provided the same as before, they just won't appear in the signature so autocompletion may be affected.

#1968 Fix bug #1877, code which uses merge_duplicate_headers and style_header_conditional to highlight columns, it incorrectly highlights header cells.

#2015 Fix bug #1854 in which the combination of row_selectable="single or multi" and filter_action="native" caused the JS error.

#1976 Fix #1962 in which DatePickerSingle and DatePickerRange are extremely slow when provided a long list of disabled_days.

#2035 Fix #2033 In-App error reporting does not render HTML.

#1970 dcc.Dropdown Refactor fixes:

Fix bug #1868 value does not update when selected option removed from options.

Fix bug #1908 Selected options not showing when the value contains a comma.

Changed

#1751 Rename app.run_server to app.run while preserving app.run_server for backwards compatibility.

#1839 The callback decorator returns the original function, not the wrapped function, so that you can still call these functions directly, for example in tests. Note that in this case there will be no callback context so not all callbacks can be tested this way.

#2016 Drop the 375px width from default percy_snapshot calls, keep only 1280px

#2027 Improve the error message when a user doesn't wrap children in a list

Updated

#2016, #2032, and #2042 Widespread dependency upgrades

Upgrade Plotly.js to v2.12.1 (from v2.11.0).

Feature release 2.12.0 adds minor ticks and gridlines, as well as dashed gridlines.

Patch release 2.11.1 fixes regl-based traces in strict CSP mode, however you must manually switch to the strict bundle to use this.

Patch release 2.12.1 fixes several bugs.

Upgrade black to v22.3.0 for Python 3.7+ - if you use dash[ci] and you call black, this may alter your code formatting slightly, including more consistently breaking Python 2 compatibility.

Many other mainly JS dependency upgrades to the internals of Dash renderer and components. These may patch bugs or improve performance.

Source code(tar.gz)
Source code(zip)
v2.3.1(Mar 29, 2022)
Fixed

#1963 Fix #1780 flask shutdown deprecation warning when running dashduo threaded tests.

#1995 Fix #1992 ImportError: cannot import name 'get_current_traceback' from 'werkzeug.debug.tbtools'.

Source code(tar.gz)
Source code(zip)
v2.3.0(Mar 14, 2022)
Added

#1949 Add built-in MathJax support to both dcc.Markdown and dcc.Graph. A new boolean prop mathjax was added to these two components, defaulting to False. Set mathjax=True to enable math rendering. This work uses MathJax v3, although dcc.Graph and Plotly.js can also be used with MathJax v2.

In dcc.Markdown this has two flavors: inline math is any content between single dollar signs, for example "$E=mc^2$", and "display" math (on its own line, potentially multi-line) is delimited by double dollar signs.

In dcc.Graph, most text fields (graph and axis titles, trace names, scatter and bar text) can use math, and it's enabled with single dollar sign delimiters. A limitation here is that currently a given piece of text can only be one or the other: if math is found, everything outside the delimiters is ignored. See https://plotly.com/python/LaTeX/ for details.

For an intro to LaTeX math, see https://en.wikibooks.org/wiki/LaTeX/Mathematics.

Big thanks to Equinor for sponsoring this development, including the related work in Plotly.js!

Updated

#1949 Upgrade Plotly.js to v2.11.0 (from v2.9.0)

Feature release 2.10.0:

Support for MathJax v3

fillpattern for scatter traces with filled area

Feature release 2.11.0:

Every trace type can now be rendered in a stricter CSP environment, specifically avoiding unsafe-eval. Please note: the regl-based traces (scattergl, scatterpolargl, parcoords, and splom) are only strict in the strict bundle, which is NOT served by default in Dash. To use this bundle with Dash, you must either download it and put it in your assets/ folder, or include it as an external_script from the CDN: https://cdn.plot.ly/plotly-strict-2.11.0.min.js. All other trace types are strict in the normal bundle.

Patch release 2.10.1 containing a bugfix for mesh3d traces.

Fixed

#1915 Fix bug #1474 when both dcc.Graph and go.Figure have animation, and when the second animation in Figure is executed, the Frames from the first animation are played instead of the second one.

#1953 Fix bug #1783 in which a failed hot reloader blocks the UI with alerts.

#1942 Fix bug #1663 preventing pie traces from sending customdata with clickData and other events.

Source code(tar.gz)
Source code(zip)
v2.2.0(Feb 18, 2022)
Added

#1923:

dash.get_relative_path

dash.strip_relative_path

dash.get_asset_url This is similar to dash.callback where you don't need the app object. It makes it possible to use these functions in the pages folder of a multi-page app without running into the circular app imports issue.

Updated

#1911 Upgrade Plotly.js to v2.9.0 (from v2.8.3).

Adds ticklabelstep to axes to reduce tick labels while still showing all ticks.

Displays the plotly.js version when hovering on the modebar. This helps debugging situations where there might be multiple sources of plotly.js, for example /assets vs the versions built into dcc or ddk.

#1930 Upgrade JavaScript dependencies across renderer and all components.

Fixed

#1932 Fixes several bugs:

Restores compatibility with IE11 #1925

Restores style_header text alignment in Dash Table #1914

Clears the unneeded webdriver-manager requirement from dash[testing] #1919

Source code(tar.gz)
Source code(zip)
v2.1.0(Jan 28, 2022)
Changed

#1876 Delays finalizing Dash.config attributes not used in the constructor until init_app().

#1869, #1873 Upgrade Plotly.js to v2.8.3. This includes:

Feature release 2.5.0:

3D traces are now compatible with no-unsafe-eval CSP rules.

Feature release 2.6.0:

Add smith subplots and scattersmith traces, for drawing Smith charts.

Feature release 2.7.0:

Add text data for histogram traces.

Fix an interaction between uirevision and autorange that pops up in some cases of mixed clientside / serverside figure generation.

Feature release 2.8.0:

Add horizontal colorbars.

Add text data on heatmap and related trace types.

Control legend group title fonts.

Patch releases 2.5.1, 2.6.1, 2.6.2, 2.6.3, 2.6.4, 2.8.1, 2.8.2, and 2.8.3 containing bugfixes.

This PR also upgrades various other dependencies of dash renderer and component suites.

#1745: Improve our extras_require: there are now five options here, each with a well-defined role:

dash[dev]: for developing and building dash components.

dash[testing]: for using the pytest plugins in the dash.testing module

dash[diskcache]: required if you use DiskcacheLongCallbackManager

dash[celery]: required if you use CeleryLongCallbackManager

dash[ci]: mainly for internal use, these are additional requirements for the Dash CI tests, exposed for other component libraries to use a matching configuration.

Added

#1883 in DataTable added page_current to persisted_props as requested in #1860

#1763:

Dash and Dash Renderer

Input, State, and Output now accept components instead of ID strings and Dash callback will auto-generate the component's ID under-the-hood if not supplied. This allows usage like:

my_input = dcc.Input() my_output = html.Div() app.layout = html.Div([my_input, my_output]) @dash.callback(Output(my_output, 'children'), Input(my_input, 'value')) def update(value): return f'You have entered {value}'

Or, if using Python >=3.8 you can use the := walrus operator:

app.layout = html.Div([ my_input := dcc.Input(), my_output := html.Div() ]) @dash.callback(Output(my_output, 'children'), Input(my_input, 'value')) def update(value): return f'You have entered {value}'

#1894 restricted this feature so auto-generated IDs are not allowed if the app uses dash_snapshots (a Dash Enterprise package) or if the component uses persistence, as this can create confusing errors. Callback definitions can still reference components in these cases, but those components must have explicit IDs.

Dash Core Components

Rearranged Keyword Arguments & Flexible Types

Dropdown, RadioItem, and Checklist

Rearranged Keyword Arguments - options & value are now the first two keywords which means they can be supplied as positional arguments without the keyword. Supplying the keywords (options= and value=) is still supported.

Flexible Types - options can be supplied in two new forms:

An array of string|number|bool where label and value are equal to the items in the list.

A dictionary where the keys and values set as value and label respectively.

Before:

dcc.Dropdown( options=[ {'label': 'New York', 'value': 'New York'}, {'label': 'Montreal', 'value': 'Montreal'}, ], value='New York' )

or

dcc.Dropdown( options=[ {'label': 'New York', 'value': 'NYC'}, {'label': 'Montreal', 'value': 'MTL'}, ], value='New York' )

After:

dcc.Dropdown(['New York', 'Montreal'], 'New York')

Or

dcc.Dropdown({'NYC': 'New York', 'MTL': 'Montreal'}, 'New York')

RangeSlider & Slider

Rearranged Keyword Arugments - min, max, and step are now the first three keyword arguments which means they can be supplied as positional arguments without the keyword.

Flexible Types

step will be calculated implicitly if not given.

marks will be auto generated if not given. It will use min and max and will respect step if supplied. Auto generated marks labels are SI unit formatted. Around 5 human-readable marks will be created.

To remove the Slider's marks, set marks=None.

Before:

dcc.Slider(marks={1: 2, 2: 2, 3: 3})

After:

dcc.Slider(min=1, max=3, step=1)

Or equivalently:

dcc.Slider(1, 3, 1)

Step can also be omitted and the Slider will attempt to create a nice, human readable step with SI units and around 5 marks:

dcc.Slider(0, 100)

The SI units and ranges supported in marks are:

µ - micro, 10⁻⁶

m - milli, 10⁻³

(none) - 10⁰

k - kilo, 10³

M - mega, 10⁶

G - giga, 10⁹

T - tera, 10¹²

P - peta, 10¹⁵

E - exa, 10¹⁸

Ranges below 10µ are not supported by the Slider. This is a bug: https://github.com/plotly/dash/issues/1766

DataTable

Rearranged Keyword Arguments - data and columns the first twokeyword arguments which means they can be supplied as positional arguments without the keyword.

Inferred Properties - If columns isn't supplied then it is extracted from the the first row in data

Before:

dash_table.DataTable(data=df.to_dict('records'), columns=[{'name': i, 'id': i} for i in df.columns])

After:

dash_table.DataTable(data=df.to_dict('records'))

New Component Properties

Checklist & RadioItems

A new property inline appends display: inline-block to labelStyle.

dcc.Checklist(inline=True)

Fixed

#1879 Delete redundancy in pattern-matching callback implementation, specifically when ALL and MATCH wildcards are used together. This patch was submitted by an anonymous Dash Enterprise customer. Many thanks!

#1858 Support mini-css-extract-plugin Webpack plugin with @plotly/webpack-dash-dynamic-import node package - used by components to support dash async chunks. Updated dependencies of other @plotly node packages.

#1836 Fix __all__ in dcc and table for extras: dcc download helpers and table format helpers. This also restores this functionality to the obsolete top-level packages dash_core_components and dash_table.

#1822 Remove Radium from renderer dependencies, as part of investigating React 17 support.

#1779:

Clean up our handling of serialization problems, including fixing orjson for Python 3.6

Added the ability for dash.testing percy_snapshot methods to choose widths to generate.

#1778 DataTable: Fix React warnings stating that each child in a list should have a unique "key" prop

#1895 Support debug=True if native namespace-packages are present

Source code(tar.gz)
Source code(zip)
v2.0.0(Sep 4, 2021)
Dash and Dash Renderer

Added

#1702 Added a new @app.long_callback decorator to support callback functions that take a long time to run. See the PR and documentation for more information.

#1514 Perform json encoding using the active plotly JSON engine. This will default to the faster orjson encoder if the orjson package is installed.

#1736 Add support for request_refresh_jwt hook and retry requests that used expired JWT tokens.

Changed

#1679 Restructure dash, dash-core-components, dash-html-components, and dash-table into a singular monorepo and move component packages into dash. This change makes the component modules available for import within the dash namespace, and simplifies the import pattern for a Dash app. From a development standpoint, all future changes to component modules will be made within the components directory, and relevant packages updated with the dash-update-components CLI command.

#1707 Change the default value of the compress argument to the dash.Dash constructor to False. This change reduces CPU usage, and was made in recognition of the fact that many deployment platforms (e.g. Dash Enterprise) already apply their own compression. If deploying to an environment that does not already provide compression, the Dash 1 behavior may be restored by adding compress=True to the dash.Dash constructor.

#1734 Added npm run build script to simplify build process involving dash-renderer and subcomponent libraries within dash.

Dash Core Components

Added

#1729 Include F#, C#, and MATLAB in markdown code highlighting, for the upcoming .NET and MATLAB flavors of dash.

#1735 Upgrade Plotly.js to v2.4.2. This includes:

Feature release 2.3.0:

More number formatting options due to d3-format upgrade.

Many new geo projections.

Improved rendering and performance of scattergl, splom and parcoords traces.

Feature release 2.4.0:

legend.groupclick

bbox of hover items in event data, to support custom dash-driven hover effects

Patch releases 2.3.1, 2.4.1, and 2.4.2 containing various bug fixes.

#1735 New dcc.Tooltip component. This is particularly useful for rich hover information on dcc.Graph charts, using the bbox information included in the event data in plotly.js v2.4.0

Dash Table

Added

#1729 Include F#, C#, and MATLAB in markdown code highlighting, for the upcoming .NET and MATLAB flavors of dash.

Dash HTML Components

Removed

#1734 Removed the following obsolete html elements - <command>, <element>, <isindex>, <listing>, <multicol>, <nextid>. These are obsolete and had been previously removed from the reference table.

Source code(tar.gz)
Source code(zip)
v1.21.0(Jul 13, 2021)
Dash and Dash Renderer

Added

#1675 Add new Dash constructor argument extra_hot_reload_paths. This allows you to re-initialize the Python code of the app when non-Python files change, if you know that these files impact the app.

Changed

#1675 Remove the constraint that requests_pathname_prefix ends with routes_pathname_prefix. When you are serving your app behind a reverse proxy that rewrites URLs that constraint needs to be violated.

#1611 and #1685 Package dash-renderer artifacts and dependencies with Dash, and source renderer resources from within Dash.

#1567 Julia component generator puts components into src/jl - fixes an issue on case-insensitive filesystems when the component name and module name match (modulo case) and no prefix is used. Also reduces JS/Julia clutter in the overloaded src directory.

Fixed

#1664 Fix #1649, makes the devtools readable with a dark theme.

#1640 Fix #1475, missing timing_information after certain modifications to Flask behavior

Dash Core Components

Fixed

#963 Fixes #885

This applies the fix from #878 to the RangeSlider. It not only fixes the bug where the tooltips were visible when slider was not, but it also reduces the lag in the tooltip when the slider handles are moved.

Updated

#939 Upgrade Plotly.js to v2.2.1. Note that this is a major version upgrade to Plotly.js, however we are not treating this as a breaking change for DCC as the majority of breaking changes in Plotly.js do not affect the Dash API. The one exception is that several trace types that have long been deprecated are removed entirely.

Major release 2.0.0:

Stop exporting d3 as Plotly.d3, and remove many other deep pieces of the public API. This does not affect the dcc.Graph component, but if you make use of Plotly from the global scope in some other way you may be affected.

Drop the deprecated trace types contourgl and area, as well as legacy pre-scatterpolar polar attributes bar.r, bar.t, scatter.r, scatter.t, layout.radialaxis, layout.angularaxis. Use scatterpolar, barpolar, and polar subplots instead.

heatmapgl and pointcloud trace types, and the transform attribute are deprecated, and will be removed in a future release.

Increase CSP safety by removing function constructors. 3D plots still use function constructors, but if you place one of the non-3D bundles (including the new strict bundle) in your assets folder you will have no function constructors.

Remove "Aa" text in legends.

Default hovermode to "closest".

Default textposition to "auto" in bar traces. If you previously used the bar.text attribute for hover only, you will need to explicitly set textposition="none".

Add bar.marker.pattern, image.zsmooth, and various other features and bugfixes.

Feature release 2.1.0:

New icicle trace type.

New legendrank trace attribute.

Several other additions and bug fixes.

Feature release 2.2.0:

Legend group titles

Half-year directive (%h) for date formatting

Several other bug fixes and performance improvements

Patch release 2.2.1 containing a security fix.

Added

#932 Adds a new copy to clipboard component.

#948] Adds disabled_days prop to DatePickerRange and DatePickerSingle components. With this prop you can specify days that should be made unselectable in the date picker, in addition to those that fall outside of the range specified by min_date_allowed and max_date_allowed.

Changed

#972 Updated R package vignettes and dash-info.yaml to regenerate examples without attaching now-deprecated core component packages (dashHtmlComponents, dashCoreComponents, or dashTable).

Dash HTML Components

Changed

#194 Updated dependencies and build process

#190 Updated R package vignettes and dash-info.yaml to regenerate examples without attaching now-deprecated core component packages (dashHtmlComponents, dashCoreComponents, or dashTable).

Dash Table

Fixed

#907

Fix a bug where pagination did not work or was not visible. #834

Fix a bug where if you are on a page that no longer exists after the data is updated, no data is displayed. #892

Added

#916

Added html option to markdown_options prop. This enables the use of html tags in markdown text.

#545

Case insensitive filtering

New props: filter_options - to control case of all filters, columns.filter_options - to control filter case for each column

New operators: i=, ieq, i>=, ige, i>, igt, i<=, ile, i<, ilt, i!=, ine, icontains - for case-insensitive filtering, s=, seq, s>=, sge, s>, sgt, s<=, sle, s<, slt, s!=, sne, scontains - to force case-sensitive filtering on case-insensitive columns

Changed

#918 Updated all dependencies. In particular the highlight.js upgrade changes code highlighting in markdown: we have long used their "github" style, this has been updated to more closely match current github styles.

#901 Updated R package dash-info.yaml to regenerate example without attaching now-deprecated core component packages (dashHtmlComponents, dashCoreComponents, or dashTable).

Source code(tar.gz)
Source code(zip)
v1.20.0(Apr 8, 2021)
Dash and Dash Renderer

Changed

#1531 Update the format of the docstrings to make them easier to read in the reference pages of Dash Docs and in the console. This also addresses #1205

#1553 Increase the z-index of the Dash error menu from 1001 to 1100 in order to make sure it appears above Bootstrap components.

Fixed

#1546 Validate callback request outputs vs output to avoid a perceived security issue.

Dash Core Components

Added

#863 Adds a new Download component. Along with this several utility functions are added to help construct the appropriate data format:

dcc.send_file - send a file from disk

dcc.send_data_frame - send a DataFrame, using one of its writer methods

dcc.send_bytes - send a bytestring or the result of a bytestring writer

dcc.send_string - send a string or the result of a string writer

Changed

#923 Set autoComplete to off in dcc.Dropdown. This fixes #808

Fixed

#930 Fixed a bug #867 with DatePickerRange that would sometimes shift the allowed dates by one day.

#934 Fixed a bug in EnhancedTab component that ignored disabled_className property

Dash HTML Components

Fixed

#179 - Fixes #77 Added allow and referrerPolicy properties to html.Iframe

#178 - Fix #161

Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Related tags

Overview

Dash

Dash is the most downloaded, trusted Python framework for building ML & data science web apps.

App Samples

Dash OSS & Dash Enterprise

Comments

Contributor Checklist

Current Prerelease

Test Cases to run for demo

Example Error Messages

PropTypes to Cerberus reference

Current Status

Changes

Issues

Contributor Checklist

optionals

Contributor Checklist

optionals

Releases(v2.7.0)

v2.7.0(Nov 3, 2022)

Removed

Added

Updated

Fixed

Changed

v2.6.2(Sep 23, 2022)

Fixed

v2.6.1(Aug 2, 2022)

Fixed

Updated

v2.6.0(Jul 15, 2022)

Added

Fixed

Changed

Updated

v2.5.1(Jun 13, 2022)

Fixed

Removed

v2.5.0(Jun 7, 2022)

Added

Changed

Fixed

v2.4.1(May 11, 2022)

Fixed

v2.4.0(May 11, 2022)

Added

Fixed

Changed

Updated

v2.3.1(Mar 29, 2022)

Fixed

v2.3.0(Mar 14, 2022)

Added

Updated

Fixed

v2.2.0(Feb 18, 2022)

Added

Updated

Fixed

v2.1.0(Jan 28, 2022)

Changed

Added

Dash and Dash Renderer

Dash Core Components

Rearranged Keyword Arguments & Flexible Types

New Component Properties

Fixed

v2.0.0(Sep 4, 2021)

Dash and Dash Renderer

Added

Changed

Dash Core Components

Added

Dash Table

Added

Dash HTML Components

Removed

v1.21.0(Jul 13, 2021)