Notes: IDDA - Ch 2: Exploring Structure of a Dash App
October 14, 2022•592 words
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
- Dash
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
To add additional HTML/components, use the children parameter of the html.Div element# 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)
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
- Responsiveness
- Prebuilt components
- Encoded colors
- useful for errors, etc.
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')