Creating Components That Control Other Components

How about we provide an interactive component on the page where values set by the user serve as inputs to another function, which is in turn responsible for the final output?

The illustration below shows what the result looks like, and following that is a discussion of the details and implementation:

Let’s go through the visual elements of this app’s layout, one by one.

• Success message: The green strip at the top doesn’t appear when the app loads. It only appears after the user adds the options to the drop-down and hits the “Set options” button. Note that there’s a dynamic message showing the user the values that they added. Also, note that the alert message that is can be dismissed. We have the “x” symbol on the right, allowing the user to remove this message.
• Instruction line: This is a simple message telling the user that they can add text in the Textarea component, which will be used to feed into the options property of the Dropdown component underneath it. At this point in the app, Dropdown is empty and has no options to choose from, and the Graph component also shows an empty chart.
• The “Set options” button: Once the user adds a set of options to Textarea and hits this button, those lines will become options in Dropdown.
• The resulting chart: We have used the three-letter country codes here. The user inputs whichever country codes they want, and these become options to the Dropdown component. After that, choosing a certain country code filters the dataset by getting rows in which the country code is equal to the user’s selection. It then uses the resulting DataFrame to create the chart at the end.

There isn’t much ...