Plotly Dash: Empty DataFrame when subsetting with user input from Dropdown

Question

I currently work on a Plotly Dash project and I have encountered a strange problem for which I couldn't find the solution on the internet (so far).

I am trying to subset global DataFrame (df_test) based on input from Dropdown. The options for the Dropdown are from that very same DataFrame, selected as a list of values from a certain column. When I capture the Dropdown input value and try to subset the initial DataFrame with that value, the result is an empty DataFrame. When I run the same procedure in a Jupyter Notebook, everything is working as expected.

The dashboard is multipage Plotly Dash app, and the problematic part of the code is from one of the pages.

The global DataFrame is loaded from parquet file with this:

df_test = pd.read_parquet(PATH)

The dropdown component looks like this:

dcc.Dropdown(id='customer-dpdn-2',
             options = [{'label': x, 'value': x} for x in customer_IDs],
             className = 'mb-4'
             )

Options for the dropdown component are extracted from the df_test dataframe as a list of values for the column customer_ID:

all_customers = df_test.customer_ID.values.tolist()
customer_IDs = random.choices(all_customers, k=5)

I chose arbitrary k = 5 just for the development purposes.

The Graph component looks like this:

dcc.Graph(id='predictions-donut', figure={}, className='rounded')

And the callback function is:

@callback(
    Output(component_id='predictions-donut', component_property='figure'),
    Input(component_id='customer-dpdn-2', component_property='value')
)
def donut_chart(customer):
    default_prob = df_test[df_test.customer_ID==customer].probability.values[0]
    no_default_prob = 1 - default_prob
    labels = ['Default', 'No default']
    values = [default_prob, no_default_prob]
    return go.Figure(data=[go.Pie(labels=labels, values=values, hole=.3)])

When I run the app, the error pops up:

Traceback (most recent call last):
  File "C:\Users\***\page1.py", line 389, in donut_chart
    default_prob = df_test[df_test.customer_ID==customer].probability.values[0]
IndexError: index 0 is out of bounds for axis 0 with size 0

The question is:

As the Dropdown values are extracted from df_test and the df_test is being subset with the value from that very same Dropdown, how is it possible that the resulting DataFrame is empty (hence the further Index Error)?

Thank you in advance!

Dušan Pavlović · Answer

Thanks to all who tried to help. Leonardo's answer was actually really helpful. I tried to add the str() around the x in values of the Dropdown component, like this:

dcc.Dropdown(id='customer-dpdn-2',
             options = [{'label': x, 'value': str(x)} for x in customer_IDs],
             className = 'mb-4'
             )

... and that solved the problem!

I'm not sure what was exactly the cause of the problem, but this solved it and I hope that this answer will be helpful for others who have similar or the same problem.

Plotly Dash: Empty DataFrame when subsetting with user input from Dropdown

1 Answers