from reusable_components import Section, Chapter
from tutorial.tools import merge
styles = {
'underline': {
'border-bottom': 'thin lightgrey solid',
'margin-top': '50px'
}
}
layout = html.Div(className='toc', children=[
html.H1('Dash User Guide'),
Section("What's Dash?", [
Chapter(chapters['introduction']['name'],
chapters['introduction']['url'],
"A quick paragraph about Dash and a link to the talk at Plotcon that started it all."),
Chapter('Announcement Essay',
'https://medium.com/@plotlygraphs/introducing-dash-5ecf7191b503',
("Our extended essay on Dash. An extended discussion of Dash's architecture "
"and our motivation behind the project.")),
Chapter(chapters['gallery']['name'],
"https://dash-gallery.plotly.host/Portal/",
"A glimpse into what's possible with Dash."),
Chapter('Dash Club',
'http://eepurl.com/dE7CHT',
'A fortnightly email newsletter by chriddyp, the creator of Dash.'),
Chapter(chapters['dash-1-0-migration']['name'],
chapters['dash-1-0-migration']['url'],
("Dash v1.0 is out! If you're new to Dash, just head down to "
"the tutorial section below and get started. This section is "
''')),
Section('Quickstart', [
dcc.SyntaxHighlighter('''pip install dash=={}'''.format(
dash.__version__),
customStyle=styles.code_container),
dcc.SyntaxHighlighter(examples['simple.py'][0],
language='python',
customStyle=styles.code_container),
html.Div(examples['simple.py'][1], className='example-container'),
]),
Section('Dash DataTable User Guide', [
Chapter(
'Part 1. Sizing', '/datatable/sizing', '''
All about sizing the DataTable. Examples include:
- Setting the width and the height of the table
- Responsive table design
- Setting the widths of individual columns
- Handling long text
- Fixing rows and columns
'''),
Chapter(
'Part 2. Styling', '/datatable/style', '''
The style of the DataTable is highly customizable. This chapter
includes examples for:
- Conditional formatting
- Displaying multiple rows of headers
- Highlighting rows, columns, and cells
- Styling the table as a list view
- Changing the colors (including a dark theme!)
The sizing API for the table has been particularly tricky for
styles = {
'underline': {
'border-bottom': 'thin lightgrey solid',
'margin-top': '50px'
}
}
layout = html.Div(
className='toc',
children=[
html.H1('Dash User Guide'),
Section("What's Dash?", [
Chapter(
chapters['introduction']['name'],
chapters['introduction']['url'],
"A quick paragraph about Dash and a link to the talk at Plotcon that started it all."
),
Chapter(
'Announcement Essay',
'https://medium.com/@plotlygraphs/introducing-dash-5ecf7191b503',
("Our extended essay on Dash. An extended discussion of Dash's architecture "
"and our motivation behind the project.")),
Chapter(chapters['gallery']['name'], chapters['gallery']['url'],
"A glimpse into what's possible with Dash."),
Chapter(
'Dash Club', 'http://eepurl.com/dE7CHT',
'A fortnightly email newsletter by chriddyp, the creator of Dash.'
),
]),
Section('Dash Tutorial', [
dcc.Markdown(
dedent('''
> Dash Cytoscape graphs are interactive! Scroll to zoom and drag on
> the canvas to move the entire graph around. You can move nodes by
> *dragging* it, or by *clicking, holding, and moving your mouse*
> to the desired location (and click again to release).
>
> This also work in mobile! Tap-and-hold on a node to move it, or on
> the canvas to move the entire graph. Pinch your fingers outwards to
> zoom in, or pinch them together to zoom out.
''')),
Chapter(
'Part 1. Elements', '/cytoscape/elements', '''
Elements in Cytoscape are designed to be clear, simple and
declarative. This chapter will get you started with examples
for:
- Data and position dictionaries
- Mutability properties
- Defining groups and classes
- Compound nodes
'''),
Chapter(
'Part 2. Layout', '/cytoscape/layout', '''
Make your graphs interpretable by using the built-in
collection of easy-to-modify layouts. We show you how to:
- Display pre-determined and random layouts
- Represent your graph as a circle, a grid or a tree
- Finetune your representations by modifying the default options
- Use physics-based simulations to generate your layout
'''),
Chapter(
'Part 3. Styling', '/cytoscape/styling', '''