PyCafe - Vizro - Example of grouping controls in accordion

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
from typing import List, Literal, Tuple

from dash import html
import dash_bootstrap_components as dbc

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.models.types import ControlType

df_gapminder = px.data.gapminder()


class ControlGroup(vm.VizroBaseModel):
    """Container to group controls."""

    type: Literal["control_group"] = "control_group"
    controls: List[Tuple[str,List[ControlType]]] = [[]]

    def build(self):
        return html.Div([
             dbc.Accordion([
                dbc.AccordionItem(
                [control.build() for control in control_tuple[1]],
                title = control_tuple[0]
                ) for control_tuple in self.controls])],
            className="control_group_container",
        )


vm.Page.add_type("controls", ControlGroup)
vm.Container.add_type("components",ControlGroup)

page1 = vm.Page(
    title="Relationship Analysis",
    components=[vm.Container(
        title = "Foo",
        components = [
            vm.Graph(id="scatter", figure=px.scatter(df_gapminder, x="gdpPercap", y="lifeExp", size="pop")),
            ControlGroup(
            controls=[("Group A",[
                vm.Parameter(
                    id="this",
                    targets=["scatter.x"],
                    selector=vm.Dropdown(
                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose x-axis"
                    ),
                ),
                vm.Parameter(
                    targets=["scatter.y"],
                    selector=vm.Dropdown(
                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="lifeExp", title="Choose y-axis"
                    ),
                )
                ]),("Group B",
                [vm.Parameter(
                    targets=["scatter.size"],
                    selector=vm.Dropdown(
                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="pop", title="Choose bubble size"
                    ),
                ),
                vm.Parameter(
                    targets=["scatter.title"],
                    selector=vm.Dropdown(
                        options=["A", "B", "C"], multi=False, value="A", title="Choose title"
                    ),
                )
                ])
            ],
        ),
        ]),
        
    ],
)

dashboard = vm.Dashboard(pages=[page1])


Vizro().build(dashboard).run()
Py.Cafe

control-group-accordion

Example of grouping controls in accordion
