PyCafe - Dash - Demo of Vizro Dash Components

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
"""Multi-page Dash app showcasing vizro-dash-components."""

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback, html, page_container, page_registry

app = Dash(__name__, use_pages=True)

_OTHER_MODULES = {"cascader_vs_dropdown", "cascader_stress_test"}


def _components_pages():
    return [p for p in page_registry.values() if p["module"].split(".")[-1] not in _OTHER_MODULES]


def _other_pages():
    return [p for p in page_registry.values() if p["module"].split(".")[-1] in _OTHER_MODULES]


def _page_anchor(page):
    return dmc.Anchor(
        dmc.Button(page["name"], variant="subtle", size="sm"),
        href=page["relative_path"],
        underline="never",
    )


def _navbar_content():
    components = [_page_anchor(p) for p in _components_pages()]
    other = [_page_anchor(p) for p in _other_pages()]
    blocks = [dmc.Stack(components, gap="xs")]
    if other:
        blocks.extend(
            [
                dmc.Divider(my="sm"),
                dmc.Stack(other, gap="xs"),
            ]
        )
    return dmc.Stack(blocks, gap=0, align="stretch")


app.layout = dmc.MantineProvider(
    dmc.AppShell(
        [
            dmc.AppShellHeader(
                dmc.Group(
                    [
                        dmc.Group(
                            [
                                dmc.Burger(id="shell-burger", size="sm", hiddenFrom="sm", opened=False),
                                dmc.Title("vizro-dash-components", order=1),
                            ],
                            gap="md",
                        ),
                        dmc.ColorSchemeToggle(
                            lightIcon=html.Span("☀", style={"fontSize": 20}),
                            darkIcon=html.Span("☾", style={"fontSize": 20}),
                            size="lg",
                        ),
                    ],
                    justify="space-between",
                    style={"flex": 1},
                    h="100%",
                    px="md",
                ),
            ),
            dmc.AppShellNavbar(
                id="shell-navbar",
                children=_navbar_content(),
                p="md",
            ),
            dmc.AppShellMain(dmc.Container(page_container, size="lg", py="xl")),
        ],
        id="appshell",
        header={"height": 60},
        padding="lg",
        navbar={
            "width": 280,
            "breakpoint": "sm",
            "collapsed": {"mobile": True},
        },
    ),
    defaultColorScheme="light",
)


@callback(
    Output("appshell", "navbar"),
    Input("shell-burger", "opened"),
    State("appshell", "navbar"),
)
def _toggle_shell_navbar(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


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