How to create dependent dropdowns using Jupyter Widgets to get data from dict?

Question

I am trying to assign two variables with values using Jupyter Dropdowns where the first dropdown is a data center, and the second is a site available within this data center so that I can use these variables further in the code.

I tried multiple examples from different articles, but I cannot find what I am missing.

I have the following Dict:

data_center_environments = {
    'US': {
        'data_center': 'us..com',
        'api_keys': {
            'sandbox' : '3_EV',
            'dev_parent' : '3_hK',
            'stage' :'3_GE',
            'prod' : '3_NL',
        }
    },
    'RU': {
        'data_center': 'ru..com',
        'api_keys': {
            'stage_parent' : '3_sN',
            'prod_parent' : '3_R9',
        }
    },
    'CN': {
        'data_center': 'cn..cn',
        'api_keys': {
            'stage_parent' : '3_3k',
            'prod_parent' : '3_MH',
        }
    },
    'EU': {
        'data_center': 'eu..com',
        'api_keys': {
            'sandbox' : '3_7h',
        }
    },
}

I created two functions to get datacenter and site:

def get_dc(dc_select=None):
    dc = data_center_environments.get(dc_select)['data_center']
    return dc

def get_site_api_key(dc_select=None, site_select=None):
    site_api_key = data_center_environments[dc_select]['api_keys'][site_select]
    return site_api_key

Here I describe two dropdowns:

dc_s = widgets.Dropdown(
    options = data_center_environments.keys(),
    description = 'Data Center:',
    disabled = False,
)

site_s = widgets.Dropdown(
    options=list(data_center_environments[dc_s.value]['api_keys']),
    description = 'API Key:',
    disabled = False,
)


def on_value_change(change):
    dc = change.new
    site_s.options = data_center_environments[dc_s.value]['api_keys']

dc_s.observe(on_value_change, 'value')

This is how I invoke them on a Jupyter Notebook page:

domain = interactive(get_dc, dc_select = dc_s)
site = interactive(get_site_api_key, dc_select = dc_s, site_select = site_s)
display(domain)
display(site)

Issues: 0. I have 3 dropdowns instead of two 1. I am getting an exception when I change datacenter value 2. When I am trying to print "domain", "domain.value" I am getting "None" as an output

What I am trying to achieve: In: domain = site = print(domain, site)

Out: Select Datacenter [Drop Down: 'US', 'CN', 'RU', etc] -> pick 'US' Select Site [Dropdown 'US': 'prod', 'stage', 'dev_parent', 'sandbox'] -> select 'prod'

'us..com' , '3_NL'

What am I doing wrong? How to change my code to make it work? Thank you!

score 3 · Accepted Answer · answered Apr 11 '19 at 02:53

I end up writing a function that returns a dict, and I just get values from it. The code below is a textbook example from the Widgets Guide.

Solution:

dc = 'US'
domain = widgets.Dropdown(
    options = list(data_center_environments),
    description = 'Data Center:',
    disabled = False,
)

site = widgets.Dropdown(
    options=list(data_center_environments[dc]['api_keys']),
    description = 'API Key:',
    disabled = False,
)

def on_value_change(change):
    dc = change.new
    site.options = data_center_environments[dc]['api_keys']

domain.observe(on_value_change, 'value')

def creds(data_center, api_key, use_secret):
    data_center = data_center_environments[domain.value]['data_center']
    api_key = site.value
    creds = dict()
    creds['data_center'] = data_center
    creds['api_key'] = api_key
    return creds

I encountered a similar situation where my second dropdown's option depends on the first dropdown's value. Your solution is exactly what I've been looking for. Thanks a lot!!! — RandomWalker, Oct 18 '19 at 17:55

How to create dependent dropdowns using Jupyter Widgets to get data from dict?

1 Answers1