✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Two multi-select dropdown inputs for one graph has made the graph unable to update height?

For some reason, after I added a second multi-select dropdown, the height of none of the three graphs show correctly no matter what I put into the layout.

I’ve uploaded the code to github here as “Sankey Debug” (https://github.com/andrewhong5297/dash_plotly), using the AirBnb 2019 NYC data also in that repo. Lines 14-76 are just a function to change dataframe into source,target,count, the dashboard starts on line 85.

Any input would be very appreciated!!! I’ve tried just about everything I can in changing the layout, divs, style, etc. Code is here (minus the getSankey function) if you don’t want to check the repo:

app.layout = html.Div([
    html.Div([
        
        html.Label('Select Path for Breakdown'),
            dcc.Dropdown(
                id='Multi-Select Dropdown Path',
                options=[
                {'label': 'Borough', 'value': 'neighbourhood_group'},
                {'label': 'Neighbourhood', 'value': 'neighbourhood'},
                {'label': 'Rooms in Listing', 'value': 'room_type'},
                ], value=['neighbourhood_group','room_type'],
                multi=True
            ),
        
        html.Label('Select Business Area'),
            dcc.Dropdown(
                id='Multi-Select Dropdown Business Area',
                options=[{'label': i, 'value': i} for i in available_indicators]
                , value=[],
                multi=True
                ),
            dcc.Graph(id='sankey', style={'layout': {'height':1000}}),
    
    ],style={'width': '58%', 'display': 'inline-block'}), #left side div
    
    html.Div([
        html.Table([
            html.Tr([html.Td(['Histogram of:']), html.Td(id='hover')])
        ]), 
            dcc.Graph(id='hover-line'),
        
        html.Label('Limits Calendar Heatmap, to add limit choice'),
            dcc.Graph(id='calendar', figure=cal_fig),
        
        html.Label('Can we add a percent flow hover, as well as commentary box? also add color shading to sankey and research hovertools'),
    
    ], style={'width': '39%', 'float': 'right', 'overflowY': 'scroll', 'display': 'inline-block'}), #right side div

])#, style={'columnCount': 2}) #overall style)

"""hover histogram"""
import json
@app.callback(
    Output('hover','children'),
    [Input('sankey','hoverData')])
def show_click(hoverData):
    a=hoverData['points'][0]["label"]
    return a

@app.callback(
    Output('hover-line','figure'),
    [Input('sankey','hoverData')])
def show_click_line(hoverData):
    a = hoverData['points'][0]["label"]
    dftemp=df[df["neighbourhood"]==a]
    if dftemp.empty:
        dftemp=df[df["neighbourhood_group"]==a]
        if dftemp.empty:
            dftemp=df[df["room_type"]==a]
    return px.histogram(dftemp, x="number_of_reviews")

"""sankey graph"""
# add multiple inputs, for path as well
@app.callback(
    Output('sankey', 'figure'),
      [Input('Multi-Select Dropdown Path', 'value'),
       Input('Multi-Select Dropdown Business Area', 'value')])
def update_figure(path,select):#month,day,value):
    if len(select)!=0:
        filtered_df=df[df["neighbourhood"]==select[0]]
        if len(select)==2:
            filtered_df=df[(df["neighbourhood"]==select[0]) | (df["neighbourhood"]==select[1])]
    else:
        filtered_df=df
    a = path[0]
    if len(path)>1:
        b = path[1]
        if len(path)>2:
            c = path[2]
            if len(path)>3:
                d = path[3]
                return genSankey(filtered_df,cat_cols=[a,b,c,d],value_cols='number_of_reviews',title='Number of Reviews')
            return genSankey(filtered_df,cat_cols=[a,b,c],value_cols='number_of_reviews',title='Number of Reviews')
        return genSankey(filtered_df,cat_cols=[a,b],value_cols='number_of_reviews',title='Number of Reviews')
    return genSankey(filtered_df,cat_cols=[a],value_cols='number_of_reviews',title='Number of Reviews')

if __name__ == '__main__':
    app.run_server(debug=False)

Nevermind, it is fixed now. I have to put the height into the layout of the update function, for some reason it doesn’t work if I just leave it in the div.