Shorthand supports for dash-core-components

[workaholicpandaren]

(this PR replaces PR #1747 with one squashed commit)

Implements this issue to support optional shorthand supports for below components.
You can compare old format and new format.

Dependency Update

• Input Output State can now accept component object as well as string value of the component key
  • (Required) A separate PR will need to be merged before this

Updated Components with change notes

• Dropdown

  • options props can now be passed without being a keyword argument
  • options can now accept array of string as well as previous format (array of dictionary)

• RangeSlider

  • Changed props order to make it start with min max step

• Checklist

  • options props becomes first argument, can be passed without keyword
  • Added inline props to specify if options are array of string or dictionary (previous format)

• RadioItems

  • options props becomes first argument, can be passed without keyword
  • Added inline props to specify if options are array of string or dictionary (previous format)

• DataTable

  • data and columns props becomes first 2 arguments, can be passed without keyword
  • (Optional) Separate PR will be followed to extract columns automatically from given data

[workaholicpandaren]

Changelog

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

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 used in marks are:

• z - zepto, 10⁻²¹
• a - atto, 10⁻¹⁸
• f - femto, 10⁻¹⁵
• p - pico, 10⁻¹²
• n - nano, 10⁻⁹
• µ - 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¹⁸
• Z - zetta, 10²¹

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)

[chriddyp]

💃🏼 Great work! Let's do it.