s('''
# FAQs and Gotchas
> This is the *7th* and final chapter of the essential [Dash Tutorial](/).
> The [previous chapter](/sharing-data-between-callbacks) described how to
> share data between callbacks. The [rest of the Dash documentation](/)
> covers other topics like multi-page apps and component libraries.
## Frequently Asked Questions
**Q:** *How can I customize the appearance of my Dash app?*
**A:** Dash apps are rendered in the browser as modern standards compliant
web apps. This means that you can use CSS to style your Dash app as you
would standard HTML.
All `dash-html-components` support inline CSS styling through a `style`
attribute. An external CSS stylesheet can also be used to style
`dash-html-components` and `dash-core-components` by targeting the ID or
class names of your components. Both `dash-html-components` and
`dash-core-components` accept the attribute `className`, which corresponds
to the HTML element attribute `class`.
The [Dash HTML Components](/dash-html-components) section in the Dash User
Guide explains how to supply `dash-html-components` with both inline
styles and CSS class names that you can target with CSS style sheets. The
[Adding CSS & JS and Overriding the Page-Load
Template](/external-resources) section in the Dash Guide explains how you
can link your own style sheets to Dash apps.
------------------------
**Q:** *How can I add JavaScript to my Dash app?*
**A:** You can add your own scripts to your Dash app, just like you would
add a JavaScript file to an HTML document. See the [Adding CSS & JS and
Overriding the Page-Load Template](/external-resources) section in the
Dash Guide.
------------------------
**Q:** *Can I make a Dash app with multiple pages?*
**A:** Yes! Dash has support for multi-page apps. See the [Multi-Page Apps
and URL Support](/urls) section in the Dash User Guide.
------------------------
**Q:** *How I can I organise my Dash app into multiple files?*
**A:** A strategy for doing this can be found in the [Multi-Page Apps
and URL Support](/urls) section in the Dash User Guide.
------------------------
**Q:** *How do I determine which `Input` has changed?*
**A:** In addition to the `n_clicks` property (which tracks the number of
times a component has been clicked), all `dash-html-components` have an
`n_clicks_timestamp` property, which records the time that the component was
last clicked. This provides a convenient way for detecting which
`html.Button` was clicked in order to trigger the current callback. Here's
an example of how this can be done:''')),
from textwrap import dedent as s
from components import Example, Syntax
import tools
examples = {
'basic-input': tools.load_example('tutorial/examples/basic-input.py'),
'basic-state': tools.load_example('tutorial/examples/basic-state.py')
}
layout = html.Div([
html.H1('Dash State'),
dcc.Markdown(
s('''
In the previous chapter on
[basic dash callbacks](/dash/getting-started-part-2),
our callbacks looked something like:
''')),
Syntax(examples['basic-input'][0]),
Example(examples['basic-input'][1]),
dcc.Markdown(
s('''
In this example, the callback function is fired whenever any of the
attributes described by the `dash.dependencies.Input` change.
Try it for yourself by entering data in the inputs above.
`dash.dependencies.State` allows you to pass along extra values without
firing the callbacks. Here's the same example as above but with the
`dcc.Input` as `dash.dependencies.State` and a button as
`dash.dependencies.Input`.
''')),
rc.Markdown('''
The store component can be used to keep data in the visitor's browser.
The data is scoped to the user accessing the page.
**Three types of storage (`storage_type` prop):**
- `memory`: default, keep the data as long the page is not refreshed.
- `local`: keep the data until it is manually cleared.
- `session`: keep the data until the browser/tab closes.
_For `local`/`session`, the data is serialized as json when stored._
'''),
rc.ComponentBlock(
s('''
import dash_core_components as dcc
store = dcc.Store(id='my-store', data={'my-data': 'data'})
''')),
rc.Markdown('_The store must be used with callbacks_'),
dcc.Link('More Store Examples and Reference',
href=tools.relpath('/dash-core-components/store')),
html.Br(),
rc.Markdown('***'),
html.H2(
dcc.Link(
'Logout Button',
href=tools.relpath('/dash-core-components/logoutbutton'))),
rc.Markdown('''
The logout button can be used to perform logout mechanism.
It's a simple form with a submit button, when the button is clicked,
"""),
Example(examples['simple-graph-events'][1]),
html.Hr(),
html.H3('Update Graphs on Hover'),
Syntax(examples['world-indicators'][0], summary="""
Let's update our world indicators example from the previous chapter
by updating time series when we hover over points in our scatter plot.
"""),
Example(examples['world-indicators'][1]),
dcc.Markdown(s('''
Try mousing over the points in the scatter plot on the left.
Notice how the line graphs on the right update based off of the point that
you are hovering over.
''')),
html.Hr(),
html.H3('Generic Crossfilter Recipe'),
Syntax(examples['crossfilter-recipe'][0], summary="""
Here's a slightly more generic example for crossfiltering across
a six column data set. Each scatter plot's selection filters the
underlying dataset.
"""),
html.Img(
src='https://github.com/plotly/dash-docs/raw/master/images/select.gif',
# Textarea
Textarea = html.Div(
children=[html.H3('Textarea Properties'),
generate_prop_table('Textarea')])
# Tabs
Tabs = html.Div(children=[
html.H1('Tabs Examples and Reference'),
dcc.Markdown(
s('''
The Tabs and Tab components can be used to create tabbed sections in your app.
The `Tab` component controls the style and value of the individual tab
and the `Tabs` component hold a collection of `Tab` components.
**Table of Contents**
- Method 1. Content as Callback
- Method 2. Content as Tab children
- Styling the Tabs component
- with CSS classes
- with inline styles
- with props
***
''')),
html.H2('Method 1. Content as Callback'),
dcc.Markdown(
s('''
Attach a callback to the Tabs `value` prop and update a container's `children`
property in your callback.
''')),
dcc.SyntaxHighlighter(examples['tabs_callback'][0],
customStyle=styles.code_container),
html.Div(examples['tabs_callback'][1], className='example-container'),
s('''
Dash applications are rendered in the web browser with CSS and JavaScript.
On page load, Dash serves a small HTML template that includes references to
the CSS and JavaScript that are required to render the application.
This chapter covers everything that you need to know about configuring
this HTML file and about including external CSS and JavaScript in Dash
applications.
**Table of Contents**
- Adding Your Own CSS and JavaScript to Dash Apps
- Embedding Images in Your Dash Apps
- Adding External CSS and JavaScript
- Customizing Dash's HTML Index Template
- Adding Meta Tags
- Serving Dash's Component Libraries Locally or from a CDN
- Sample Dash CSS Stylesheet
***
## Adding Your Own CSS and JavaScript to Dash Apps
**New in dash 0.22.0**
Including custom CSS or JavaScript in your Dash apps is simple.
Just create a folder named `assets` in the root of your app directory
and include your CSS and JavaScript
files in that folder. Dash will automatically serve all of the files that
are included in this folder.
### Example: Including Local CSS and JavaScript
We'll create several files: `app.py`, a folder named `assets`, and
three files in that folder:
```
- app.py
- assets/
|-- typography.css
|-- header.css
|-- custom-script.js
```
`app.py`
''')),
html.
A(className="image-link",
href="https://github.com/plotly/dash-core-components/pull/73",
children=html.Img(
src=
"https://user-images.githubusercontent.com/1280389/30351245-6b93ee62-97e8-11e7-8e85-0411e9d6c98c.gif",
alt="Dash Upload Component")),
dcc.Link(html.A('More Upload Examples and Reference'),
href="/dash-core-components/upload"),
dcc.Markdown('''
***
'''.replace(' ', '')),
html.H3('Tabs'),
dcc.Markdown(
s('''
The Tabs and Tab components can be used to create tabbed sections in your app.
''')),
dcc.SyntaxHighlighter(examples['tabs'][0],
customStyle=styles.code_container,
language='python'),
html.Div(examples['tabs'][1], className='example-container'),
dcc.Link('More Tabs Examples and Reference',
href="/dash-core-components/tabs"),
html.Hr(),
html.H3('Graphs'),
dcc.Markdown('''
The `Graph` component shares the same syntax as the open-source
`plotly.py` library. View the [plotly.py docs](https://plot.ly/python)
to learn more.
'''.replace(' ', '')),
ComponentBlock('''import dash_core_components as dcc
load_example(example) for example in [
'tutorial/examples/getting_started_layout_1.py',
'tutorial/examples/getting_started_layout_2.py',
'tutorial/examples/getting_started_table.py',
'tutorial/examples/getting_started_viz.py',
'tutorial/examples/getting_started_markdown.py',
'tutorial/examples/getting_started_core_components.py',
]
]
layout = html.Div([
dcc.Markdown(
s('''
# Dash Layout
> This is the *2nd* chapter of the [Dash Tutorial](/).
> The [previous chapter](/installation) covered installation
> and the [next chapter](/getting-started-part-2) covers Dash callbacks.
''')),
dcc.Markdown('''
This tutorial will walk you through a fundamental aspect of Dash apps, the
app `layout`, through {} self-contained apps.
'''.format(len(examples)).replace(' ', '')),
dcc.Markdown('''***
Dash apps are composed of two parts. The first part is the "`layout`" of
the app and it describes what the application looks like.
The second part describes the interactivity of the application and will be
covered in the [next chapter](/getting-started-part-2).
generate_prop_table('Link')
])
# Textarea
Textarea = html.Div(
children=[html.H3('Textarea Properties'),
generate_prop_table('Textarea')])
# Tabs
Tabs = html.Div(children=[
html.H1('Tabs Examples and Reference'),
html.H2('Method 1. Content as Callback'),
dcc.Markdown(
s('''
The `Tab` component controls the style and value of the individual tab
and the `Tabs` component hold a collection of `Tab` components.
Attach a callback to the Tabs `value` prop and update a container's `children`
property in your callback.
''')),
dcc.SyntaxHighlighter(examples['tabs_callback'][0],
customStyle=styles.code_container),
html.Div(examples['tabs_callback'][1], className='example-container'),
dcc.Markdown(
s('''
In the example above, our callback contains all of the content. In practice,
we'll keep the tab's content in separate files and import the data.
For an example, see the [URLs and Multi-Page App Tutorial](/urls).
''')),
html.H2('Method 2. Content as Tab Children'),
dcc.Markdown(
s('''
Instead of displaying the content through a callback, you can embed the content
children=s('''
global_df = pd.read_csv('...')
app.layout = html.Div([
dcc.Graph(id='graph'),
html.Table(id='table'),
dcc.Dropdown(id='dropdown'),
# Hidden div inside the app that stores the intermediate value
html.Div(id='intermediate-value', style={'display': 'none'})
])
@app.callback(Output('intermediate-value', 'children'), [Input('dropdown', 'value')])
def clean_data(value):
# some expensive clean data step
cleaned_df = your_expensive_clean_or_compute_step(value)
# more generally, this line would be
# json.dumps(cleaned_df)
return cleaned_df.to_json(date_format='iso', orient='split')
@app.callback(Output('graph', 'figure'), [Input('intermediate-value', 'children')])
def update_graph(jsonified_cleaned_data):
# more generally, this line would be
# json.loads(jsonified_cleaned_data)
dff = pd.read_json(jsonified_cleaned_data, orient='split')
figure = create_figure(dff)
return figure
@app.callback(Output('table', 'children'), [Input('intermediate-value', 'children')])
def update_table(jsonified_cleaned_data):
dff = pd.read_json(jsonified_cleaned_data, orient='split')
table = create_table(dff)
return table
''')),
DATAPATH = os.path.join(".", "tests", "dashbio_demos", "sample_data",
"molecule3d_")
data_info = {
'{}4uft.pdb'.format(DATAPATH): {
'name':
'Measles Nucleocapsid',
'description':
dcc.Markdown(
s(r'''
The measles nucleoprotein forms a large helical complex with
RNA... It is thought to chaperone the process of replication and
transcription by providing a site ready for binding of the
polymerase/phosphoprotein complex while a new RNA chain is being
built.
The structure includes the stable core domain of the
nucleoprotein and a strand of RNA, but the flexible tail of
nucleoprotein was removed in this study.
''')),
'link':
'http://pdb101.rcsb.org/motm/231'
},
'{}1yi5.pdb'.format(DATAPATH): {
'name':
'a-cobratoxin-AChBP complex',
'description':
dcc.Markdown(
s(r'''
html.
A(className="image-link",
href="https://github.com/plotly/dash-core-components/pull/73",
children=html.Img(
src=
"https://user-images.githubusercontent.com/1280389/30351245-6b93ee62-97e8-11e7-8e85-0411e9d6c98c.gif",
alt="Dash Upload Component")),
dcc.Link(html.A('More Upload Examples and Reference'),
href="/dash-core-components/upload"),
dcc.Markdown('''
***
'''.replace(' ', '')),
html.H3('Tabs'),
dcc.Markdown(
s('''
The Tabs and Tab components can be used to create tabbed sections in your app.
''')),
dcc.Markdown(examples['tabs'][0], style=styles.code_container),
html.Div(examples['tabs'][1], className='example-container'),
dcc.Link('More Tabs Examples and Reference',
href="/dash-core-components/tabs"),
html.Hr(),
html.H3(dcc.Link('Graphs', href='/dash-core-components/graph')),
dcc.Markdown('''
The `Graph` component shares the same syntax as the open-source
`plotly.py` library. View the [plotly.py docs](https://plot.ly/python)
to learn more.
'''.replace(' ', '')),
ComponentBlock('''import dash_core_components as dcc
import plotly.graph_objs as go
html.
A(className="image-link",
href="https://github.com/plotly/dash-core-components/pull/73",
children=html.Img(
src=
"https://user-images.githubusercontent.com/1280389/30351245-6b93ee62-97e8-11e7-8e85-0411e9d6c98c.gif",
alt="Dash Upload Component")),
dcc.Link(html.A('More Upload Examples and Reference'),
href="/dash-core-components/upload"),
dcc.Markdown('''
***
'''.replace(' ', '')),
html.H3('Tabs'),
dcc.Markdown(
s('''
The Tabs and Tab components can be used to create tabbed sections in your app.
''')),
dcc.SyntaxHighlighter(examples['tabs'][0],
customStyle=styles.code_container,
language='python'),
html.Div(examples['tabs'][1], className='example-container'),
dcc.Link('More Tabs Examples and Reference',
href="/dash-core-components/tabs"),
html.Hr(),
html.H3('Graphs'),
dcc.Markdown('''
The `Graph` component shares the same syntax as the open-source
`plotly.py` library. View the [plotly.py docs](https://plot.ly/python)
to learn more.
'''.replace(' ', '')),
ComponentBlock('''import dash_core_components as dcc
dcc.Markdown(
s('''
# Sharing State Between Callbacks
> This is the *6th* chapter of the essential [Dash Tutorial](/). The
> [previous chapter](/interactive-graphing) covered how to use callbacks
> with the `dash_core_components.Graph` component. The [rest of the Dash
> documentation](/) covers other topics like multi-page apps and component
> libraries. Just getting started? Make sure to [install the necessary
> dependencies](/installation). The [next and final chapter](/faq) covers
> frequently asked questions and gotchas.
One of the core Dash principles explained in the
[Getting Started Guide on Callbacks](/getting-started-part-2)
is that **Dash Callbacks must never modify variables outside of their
scope**. It is not safe to modify any `global` variables.
This chapter explains why and provides some alternative patterns for
sharing state between callbacks.
## Why Share State?
In some apps, you may have multiple callbacks that depend on expensive data
processing tasks like making SQL queries,
running simulations, or downloading data.
Rather than have each callback run the same expensive task,
you can have one callback run the task and then share the
results to the rest of the callbacks.
''')),
dcc.Markdown(
