basic_callbacks.py

import dash_core_components as dcc
import dash_html_components as html

import styles
import tools

examples = [
    tools.load_example(s) for s in [
        'tutorial/examples/basic_callbacks_example_1.py',
        'tutorial/examples/basic_callbacks_example_2.py',
        'tutorial/examples/basic_callbacks_events.py'
    ]
]

layout = html.Div(children=[
    dcc.Markdown('''
    ## Interactivity with Callbacks

    The heart and soul of Dash is providing an easy way to bind Python
    callbacks to web interfaces.

    With Dash's callback decorators, you can update certain components
    when other components change values. Here's a practical example.
    View the interactive app below the code.

    '''.replace('    ', '')),
    dcc.SyntaxHighlighter(
        examples[0][0], language='python', customStyle=styles.code_container
    ),
    html.Div('This code will generate an app like this:'),

    html.Div(examples[0][1], className="example-container")
])


layout.children.extend([
    dcc.Markdown('''
## Multiple Inputs

Let's extend this example by including
a secondary input element that controls
which variable we should plot.

Dash apps are "reactive" which means that
whenever values change in the front-end,
the callback functions will get called
automatically.

'''),
    dcc.SyntaxHighlighter(
        examples[1][0], language='python', customStyle=styles.code_container),
    html.Div(examples[1][1], className="example-container")
])


layout.children.extend([
    dcc.Markdown('''
## Events and States

Reactive interfaces are great when the callbacks are fast.
As a user, the delay between selected an option in the dropdown
and seeing the graph update is small and the interface feels
snappy.

An alternative to these types of reactive interfaces is subscribing
explicitly to events. Subscribing to events is great when your
callbacks takes at least a couple of seconds to run or when
you would like your users to update a set of controls before showing
them the output.

You can subscribe to event changes with the
`dash.dependencies.Event` object. Most Dash components will have
events that you can subscribe to. To see the available events of any
dash component, either call `help()` or look up a list with the
`available_events` property:

```
>>> print(html.Button.available_events)
['click']

>>> print(dcc.Graph.available_events)
['restyle', 'relayout']
```

In this example, we'll update our graph when we click on the button.
We'll pass in the currently selected values of the dropdowns through
the `state` arguments.

'''),
    dcc.SyntaxHighlighter(
        examples[2][0], language='python', customStyle=styles.code_container
    ),
    html.Div(examples[2][1], className="example-container")
])