Hello,
I am having this dropdown annoyingly dragged back relative to the actual dropdown menu. Please suggest any correction where I can make it symmetric to the dropdown menu object.
I am using mulitpage Dash app without multiple pages and everything is in a single notebook. it works on colab and is sufficient for me.
This is my code:
app = Dash(external_stylesheets=[dbc.themes.DARKLY],suppress_callback_exceptions=True)
app.layout = html.Div(
[
dcc.Location("url",refresh=False),
dcc.Dropdown(
options=[
{
"label": html.Span(style={'display':'inline-block'},
children=[
html.Br(),
dcc.Link("INDEX",href="/",style={'display':'inline','margin-left':'100px'})
]
),
"value": "index_layout"
},
{
"label": html.Span(style={'display':'inline-block'},
children = [
html.Br(style={'display':'block'}),
html.Img(
src="https://as2.ftcdn.net/v2/jpg/03/00/60/99/1000_F_300609989_u7T52hYtBKCrCbrPFc92crmcSjfUcL1N.jpg",
height=60,
style={'border-radius':'20px','display':'inline'}
),
dcc.Link("MUSHROOM EDA",href="/mushroom",style={'display':'inline','margin-left':'50px'})
]
),
"value": "mushroom_layout"
},
{
"label": html.Span(
[
html.Br(style={'display':'block'}),
html.Img(
src="https://blog.logomyway.com/wp-content/uploads/2020/09/KFC-logo.jpg",
height=60,
style={'border-radius':'20px','display':'inline'}
),
dcc.Link("KFC STOCK PRICE EDA",href="/kfc_stock",style={'display':'inline','margin-left':'50px'})
]
),
"value": "kfc_layout"
},
{
"label": html.Span(
[
html.Br(style={'display':'block'}),
html.Img(
src="https://cdn.who.int/media/images/default-source/mca/mca-covid-19/coronavirus-2.tmb-1366v.jpg?sfvrsn=4dba955c_19%201366w",
height=60,
style={'border-radius':'20px','display':'inline'}
),
dcc.Link("COVID-19 EDA",href="/covid",style={'display':'inline','margin-left':'50px'})
]
),
"value": "covid_layout"
}
],
value="index_layout",
id="main-page-dropdown",
searchable=False,
maxHeight=400,
optionHeight=70,
style={
"height":140,
'border-radius': '20px',
'width':400,
'display': 'flex',
'flex-direction':'row',
'justify-content': 'flex-end',
'border-color': 'aqua',
}
),
html.Div(id="main-page-content",style={'display':'inline-flex','float':'left'})
],
style={
"font-family": "Monaco",
}
)
msg = '''
This index page contain all the information on the datasets.
**Observations and Experiments carried:**
- Fitting tests were done on all the independent variables of each dataset. Top 10 Best Fits were plotted with interactive graphs.
- Inferences were drawn on each variable and the strength of the fit and fit was weighed for further explanations
- Machine Learning was impletmented for relevant datasets. Classification for Mushroom, Time Series analysis for kfc-stock and classification with geo location for covid-19.
- Different ML algorithms were used ranging from simple Linear Regression to complex Gradient Boosting bagging algorithms and Neural Nets.
'''
index_layout = html.Div(
style={'display':'block','margin-top':400},
children = [
html.H1('INDEX',style={'border':'2px solid aqua','border-radius':'10px','display':'inline-block','margin-left':800,'padding':10}),
dcc.Markdown(msg)
]
)
'''###########################################################################################################################################################'''
'''################################################### MUSHROOM DATASET START ###########################################################################'''
'''###########################################################################################################################################################'''
mushroom_layout = html.Div(
children = [
dcc.Dropdown(
options=[
{
'label': dcc.Link(f'Mushroom Index',href=f'/mushroom/mushroom_index',style={'display':'inline-block',"margin-left":'50px','margin-top':'15px','font-size':15}),
'value': 'mushroom_index'
},
{
'label': dcc.Link(f"Mushroom {cat_cols[0]}",href=f"/mushroom/mushroom_{cat_cols[0]}",style={'display':'inline-block',"margin-left":'50px','margin-top':'15px'}),
'value': 'mushroom_first_cat_col'
},
{
'label': dcc.Link(f'Mushroom {cat_cols[1]}',href=f'/mushroom/mushroom_{cat_cols[1]}',style={'display':'inline-block',"margin-left":'50px','margin-top':'15px'}),
'value': 'mushroom_second_cat_col'
},
{
'label': dcc.Link(f'Mushroom {cat_cols[2]}',href=f'/mushroom/mushroom_{cat_cols[2]}',style={'display':'inline-block',"margin-left":'50px','margin-top':'15px'}),
'value':'mushroom_third_cat_col'
},
{
'label': dcc.Link(f'Mushroom {cat_cols[3]}',href=f'/mushroom/mushroom_{cat_cols[3]}',style={'display':'inline-block',"margin-left":'50px','margin-top':'15px'}),
'value':'mushroom_fourth_cat_col'
}
],
value="mushroom_index",
id="mushroom-dropdown-id",
maxHeight=400,
optionHeight=80,
searchable=False,
style={
"height":80,
'width':300,
'border-radius': '12px',
'display':'inline-block',
'border-color': 'aqua',
'align-items':'center',
'margin-left':'50px',
'margin-top': '50px'
}
),
html.Div(id="mushroom-page-content",style={'margin-top':'500px'})
]
)
mushroom_msg = '''
This dataset is a cleaned version of the original Mushroom Dataset for Binary Classification Available at UCI Library.
This dataset was cleaned using various techniques such as Modal imputation, one-hot encoding, z-score normalization, and feature selection.
It contains 9 columns:
- Cap Diameter
- Cap Shape
- Gill Attachment
- Gill Color
- Stem Height
- Stem Width
- Stem Color
- Season
- Target Class - Is it edible or not?
- The Target Class contains two values - 0 or 1 - where 0 refers to edible and 1 refers to poisonous.
'''
mushroom_index = html.Div(
children=[
html.H1('MUSHROOM EDA',style={'display':'block','margin-left':600,'width':400,'border':'2px solid aqua','padding':'10px','border-radius':'10px'}),
html.Br(),
dcc.Markdown(mushroom_msg)
]
)
@callback(Output("main-page-content","children"),Input("main-page-dropdown","value"))
def display_main_page(value):
return dict(
index_layout=index_layout,
mushroom_layout=mushroom_layout,
kfc_layout=kfc_layout,
covid_layout=covid_layout
).get(value)
app.run_server(debug=True)
