1. Callbacks in Dash
Let's begin making our Dash apps interactive using callbacks.
2. What are callbacks?
In Dash, callbacks are defined functionality within an app that are triggered by user interaction.
Specifically, a user interacts with an element
which triggers a Python function,
and this function will cause a change in the app.
This allows us to create interactive user experiences within our apps.
3. Callbacks in Dash
Let's look at a callback in Dash. We start with the app-dot-callback decorator. A decorator is an advanced Python concept that is beyond the scope of this course. We will cover what you need to know to use the specified one relevant to Dash.
Inside the decorator, there are two elements. The input and output.
The output defines which component will be changed using the returned value of the triggered function.
Specifically, the component id property identifies the component to update
and the component property defines exactly what will be updated on that component. Here we have some plot with an id of my_plot, and we will be updating the figure attribute.
The input is what triggers the callback, similarly identified by the component id property.
The component property here is what will be taken from the triggering component to send to the triggered function, placed immediately below the decorator.
4. Dropdowns in Dash
A dropdown in Dash contains a list of options users can select.
It is constructed from a list of dictionaries with a label and value. The label is what the user sees, and the value is what is sent to a callback.
5. A dropdown callback
Let's see a complete dropdown example in action. We will use a dropdown to change the title on a Plotly figure. We begin with the app layout we are familiar with.
Inside we place our dropdown. Note that the ID, title_dd, is vital to link it to our callback function.
We add the graph we wish to change to the app layout. Notice we don't put the figure itself in here, as we have done previously.
Now we add the callback. The output will be the figure argument of the graph we just set, linked using the same id; my_graph.
The input links to the dropdown we created via the ID, title_dd, and allows us to extract the value associated with the selected option.
Immediately below the callback decorator is the plot update function. This will actually run once on load, so we need to set a default. The if statement will be triggered when a user selects the dropdown.
Now the work is done. The value of the selection is available as a Python variable, which becomes the title of a bar chart.
Finally, the bar chart is returned, which triggers the Output part of the callback and updates the graph component in the layout. Phew!
6. Our first dropdown
Here is our dropdown in action. Notice the default title on load, then it changes with user input. Nice!
7. Dropdown as a filter
A more common use case for dropdowns is to filter the DataFrame that supports a graph. Let's see a coded example for filtering the Country column of our ecom_sales DataFrame.
Below the decorator, we have our familiar update function, and we set a default for the first run.
Whenever you're filtering in callbacks, it is important to make a copy; otherwise, future subsets won't work.
Our if statement now filters the DataFrame to only what the user selected.
As before, we create the figure and return it. Here we have also conditionally updated the title!
8. Let's practice!
Let's practice adding callbacks to Dash apps to enhance user interactivity.