How to dynamically set a default value in a dcc.Dropdown when options come from a callback?

Dash Python
1

Here is a minimal example of a Dash app code (app.py):

# Libraries
import csv
import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State

# CSV files generation

row_list = [
    ["SN", "Name", "Quotes"],
    [1, "Buddha", "What we think we become"],
    [2, "Mark Twain", "Never regret anything that made you smile"],
    [3, "Oscar Wilde", "Be yourself everyone else is already taken"]
]
with open('quotes.csv', 'w', newline='') as file:
    writer = csv.writer(file, quoting=csv.QUOTE_NONNUMERIC, delimiter=',')
    writer.writerows(row_list)
    
    
import csv
with open('innovators.csv', 'w', newline='') as file:
    writer = csv.writer(file)
    writer.writerow(["SN", "Name", "Contribution"])
    writer.writerow([1, "Linus Torvalds", "Linux Kernel"])
    writer.writerow([2, "Tim Berners-Lee", "World Wide Web"])
    writer.writerow([3, "Guido van Rossum", "Python Programming"])


# Style
external_stylesheets = ['assets/style.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


# Layout
app.layout = html.Div([
    html.Div([	
        dcc.Dropdown(
            id='dropdown_div',
            options=[
                {'label': 'Quotes', 'value': 'quotes.csv'},
                {'label': 'Innovators', 'value': 'innovators.csv'}
            ],
            value='quotes.csv'   
        )
    ]),
    html.Div([
       dcc.Dropdown(
            id='count_div'
       )
    ])
])

# Callback functions
@app.callback(
    dash.dependencies.Output('count_div', 'options'),
    [dash.dependencies.Input('dropdown_div', 'value')])
def loadfile(path):
    df = pd.read_csv(path) 
    #names = list(set(df['Name']))
    #return names
    return [{'label': i, 'value': i} for i in df['Name'].drop_duplicates()]

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

I need the first value of the second Dropdown to be dynamically set as its default value.

In this example, the second dropdown would show

  • Buddha as the default value when Quotes is the selected value of the first dropdown.
  • Linus Torvalds as the default value when Innovators is the selected value of the first dropdown.
2

Hi @crocefisso,

You need to use ‘count_div’‘value’ as another Output and send to it the text you want to be shown.

3

Hi @Eduardo, sorry but I don’t understand how to do it so that the value appears as the dropdown default value. Could you amend my code to show me?

4

Sure:

@app.callback(
    [dash.dependencies.Output('count_div', 'options'),
     dash.dependencies.Output('count_div', 'value')],
    [dash.dependencies.Input('dropdown_div', 'value')])
def loadfile(path):
    df = pd.read_csv(path) 

     value = df[0]

    #return names
    return [{'label': i, 'value': i} for i in df['Name'].drop_duplicates()], value
2 Likes
5

Thank you @Eduardo. Here you explicitly mention Buddha and Linus, when the goal was to retrieve the first option in general. This solution can’t be implemented since there are dozens of files for the first dropdown and dozens of options for each.

6

@crocefisso

Ok. I just changed the code. See if it’s what you need.

8

Great, thanks. It worked like a charm with value = df['Name'].drop_duplicates()[0]

9

Glad to hear that !! :grinning: