Introducing Pattern-Matching Callbacks

Pattern-matching callbacks will allow us to take our apps to a new level of interactivity and power. The most important feature of this capability is that it allows us to handle the interactivity of components that didn’t exist before. As we’ve done so far, when we allowed users to create new charts by clicking a button, those components didn’t exist before in the app. The more interesting thing is that the callback function that handles them all is as simple as any other callback that takes values from a drop-down and produces a chart. The trick is in slightly changing the id attribute of our components.

So far, we have set the id attributes as strings, and the only requirement is that they should be unique. We’ll now introduce a new way of creating this attribute, which is by using dictionaries. Let’s first take a look at the end goal, then modify the layout, the callbacks, and finally, discuss the new way to handle the id property. The illustration below shows what our app will look like:

Making charts interactive

In the previous app, we were able to let the user generate new components on the fly, and their content could be dynamic as well. We demonstrated this with chart titles, using the n_clicks property to set the title dynamically. But after adding those charts, the user couldn’t interact with them. In other words, they are dynamically generated ...