Dropdown Search with url update

Dash Python
1

Hello, I’m a bit new to using dash and I’m having some trouble with updating a dropdown callback so that options are given based off of the searchValue being a length of >2 and then stored in the url.

The dropdown doesn’t update when the page is refreshed but the stored value still allows the callbacks further down the line to still create figures.

Is there a way for the selected/stored value to show up in the dropdown when the page is refreshed while still allowing search of a new item to happen in the dropdown?

dcc.Dropdown(id='gene_page_select_gene',
             placeholder='Enter gene',
             value=gene,
            ),


@callback(
    inputs=[
        Input('gene_page_select_gene','value'),
        Input('gene_page_select_histogram_metric','value'),
        Input('gene_page_select_histogram_colorby','value'),
        Input('gene_page_select_signature_method','value'),
        Input('gene_page_store_selected_target','children'),
        Input('gene_page_select_signature_plot_metric','value')
    ],
    output=Output('gene_page_url_output','search')
)
def gene_page_update_url(
    gene,
    histogram_metric,
    histogram_colorby,
    signature_method,
    selected_target,
    signature_plot_metric,
):
    d={ 'gene':gene,
        'histogram_metric':histogram_metric,
        'histogram_colorby':histogram_colorby,
        'signature_method':signature_method,
        'selected_target':selected_target,
        'signature_plot_metric':signature_plot_metric,
      }
    d={k:v for k,v in d.items() if v} 
    print('updating url',d,flush=True)
    return '?'+urlencode(d)

@callback(inputs=[Input('gene_page_select_gene','search_value')],
              output=Output('gene_page_select_gene','options'))
def fill_gene_dropdown(search_value):
    if (not search_value) or len(search_value)<2:
        raise PreventUpdate
    else:
        s=mmd.get_all_genes()
        return [{'label':v,'value':v} for i,v in s[s.str.startswith(search_value)].iteritems()]
2

Hello @stsai

It looks like you are missing a callback to take the input value of the url query and map it to your search_value.

Be careful with this, this may result in a callback loop that is continually triggered. I would suggest having the initial page load take into account the url query to place the initial values into the dropdowns. If no url query in place, then load no initial values.

1 Like