Dropdown options update but not the value

Dash Python
1

Hi all,

I ran into this today, and either need more coffee or something is not working properly. When I attempt to update the values of one dropdown from another, the options populate in the second dropdown, but the value does not.

I’ve attached some code and a gif.

Any help is much appreciated.

Thanks.

test
test.gif730×148 184 KB 

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input
from dash.dependencies import Output

import db.api as db

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config['suppress_callback_exceptions'] = True

app.layout = html.Div(children=[
    dcc.Location(id='url', refresh=False),
    html.H1(children='Demo'),

    html.Div(
        children=[
            html.Label("Sex"),
            dcc.Dropdown(
                id="dropdown-sex",
                options=[
                    dict(label="Both", value="both"),
                    dict(label="Male", value="male"),
                    dict(label="Female", value="female")
                ],
                value="both"
            ),
            html.Label("Phenotype code"),
            dcc.Dropdown(id="dropdown-pheno"),
            html.Div(id="selected-pheno-div")
        ]
    ),
])


@app.callback(Output("dropdown-pheno", "options"),
              [Input("dropdown-sex", "value")])
def update_pheno_dropdown(sex):
    vals = db.get_gwas_for_sex(sex).values
    return [dict(label=elem, value=elem) for elem in vals]


@app.callback(Output("dropdown-pheno", "value"),
              [Input("dropdown-pheno", "options")])
def set_pheno_value(options):
    val = options[0]["value"]
    print(f"setting value to {val}")
    return val


@app.callback(Output("selected-pheno-div", "children"),
              [Input("dropdown-pheno", "value")])
def show_selected_pheno(pheno):
    return pheno


if __name__ == '__main__':
    app.run_server(debug=True)

dash==0.35.1
dash-core-components==0.42.1
dash-html-components==0.13.4
dash-renderer==0.16.1
dash-table==3.1.11

2

@cfriedline

I had a similar issue when developing an application with dependent dropdowns. Here is the link to that issue, along with the solution: Help with a dropdown related bug

I believe the following will fix your issue, although I don’t know for sure since your code requires a db component which has an implementation that is not apparent. If you can make a reproducible example, then I can tinker around more.

@app.callback(Output("dropdown-sex", "value"),
              [Input("dropdown-pheno", "options")]
              [State("dropdown-sex", "value"])
def set_pheno_value(, value):
    val = options[0][value] 
    print(f"setting value to {val}")
    return val

Hope that helps!

3

Thanks for taking a look! However, I think I was unclear.

When seleting the sex dropdown, I get variable options for phenotype. When I select one of those, I expect that the value of that dropdown, the phenotype one, will show the text I selected. However, it remains blank. That’s the issue. I was trying to hack something so it wouldn’t remain blank.

For a test, we can do the following:

replace with:

@app.callback(Output("dropdown-pheno", "options"),
              [Input("dropdown-sex", "value")])
def update_pheno_dropdown(sex):
    options = {"both": ["pheno1", "pheno2", "pheno3"],
           "male": ["pheno1"],
           "female": ["pheno2", "pheno3"]}
    vals = options[sex]
    return [dict(label=elem, value=elem) for elem in vals]

However, when doing this, the functionality seems to work fine. I don’t get it. Sigh.

4

Well, that was self-inflicted. The return from the db query was a list of lists not a list of strings. Argh. Back to my original question - was a matter of coffee after all.

Was returning:

[['20002_1528']
 ['6148_5']
 ['H7_MACULADEGEN']]

Fixed with:

vals = [x[0] for x in db.get_gwas_for_sex(sex).values]

Thanks for your help.