Fix dcc.Store themes

vizro-core/examples/scratch_dev/app.py

@@ -1,109 +1,33 @@
-"""Dev app to try things out."""
-
+import plotly.graph_objs as go
 import vizro.models as vm
 import vizro.plotly.express as px
 from vizro import Vizro
-from vizro.figures import kpi_card
 from vizro.models.types import capture
-from vizro.tables import dash_ag_grid, dash_data_table
-
-df = px.data.iris()
-
-
-# Graph
-@capture("graph")
-def my_graph_figure(data_frame, **kwargs):
-    """My custom figure."""
-    return px.scatter(data_frame, **kwargs)
-
-
-class MyGraph(vm.Graph):
-    """My custom class."""
-
-    def build(self):
-        """Custom build."""
-        graph_build_obj = super().build()
-        # DO SOMETHING
-        return graph_build_obj
-
-
-# Table
-@capture("table")
-def my_table_figure(data_frame, **kwargs):
-    """My custom figure."""
-    return dash_data_table(data_frame, **kwargs)()
-
-
-class MyTable(vm.Table):
-    """My custom class."""
 
-    pass
+import plotly.io as pio
 
+pio.templates["vizro_dark"]["layout"]["colorway"] = ["red"]
+pio.templates["vizro_light"]["layout"]["colorway"] = ["yellow"]
 
-# AgGrid
-@capture("ag_grid")
-def my_ag_grid_figure(data_frame, **kwargs):
-    """My custom figure."""
-    return dash_ag_grid(data_frame, **kwargs)()
-
-
-class MyAgGrid(vm.AgGrid):
-    """My custom class."""
-
-    pass
-
-
-# Figure
-@capture("figure")
-def my_kpi_card_figure(data_frame, **kwargs):
-    """My custom figure."""
-    return kpi_card(data_frame, **kwargs)()
-
-
-class MyFigure(vm.Figure):
-    """My custom class."""
-
-    pass
-
+df = px.data.iris()
 
-# Action
-@capture("action")
-def my_action_function():
-    """My custom action."""
-    pass
 
+@capture("graph")
+def my_graph_figure_px(data_frame):
+    return px.scatter(data_frame, x="sepal_width", y="sepal_length")
 
-class MyAction(vm.Action):
-    """My custom class."""
 
-    pass
+@capture("graph")
+def my_graph_figure_go(data_frame):
+    return go.Figure(go.Scatter(x=data_frame["sepal_width"], y=data_frame["sepal_length"]))
 
 
 page = vm.Page(
     title="Test",
-    layout=vm.Layout(
-        grid=[[0, 1], [2, 3], [4, 5], [6, 7], [8, -1]],
-        col_gap="50px",
-        row_gap="50px",
-    ),
     components=[
-        # Graph
-        MyGraph(figure=px.scatter(df, x="sepal_width", y="sepal_length", title="My Graph")),
-        MyGraph(figure=my_graph_figure(df, x="sepal_width", y="sepal_length", title="My Graph Custom Figure")),
-        # Table
-        MyTable(figure=dash_data_table(df), title="My Table"),
-        MyTable(figure=my_table_figure(df), title="My Table Custom Figure"),
-        # AgGrid
-        MyAgGrid(figure=dash_ag_grid(df), title="My AgGrid"),
-        MyAgGrid(figure=my_ag_grid_figure(df), title="My AgGrid Custom Figure"),
-        # Figure
-        MyFigure(figure=kpi_card(df, value_column="sepal_width", title="KPI Card")),
-        MyFigure(figure=my_kpi_card_figure(df, value_column="sepal_width", title="KPI Card Custom Figure")),
-        # Action
-        MyGraph(
-            figure=my_graph_figure(df, x="sepal_width", y="sepal_length", title="My Graph Custom Figure"),
-            actions=[MyAction(function=my_action_function())],
-        ),
+        vm.Graph(figure=px.scatter(df, x="sepal_width", y="sepal_length")),
+        vm.Graph(figure=my_graph_figure_px(df)),
+        vm.Graph(figure=my_graph_figure_go(df)),
     ],
     controls=[vm.Filter(column="species")],
 )

vizro-core/src/vizro/models/_dashboard.py

@@ -5,6 +5,7 @@
 from pathlib import Path
 from typing import TYPE_CHECKING, List, Literal, TypedDict
 
+import plotly.io as pio
 import dash
 import dash_bootstrap_components as dbc
 import dash_mantine_components as dmc
@@ -154,7 +155,9 @@ def build(self):
             id="dashboard-container",
             children=[
                 html.Div(id="vizro_version", children=vizro.__version__, hidden=True),
-                dcc.Store(id="vizro_themes", data={"dark": themes.dark, "light": themes.light}),
+                dcc.Store(
+                    id="vizro_themes", data={"dark": pio.templates["vizro_dark"], "light": pio.templates["vizro_light"]}
+                ),
                 ActionLoop._create_app_callbacks(),
                 dash.page_container,
             ],

vizro-core/tests/unit/vizro/models/test_dashboard.py

@@ -1,5 +1,5 @@
 from pathlib import Path
-
+import plotly.io as pio
 import dash
 import dash_bootstrap_components as dbc
 import pytest
@@ -231,7 +231,9 @@ def test_dashboard_build(self, vizro_app, page_1, page_2):
             id="dashboard-container",
             children=[
                 html.Div(id="vizro_version", children=vizro.__version__, hidden=True),
-                dcc.Store(id="vizro_themes", data={"dark": themes.dark, "light": themes.light}),
+                dcc.Store(
+                    id="vizro_themes", data={"dark": pio.templates["vizro_dark"], "light": pio.templates["vizro_light"]}
+                ),
                 ActionLoop._create_app_callbacks(),
                 dash.page_container,
             ],