This is a multipage application. The below code currently works perfectly fine. I am not initializing as app = dash.Dash(…). This application is being served by WSGI. Since it’s WSGI that is actually running this app, this script wont be run as main. This server = app.server in the code is important.
However, I need to add external stylesheet to this. This is possible only if I add app = dash.Dash(name,external_stylesheets=[dbc.themes.CYBORG]) somewhere in the code. The moment I add this, the multipage app does not work right. It navigates to the next page based on url, but that page does not run callbacks correctly.
I have tried using app.config.suppress_callback_exceptions = True also. Did not help.
My current working code is as below. Kindly help.
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
from drive import drive
from hba import hba
from node import node
from sfp import sfp
from cage import cage
import os
import base64
app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’)
])
def encode_image(image_file):
encoded = base64.b64encode(open(image_file, ‘rb’).read())
return ‘data:image/png;base64,{}’.format(encoded.decode())
logo_path = os.path.dirname(os.path.realpath(file))+"/hpe_logo.png"
drive_path = os.path.dirname(os.path.realpath(file))+"/drive_logo.png"
node_path = os.path.dirname(os.path.realpath(file))+"/node_logo.png"
hba_path = os.path.dirname(os.path.realpath(file))+"/hba_logo.png"
sfp_path = os.path.dirname(os.path.realpath(file))+"/sfp_logo.png"
cage_path = os.path.dirname(os.path.realpath(file))+"/cage_logo.png"
hpe_logo = encode_image(logo_path)
drive_logo = encode_image(drive_path)
node_logo = encode_image(node_path)
hba_logo = encode_image(hba_path)
sfp_logo = encode_image(sfp_path)
cage_logo = encode_image(cage_path)
index_page = html.Div([
html.Div(html.Img(src=hpe_logo)),
html.Div([
html.H3(‘Hardware Analytics Dashboard’,style={‘text-align’: ‘center’, ‘font-size’: ‘20pt’, ‘font-weight’: ‘bold’,‘paddingLeft’:‘20px’,})
], style={‘padding’:10, ‘background-color’: ‘#ECF1F2’}),
html.Br(),
html.Br(),
html.Br(),
html.Div([
html.Div([dcc.Link(html.Img(src=drive_logo,style={ 'width': '250px','height': '250px','align' : 'center'}), href='/drive'),
html.H3('Drive',style={'text-align':'center', 'color':'grey'})],
style={'paddingLeft':'20px', 'display': 'inline-block','align-items':'center','margin': '0 auto'}),
html.Div([dcc.Link(html.Img(src=node_logo,style={ 'width': '250px','height': '250px','align' : 'center'}), href='/node'),
html.H3('Node',style={'text-align':'center', 'color':'grey'})],
style={ 'display': 'inline-block','align-items':'center','margin': '0 auto'}),
html.Div([dcc.Link(html.Img(src=cage_logo,style={'width': '250px','height': '250px','align' : 'center'}), href='/cage'),
html.H3('Cage',style={'text-align':'center', 'color':'grey'})],
style={ 'display': 'inline-block','align-items':'center','margin': '0 auto'}),
html.Div([dcc.Link(html.Img(src=hba_logo,style={'width': '250px','height': '250px','align' : 'center'}), href='/hba'),
html.H3('HBA',style={'text-align':'center', 'color':'grey'})],
style={ 'display': 'inline-block','align-items':'center','margin': '0 auto'}),
html.Div([dcc.Link(html.Img(src=sfp_logo,style={'width': '250px','height': '250px','align' : 'center'}), href='/sfp'),
html.H3('SFP',style={'text-align':'center', 'color':'grey'})],
style={ 'display': 'inline-block','align-items':'center','margin': '0 auto'}),
]),
html.Br(),
])
server = app.server
@app.callback(Output(‘page-content’, ‘children’),
[Input(‘url’, ‘pathname’)])
def display_page(pathname):
if pathname == ‘/drive’:
return drive.layout
elif pathname == ‘/hba’:
return hba.layout
elif pathname == ‘/node’:
return node.layout
elif pathname == ‘/sfp’:
return sfp.layout
elif pathname == ‘/cage’:
return cage.layout
elif pathname == ‘/’:
return index_page
if name == ‘main’:
app.run_server(debug=True)