Use two different widgets to update same plot

[javiergcas]

Hello,

Let’s say I have a small dashboard like the one marked (Version 1) in this image

which was created with the following code:

import panel as pn
import numpy as np
import holoviews as hv
pn.extension()
_continents = ['Asia','Europe','America']
_cities     = {'Asia':['Singapore','Seoul','Shanghai'],
              'America':['Boston','Toronto','Quito','Santiago'],
              'Europe':['Madrid','London','Paris','Lisbon']}
select_continent = pn.widgets.Select(name='Continent',options=_continents, value=_continents[0])
select_city      = pn.widgets.Select(name='City',     options=_cities[select_continent.value], value=_cities[select_continent.value][0])
@pn.depends(select_continent.param.value, watch=True)
def _update_cities(continent):
    cities = _cities[continent]
    select_city.options = cities
    select_city.value = cities[0]
@pn.depends(select_city.param.value)
def get_plot(city):
    data = np.random.rand(100)
    return hv.Curve(data).opts(title=city, width=500)
pn.Column(pn.Row(select_continent,select_city), get_plot)

I would like to modify this dashboard, so that users can also select the city via an alternative AutocompleteInput widget (Dashboard Version 2 in image above). In other words, I want to provide users with two options in order to select city:

a) use two selectors, to first select continent, and then city (from the cities of the selected continent),
b) directly type the city they want to select.

How do I modify the above code to have this extra functionality?

I can add the extra GUI elements as follows:

_all_cities = ['Singapore','Seoul','Shanghai','Boston','Toronto','Quito','Santiago','Madrid','London','Paris','Lisbon']
autocomplete_city = pn.widgets.AutocompleteInput(name='City',options=_all_cities)
pn.Column(pn.Tabs(('Per Continent',pn.Row(select_continent, select_city)),('Autocomplete',autocomplete_city)), get_plot)

But I don’t know how to code all the necessary dependences between GUI elements so that when a user types into the autocomplete box, that automatically updates the continent select, city select and graph.

Thanks a lot for any guidance you can provide,

Best,

Javier.

[Marc]

Hi @javiergcas

This can be solved in different ways.

The solution below is based on keeping the code as close to your initial approach as possible. It uses the select_city widget as the one source of truth of the currently selected city triggering an update of the plot.

multi_select_example

import panel as pn
import numpy as np
import holoviews as hv
pn.extension()

_continents = ['Asia','Europe','America']
_cities     = {'Asia':['Singapore','Seoul','Shanghai'],
              'America':['Boston','Toronto','Quito','Santiago'],
              'Europe':['Madrid','London','Paris','Lisbon']}

def transform(_cities):
    continents_lookup = {}
    cities_list = []
    for continent, cities in _cities.items():
        for city in cities:
            continents_lookup[city]=continent
    cities_list = list(continents_lookup.keys())
    return continents_lookup, cities_list
_continents_lookup, _cities_list = transform(_cities)

select_continent = pn.widgets.Select(name='Continent',options=_continents, value=_continents[0])
select_city      = pn.widgets.Select(name='City',     options=_cities[select_continent.value], value=_cities[select_continent.value][0])
select_city_auto = pn.widgets.AutocompleteInput(name='City', options=_cities_list, value = select_city.value)

@pn.depends(select_continent.param.value, watch=True)
def _update_cities(continent):
    cities = _cities[continent]
    select_city.options = cities
    select_city.value = cities[0]

@pn.depends(select_city_auto.param.value, watch=True)
def _update_from_auto_complete(city):
    select_continent.value = _continents_lookup[city]
    select_city.value = city

@pn.depends(select_city.param.value, watch=True)
def _update_auto_complete(city):
    select_city_auto.value = city

@pn.depends(select_city.param.value)
def get_plot(city):
    data = np.random.rand(100)
    return hv.Curve(data).opts(title=city, width=500)

pn.Column(
    pn.Tabs(
        pn.Row(select_continent, select_city, name="By Continent"),
        pn.Row(select_city_auto, name="Autocomplete")
    ),
    get_plot
).servable()

[javiergcas]

Thanks so much @Marc . This is exactly what I was looking for.

Javier.

[Marc]

Hi @javiergcas. I’ve added your example to awesome-panel.org

https://awesome-panel.org/dependent-widgets?theme=default

https://awesome-panel.org/dependent-widgets?theme=dark