Embed multipage Dash app in existing Flask app with dash-bootstrap-components

@irr3 wrote:

Hello,

I am new to Dash and also in a beginner level to Python, so this question might be a simple Python concept question and I would be happy to get a little help here.

I try to combine the method from the following example (1) to set up a Flask application and embed a Dash app, in the form of a multipage app that follows the example of a sidebar-with-submenus (2) with the package dash-bootstrap-components.

(1)

(2)

Error description:

I think the problem is that I try to call a function in a for loop that needs the dashapp1 variable which is defined in another function and is not globally available.

It is this line: dashapp1.callback(…) in init.py

I get this traceback:

* #### File "/Users/irre/dev/dash_lab/dashapp.py", line *1* , in `<module>`

from app import create_app

* #### File "/Users/irre/dev/dash_lab/app/__init__.py", line *65* , in `<module>`

dashapp1.callback(

> NameError: name 'dashapp1' is not defined

I don’t know how to combine these two concepts properly and especially where to put the following functions in this factory application style. I guess they belong to the layout section, while still calling a callback with the dashapp1 (app) variable, which is not available outside of the def register_dashapps(app): function.

# this function is used to toggle the is_open property of each Collapse
def toggle_collapse(n, is_open):
    ...
    return is_open


# this function applies the "open" class to rotate the chevron
def set_navitem_class(is_open):
    ...
    return ""


for i in [1, 2]:
    dashapp1.callback(
    ...
    )(toggle_collapse)

    dashapp1.callback(
    ...
    )(set_navitem_class)

So, I try to post the in my opinion relevant code parts.

File structure using application factory pattern:

── app
│ ├── init.py # app factory / see code example (1)
│ ├── dashapp1
│ │ ├── assets # sidebar .css from the bootstrap example
│ │ ├── callbacks.py # / see code example (2)
│ │ ├── layout.py # / see code example (3)
│ ├── extensions.py # essential flask extensions
│ ├── forms.py # login & registration form
│ ├── models.py # database model for users
│ ├── templates # html templates
│ │ ├── …
│ └── webapp.py # main Blueprint and Flask index, login, register routes
├── dashapp.py # creates the server Flask app

(1) init.py

import dash
from flask import Flask
from flask.helpers import get_root_path
from flask_login import login_required

import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

from config import BaseConfig

# link fontawesome to get the chevron icons
FA = "https://use.fontawesome.com/releases/v5.8.1/css/all.css"


def create_app():
    server = Flask(__name__)
    server.config.from_object(BaseConfig)

    register_dashapps(server)
    register_extensions(server)
    register_blueprints(server)

    return server


def register_dashapps(app):
    from app.dashapp1.layout import layout
    from app.dashapp1.callbacks import register_callbacks

    # Meta tags for viewport responsiveness
    meta_viewport = {"name": "viewport", "content": "width=device-width, initial-scale=1, shrink-to-fit=no"}

    dashapp1 = dash.Dash(__name__,
                         server=app,
                         url_base_pathname='/dashboard/',
                         assets_folder=get_root_path(__name__) + '/dashboard/assets/',
                         meta_tags=[meta_viewport],
                         external_stylesheets=[dbc.themes.BOOTSTRAP, FA])

    with app.app_context():
        dashapp1.title = 'Dashapp 1'
        dashapp1.layout = layout
        register_callbacks(dashapp1)
    
    _protect_dashviews(dashapp1)


# this function is used to toggle the is_open property of each Collapse
def toggle_collapse(n, is_open):
    if n:
        return not is_open
    return is_open


# this function applies the "open" class to rotate the chevron
def set_navitem_class(is_open):
    if is_open:
        return "open"
    return ""


for i in [1, 2]:
    dashapp1.callback(
        Output(f"submenu-{i}-collapse", "is_open"),
        [Input(f"submenu-{i}", "n_clicks")],
        [State(f"submenu-{i}-collapse", "is_open")],
    )(toggle_collapse)

    dashapp1.callback(
        Output(f"submenu-{i}", "className"),
        [Input(f"submenu-{i}-collapse", "is_open")],
    )(set_navitem_class)
    

def _protect_dashviews(dashapp):
    for view_func in dashapp.server.view_functions:
        if view_func.startswith(dashapp.config.url_base_pathname):
            dashapp.server.view_functions[view_func] = login_required(dashapp.server.view_functions[view_func])


def register_extensions(server):
    from app.extensions import db
    from app.extensions import login
    from app.extensions import migrate

    db.init_app(server)
    login.init_app(server)
    login.login_view = 'main.login'
    migrate.init_app(server, db)


def register_blueprints(server):
    from app.webapp import server_bp

    server.register_blueprint(server_bp)

(2) Callback.py

from datetime import datetime as dt

import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

import pandas_datareader as pdr


def register_callbacks(dashapp):
    @dashapp.callback(Output("page-content", "children"), [Input("url", "pathname")])
    def render_page_content(pathname):
        if pathname in ["/", "/page-1/1"]:
            return html.P("This is the content of page 1.1!")
        elif pathname == "/page-1/2":
            return html.P("This is the content of page 1.2. Yay!")
        elif pathname == "/page-2/1":
            return html.P("Oh cool, this is page 2.1!")
        elif pathname == "/page-2/2":
            return html.P("No way! This is page 2.2!")
        # If the user tries to reach a different page, return a 404 message
        return dbc.Jumbotron(
            [
                html.H1("404: Not found", className="text-danger"),
                html.Hr(),
                html.P(f"The pathname {pathname} was not recognised..."),
            ]
        )

(3) layout.py

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

# link fontawesome to get the chevron icons
FA = "https://use.fontawesome.com/releases/v5.8.1/css/all.css"


# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}

submenu_1 = [
    html.Li(
        # use Row and Col components to position the chevrons
        dbc.Row(
            [
                dbc.Col("Menu 1"),
                dbc.Col(
                    html.I(className="fas fa-chevron-right mr-3"), width="auto"
                ),
            ],
            className="my-1",
        ),
        id="submenu-1",
    ),
    # we use the Collapse component to hide and reveal the navigation links
    dbc.Collapse(
        [
            dbc.NavLink("Page 1.1", href="/page-1/1"),
            dbc.NavLink("Page 1.2", href="/page-1/2"),
        ],
        id="submenu-1-collapse",
    ),
]

submenu_2 = [
    html.Li(
        dbc.Row(
            [
                dbc.Col("Menu 2"),
                dbc.Col(
                    html.I(className="fas fa-chevron-right mr-3"), width="auto"
                ),
            ],
            className="my-1",
        ),
        id="submenu-2",
    ),
    dbc.Collapse(
        [
            dbc.NavLink("Page 2.1", href="/page-2/1"),
            dbc.NavLink("Page 2.2", href="/page-2/2"),
        ],
        id="submenu-2-collapse",
    ),
]


sidebar = html.Div(
    [
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P(
            "A sidebar with collapsible navigation links", className="lead"
        ),
        dbc.Nav(submenu_1 + submenu_2, vertical=True),
    ],
    style=SIDEBAR_STYLE,
    id="sidebar",
)

content = html.Div(id="page-content", style=CONTENT_STYLE)

layout = html.Div([dcc.Location(id="url"), sidebar, content]) # here I changed app.layout to just layout

thanks for your help!

@okomarov
@tcbegley

Posts: 2

Participants: 2

Read full topic