Py.Cafe

antonymilne/

custom-carousel-image-viewer

Custom Carousel Image Viewer

DocsPricing
  • assets/
  • yaml_version/
  • app.py
  • charts.py
  • data.yaml
  • 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
from typing import Annotated, Literal

import dash_bootstrap_components as dbc
import vizro.models as vm
from pydantic import model_validator
from vizro import Vizro
from vizro.models._models_utils import make_actions_chain
from vizro.models.types import ActionsType, capture
from dash import get_asset_url

class Carousel(vm.VizroBaseModel):
    type: Literal["carousel"] = "carousel"
    images: list[str]
    # actions: ActionsType = []
    #
    # @model_validator(mode="after")
    # def _make_actions_chain(self):
    #     return make_actions_chain(self)

    #         @property
    # def _action_triggers(self):
    #     return {"__default__": f"{self.id}.active_index"}

    # @property
    # def _action_inputs(self):
    #     return {"__default__": f"{self.id}.active_index"}
    #
    # @property
    # def _action_triggers(self):
    #     return {"__default__": f"{self.id}.active_index"}
    #
    # @property
    # def _action_outputs(self):
    #     return {"__default__": f"{self.id}.active_index"}

    def build(self):
        return dbc.Carousel(id=self.id, items=[{"src": item} for item in self.images])


vm.Page.add_type("components", Carousel)


@capture("action")
def slide_next_card(active_index):
    if active_index:
        return "Second slide"
    return "First slide"


@capture("action")
def go_to_slide_3():
    return 1


page = vm.Page(
    title="Custom Component",
    # layout=vm.Flex(),
    layout=vm.Grid(grid=[[0, 1], [2, -1]]),
    components=[
        Carousel(
            id="carousel",
            images=[
                "https://github.com/mckinsey/vizro/blob/a49b55117886f2b5793bbf4336b680834d4c64d4/vizro-core/examples/scratch_dev/assets/slide_1.png?raw=true",
                "https://github.com/mckinsey/vizro/blob/a49b55117886f2b5793bbf4336b680834d4c64d4/vizro-core/examples/scratch_dev/assets/slide_2.png?raw=true",
                "https://github.com/mckinsey/vizro/blob/a49b55117886f2b5793bbf4336b680834d4c64d4/vizro-core/examples/scratch_dev/assets/slide_3.png?raw=true"
            ],
            # actions=[
            #     vm.Action(
            #         function=slide_next_card("carousel"),
            #         outputs="carousel-card",
            #     )
            # ],
        ),
        vm.Card(text="First slide", id="carousel-card"),
        vm.Button(text="Go to slide 2"),  # , actions=vm.Action(function=go_to_slide_3(), outputs="carousel")),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run(debug=True)