📣 Dash 2.1.0 Released -

[adamschroeder]

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

Hi Everyone,
It’s a pleasure to announce that Dash 2.1.0 is out!

pip install dash==2.1.0

Official Changelog Dash v2.1.0

Highlights

1. Auto-generated IDs for Components Inside Callbacks:

Input , State , 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])

@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 inside the Layout:

app.layout = html.Div([
    my_input := dcc.Input(),
    my_output := html.Div()
])

@callback(Output(my_output, 'children'), Input(my_input, 'value'))
def update(value):
    return f'You have entered {value}'

Note:

• Since callbacks need to be defined in advance, you can’t use this if you are defining chunks of layouts with a callback that updates a children property. For example, if you create and return a dropdown component inside a callback, you must provide an ID to that dropdown. Otherwise, you will not be able to use that dropdown in other callbacks.
• These random IDs are defined in the order that the callbacks are defined, which is why it’s stable when running across multiple processes or servers. However, if you refactor your code, the underlying IDs will change. Because of this ID fragility, you cannot use this with persistence or Dash Enterprise Snapshot or Report Engine and Dash will raise an exception if you try to do so.

---

2. Rearranged Keyword Arguments & Flexible Types:

Dropdown , RadioItem , and Checklist

• Rearranged Keyword Arguments - options & value are now the first two keywords inside some components, 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'
)

After, with Dash 2.1.0 or higher:

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

Before:

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

After, with Dash 2.1.0 or higher:

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:

1. step will be calculated implicitly if not given.

Before

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

After, with Dash 2.1.0 or higher:

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)

2. 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. For example, the code above would generate this Slider:

3. To remove the Slider’s marks, set marks=None .

dcc.Slider(0, 100, marks=None)

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¹⁸

DataTable

• Rearranged Keyword Arguments - data and columns are the first two keyword 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, with Dash 2.1.0 or higher:

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

---

3. New Component Prop:

Checklist & RadioItems

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

dcc.Checklist(inline=True)

---

4. New dcc.Graph Options:

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

import plotly.graph_objects as go
fig = go.Figure(go.Scattersmith(imag=[0.5, 1, 2, 3], real=[0.5, 1, 2, 3]))
fig.show()

• 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:
  • Control legend group title fonts.
  • Add text data on heatmap and related trace types.

import plotly.graph_objects as go
fig = go.Figure(data=go.Heatmap(
                    z=[[1, 20, 30],
                      [20, 1, 60],
                      [30, 60, 1]],
                    text=[['one', 'twenty', 'thirty'],
                          ['twenty', 'one', 'sixty'],
                          ['thirty', 'sixty', 'one']],
                    texttemplate="%{text}",
                    textfont={"size":20}))

fig.show()

• Add horizontal colorbars.

fig.update_traces(colorbar_orientation='h')

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

---

5. Notable Fixes:

• #1879: Deletes redundancy in pattern-matching callback implementation, specifically when ALL and MATCH wildcards are used together. This fix vastly improves the performance of PMC callbacks as noted by several community members. Many thanks!
• Thank you @urig for reporting the bug about the DataTable page number not being persistent. This has now been fixed.

---

6. Future Dash Releases:

Dash Multi-page App

Exciting work continues in dash-labs on the popular pages feature which will offer a better way to make multi-page Dash apps. The newly released dash-labs 1.0.2 includes the new feature of “variables in the path”, as requested by @benn0. Thank you Ben.

MarkdownAIO
Although this new feature is not available yet, here is a “super secret feature preview” MarkdownAIO: Markdown that runs code! See the live demo.

MarkdownAIO is a Dash feature that will allow you to write Dash Apps as Markdown files. Simply pass in a Markdown file and MarkdownAIO will return a set of components with the option to display and/or execute code blocks. MarkdownAIO could be used for multiple purposes, such as:

• Documentation helper
• Markdown / Text authoring tool
• Makes it easy way to bring a Markdown file into an app without doing open(‘file.md’)
• It’s also compatible with the pages/ api. The live demo is a multi-page app made with pages/, and each page is a Markdown file displayed using MarkdownAIO.

We would like to say thank you to our community member, @AnnMarieW, for all the time she has been dedicating to contribute to open source Dash, for creating the MarkdownAIO PR as well as creating and hosting the online dash-labs docs.

---

7. Previous Releases:

Dash 2.0 Prerelease Candidate Available!
Dash v1.21.0 - Plotly.js 2.0, Icicle Charts, Bar Chart Patterns, Clipboard Component, Bug Fixes
Dash 1.20.0 - dcc.Download component & various community contributed bug fixes

[raptorbrad]

@adamschroeder

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

I may have found a bug with this or something similar. Prior to upgrading to dash I was able to pass data into the datatable that included columns of lists that are not present in the table; however, after upgrading, I can no longer do this.

This is useful for when multiple components need access to the same data being passed into the table.

Here is a reproducible example using Dash==2.1.0:

from dash import Dash, dash_table
import pandas as pd

data = {
    'Name': ['Tom', 'Jack', 'Steve', 'Ricky'],
    'Age': [28,34,29,42],
    'hidden': [[0, 1], 2, 3, 4]
}
df = pd.DataFrame(data)

app = Dash(__name__)

columns = [
    {'name': 'Name', 'id': 'Name'},
    {'name': 'Age', 'id': 'Age'}
]

app.layout = dash_table.DataTable(df.to_dict('records'), columns)

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

And this is the error I receive:

Invalid argument `data[0].hidden` passed into DataTable.

[adamschroeder]

@raptorbrad

    'hidden': [[0, 1], 2, 3, 4]

Hi Brad @raptorbrad ,
thank you for reporting this. I actually couldn’t get this to work on previous Dash versions either. Which Dash version were you able to get this to work on?

[raptorbrad]

Hmm there must have been some other factor causing it to work as well. Initially the code I posted above worked, but it doesn’t now. I have a very convoluted system, so I tweaked things to get it to work with the new update.

Thanks for responding though!

[monitorcasalab]

@adamschroeder

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

I understand this is optional and we can still use the previous format, for those cases where label is one thing but the value transferred could be a different thing that can be interpreted in a callback.

Amazing improvements!

[dashls]

Can you verify that the following indeed works?

dcc.Checklist(['New York City', 'Montreal', 'San Francisco'], 'Montreal')

I installed this version with conda and I checked that the version was correct and restarted kernel. However, that format produces an error. I can only get it to work if I include brackets for the value term, i.e.

dcc.Checklist(['New York City', 'Montreal', 'San Francisco'], ['Montreal']).

What on my end could be causing this?

[adamschroeder]

@dashls

dcc.Checklist(['New York City', 'Montreal', 'San Francisco'], ['Montreal']) .

Hi Loren @dashls
you are correct in using the above code with Montreal inside a list. That is because Montreal, being the second prop inside the checklist, represents the value. And as we can see from the documentation, the value is a list type.

value (list of strings | numbers | booleans; optional): The currently selected value.

That’s why you get this error when Montreal is a string type:

Invalid argument value passed into Checklist.
Expected an array.
Was supplied type string.
Value provided: “Montreal”

[dashls]

Correct. So the documentation should probably be updated because it currently has examples stating that value can be a string.

Thanks for getting back to me.

[petro]

@adamschroeder I noticed the same about the lists inside DataTable column. It used to work with

dash==1.19.0
dash-table==4.11.2

(Though it required setting presentation mode to markdown). It stopped to work after upgrade to:

dash==2.1.0
dash-table==5.0.0

I have debugged the issue, and the root cause is change of accepted type of data property. It used to be:

data: PropTypes.arrayOf(PropTypes.object),

Now it is:
data (list of dicts with strings as keys and values of type string | number | boolean; optional):

    data: PropTypes.arrayOf(
        PropTypes.objectOf(
            PropTypes.oneOfType([
                PropTypes.string,
                PropTypes.number,
                PropTypes.bool
            ])
        )
    ),

Workaround for that is to convert list to json string before displaying and back from string to list when retrieving data from data table. But it’s error-prone and inconvenient.

Is there any chance list handling functionality inside DataTable will be restored?

Alternatively, functionality known from SQLite would also do the job: register adapter/converter pair for DataTable which would handle type conversions automatically.

Thanks

[adamschroeder]

Hi @petro
It was challenging for myself and my colleagues to understand what you mean by list handling. Can you clarify please and give more code examples.