# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
from textwrap import dedent as s
from dash_docs import styles
from dash_docs import tools
from dash_docs.tutorial.utils.convert_props_to_list import generate_prop_info
from dash_docs.tutorial.utils.component_block import ComponentBlock
from dash_docs.tutorial.components import Syntax, Example
from dash_docs import reusable_components
examples = {
'boolean-switch': tools.load_example('tutorial/examples/daq_components/boolean_switch.py'),
'color-picker': tools.load_example('tutorial/examples/daq_components/color_picker.py'),
'gauge': tools.load_example('tutorial/examples/daq_components/gauge.py'),
'graduated-bar': tools.load_example('tutorial/examples/daq_components/graduated_bar.py'),
'indicator': tools.load_example('tutorial/examples/daq_components/indicator.py'),
'knob': tools.load_example('tutorial/examples/daq_components/knob.py'),
'LED-display': tools.load_example('tutorial/examples/daq_components/LED_display.py'),
'numeric-input': tools.load_example('tutorial/examples/daq_components/numeric_input.py'),
'power-button': tools.load_example('tutorial/examples/daq_components/power_button.py'),
'precision-input': tools.load_example('tutorial/examples/daq_components/precision_input.py'),
'stop-button': tools.load_example('tutorial/examples/daq_components/stop_button.py'),
'slider': tools.load_example('tutorial/examples/daq_components/slider.py'),
'tank': tools.load_example('tutorial/examples/daq_components/tank.py'),
'thermometer': tools.load_example('tutorial/examples/daq_components/thermometer.py'),
'toggle-switch': tools.load_example('tutorial/examples/daq_components/toggle_switch.py'),
'dark-theme-provider': tools.load_example('tutorial/examples/daq_components/dark_theme_provider.py'),
'joystick': tools.load_example('tutorial/examples/daq_components/joystick.py')
import dash_core_components as dcc
import dash_html_components as html
from dash_docs.reusable_components import Example, Syntax
from dash_docs import tools
from dash_docs import reusable_components
examples = {
'prevent-update':
tools.load_example('tutorial/examples/prevent_update.py'),
'prevent-update-button':
tools.load_example('tutorial/examples/prevent_update_button.py'),
'last-clicked-button':
tools.load_example('tutorial/examples/last_clicked_button.py')
}
layout = html.Div([
html.H1('Advanced Callbacks'),
reusable_components.Markdown('''
## Catching errors with `PreventUpdate`
In certain situations, you don't want to update the callback output. You can
achieve this by raising a `PreventUpdate` exception in the callback function.
'''),
Syntax(examples['prevent-update-button'][0]),
Example(examples['prevent-update-button'][1]),
reusable_components.Markdown('''
## Displaying errors with `dash.no_update`
This example illustrates how you can show an error while keeping the previous
input, using `dash.no_update` to update the output partially.
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import tools
from dash_docs.reusable_components import Example, Syntax
from dash_docs.tools import load_example
from dash_docs import reusable_components
examples = {
'simple-graph-events':
load_example('tutorial/examples/graph_callbacks_simple.py'),
'world-indicators':
load_example('tutorial/examples/getting_started_crossfilter.py'),
'crossfilter-recipe':
load_example('tutorial/examples/crossfilter_recipe.py')
}
layout = html.Div([
reusable_components.Markdown('''
# Interactive Visualizations
<blockquote>
This is the 4th chapter of the <dccLink children="Dash Tutorial" href="/"/>.
The <dccLink href="/basic-callbacks" children="previous chapter"/> covered basic callback usage.
The <dccLink href="/sharing-data-between-callbacks" children="next chapter"/> describes how to
share data between callbacks.
Just getting started? Make sure to <dccLink href="/installation" children="install the necessary dependencies"/>.
</blockquote>
The `dash_core_components` library includes a component called `Graph`.
two values.'''
},
}
layout_children = generate_docs(
'dash-daq',
'daq',
daq_library_heading,
dash_daq_components
)
layout_children.insert(1, daq_install_instructions)
dtp = load_example(
'tutorial/examples/daq_components/darkthemeprovider_daq.py'
)
layout_children += [
html.Hr(),
html.H3(dcc.Link('DarkThemeProvider',
href=tools.relpath('/dash-daq/darkthemeprovider'))),
reusable_components.Markdown(
'''A component placed at the root of the component \
tree to make all components match the dark theme. '''
),
reusable_components.Markdown(dtp[0],
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import styles
from dash_docs.tools import load_example, read_file, relpath
from dash_docs import reusable_components as rc
examples = {
'local-css':
load_example('chapters/external_resources/examples/local-css.py',
relative_path=True),
'custom-index-string':
read_file('chapters/external_resources/examples/custom-index-string.py'),
'custom-interpolate-string':
read_file(
'chapters/external_resources/examples/custom-interpolate-string.py'),
'dash-meta-tags':
read_file('chapters/external_resources/examples/dash-meta-tags.py'),
'custom-dash-renderer':
read_file('chapters/external_resources/examples/custom-dash-renderer.py'),
'custom-dash-renderer-hooks':
read_file(
'chapters/external_resources/examples/custom-dash-renderer-hooks.py'),
'external-resources-init':
read_file(
'chapters/external_resources/examples/external-resources-init.py'),
}
layout = html.Div([
html.H1('Adding CSS & JS and Overriding the Page-Load Template'),
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import styles, tools
from dash_docs.tools import load_example
from dash_docs.tutorial.components import Example, Syntax
from dash_docs import reusable_components
examples = [
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([
reusable_components.Markdown('''
# Dash Layout
<blockquote>
This is the 2nd chapter of the <dccLink children="Dash Tutorial" href="/"/>.
The <dccLink href="/installation" children="previous chapter"/> covered installation
and the <dccLink href="/getting-started-part-2" children="next chapter"/> covers Dash callbacks.
import dash_core_components as dcc
import dash_html_components as html
from dash_docs.tutorial.components import Example, Syntax
from dash_docs import tools
from dash_docs import reusable_components
def get_example_name(path):
"""Returns the name of an example given its path."""
# name is the filename without the suffix
return os.path.splitext(os.path.basename(path))[0]
examples = {
get_example_name(path): tools.load_example(path)
for path in ['tutorial/examples/faqs/last_clicked_button.py']
}
layout = html.Div([
reusable_components.Markdown('''
# FAQs and Gotchas
<blockquote>
This is the 7th and final chapter of the essential
<dccLink children="Dash Tutorial" href="/"/>.
The <dccLink children="previous chapter" href="/sharing-data-between-callbacks"/>
described how to share data between callbacks.
The <dccLink children="rest of the Dash documentation" href="/"/>
covers other topics like multi-page apps and component libraries.
</blockquote>
import dash_core_components as dcc
import dash_html_components as html
from dash_docs.tools import load_example
from dash_docs.tutorial.components import Syntax, Example
from dash_docs import reusable_components
examples = {
'persistence': load_example('tutorial/examples/persistence.py'),
'persistence_clear': load_example('tutorial/examples/persistence_clear.py')
}
layout = html.Div([
reusable_components.Markdown('''
# Persistence
*New - released September 2019 with Dash 1.3*
Sometimes you want to save things the user has done in your app beyond the
lifetime of the individual affected components. Perhaps you let your users
choose their language, or edit the headers of a table, and they want to see
these same settings every time they load the app. Or perhaps you have a
tabbed app, so a form disappears when you switch to a different tab, and
you want the same settings when the user comes back to that tab, but you
want to reset them if the page is reloaded. There are ways to do this with
`dcc.Store` components, but the Dash `persistence` feature dramatically
simplifies these cases.
Persistence is supported by `dash-table` and all the form-like components
in `dash-core-components`. If you are a component author, it's easy to add
it to your component - see the last section below.
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import styles
from textwrap import dedent as s
from dash_docs import tools
from dash_docs.tutorial.utils.component_block import ComponentBlock
from dash_docs import reusable_components
examples = {
'button':
tools.load_example('tutorial/examples/core_components/button.py'),
'tabs':
tools.load_example('tutorial/examples/core_components/tabs_callback.py')
}
layout = html.Div(
className="gallery",
children=[
html.H1('Dash Core Components'),
reusable_components.Markdown('''
Dash ships with supercharged components for interactive user interfaces.
A core set of components, written and maintained by the Dash team,
is available in the `dash-core-components` library.
The source is on GitHub at [plotly/dash-core-components](https://github.com/plotly/dash-core-components).
These docs are using version {}.
'''.format(dcc.__version__)),
reusable_components.Markdown('''
},
},
'ToggleSwitch': {
'description':
'''A switch component that toggles between \
two values.'''
},
}
layout_children = generate_docs('dash-daq', 'daq', daq_library_heading,
dash_daq_components)
layout_children.insert(1, daq_install_instructions)
dtp = load_example(
os.path.join(os.path.dirname(os.path.relpath(__file__)), 'examples',
'darkthemeprovider_daq.py'))
layout_children += [
html.Hr(),
html.H3(
dcc.Link('DarkThemeProvider',
href=tools.relpath('/dash-daq/darkthemeprovider'))),
rc.Markdown('''A component placed at the root of the component \
tree to make all components match the dark theme. '''),
rc.Markdown(dtp[0], style=styles.code_container),
html.Div(dtp[1]),
dcc.Link('More DarkThemeProvider Examples and Reference',
href='dash-daq/darkthemeprovider'),
]
# -*- coding: utf-8 -*-
from dash_docs import tools
from dash_docs.tutorial.utils.dashbio_docs import create_doc_page, get_component_names
component_names = get_component_names('dash_bio')
examples = {
'alignment-chart':
tools.load_example(
'tutorial/examples/dashbio_components/alignment_chart.py'),
'sequence-viewer':
tools.load_example(
'tutorial/examples/dashbio_components/sequence_viewer.py'),
'clustergram':
tools.load_example('tutorial/examples/dashbio_components/clustergram.py'),
'speck':
tools.load_example('tutorial/examples/dashbio_components/speck.py'),
'circos':
tools.load_example('tutorial/examples/dashbio_components/circos.py'),
'forna-container':
tools.load_example(
'tutorial/examples/dashbio_components/forna_container.py'),
'ideogram':
tools.load_example('tutorial/examples/dashbio_components/ideogram.py'),
'molecule-2d-viewer':
tools.load_example(
'tutorial/examples/dashbio_components/molecule_2d_viewer.py'),
'molecule-3d-viewer':
tools.load_example(
'tutorial/examples/dashbio_components/molecule_3d_viewer.py'),
'needle-plot':
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import styles
from dash_docs.tools import load_example, read_file, relpath
from dash_docs import reusable_components
examples = {
'local-css':
load_example('tutorial/examples/external_css_and_js/local-css.py'),
'custom-index-string':
read_file('tutorial/examples/external_css_and_js/custom-index-string.py'),
'custom-interpolate-string':
read_file(
'tutorial/examples/external_css_and_js/custom-interpolate-string.py'),
'dash-meta-tags':
read_file('tutorial/examples/external_css_and_js/dash-meta-tags.py'),
'custom-dash-renderer':
read_file('tutorial/examples/external_css_and_js/custom-dash-renderer.py'),
'custom-dash-renderer-hooks':
read_file(
'tutorial/examples/external_css_and_js/custom-dash-renderer-hooks.py'),
'external-resources-init':
read_file(
'tutorial/examples/external_css_and_js/external-resources-init.py'),
}
layout = html.Div([
html.H1('Adding CSS & JS and Overriding the Page-Load Template'),
reusable_components.Markdown('''
# -*- coding: utf-8 -*-
from dash_docs import tools
from dash_docs.tutorial.utils.dashbio_docs import create_doc_page, get_component_names
component_names = get_component_names('dash_bio')
examples = {
'alignment-chart': tools.load_example(
'tutorial/examples/dashbio_components/alignment_chart.py'),
'sequence-viewer': tools.load_example(
'tutorial/examples/dashbio_components/sequence_viewer.py'),
'clustergram': tools.load_example(
'tutorial/examples/dashbio_components/clustergram.py'),
'speck': tools.load_example(
'tutorial/examples/dashbio_components/speck.py'),
'circos': tools.load_example(
'tutorial/examples/dashbio_components/circos.py'),
'forna-container': tools.load_example(
'tutorial/examples/dashbio_components/forna_container.py'),
'ideogram': tools.load_example(
'tutorial/examples/dashbio_components/ideogram.py'),
'molecule-2d-viewer': tools.load_example(
'tutorial/examples/dashbio_components/molecule_2d_viewer.py'),
'molecule-3d-viewer': tools.load_example(
'tutorial/examples/dashbio_components/molecule_3d_viewer.py'),
'needle-plot': tools.load_example(
'tutorial/examples/dashbio_components/needle_plot.py'),
'manhattan-plot': tools.load_example(
'tutorial/examples/dashbio_components/manhattan_plot.py'),
'volcano-plot': tools.load_example(
'tutorial/examples/dashbio_components/volcano_plot.py'),
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash_docs.reusable_components import Example, Syntax
from dash_docs import tools
from dash_docs import reusable_components
examples = {
'filesystem-session-cache':
tools.load_example(
'tutorial/examples/sharing_state_filesystem_sessions.py')
}
layout = html.Div([
reusable_components.Markdown('''
# Sharing State Between Callbacks
<blockquote>
This is the 5th chapter of the essential <dccLink children="Dash Tutorial" href="/"/>. The
<dccLink href="/interactive-graphing" children="previous chapter"/> covered how to use callbacks
with the <code>dash_core_components.Graph</code> component. The <dccLink href="/" children="rest of the Dash
documentation"/> covers other topics like multi-page apps and component
libraries. Just getting started? Make sure to <dccLink children="install the necessary
dependencies" href="/installation"/>. The <dccLink href="/faqs" children="next and final chapter"/> covers
frequently asked questions and gotchas.
</blockquote>
One of the core Dash principles explained in the
<dccLink href="/basic-callbacks" children="Getting Started Guide on Callbacks"/>
is that **Dash Callbacks must never modify variables outside of their
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import styles
from dash_docs import tools
from dash_docs import reusable_components
examples = [
tools.load_example(s)
for s in ['tutorial/examples/callbacks_with_dependencies.py']
]
layout = [
reusable_components.Markdown('''
## Callback Resolution
A core feature in Dash is callback dependency resolution.
A common real-world example is with forms.
Often, the options of one dropdown depend on the value of another
dropdown.
A third component might depend on the values of both components.
When the first dropdown changes,
the second dropdown is triggered to change but the third component
shouldn't update until both dropdowns have finished updating.
If Dash updated the third component without waiting for the
second dropdown to update, then its callback could get called with
inconsistent state.
import dash_core_components as dcc
import dash_html_components as html
from dash_docs.tutorial.components import Example, Syntax
from dash_docs import tools
from dash_docs import reusable_components
examples = {
'basic-input':
tools.load_example('tutorial/examples/basic-input.py'),
'basic-state':
tools.load_example('tutorial/examples/basic-state.py'),
'prevent-update':
tools.load_example('tutorial/examples/prevent_update.py'),
'prevent-update-button':
tools.load_example('tutorial/examples/prevent_update_button.py'),
}
layout = html.Div([
html.H1('Dash State and PreventUpdate'),
reusable_components.Markdown('''
## Dash State
<blockquote>
This is the 4th chapter of the <dccLink children="Dash Tutorial" href="/"/>.
The <dccLink href="/getting-started-part-2" children="previous chapter"/> covered Dash Callbacks
and the <dccLink href="/interactive-graphing" children="next chapter"/> covers interactive
graphing and crossfiltering.
Just getting started? Make sure to
<dccLink href="/installation" children="install the necessary dependencies"/>.
</blockquote>
'''),
import dash_html_components as html
import dash_core_components as dcc
from dash_docs import styles
from dash_docs import tools
from dash_docs import reusable_components
print('Loading examples')
examples = [
tools.load_example(s) for s in [
'tutorial/examples/graph_callbacks_simple.py',
'tutorial/examples/graph_callbacks_crossfiltering.py',
'tutorial/examples/graph_callbacks_same_graph.py'
]
]
layout = [reusable_components.Markdown('''
# Graph Callbacks
Dash renders graphs using the interactive
[plotly.js](https://github.com/plotly/plotly.js) graphing library.
Plotly.js graphs are natively interactive.
- Hover over points to see their values
- Click and drag on the graph to zoom into regions
- Double click to zoom out
- Shift + Click + Drag to pan regions
- Select points using the lasso or the rectangle in the graph bar
With dash, these events update the `Graph` component's
import dash_html_components as html
import dash_core_components as dcc
from dash_docs import tools
from dash_docs import styles
from dash_docs import reusable_components
examples = {
example: tools.load_example('tutorial/examples/table/{}'.format(example))
for example in
['interactivity_connected_to_graph.py', 'interactivity_row_ids.py']
}
layout = html.Div([
reusable_components.Markdown("""
# DataTable Interactivity
`DataTable` includes several features for modifying and transforming
the view of the data. These include:
- Sorting by column (`sort_action='native'`)
- Filtering by column (`filter_action='native'`)
- Editing the cells (`editable=True`)
- Deleting rows (`row_deletable=True`)
- Deleting columns (`columns[i].deletable=True`)
- Selecting rows (`row_selectable='single' | 'multi'`)
- Selecting columns (`column_selectable='single' | 'multi'` and `columns[i].selectable=True`)
- Paging front-end (`page_action='native'`)
- Hiding columns (`hidden_columns=[]`)
A quick note on filtering. We have defined our own
import dash_core_components as dcc
from dash_docs.tutorial.components import Syntax
from dash_docs import tools
from dash_docs import reusable_components
examples = {
'memoization':
tools.load_example('tutorial/examples/performance_memoization.py'),
'performance_flask_caching':
tools.load_example('tutorial/examples/performance_flask_caching.py'),
'performance_flask_caching_dataset':
tools.read_file('tutorial/examples/performance_flask_caching_dataset.py')
}
layout = [
reusable_components.Markdown('''# Performance
This chapter contains several recommendations for improving the performance
of your dash apps.
The main performance limitation of dash apps is likely the callbacks in
the application code itself. If you can speed up your callbacks, your app
will feel snappier.
### Memoization
Since Dash's callbacks are functional in nature (they don't contain any state),
it's easy to add memoization caching. Memoization stores the results of a
function after it is called and re-uses the result if the function is called
with the same arguments.
'value': 98.6
},
},
'ToggleSwitch': {
'description':
'''A switch component that toggles between \
two values.'''
},
}
layout_children = generate_docs('dash-daq', 'daq', daq_library_heading,
dash_daq_components)
layout_children.insert(1, daq_install_instructions)
dtp = load_example(
'dash_docs/chapters/dash_daq/examples/darkthemeprovider_daq.py')
layout_children += [
html.Hr(),
html.H3(
dcc.Link('DarkThemeProvider',
href=tools.relpath('/dash-daq/darkthemeprovider'))),
rc.Markdown('''A component placed at the root of the component \
tree to make all components match the dark theme. '''),
rc.Markdown(dtp[0], style=styles.code_container),
html.Div(dtp[1]),
dcc.Link('More DarkThemeProvider Examples and Reference',
href='dash-daq/darkthemeprovider'),
]
layout = html.Div(className="gallery", children=layout_children)
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import tools
from dash_docs.tools import load_example
from dash_docs.tutorial.components import Example, Syntax
from dash_docs import reusable_components
examples = {
'simple-graph-events': load_example(
'tutorial/examples/graph_callbacks_simple.py'),
'world-indicators': load_example(
'tutorial/examples/getting_started_crossfilter.py'
),
'crossfilter-recipe': load_example(
'tutorial/examples/crossfilter_recipe.py'
)
}
layout = html.Div([
reusable_components.Markdown('''
# Interactive Visualizations
<blockquote>
This is the 5th chapter of the <dccLink children="Dash Tutorial" href="/"/>.
The <dccLink href="/state" children="previous chapter"/> covered callbacks with <code>State</code> and <code>PreventUpdate</code>.
The <dccLink href="/sharing-data-between-callbacks" children="next chapter"/> describes how to
share data between callbacks.
Just getting started? Make sure to <dccLink href="/installation" children="install the necessary dependencies"/>.
</blockquote>
import dash_core_components as dcc
import dash_html_components as html
import dash_cytoscape
from dash_docs.reusable_components import Section, Chapter
from dash_docs import styles
from dash_docs import tools
from dash_docs import reusable_components
examples = {
example:
tools.load_example('tutorial/examples/cytoscape/{}'.format(example))
for example in ['simple.py']
}
preamble = html.Div([
reusable_components.Markdown('''
# Dash Cytoscape
'''),
html.Iframe(
src=
"https://ghbtns.com/github-btn.html?user=plotly&repo=dash-cytoscape&type=star&count=true&size=large",
width="160px",
height="30px",
style={'border': 'none'}),
reusable_components.Markdown('''
> Released on February 5th, 2019**
>
> Dash Cytoscape is a graph visualization component for creating easily
> customizable, high-performance, interactive, and web-based networks. It
import dash_core_components as dcc
import dash_html_components as html
from dash_docs.reusable_components import Example, Syntax
from dash_docs import tools, styles
from dash_docs import reusable_components
examples = {
'graph-update-fe-be':
tools.load_example('tutorial/examples/clientside/graph_update_fe_be.py'),
'graph-update-fe-be-px':
tools.load_example('tutorial/examples/clientside/graph_update_fe_be_px.py')
}
layout = html.Div([
html.H1('Clientside Callbacks'),
reusable_components.Markdown('''
Sometimes callbacks can incur a significant overhead, especially when they:
- receive and/or return very large quantities of data (transfer time)
- are called very often (network latency, queuing, handshake)
- are part of a callback chain that requires multiple roundtrips
between the browser and Dash
When the overhead cost of a callback becomes too great and no
other optimization is possible, the callback can be modified to be run
directly in the browser instead of a making a request to Dash.
The syntax for the callback is almost exactly the same; you use
`Input` and `Output` as you normally would when declaring a callback,
but you also define a JavaScript function as the first argument to the
`@app.callback` decorator.
