Skip to content

Commit 1b21f0b

Browse files
AnnMarieWAnnMarieW
authored
Merge pull request #16 from AnnMarieW/dash3
updates for dash3
2 parents 997ea89 + 5b4cf63 commit 1b21f0b

File tree

24 files changed

+172
-201
lines changed

24 files changed

+172
-201
lines changed

‎multi_page_basics/app_dbc.py

+1-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
nav=True,
1616
label="More Pages",
1717
),
18-
brand="Multi Page App Plugin Demo",
18+
brand="Multi Page App Demo",
1919
color="primary",
2020
dark=True,
2121
className="mb-2",
@@ -26,7 +26,6 @@
2626
navbar,
2727
dash.page_container,
2828
],
29-
className="dbc",
3029
fluid=True,
3130
)
3231

‎multi_page_nested_folders/app.py

+75-71
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,99 @@
11
import dash
2-
from dash import dcc, html, Output, Input, State
2+
from dash import callback, Output, Input, State
33
import dash_mantine_components as dmc
44
from dash_iconify import DashIconify
55

6+
# Set "mantine_light" as the default plotly figure template
7+
# styles Plotly figures with Mantine theme https://www.dash-mantine-components.com/components/figure-templates
8+
dmc.add_figure_templates(default="mantine_light")
69

7-
app = dash.Dash(__name__, use_pages=True)
10+
app = dash.Dash(__name__, use_pages=True, external_stylesheets=dmc.styles.ALL)
811

912

1013
def create_nav_link(icon, label, href):
11-
return dcc.Link(
12-
dmc.Group(
13-
[
14-
dmc.ThemeIcon(
15-
DashIconify(icon=icon, width=18),
16-
size=30,
17-
radius=30,
18-
variant="light",
19-
),
20-
dmc.Text(label, size="sm", color="gray"),
21-
]
22-
),
14+
return dmc.NavLink(
15+
label=label,
2316
href=href,
24-
style={"textDecoration": "none"},
25-
)
17+
active="exact",
18+
leftSection=DashIconify(icon=icon)
2619

20+
)
2721

28-
sidebar = dmc.Navbar(
29-
fixed=True,
30-
width={"base": 300},
31-
position={"top": 80},
32-
height=300,
33-
children=[
34-
dmc.ScrollArea(
35-
offsetScrollbars=True,
36-
type="scroll",
37-
children=[
38-
dmc.Stack(
39-
children=[
40-
create_nav_link(
41-
icon="radix-icons:rocket",
42-
label="Home",
43-
href="/",
44-
),
45-
],
46-
),
47-
dmc.Divider(
48-
label="Chapter 1", style={"marginBottom": 20, "marginTop": 20}
49-
),
50-
dmc.Stack(
51-
children=[
52-
create_nav_link(
53-
icon=page["icon"], label=page["name"], href=page["path"]
54-
)
55-
for page in dash.page_registry.values()
56-
if page["path"].startswith("/chapter1")
57-
],
58-
),
59-
dmc.Divider(
60-
label="Chapter 2", style={"marginBottom": 20, "marginTop": 20}
61-
),
62-
dmc.Stack(
63-
children=[
64-
create_nav_link(
65-
icon=page["icon"], label=page["name"], href=page["path"]
66-
)
67-
for page in dash.page_registry.values()
68-
if page["path"].startswith("/chapter2")
69-
],
22+
navbar_links =dmc.Box(
23+
[
24+
create_nav_link(
25+
icon="radix-icons:rocket",
26+
label="Home",
27+
href="/",
7028
),
29+
dmc.Divider(
30+
label="Chapter 1", style={"marginBottom": 20, "marginTop": 20}
31+
),
32+
dmc.Stack(
33+
[
34+
create_nav_link(
35+
icon=page["icon"], label=page["name"], href=page["path"]
36+
)
37+
for page in dash.page_registry.values()
38+
if page["path"].startswith("/chapter1")
39+
],
40+
),
41+
dmc.Divider(
42+
label="Chapter 2", style={"marginBottom": 20, "marginTop": 20}
43+
),
44+
dmc.Stack(
45+
[
46+
create_nav_link(
47+
icon=page["icon"], label=page["name"], href=page["path"]
48+
)
49+
for page in dash.page_registry.values()
50+
if page["path"].startswith("/chapter2")
7151
],
72-
)
52+
),
7353
],
7454
)
7555

76-
app.layout = dmc.Container(
56+
layout = dmc.AppShell(
7757
[
78-
dmc.Header(
79-
height=70,
80-
children=[dmc.Text("Company Logo")],
81-
style={"backgroundColor": "#228be6"},
58+
dmc.AppShellHeader(
59+
dmc.Group(
60+
[
61+
dmc.Burger(id="burger", size="sm", hiddenFrom="sm", opened=False),
62+
dmc.Title("Demo App", c="blue"),
63+
],
64+
h="100%",
65+
px="md",
66+
)
8267
),
83-
sidebar,
84-
dmc.Container(
85-
dash.page_container,
86-
size="lg",
87-
pt=20,
88-
style={"marginLeft": 300},
68+
dmc.AppShellNavbar(
69+
id="navbar",
70+
children=navbar_links,
71+
p="md",
8972
),
73+
dmc.AppShellMain(dash.page_container),
9074
],
91-
fluid=True,
75+
header={"height": 60},
76+
padding="md",
77+
navbar={
78+
"width": 300,
79+
"breakpoint": "sm",
80+
"collapsed": {"mobile": True},
81+
},
82+
id="appshell",
83+
)
84+
85+
86+
app.layout = dmc.MantineProvider(layout)
87+
88+
89+
@callback(
90+
Output("appshell", "navbar"),
91+
Input("burger", "opened"),
92+
State("appshell", "navbar"),
9293
)
94+
def navbar_is_open(opened, navbar):
95+
navbar["collapsed"] = {"mobile": not opened}
96+
return navbar
9397

9498

9599
if __name__ == "__main__":

‎multi_page_nested_folders/pages/chapter1/bar-charts.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
from dash import dcc, html, Input, Output, callback, register_page
1+
from dash import dcc, Input, Output, callback, register_page
22
import dash_mantine_components as dmc
33
import plotly.express as px
44

55
register_page(__name__, icon="fa:bar-chart")
66
df = px.data.tips()
77
days = df.day.unique()
88

9-
layout = html.Div(
9+
layout = dmc.Box(
1010
[
1111
dmc.Select(
1212
id="dropdown",

‎multi_page_nested_folders/pages/chapter1/pie-chart.py

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
from dash import dcc, html, Input, Output, callback, register_page
1+
from dash import dcc, Input, Output, callback, register_page
22
import dash_mantine_components as dmc
33
import plotly.express as px
44

@@ -8,7 +8,7 @@
88
df = px.data.tips()
99

1010

11-
layout = html.Div(
11+
layout = dmc.Box(
1212
[
1313
dmc.Text("Names:"),
1414
dmc.Select(
@@ -34,5 +34,5 @@
3434
Output("pie-chart", "figure"), [Input("names", "value"), Input("values", "value")]
3535
)
3636
def generate_chart(names, values):
37-
fig = px.pie(df, values=values, names=names)
37+
fig = px.pie(df, values=values, names=names, template="mantine_light")
3838
return fig

‎multi_page_nested_folders/pages/chapter2/heatmaps.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
layout = html.Div(
1010
[
11-
html.P("Medals included:"),
11+
dmc.Text("Medals included:"),
1212
dmc.MultiSelect(
1313
id="heatmaps-medals",
1414
data=[{"label": x, "value": x} for x in df.columns],

‎multi_page_nested_folders/pages/chapter2/histograms.py

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
from dash import dcc, html, Input, Output, callback, register_page
1+
from dash import dcc, Input, Output, callback, register_page
22
import dash_mantine_components as dmc
33
import plotly.express as px
44
import numpy as np
@@ -8,10 +8,10 @@
88

99
np.random.seed(2020)
1010

11-
layout = html.Div(
11+
layout = dmc.Box(
1212
[
1313
dcc.Graph(id="histograms-graph"),
14-
html.P("Mean:"),
14+
dmc.Text("Mean:"),
1515
dmc.Slider(
1616
id="histograms-mean",
1717
min=-3,
@@ -22,7 +22,7 @@
2222
{"value": 3, "label": "3"},
2323
],
2424
),
25-
html.P("Standard Deviation:"),
25+
dmc.Text("Standard Deviation:"),
2626
dmc.Slider(
2727
id="histograms-std",
2828
min=1,

‎multi_page_path_variables/app.py

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import dash
2-
32
import dash_bootstrap_components as dbc
43

54

‎multi_page_store/pages/grid.py

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
from dash import html, dash_table, Input, Output, callback, register_page
1+
from dash import html, Input, Output, callback, register_page
22
import dash_ag_grid as dag
33
import pandas as pd
44

55
register_page(__name__)
66

77
columnDefs = [
8-
{"headerName": "Country", "field": "country"},
9-
{"headerName": "Continent", "field": "continent"},
10-
{"headerName": "Year", "field": "year"},
8+
{"field": "country"},
9+
{"field": "continent"},
10+
{"field": "year"},
1111
{
1212
"headerName": "Life Expectancy",
1313
"field": "lifeExp",

‎multi_page_sync_components/app.py

+4-23
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,19 @@
11
"""
22
This example demonstrates an easy way of syncing components between pages of a multi-page app.
3-
It uses the same component on each page and sets `persistence=True`
3+
It uses the same dropdown component on each page and sets `persistence=True`
44
55
If persistence doesn't work (such as when you update the component in a callback),
6-
try using muti_page_sync_components2 which uses a dcc.Store to track the values and dash-extensions MultiplexerTransform
7-
to update the same prop from multiple callbacks.
8-
9-
This example was contributed by @nopria. See more information at https://github.com/nopria/dash-persistence-test
10-
6+
try using muti_page_sync_components2 which uses a dcc.Store to track the values
117
"""
128

139

14-
from dash import page_registry, page_container
10+
from dash import Dash, html, dcc, page_registry, page_container
1511

16-
from dash_extensions.enrich import (
17-
DashProxy,
18-
MultiplexerTransform,
19-
html,
20-
dcc,
21-
)
2212

23-
years = [str(year) for year in (range(2020, 2023))]
24-
25-
app = DashProxy(
26-
__name__,
27-
transforms=[MultiplexerTransform()],
28-
use_pages=True,
29-
prevent_initial_callbacks=True,
30-
suppress_callback_exceptions=True,
31-
)
13+
app = Dash(use_pages=True)
3214

3315
app.layout = html.Div(
3416
[
35-
dcc.Store(id="store", data=2022),
3617
html.H1("Multi Page App Demo: Sync components between pages"),
3718
html.Div(
3819
[

‎multi_page_sync_components/pages/__init__.py

Whitespace-only changes.

‎multi_page_sync_components/pages/page1.py

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
from dash import dcc, html
2-
from dash import Output, Input, State, callback
1+
from dash import dcc, html, Output, Input, callback, register_page
32

4-
import dash
5-
import utils
6-
7-
dash.register_page(__name__, path="/")
3+
register_page(__name__, path="/")
84

95
layout = html.Div(
106
[
117
html.Label("Page 1 Select Year"),
12-
utils.app_spanning_input,
8+
dcc.Dropdown(
9+
options=tuple(range(2010, 2023)),
10+
id="all-pages-year",
11+
persistence=True,
12+
),
1313
html.Div(id="page1-out"),
1414
]
1515
)

‎multi_page_sync_components/pages/page2.py

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
from dash import dcc, html
2-
from dash import Output, Input, State, callback
1+
from dash import html, dcc, Output, Input, callback, register_page
32

4-
import dash
5-
import utils
6-
7-
dash.register_page(__name__, path="/page2")
3+
register_page(__name__, path="/page2")
84

95
layout = html.Div(
106
[
117
html.Label("Page 2 Select Year"),
12-
utils.app_spanning_input,
8+
dcc.Dropdown(
9+
options=tuple(range(2010, 2023)),
10+
id="all-pages-year",
11+
persistence=True,
12+
),
1313
html.Div(id="page2-out"),
1414
]
1515
)

‎multi_page_sync_components/pages/page3.py

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
from dash import dcc, html
2-
from dash import Output, Input, State, callback
1+
from dash import dcc, html, Output, Input, callback, register_page
32

4-
import dash
5-
import utils
6-
7-
dash.register_page(__name__, path="/page3")
3+
register_page(__name__, path="/page3")
84

95
layout = html.Div(
106
[
117
html.Label("Page 3 Select Year"),
12-
utils.app_spanning_input,
8+
dcc.Dropdown(
9+
options=tuple(range(2010, 2023)),
10+
id="all-pages-year",
11+
persistence=True,
12+
),
1313
html.Div(id="page3-out"),
1414
]
1515
)

0 commit comments

Comments
 (0)