Pages are not updating when using dropdownmenuitem from dash bootstrap component

Dash Python
1

hi, in my app, pages are not updating when using dropdownmenuitem from dash bootstrap component. it is updating page after first click and not after that. Please help me on this.

import pandas as pd

dt = pd.read_csv('housing_train.csv')

col_names = list(dt.columns)

p = dt.dtypes.reset_index()

p.columns = ['Variable','datatypes']

cat_cols = p[p['datatypes'] == 'object']['Variable'].tolist()

conts_cols = p[p['datatypes'] != 'object']['Variable'].tolist()

for col in conts_cols:
    if (len(list(dt[col].unique())) == len(dt.index)):
        conts_cols.remove(col)

for col in cat_cols:
    if (len(list(dt[col].unique())) > 30):
        cat_cols.remove(col)
        
cols = []

for col in conts_cols:
    if (len(list(dt[col].unique())) < 20):
        cols.append(col)
        
cat_cols = cat_cols + cols

def Diff(li1, li2): 
    return (list(set(li1) - set(li2)))

cont_cols = Diff(conts_cols,cols)

for col in cols:
    dt[col] = dt[col].astype('category')

catdata =  dt[cat_cols]
contdata = dt[cont_cols]

cont1 = cont_cols[0]
cont2 = cont_cols[1]

cat1 = cat_cols[0]
cat2 = cat_cols[1]

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Input, Output

visualization_items = [dbc.DropdownMenuItem("Summary",href = "/viz-summary",id = 'Summary'),
                dbc.DropdownMenuItem("Profiler",href = "/viz-profiler",id='Profiler'),
                dbc.DropdownMenuItem("Histogram",href = "#",id='Histogram'),
                dbc.DropdownMenuItem("Boxplot",href = "#",id='Boxplot'),
                dbc.DropdownMenuItem("Correlation",href = "#",id='Correlation'),
                dbc.DropdownMenuItem("Chi-square",href = "#",id='Chi-square'),
                dbc.DropdownMenuItem("Testing",href = "#"),
        ]

navbar = dbc.NavbarSimple(
    children=[
        dbc.DropdownMenu(id = 'Visualization_menu',
            nav=True,
            in_navbar=True,
            label="Visualization",
            right = False,
            children=visualization_items,
            color="info", className="m-1",
        ),
    ],
    brand="AI Tool",
    brand_href="#",
    sticky="top",
)

layout_page_0 = html.Div([
        html.Br(),
        html.H4('Total No of Variables in the data is {}'.format(str(len(col_names))),style={'width':'100%','float': 'left', 'display': 'inline-block'}),
        html.Br(),
        html.H4('Total No of Categorical Variables in the data is {}'.format(str(len(cat_cols))),style={'width':'100%','float': 'left', 'display': 'inline-block'}),
        html.Br(),
        html.H4('Total No of Continuous Variables in the data is {}'.format(str(len(cont_cols))),style={'width':'100%','float': 'left', 'display': 'inline-block'}),
        ])


layout_page_1 = html.Div([
        html.H4('Choose your Categorical Variable',style={'width':'100%','float': 'left', 'display': 'inline-block'}),
                html.Div([
                        dcc.Dropdown(
                                id='page1_VariableName1',
                                options=[{'label': str(i), 'value': i} for i in cat_cols],
                                value=cat1)
                        ], style={'width':'60%','float': 'left', 'display': 'inline-block'}),
                html.Div([
                        dcc.Graph(id='page1_table1')
            ],style={'width':'50%','float': 'left','display':'inline-block'}),
                html.Div([
                        dcc.Graph(id='page1_barchart')
            ],style={'width':'50%','float': 'right','display':'inline-block'}),
        html.H4('Choose your Continuous Variable',style={'width':'100%','float': 'left', 'display': 'inline-block'}),
                html.Div([
                        dcc.Dropdown(
                                id='page1_VariableName2',
                                options=[{'label': str(i), 'value': i} for i in cont_cols],
                                value=cont1)
                        ], style={'width':'60%','float': 'left', 'display': 'inline-block'}),
                html.Div([
                        dcc.Graph(id='page1_table2')
            ],style={'width':'50%','float': 'left','display':'inline-block'}),
                html.Div([
                        dcc.Graph(id='page1_boxplot')
            ],style={'width':'50%','float': 'right','display':'inline-block'}),                                              
            ])
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

'''
def serve_layout():
    return html.Div([navbar,html.Div(id='page-content')])
'''

app.layout = html.Div([navbar,html.Div(id='page-content')])

# Update the index
@app.callback(Output('page-content', 'children'), 
              [Input('Summary', 'n_clicks'),
               Input('Profiler', 'n_clicks')])
def display_page(n_clicks1,n_clicks2):
    if n_clicks1:
        return layout_page_0
    if n_clicks2:
        return layout_page_1


if __name__ == "__main__":
    app.run_server()
2

You should use dcc.Location to set the page content rather than n_clicks on each of the DropdownMenuItems. Here’s an example.

1 Like
3

Thanks for suggestion