Plotly Dash Core components not rendering when set in call back and output to children

Dash Python
1

I want to have a set of dynamic controls in a dash app that changes upon input of a drop down. These values come from a pandas dataframe.

However, when i set the return value in the callback to be a dash core component eg. Dropdown, or Range slider - only the one declared in the layout renders, however the one in call back does not.

The layout looks like this:

    app.layout = html.Div([
        # Controls
        html.Div([

            #Top Layer Controls
            html.Div([

                #Project Dropdown
                html.Div([
                    make_dropdown_menu(list(name_to_id.keys()), list(name_to_id.values()), id="project_selctor")
                ]),

                #date Slider
                html.Div(id = 'date_slider')

            ]),

            # State Controls

            html.Div([
                # Track State
                html.Div(id = 'track_state_dropdown_multi'),

                # Track Tags
                html.Div(id = 'track_tags_dropdown_multi'),

                # Track Changes
                html.Div(id = 'track_changes_dropdown_multi'),
            ]),

            # Filters

            html.Div([

                #Track Length
                html.Div(id = 'track_lenth_slider'),

                #Stop Numbers
                html.Div(id = 'number_of_stops_slider'),
            ]),

            html.Div(id = 'Selections')

        ])
    ])

and I have set up the call backs to look like this:

@app.callback(
    Output('track_state_dropdown_multi', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(value):
    filter_df = filter_track_data_by_project(track_data, value)

    menu = make_dropdown_menu(
        labels=filter_df.track_state.unique(),
        values=filter_df.track_state.unique(),
        id= "track_state_dropdown_comp",
        multi= True
    )
    return html.Div([menu])


@app.callback(
    Output('track_tags_dropdown_multi', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(project_selector):
    filter_df = filter_track_data_by_project(track_data, project_selector)
    menu = make_dropdown_menu(
        labels=list(set(flatten(filter_df.tags))),
        values = list(set(flatten(filter_df.tags))),
        id = 'track_tags_dropdown_comp',
        multi= True
    )
    return html.Div([menu])

@app.callback(
    Output('track_changes_dropdown_multi', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(project_selector):
    filter_df = filter_track_data_by_project(track_data, project_selector)
    track_changes = pd.DataFrame(flatten(filter_df.track_changes))
    menu = make_dropdown_menu(
        labels = track_changes.action.unique(),
        values = track_changes.action.unique(),
        id = "track_changes_dropdown_comp",
        multi = True

    )
    return html.Div([menu])

@app.callback(
    Output('track_length_slider', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(project_selector):
    filter_df = filter_track_data_by_project(track_data, project_selector)
    slider = dcc.RangeSlider(
        id = 'track_length_slider_comp',
        min = filter_df.track_lengh.min(),
        max = filter_df.track_lengh.max(),
        steps = 0.5

    )
    return html.Div([slider])

@app.callback(
    Output('number_of_stops_slider', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(project_selector):
    filter_df = filter_track_data_by_project(track_data, project_selector)
    slider = dcc.RangeSlider(
        id = 'number_of_stops_slider_comp',
        min = filter_df.number_of_stops.min(),
        max = filter_df.number_of_stops.max(),
        steps = 1

    )
    return html.Div([slider])

@app.callback(
    Output('Selections', 'children'),
    [Input('number_of_stops_slider_comp', 'value'),
    Input('track_changes_dropdown_comp', 'value')]
)
def update(stops, track):
    return('stops: {0}, tracks: {1}'.format(str(stops), str(track)))

And here are the relavent helper functions:

def make_dropdown_menu(labels, values, id, multi=False, **kwargs):
    options = []
    for i in range(len(labels)):
        d = dict(
            label = labels[i],
            value = values[i]
        )

        options.append(d)

    menu = dcc.Dropdown(
        id = id,
        options = options,
        value = options[0]['value'],
        style = {'width':'100%'}
    ) 
    return menu


def filter_track_data_by_project(df, proj_id):
    filtered_df = df[df.project_id ==  proj_id] 
    print(len(filtered_df))
    return filtered_df

It seems that the call back is never triggered since I have included a print function that never seems to be hit. Any idea on why this is? I can get first that is declared in the layout to render just fine - its the callbacks that I am attaching to them that dont render. I can see the Divs in the DOM but nothing is inside them?

Any help here would be appreciated.

Thanks

3

I am not sure that matters given that its attached to a generator.