Python Plotly Dash : How to insert new values to filter after the callback? (Update filter)

Question

My situation is such that I get a table by user_id only after he logged in.

For example :

app = dash.Dash(__name__)

#Filter with static values
Month_Selector = dcc.Dropdown(id='month_dropdown',
                                  options=[
                                      {"label": "November 2021", "value": "November 2021"},
                                      {"label": "October 2021", "value": "October 2021"},
                                      {"label": "September 2021", "value": "September 2021"},
                                  ],
                                          placeholder="Select Month",
                                          value = datetime.today().strftime('%B %Y'),
                                          searchable=False
                                          )

app.layout = html.Div(
    children=[
    html.Div(Month_Selector, style={'width': '200px'}),
    dcc.Graph(id='chart')
    ]
)


    @dash_app.callback(
        [
        Output(component_id='chart', component_property='figure')
        ],
        [Input(component_id="submit-button-state", component_property="n_clicks"),
         Input(component_id="month_dropdown", component_property="value")]
    )
    def get_user_name(n_clicks, selected_month):
        
        # Can get a table only after user authorization.
        df= get_table_by_an_authorized_user_id
        
        #filter table by slicer value
        filtered_df= df[ (df['Month Name'] == selected_month)]
        
        # This new values that need to insert to slicer Month_Selector
        new_options_for_month_selector=[{'label': i, 'value': i} for i in df['Month Name'].unique()]
        
        fig = px.bar(filtered_df, x='Month Name', y='Sales')
        return fig
    # Run Local Server
if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)    

Therefore before @callback I can use only filter static values. How can I update or replace filter values with dynamic values I get after a @callback ?

Answer 1

You want to update the options property of the dropdown, so you can add an Output with the new options and make the callback return them along with the updated figure :

@dash_app.callback(
    [Output(component_id='chart', component_property='figure'),
     Output(component_id='month_dropdown', component_property='options')],
    [Input(component_id="submit-button-state", component_property="n_clicks"),
     Input(component_id="month_dropdown", component_property="value")]
)
def get_user_name(n_clicks, selected_month):
    
    # Can get a table only after user authorization.
    df= get_table_by_an_authorized_user_id
    
    #filter table by slicer value
    filtered_df= df[ (df['Month Name'] == selected_month)]
    
    # This new values that need to insert to slicer Month_Selector
    new_options_for_month_selector=[{'label': i, 'value': i} for i in df['Month Name'].unique()]
    
    fig = px.bar(filtered_df, x='Month Name', y='Sales')
    return [fig, new_options_for_month_selector]