PyCafe - Dash - Interactive Analytics with Dash and Mantine

pages/
app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
from dash import Dash, html, dcc, Input, Output, callback
import dash_mantine_components as dmc
import dash

from pages import page1, page2

dash._dash_renderer._set_react_version("18.2.0")
app = Dash(
    __name__,
    external_stylesheets=dmc.styles.ALL,
    suppress_callback_exceptions=True,
    use_pages=True,
    title="app_dmc",
    update_title="loading...",
    pages_folder="",
)

dash.register_page("page1", layout=page1.layout, path="/", order=0)
dash.register_page("page2", layout=page2.layout, order=1)


def serve_layout():
    return html.Div(
        [
            dcc.Location(id="url"),
            html.Div(id="page-content"),
            # html.Div(
            #     id="notifications-container",
            # ), # To fix on DMC 1.0+, uncomment this Div and comment out the one on page1
        ]
    )


def app_layout():
    app_header = dmc.AppShellHeader(dmc.Title("My DMC App"))
    app_navbar = dmc.AppShellNavbar(
        id="app-navbar",
        children=[
            html.Div(
                [
                    dmc.NavLink(
                        label=page["name"].title(),
                        href=page["relative_path"],
                        id={"type": "navlink", "index": page["relative_path"]},
                        noWrap=True,
                    )
                    for page in dash.page_registry.values()
                ],
            ),
        ],
    )

    return dmc.MantineProvider(
        children=[
            dmc.NotificationProvider(position="bottom-right"),
            dmc.AppShell(
                id="app-shell",
                children=[
                    app_header,
                    app_navbar,
                    html.Div(id="app-content", children=[dash.page_container]),
                ],
                header={
                    "height": 50,
                    "zIndex": 1400,
                },
                navbar={
                    "width": 200,
                    "zIndex": 1300,
                    "breakpoint": 500,
                },
                aside={
                    "width": 0,
                    "zIndex": 1300,
                    "breakpoint": 500,
                },
            ),
        ],
        id="mantine-provider",
    )


app.layout = serve_layout


@callback(
    Output("page-content", "children"),
    Input("url", "pathname"),
    prevent_initial_call=True,
)
def display_page(_):
    return app_layout()


@callback(
    Output({"type": "navlink", "index": dash.ALL}, "active"),
    Input("_pages_location", "pathname"),
)
def update_navlinks(pathname):
    return [
        control["id"]["index"] == pathname
        for control in dash.callback_context.outputs_list
    ]


if __name__ == "__main__":
    app.run(debug=True)
Py.Cafe

dash-mantine-notifications-problem

Interactive Analytics with Dash and Mantine
