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

Overview

Dash

CircleCI GitHub PyPI PyPI - Python Version GitHub commit activity LGTM Alerts LGTM Grade

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.

App Samples

App Description
Sample Dash App 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).
Crossfiltering Dash App 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 App with Mapbox map showing walmart store openings Dash uses Plotly.js for charting. Over 35 chart types are supported, including maps.
Financial report 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.

image

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

    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)

    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

    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

    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.

    image

    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:

    1_basic_reactive

    @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: 2_input_updates_text

    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":

    3_dataset_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:

    image

    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')
                )
            }
        )
    ])
    

    5_simple_declarative_dropdown


    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

    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: image

    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: image

    or werkzeug: image

    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? image


    cc @plotly/dash

    dash-meta-sponsored 
    opened by chriddyp 31
  • error UnsupportedOperation: not writable

    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

    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`

    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

    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

    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

    captured (1)

    captured (2)

    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]

    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.

    [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

    [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

    [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

    image
    opened by ArtsiomAntropau 0
  • [BUG] Inconsistent callback behavior when adding new items to layout

    [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

    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]

    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)

  • 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)

  • 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:
        1. An array of string|number|bool where label and value are equal to the items in the list.
        2. 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 data property, and fix #129 obsolete, deprecated, and discouraged elements. No elements were removed, but comments were added to the documentation about these elements detailing their limitations.

      Dash Table

      Changed

      • #862 - update docstrings per https://github.com/plotly/dash/issues/1205
      • #878 - update build process to use Webpack 5 and other latest dependencies
      Source code(tar.gz)
      Source code(zip)
    • v1.19.0(Jan 20, 2021)

      Dash and Dash Renderer

      Added

      • #1508 Fix #1403: Adds an x button to close the error messages box.
      • #1525 Adds support for callbacks which have overlapping inputs and outputs. Combined with dash.callback_context this addresses many use cases which require circular callbacks.

      Changed

      • #1503 Fix #1466: loosen dash[testing] requirements for easier integration in external projects. This PR also bumps many dash[dev] requirements.

      Fixed

      • #1530 Dedent error messages more carefully.
      • #1527🐛 get_asset_url now pulls from an external source if assets_external_path is set.
        • updated _add_assets_resource to build asset urls the same way as get_asset_url.
        • updated doc string for assets_external_path Dash argument to be more clear that it will allways be joined with the assets_url_path argument when determining the url to an external asset.
      • #1493 Fix #1143, a bug where having a file with one of several common names (test.py, code.py, org.py, etc) that imports a dash component package would make import dash fail with a cryptic error message asking whether you have a file named "dash.py"

      Dash Core Components

      Fixed

      • #905 Make sure the figure prop of dcc.Graph receives updates from user interactions in the graph, by using the same layout object as provided in the prop rather than cloning it. Fixes #879.
      • #903 Part of fixing dash import bug https://github.com/plotly/dash/issues/1143

      Updated

      Added

      • #888 Adds a drag_value prop to dcc.Sliderto be able to fire callbacks from dragging and releasing the slider.

      Dash HTML Components

      Fixed

      • #169 - part of fixing dash import bug https://github.com/plotly/dash/issues/1143

      Dash Table

      Fixed

      • #854 - part of fixing dash import bug https://github.com/plotly/dash/issues/1143
      Source code(tar.gz)
      Source code(zip)
    • v1.18.1(Dec 9, 2020)

    • v1.18.0(Dec 7, 2020)

      Dash-Table

      Fixed

      • #844 Fix a bug where the table is using classes that are styled by Bootstrap

      Dash-Core-Components

      Updated

      Source code(tar.gz)
      Source code(zip)
    • v1.17.0(Oct 29, 2020)

      Dash and Dash-Renderer

      Changed

      • #1442 Update from React 16.13.0 to 16.14.0

      Fixed

      • #1434 Fix #1432 for Julia to import non-core component packages without possible errors.

      Changed

      • #1448 Provide a hint in the callback error when the user forgot to make app.callback(...) a decorator.

      Dash-Core-Components

      Added

      • #871 Add Julia syntax highlighting support for dcc.Markdown

      Fixed

      • #878
        • Fixed #751, a bug that causes dcc.Slider and dcc.RangerSlider tooltips to be visible even if the slider component isn't visible (e.g. overflow),

      Updated

      Dash-Table

      Fixed

      • #841
        • Fix prop-types regression causing console errors in browser devtools
        • Fix syntax highlighting regression for Markdown cells
      • #842 Fix a regression introduced with #722 causing the tooltips to be misaligned with respect to their parent cell and incompletely addressed in #817

      Added

      • #841 Add Julia syntax highlighting support for Markdown cells
      • #831 Add the tooltip_header prop and add nested prop use_with (with values: header, data, both) to the tooltip prop to configure header cell tooltips
      Source code(tar.gz)
      Source code(zip)
    • v1.16.3(Oct 7, 2020)

    • v1.16.2(Sep 25, 2020)

      Dash and Dash-Renderer

      Fixed

      • #1415 Fix a regression with some layouts callbacks involving dcc.Tabs, not yet loaded dash_table.DataTable and dcc.Graph to not be called
      • #1416 Make callback graph more robust for complex apps and some specific props (width in particular) that previously caused errors.
      Source code(tar.gz)
      Source code(zip)
    • v1.16.1(Sep 16, 2020)

      Dash and Dash-Renderer

      Changed

      • #1376 Extends the getTransform logic in the renderer to handle persistenceTransforms for both nested and non-nested persisted props. This was used to to fix dcc#700 in conjunction with dcc#854 by using persistenceTransforms to strip the time part of the datetime so that datepickers can persist when defined in callbacks.

      Fixed

      • #1408 Fixes a bug where the callback graph layout would reset whenever a callback fired, losing user-initiated layout changes (#1402) or creating a new force layout (#1401)

      Dash-Core-Components

      Fixed

      • #854 Used persistenceTransforms to strip the time part of the datetime in the persited props of DatePickerSingle (date) and DatePickerRange (end_date, start_date), fixing dcc#700.

      Added

      • #850 Add property prependData to Graph to support Plotly.prependTraces
        • refactored the existing extendTraces API to be a single mergeTraces API that can handle both prepend as well as extend.

      Updated

      Source code(tar.gz)
      Source code(zip)
    • v1.16.0(Sep 3, 2020)

      Dash and Dash-Renderer

      Added

      • #1371 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) .

      Changed

      • #1385 Closes #1350 and fixes a previously undefined callback behavior when multiple elements are stacked on top of one another and their n_clicks props are used as inputs of the same callback. The callback will now trigger once with all the triggered n_clicks props changes.
      • #1179 New and improved callback graph in the debug menu. Now based on Cytoscape for much more interactivity, plus callback profiling including number of calls, fine-grained time information, bytes sent and received, and more. You can even add custom timing information on the server with callback_context.record_timing(name, seconds)

      Fixed

      • #1384 Fixed a bug introduced by #1180 breaking use of prevent_initial_call as a positional arg in callback definitions

      Dash-Core-Components

      Updated

      Source code(tar.gz)
      Source code(zip)
    • v1.15.0(Aug 25, 2020)

      Dash and Dash Renderer

      Added

      • #1355 Removed redundant log message and consolidated logger initialization. You can now control the log level - for example suppress informational messages from Dash with app.logger.setLevel(logging.WARNING).
      • #1253, #1377 Added experimental --jl-prefix option to dash-generate-components, optionally generates Julia version of components and corresponding Julia package

      Changed

      • #1180 and #1375 Input, Output, and State in callback definitions don't need to be in lists. You still need to provide Output items first, then Input items, then State, and the list form is still supported. In particular, if you want to return a single output item wrapped in a length-1 list, you should still wrap the Output in a list. This can be useful for procedurally-generated callbacks.
      • #1368 Updated pytest to v6.0.1. To avoid deprecation warnings, this also updated pytest-sugar to 0.9.4 and pytest-mock to 3.2.0. The pytest-mock update only effects python >= 3.0. Pytest-mock remains pinned at 2.0.0 for python == 2.7.

      Dash Core Components

      Added

      • #851 Add support for Dash.jl Julia built components
      • #840 Add styling properties to dcc.Loading component
        • parent_className: Add CSS class for the outermost dcc.Loading parent div DOM node
        • parent_style: Add CSS style property for the outermost dcc.Loading parent div DOM node
        • provides a workaround for the previous behaviour the of className property, which changed in #740. parent_className (or inline styles in parent_style) now allow CSS rules to be applied to the outermost dcc.Loading div, which is no longer covered by className on loading completion as of Dash Core Components >= 1.9.1 (Dash >= 1.11.0).

      Dash HTML Components

      Added

      • #165 Add support for Dash.jl Julia component generation.

      Dash Table

      Added

      • #820 Add support for Dash.jl Julia built components

      Fixed

      • #817 Fix a regression introduced with #722 causing the tooltips to be misaligned with respect to their parent cell
      • #818 Fix a regression causing copy/paste not to work when selecting a range of cells with Shift + mouse click
      • #819 Fix pagination page_current and page_count fields to accommodate larger numbers
      Source code(tar.gz)
      Source code(zip)
    • v1.14.0(Jul 28, 2020)

      Dash and Dash-Renderer

      Added

      • #1343 Add title parameter to set the document title. This is the recommended alternative to setting app.title or overriding the index HTML.
      • #1315 Add update_title parameter to set or disable the "Updating...." document title during updates. Closes #856 and #732

      Dash-Core-Components

      Dash-Table

      Added

      • #808Fix a regression introduced with #787 making it impossible to open markdown links in the current tab.
        • Adds a new markdown_options property that supports:
          • link_target nested prop with values _blank, _parent, _self, _top or an arbitrary string (default: _blank)
      Source code(tar.gz)
      Source code(zip)
    • v1.13.4(Jun 25, 2020)

    • v1.13.3(Jun 19, 2020)

    • v1.13.2(Jun 18, 2020)

      Dash and Dash-Renderer

      Fixed

      • #1305
        • Fix regression that causes crash when FLASK_ENV is modified during app execution
        • Fix regression that caused tests using _wait_for_callbacks to fail
      Source code(tar.gz)
      Source code(zip)
    • v1.13.1(Jun 18, 2020)

    • v1.13(Jun 17, 2020)

      Dash and Dash-Renderer

      Added

      • #1289 Supports DASH_PROXY env var to tell app.run_server to report the correct URL to view your app, when it's being proxied. Throws an error if the proxy is incompatible with the host and port you've given the server.
      • #1240 Adds callback_context to clientside callbacks (e.g. dash_clientside.callback_context.triggered). Supports triggered, inputs, inputs_list, states, and states_list, all of which closely resemble their serverside cousins.

      Changed

      • #1237 Closes #920: Converts hot reload fetch failures into a server status indicator showing whether the latest fetch succeeded or failed. Callback fetch failures still appear as errors but have a clearer message.
      • #1254 Modifies the callback chain implementation and improves performance for apps with a lot of components

      Fixed

      • #1255 Hard hot reload targets only the current window, not the top - so if your app is in an iframe you will only reload the app
      • #1249 Fixes #919 so dash.testing is compatible with more pytest plugins, particularly pytest-flake8 and pytest-black.
      • #1248 Fixes #1245, so you can use prop persistence with components that have dict IDs, ie for pattern-matching callbacks.
      • #1185 Sort asset directories, same as we sort files inside those directories. This way if you need your assets loaded in a certain order, you can add prefixes to subdirectory names and enforce that order.
      • #1288 Closes #1285: Debug=True should work in the main module.

      Dash-Table

      Added

      • #787 Add cell_selectable property to allow/disallow cell selection

      Changed

      • #787
        • Clicking on a link in a Markdown cell now requires a single click instead of two
        • Links in Markdown cells now open a new tab (target="_blank")

      Fixed

      • #785 Fix a bug where the table does not refresh correctly if a property was previously missing
      • #793
        • Fix a bug where headers aren't aligned with columns with fixed_rows #777
        • Fix a regression where headers don't scroll horizontally with fixed_rows #780
      Source code(tar.gz)
      Source code(zip)
    • Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

      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 t

      Plotly 14k Feb 18, 2021
      Python & Julia port of codes in excellent R books

      X4DS This repo is a collection of Python & Julia port of codes in the following excellent R books: An Introduction to Statistical Learning (ISLR) Stat

      Gitony 5 Jun 21, 2022
      Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.

      Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.

      Visual Python 564 Jan 3, 2023
      IPython/Jupyter notebook module for Vega and Vega-Lite

      IPython Vega IPython/Jupyter notebook module for Vega 5, and Vega-Lite 4. Notebooks with embedded visualizations can be viewed on GitHub and nbviewer.

      Vega 335 Nov 29, 2022
      Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js

      pivottablejs: the Python module Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js Installation pip install pivot

      Nicolas Kruchten 512 Dec 26, 2022
      IPython/Jupyter notebook module for Vega and Vega-Lite

      IPython Vega IPython/Jupyter notebook module for Vega 5, and Vega-Lite 4. Notebooks with embedded visualizations can be viewed on GitHub and nbviewer.

      Vega 294 Feb 12, 2021
      Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js

      pivottablejs: the Python module Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js Installation pip install pivot

      Nicolas Kruchten 419 Feb 11, 2021
      High performance, editable, stylable datagrids in jupyter and jupyterlab

      An ipywidgets wrapper of regular-table for Jupyter. Examples Two Billion Rows Notebook Click Events Notebook Edit Events Notebook Styling Notebook Pan

      J.P. Morgan Chase 75 Dec 15, 2022
      Plotting library for IPython/Jupyter notebooks

      bqplot 2-D plotting library for Project Jupyter Introduction bqplot is a 2-D visualization system for Jupyter, based on the constructs of the Grammar

      null 3.4k Dec 29, 2022
      An interactive GUI for WhiteboxTools in a Jupyter-based environment

      whiteboxgui An interactive GUI for WhiteboxTools in a Jupyter-based environment GitHub repo: https://github.com/giswqs/whiteboxgui Documentation: http

      Qiusheng Wu 105 Dec 15, 2022
      Plotting library for IPython/Jupyter notebooks

      bqplot 2-D plotting library for Project Jupyter Introduction bqplot is a 2-D visualization system for Jupyter, based on the constructs of the Grammar

      null 3.4k Dec 30, 2022
      A Jupyter - Three.js bridge

      pythreejs A Python / ThreeJS bridge utilizing the Jupyter widget infrastructure. Getting Started Installation Using pip: pip install pythreejs And the

      Jupyter Widgets 844 Dec 27, 2022
      Plotting library for IPython/Jupyter notebooks

      bqplot 2-D plotting library for Project Jupyter Introduction bqplot is a 2-D visualization system for Jupyter, based on the constructs of the Grammar

      null 3k Feb 18, 2021
      A Jupyter - Three.js bridge

      pythreejs A Python / ThreeJS bridge utilizing the Jupyter widget infrastructure. Getting Started Installation Using pip: pip install pythreejs And the

      Jupyter Widgets 700 Feb 17, 2021
      Render Jupyter notebook in the terminal

      jut - JUpyter notebook Terminal viewer. The command line tool view the IPython/Jupyter notebook in the terminal. Install pip install jut Usage $jut --

      Kracekumar 169 Dec 27, 2022
      A Jupyter - Leaflet.js bridge

      ipyleaflet A Jupyter / Leaflet bridge enabling interactive maps in the Jupyter notebook. Usage Selecting a basemap for a leaflet map: Loading a geojso

      Jupyter Widgets 1.3k Dec 27, 2022
      Draw datasets from within Jupyter.

      drawdata This small python app allows you to draw a dataset in a jupyter notebook. This should be very useful when teaching machine learning algorithm

      vincent d warmerdam 505 Nov 27, 2022
      ipyvizzu - Jupyter notebook integration of Vizzu

      ipyvizzu - Jupyter notebook integration of Vizzu. Tutorial · Examples · Repository About The Project ipyvizzu is the Jupyter Notebook integration of V

      Vizzu 729 Jan 8, 2023
      BrowZen correlates your emotional states with the web sites you visit to give you actionable insights about how you spend your time browsing the web.

      BrowZen BrowZen correlates your emotional states with the web sites you visit to give you actionable insights about how you spend your time browsing t

      Nick Bild 36 Sep 28, 2022