CODEWITHSUNDEEP
pythonhtmlplotly-dash
kinskrig
kinskrig

Reputation: 11

Dynamic dropdown options calling callback function

I am trying to create a dropdown menu with dash core component in python. The dropdown menu should have dynamic options, and the selections of the dropdown menu would affect other callback functions.

The problem with my code isn't the logic within the functions. The function generating the options within the dropdown menu returns the correct stuff.

I looked at other answers on other sites that said to define the dropdown menu with dynamic options like this

dcc.Dropdown( id="dropdown_id",multi=True,placeholder="Select an Option", ),

While the official plotly site says to include an id in the dropdown menu definition for it to call a callback function every time it is changed

You can probably see my problem now. Since there are 2 id fields within the dropdown menu definition (one for generating the options, the other for calling a function) it is giving me a keyword argument repeated error.

Wondering if anyone can help me out.

Code for reference:

@app.callback(
[Input('my-date-picker-single', 'date'),],
[Output('industry_groups', 'data')])
def get_industry_grps(date):
    ...some operations...
    return out = [
                  {'label': 'abc', 'value': 'abc'},
                  {'label': 'def', 'value': 'def'},
                  {'label': "ghi", 'value': "ghi"},
                  {'label': 'jkl', 'value': 'jkl'}]



html.Div([
          dbc.FormGroup(
                       [
                       dbc.Label("Industry Filter:", width=2, align='center',),
                       dbc.Col(
                       dcc.Dropdown( id='industry_groups', #(output of the callback function above)
                                     value=['abc', 'def', "ghi", 'jkl'],
                                     id="portfolio_views_exposure_industry_dropdown", #(function to be called after selections within dropdown menu)
                                            multi=True
                                            ), ...........style stuff #(deleted to save space)


@app.callback(
    [Output(...)],
    [...
     Input('portfolio_views_exposure_industry_dropdown', 'value'),
     ...
     ])
@cache.memoize(timeout=TIMEOUT)
def update_portfolio_utilization_hist_callback(..., industry_group, ...):
    ...some operations using industry_group

Upvotes: 0

Views: 1807

Answers (1)

kinskrig
kinskrig

Reputation: 11

I got the answer. @coralvanda was correct. Took a look at the documentation and added a dummy_div in front of the dropdown menu to initialize the callback function. This is what I got:

    @app.callback(
    [Input('dummy_div', 'children'),
    Input('my-date-picker-single', 'date'),],
    [Output("portfolio_views_exposure_industry_dropdown", 'options'),
    Output("portfolio_views_exposure_industry_dropdown", "value")])
    def get_industry_grps(date):
        ...some operations...
        out1 = [{'label': 'abc', 'value': 'abc'},
               {'label': 'def', 'value': 'def'},
               {'label': "ghi", 'value': "ghi"},
               {'label': 'jkl', 'value': 'jkl'}]
        out2 = ['abc','def','ghi','jkl']
        return out1, out2
    
    
    html.Div(id='Dummy_div') #added to initialize get_industry_grps, otherwise it doesn't run until manually interact with the date picker
    
    html.Div([
              dbc.FormGroup(
                           [
                           dbc.Label("Industry Filter:", width=2, align='center',),
                           dbc.Col(
                           dcc.Dropdown(
id="portfolio_views_exposure_industry_dropdown",
multi=True), ...........style stuff #(deleted to save space)
    
    
    #... everything else is the same

Upvotes: 1

Related Questions