Notes: IDDA - Ch 2: Exploring Structure of a Dash App

Chapter 2 -- Exploring the Structure of a Dash App


  • Dash consists of several packages, namely:
    • Dash
      • Main package, accessible through dash.Dash object. Also manages interactivity and exceptions
    • Dash Core Components
      • Provides interactive components for users to manipulate data views
    • Dash HTML Components
      • Provides all the HTML tags as Python classes
    • Dash Bootstrap Components
      • Third-party packages providing Bootstrap functionality

General Structure of a Dash app


    App parts

    app.py

    imports (boilerplate)

    import dash

    import dash_html components as html

    import dash_core_components as dcc

    app instantiation

    app = dash.Dash(__name__)

    app layout: a list of HTML and/or interactive components

    app.layout = html.Div([

        dcc.Dropdown()

        dcc.Graph()

        ...

    ]_

    callback functions

    @app.callback()

        ....

    running the app

    if __name__ == '__main__':

        app.run_server()


    Creating simplest app

    Create a file app.py

    # import the boilerplate

    import dash
    import dash_html_components as html


    # instantiate the app

    app = dash.Dash(__name__)


    # create the app's basic layout

    app.layout = html.Div([

        html.H1('Hello, world!')

    ])


    # run the app

    if __name__ == '__main__':

        app.run.server(debug=True)

    To add additional HTML/components, use the children parameter of the html.Div element

    html.Div(children=[component_1, component_2, component3, ...])

    Dash HTML Components are most stable package. Parameters common to all components are:

    • children
      • typically main (and first) container for the component's content. Arg -> item or list(item)
    • className
      • same as class attribute,
    • id
      • crucial to operating components, uniquely identifies them
    • style
      • similar to HTML attribute, set using camelCase
          • # example --> <h1 style="color:blue; font-size: 40px; margin-left: 20%">A Blue Heading</h1>
          • import dash_html_components as html
          • html.H1(children='A Blue Heading',
          •     style={'color': 'blue',
          •             'fontSize': '40px',
          •             'marginLeft': '20%'})

    Learning how to structure the layout and managing themes

    Working with app.layout attribute and controlling it with Dash Bootstrap Components package will improve UI 

    Benefits to using bootstrap:

    • Themes
    import dash_bootstrap_components as dbc
    ...
    app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
    ...
    • Grid system
    # 3 cols in a single row
    dbc.Row([
        dbc.Col('Column 1', width=2),
        dbc.Col('Column 2', width=5),
        dbc.Col('Column 3', width=4),
    ])
    # 1 col with multiple rows
    import dash_bootstrap_components as dbc
    dbc.Col(children=[child1, child2, ... ], lg=6, md=12)

    ** Recommend going back to the book for useful graphics on grid layout

      Using prebuilt components:

      html.H2('The World Bank'),
      dbc.Tabs([
          dbc.Tab([
              html.Ul([
                  # same code to define the unordered list
              ]),
          ], label='Key Facts'),
          dbc.Tab([
              html.Ul([
                  html.Br(),
                  html.Li('Book title: Interactive Dashboards and Data Apps with Plotly and Dash'),
                  html.Li(['GitHub repo: ',
                           html.A('https://github.com/PacktPublishing/Interactive-Dashboards-and-Data-Apps-with-Plotly-and-Dash',
                                  href='https://github.com/PacktPublishing/Interactive-Dashboards-and-Data-Apps-with-Plotly-and-Dash')])
              ])
          ], label='Project Info')























      More from aris10
      All posts