from textwrap import dedent
import dash_cytoscape as cyto
import dash_core_components as dcc
import dash_html_components as html
from .utils import CreateDisplay, PythonSnippet
from tutorial import tools, styles
examples = {
example: tools.load_example(
'tutorial/examples/cytoscape/{}'.format(example)
)
for example in [
'update_layout.py',
'stylesheet_callbacks.py',
'elements_callbacks.py'
]
}
nodes = [
{
'data': {'id': short, 'label': label},
'position': {'x': 20 * lat, 'y': -20 * long}
}
for short, label, long, lat in (
('la', 'Los Angeles', 34.03, -118.25),
('nyc', 'New York', 40.71, -74),
('to', 'Toronto', 43.65, -79.38),
('mtl', 'Montreal', 45.50, -73.57),
import dash_core_components as dcc
import dash_html_components as html
from tutorial.tools import load_example
from tutorial.components import Syntax, Example
examples = {
'persistence': load_example('tutorial/examples/persistence.py'),
'persistence_clear': load_example('tutorial/examples/persistence_clear.py')
}
layout = html.Div([
dcc.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 textwrap import dedent as s
from tutorial import styles
from tutorial.tools import load_example
from tutorial.components import Example, Syntax
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([
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('''
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from tutorial import styles
from tutorial import tools
from tutorial.utils.convert_props_to_list import generate_prop_info
from tutorial.utils.component_block import ComponentBlock
from tutorial.components import Syntax, Example
examples = {
'confirm':
tools.load_example('tutorial/examples/core_components/confirm.py'),
'confirm-provider':
tools.load_example(
'tutorial/examples/core_components/confirm_provider.py'),
'date_picker_single':
tools.load_example(
'tutorial/examples/core_components/date_picker_single.py'),
'date_picker_range':
tools.load_example(
'tutorial/examples/core_components/date_picker_range.py'),
'dropdown':
tools.load_example('tutorial/examples/core_components/dropdown.py'),
'graph-config':
tools.load_example(
'tutorial/examples/core_components/export_graph_to_chart_studio.py'),
'input-all-types':
tools.load_example('tutorial/examples/core_components/input_all_types.py'),
'input-basic':
tools.load_example('tutorial/examples/core_components/input-basic.py'),
# -*- coding: utf-8 -*-
from tutorial import tools
from 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'),
'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'),
'onco-print': tools.load_example(
'tutorial/examples/dashbio_components/onco_print.py')
# -*- coding: utf-8 -*-
from textwrap import dedent as s
import dash_core_components as dcc
import dash_html_components as html
from tutorial.components import Example, Syntax
from tutorial import tools
examples = {
'filesystem-session-cache':
tools.load_example(
'tutorial/examples/sharing_state_filesystem_sessions.py')
}
layout = html.Div([
dcc.Markdown(
s('''
# Sharing State Between Callbacks
> This is the *6th* and final 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).
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
import dash_html_components as html
import dash_core_components as dcc
from tutorial import styles
from tutorial import tools
from textwrap import dedent
examples = [
tools.load_example(s) for s in [
'tutorial/examples/canvas_101.py',
'tutorial/examples/canvas_image.py',
'tutorial/examples/canvas_color.py',
'tutorial/examples/canvas_annotations.py',
'tutorial/examples/canvas_copy_annotations.py',
'tutorial/examples/canvas_simple_segmentation.py',
]
]
layout = html.Div([
dcc.Markdown(
dedent('''\
## Introduction to dash-canvas
``dash-canvas`` is a module for image annotation and image processing
using Dash. It provides both the ``DashCanvas`` object for drawing
and annotations on images, and a set of utility functions to process
images using the annotations.
``dash-canvas`` can be used in various fields in which user
interaction with images is required, such as quality control in
industry, identification and segmentation of cells or organs in life
and medical sciences, quantification of phases in materials and
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from textwrap import dedent as s
from tutorial import styles
from tutorial import tools
from tutorial.utils.convert_props_to_table import generate_prop_table
from tutorial.utils.component_block import ComponentBlock
from tutorial.components import Syntax, Example
examples = {
'date_picker_single': tools.load_example('tutorial/examples/core_components/date_picker_single.py'),
'date_picker_range': tools.load_example('tutorial/examples/core_components/date_picker_range.py'),
'dropdown': tools.load_example('tutorial/examples/core_components/dropdown.py'),
'slider': tools.load_example('tutorial/examples/core_components/slider.py'),
'slider-updatemode': tools.load_example('tutorial/examples/core_components/slider_updatemode.py'),
'rangeslider': tools.load_example('tutorial/examples/core_components/rangeslider.py'),
'rangeslider-nonlinear': tools.load_example('tutorial/examples/core_components/rangeslider_nonlinear.py'),
'upload-image': tools.load_example('tutorial/examples/core_components/upload-image.py'),
'upload-datafile': tools.load_example('tutorial/examples/core_components/upload-datafile.py'),
'upload-gallery': tools.load_example('tutorial/examples/core_components/upload-gallery.py'),
'confirm': tools.load_example('tutorial/examples/core_components/confirm.py'),
'confirm-provider': tools.load_example('tutorial/examples/core_components/confirm_provider.py'),
'tabs_simple': tools.load_example('tutorial/examples/core_components/tabs_simple.py'),
'tabs_callback': tools.load_example('tutorial/examples/core_components/tabs_callback_graph.py'),
}
# Dropdown
Dropdown = html.Div(children=[
# -*- 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 tutorial import styles
from tutorial import tools
from tutorial.utils.convert_props_to_list import generate_prop_info
from tutorial.utils.component_block import ComponentBlock
from tutorial.components import Syntax, Example
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'),
import dash_core_components as dcc
import dash_html_components as html
from tutorial.components import Example, Syntax
from tutorial import tools
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'),
dcc.Markdown('''
## Dash State
> This is the *4th* chapter of the [Dash Tutorial](/).
> The [previous chapter](/getting-started-part-2) covered Dash Callbacks
> and the [next chapter](/interactive-graphing) covers interactive
> graphing and crossfiltering.
> Just getting started? Make sure to
> [install the necessary dependencies](/installation).
'''),
dcc.Markdown('''
In the previous chapter on
[basic Dash callbacks](/getting-started-part-2),
from textwrap import dedent as s
import dash_core_components as dcc
import dash_html_components as html
from tutorial.components import Example, Syntax
from tutorial 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('''
> This is the *4th* chapter of the [Dash Tutorial](/).
> The [previous chapter](/getting-started-part-2) covered Dash Callbacks
> and the [next chapter](/interactive-graphing) covers interactive
> graphing and crossfiltering.
> Just getting started? Make sure to
> [install the necessary dependencies](/installation).
''')),
dcc.Markdown(s('''
In the previous chapter on
[basic Dash callbacks](/getting-started-part-2),
our callbacks looked something like:
''')),
Syntax(examples['basic-input'][0]),
Example(examples['basic-input'][1]),
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from tutorial import styles
from tutorial import tools
from tutorial.utils.convert_props_to_table import generate_prop_table
from tutorial.utils.component_block import ComponentBlock
from tutorial.components import Syntax, Example
examples = {
'confirm': tools.load_example('tutorial/examples/core_components/confirm.py'),
'confirm-provider': tools.load_example('tutorial/examples/core_components/confirm_provider.py'),
'date_picker_single': tools.load_example('tutorial/examples/core_components/date_picker_single.py'),
'date_picker_range': tools.load_example('tutorial/examples/core_components/date_picker_range.py'),
'dropdown': tools.load_example('tutorial/examples/core_components/dropdown.py'),
'graph-config': tools.load_example('tutorial/examples/core_components/export_graph_to_chart_studio.py'),
'input-all-types': tools.load_example('tutorial/examples/core_components/input_all_types.py'),
'input-basic': tools.load_example('tutorial/examples/core_components/input-basic.py'),
'input-number-type': tools.load_example('tutorial/examples/core_components/input_number_type.py'),
'rangeslider': tools.load_example('tutorial/examples/core_components/rangeslider.py'),
'rangeslider-nonlinear': tools.load_example('tutorial/examples/core_components/rangeslider_nonlinear.py'),
'slider': tools.load_example('tutorial/examples/core_components/slider.py'),
'slider-updatemode': tools.load_example('tutorial/examples/core_components/slider_updatemode.py'),
'store-clicks': tools.load_example('tutorial/examples/core_components/store_clicks.py'),
'store-share': tools.load_example('tutorial/examples/core_components/store_share.py'),
'tabs_callback': tools.load_example('tutorial/examples/core_components/tabs_callback_graph.py'),
'tabs_simple': tools.load_example('tutorial/examples/core_components/tabs_simple.py'),
'tabs_styled_with_classes': tools.load_example('tutorial/examples/core_components/tabs_styled_with_classes.py'),
'tabs_styled_with_classes_css': tools.read_file('assets/tabs-styled-with-classes.css'),
'tabs_styled_with_inline': tools.load_example('tutorial/examples/core_components/tabs_styled_with_inline.py'),
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from tutorial import styles
from tutorial import tools
examples = [
tools.load_example(s)
for s in ['tutorial/examples/callbacks_with_dependencies.py']
]
layout = [
dcc.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.
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from textwrap import dedent as s
from tutorial import styles
from tutorial import tools
from tutorial.utils.convert_props_to_table import generate_prop_table
from tutorial.utils.component_block import ComponentBlock
from tutorial.components import Syntax, Example
examples = {
'confirm':
tools.load_example('tutorial/examples/core_components/confirm.py'),
'confirm-provider':
tools.load_example(
'tutorial/examples/core_components/confirm_provider.py'),
'date_picker_single':
tools.load_example(
'tutorial/examples/core_components/date_picker_single.py'),
'date_picker_range':
tools.load_example(
'tutorial/examples/core_components/date_picker_range.py'),
'dropdown':
tools.load_example('tutorial/examples/core_components/dropdown.py'),
'rangeslider':
tools.load_example('tutorial/examples/core_components/rangeslider.py'),
'rangeslider-nonlinear':
tools.load_example(
'tutorial/examples/core_components/rangeslider_nonlinear.py'),
'slider':
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from tutorial import styles
from tutorial.tools import load_example, read_file
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'
),
}
import dash_core_components as dcc
import dash_html_components as html
from tutorial.components import Example, Syntax
from tutorial import tools
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([
dcc.Markdown(
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
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='/dash-daq/darkthemeprovider')),
dcc.Markdown(s(
'''A component placed at the root of the component \
tree to make all components match the dark theme. '''
)),
dcc.Markdown(dtp[0],
from textwrap import dedent as s
import dash_core_components as dcc
import dash_html_components as html
from tutorial.tools import load_example
from tutorial.components import Example, Syntax
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([
dcc.Markdown('''
# Interactive Visualizations
> This is the *5th* chapter of the [Dash Tutorial](/).
> The [previous chapter](/state) covered callbacks with `State`
> and the [next chapter](/sharing-data-between-callbacks) describes how to
> share data between callbacks.
> Just getting started? Make sure to [install the necessary dependencies](/installation).
The `dash_core_components` library includes a component called `Graph`.
`Graph` renders interactive data visualizations using the open source
[plotly.js](https://github.com/plotly/plotly.js) JavaScript graphing
library. Plotly.js supports over 35 chart types and renders charts in
# -*- coding: utf-8 -*-
from tutorial import tools
from tutorial.utils.dashbio_docs import create_doc_page, get_component_names, create_examples
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'),
'ideogram':
tools.load_example('tutorial/examples/dashbio_components/ideogram.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'),
import dash_core_components as dcc
from tutorial.components import Syntax
from tutorial import tools
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':
open('tutorial/examples/performance_flask_caching_dataset.py').read()
}
layout = [
dcc.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.
import dash_html_components as html
import dash_core_components as dcc
from textwrap import dedent
from tutorial import tools
from tutorial import styles
examples = {
example: tools.load_example('tutorial/examples/table/{}'.format(example))
for example in [
'editing_simple.py', 'editing_prune_empty_cells.py',
'editing_uploading.py', 'editing_columns.py',
'editing_rows_and_columns.py', 'editing_updating_self.py'
]
}
layout = html.Div([
dcc.Markdown(
dedent('''
# Editable DataTable
The DataTable is editable. Like a spreadsheet, it can be used
as an input for controlling models with a variable number
of inputs.
This chapter includes recipes for:
- Reading the contents of the DataTable
- Filtering out null values
- Uploading data
- Determining which cell has changed
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from tutorial import styles
from tutorial import tools
examples = [
tools.load_example(s) for s in ['tutorial/examples/dynamic_content.py']
]
layout = html.Div(children=[
dcc.Markdown('''
## Loading Content Dynamically
Dash callbacks can return any type of property.
By returning `children`, they can even dynamically
render their content.
This is an example that can be used in app development for
quicker feedback.
Instead of refreshing the page to view your layout,
just render the layout as a response to clicking on a button.
'''.replace(' ', '')),
dcc.SyntaxHighlighter(
examples[0][0], language='python', customStyle=styles.code_container),
html.Div(examples[0][1], className="example-container")
])
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from tutorial import styles
from textwrap import dedent as s
from tutorial import tools
from tutorial.utils.component_block import ComponentBlock
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'),
dcc.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 {}.
'''.replace(' ', '').format(dcc.__version__)),
dcc.Markdown('''
```
from textwrap import dedent as s
import dash_core_components as dcc
import dash_html_components as html
from tutorial.tools import load_example
from tutorial.components import Example, Syntax
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([
dcc.Markdown('''
# Interactive Visualizations
> This is the *5th* chapter of the [Dash Tutorial](/).
> The [previous chapter](/state) covered callbacks with `State`
> and the [next chapter](/sharing-data-between-callbacks) describes how to
> share data between callbacks.
> Just getting started? Make sure to [install the necessary dependencies](/installation).
The `dash_core_components` library includes a component called `Graph`.
`Graph` renders interactive data visualizations using the open source
