Update demo

app.py

@@ -5,7 +5,6 @@ from typing import Union
 import dash_bootstrap_components as dbc
 import vizro.models as vm
 from chart_groups import ALL_CHART_GROUP, CHART_GROUPS, ChartGroup, IncompletePage
-from custom_components import FlexContainer, Markdown
 from dash import get_asset_url, html
 from vizro import Vizro
 
@@ -46,10 +45,11 @@ def make_homepage_container(chart_group: ChartGroup) -> vm.Container:
     # deviation-butterfly, which both have title "Butterfly", correspond to a single card.
     return vm.Container(
         title=chart_group.name,
-        layout=vm.Layout(grid=[[0, 1, 1]], col_gap="40px"),
+        layout=vm.Grid(grid=[[0, 1, 1]], col_gap="40px"),
         components=[
-            Markdown(text=chart_group.intro_text, classname="intro-text"),
-            FlexContainer(
+            vm.Text(text=chart_group.intro_text, extra={"className": "intro-text"}),
+            vm.Container(
+                layout=vm.Flex(direction="row", wrap=True),
                 components=[
                     make_chart_card(page)
                     for page in sorted(
@@ -115,7 +115,7 @@ app.dash.layout.children.append(
         ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
         href="https://github.com/mckinsey/vizro",
         target="_blank",
-        className="anchor-container",
+        class_name="anchor-container",
     )
 )
 

assets/css/custom.css

@@ -1,73 +1,43 @@
-#page-header {
-  padding-left: 8px;
-}
-
-#left-main {
-  width: 288px;
+#header {
+  padding-left: 4px;
 }
 
 img[src*="#chart-icon"] {
   width: 100%;
 }
 
-.open-in-new {
+/* PyCafe Link Button Icon */
+.material-symbols-outlined .open-in-new {
   font-size: inherit;
   margin-left: 4px;
-  vertical-align: middle;
 }
 
-.code-clipboard {
-  float: right;
-  font-size: 20px;
-}
-
-.code-clipboard pre {
-  font-family: monospace;
-  margin-bottom: 12px;
-}
 
 .code-clipboard-container {
-  background: var(--surfaces-bg-card);
-  max-height: 500px;
-  overflow: auto;
-  padding: 1rem;
-  position: relative;
-}
-
-.code-clipboard-container .pycafe-link {
-  margin-bottom: 12px;
-}
-
-.code-clipboard-container::-webkit-scrollbar-thumb {
-  border-color: var(--surfaces-bg-card);
-}
-
-.flex-container {
   display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
-  justify-content: flex-start;
+  flex-direction: column;
+  gap: 12px;
 }
 
-.flex-container h4 {
+.flex-item h4 {
   color: var(--text-secondary);
   margin: 0;
   padding-top: 12px;
   text-align: center;
 }
 
-.flex-container .card {
+.flex-item .card {
   height: 232px;
   margin: 0 0 auto;
   opacity: 0.3;
   width: 176px;
 }
 
-.flex-container .card-nav {
+.flex-item .card-nav {
   opacity: 1;
 }
 
-.flex-container .card img {
+.flex-item .card img {
   width: 100%;
 }
 
@@ -78,6 +48,7 @@ img[src*="#chart-icon"] {
 
 .intro-text h4 {
   color: var(--text-secondary);
+  margin: 0;
 }
 
 .intro-text p {
@@ -113,3 +84,7 @@ img[src*="#chart-icon"] {
 img#banner {
   height: 16px;
 }
+
+.mantine-CodeHighlight-controls {
+  background: transparent;
+}

custom_components.py

@@ -4,23 +4,21 @@ from typing import Literal
 from urllib.parse import quote
 
 import dash_bootstrap_components as dbc
+import dash_mantine_components as dmc
 import vizro.models as vm
-from dash import dcc, html
-from pydantic import Field
+from dash import html
 
 
 class CodeClipboard(vm.VizroBaseModel):
-    """Code snippet with a copy to clipboard button."""
+    """Code clipboard based on `dmc.CodeHighlight` with optional PyCafe link."""
 
     type: Literal["code_clipboard"] = "code_clipboard"
     code: str
     mode: Literal["vizro", "plotly"]
-    language: str = ""
+    language: str = "python"
 
     def build(self):
-        """Returns the code clipboard component inside an accordion."""
-        markdown_code = "\n".join([f"```{self.language}", self.code, "```"])
-
+        """Build and return the complete code clipboard component."""
         pycafe_link = dbc.Button(
             [
                 "Edit code live on PyCafe",
@@ -28,48 +26,19 @@ class CodeClipboard(vm.VizroBaseModel):
             ],
             href=f"https://py.cafe/snippet/vizro/v1#code={quote(self.code)}",
             target="_blank",
-            className="pycafe-link",
+            class_name="pycafe-link",
         )
 
         return html.Div(
             [
                 pycafe_link if self.mode == "vizro" else None,
-                dcc.Clipboard(target_id=self.id, className="code-clipboard"),
-                dcc.Markdown(markdown_code, id=self.id),
+                dmc.CodeHighlight(
+                    code=self.code,
+                    language=self.language,
+                ),
             ],
             className="code-clipboard-container",
         )
 
 
-class Markdown(vm.VizroBaseModel):
-    """Markdown component."""
-
-    type: Literal["markdown"] = "markdown"
-    text: str = Field(
-        ..., description="Markdown string to create card title/text that should adhere to the CommonMark Spec."
-    )
-    classname: str = ""
-
-    def build(self):
-        """Returns a markdown component with an optional classname."""
-        return dcc.Markdown(
-            id=self.id, children=self.text, dangerously_allow_html=False, className=self.classname, link_target="_blank"
-        )
-
-
-class FlexContainer(vm.Container):
-    """Custom flex `Container`."""
-
-    type: Literal["flex_container"] = "flex_container"
-    title: str = None  # Title exists in vm.Container but we don't want to use it here.
-
-    def build(self):
-        """Returns a flex container."""
-        return html.Div(
-            id=self.id, children=[component.build() for component in self.components], className="flex-container"
-        )
-
-
-vm.Container.add_type("components", FlexContainer)
-vm.Container.add_type("components", Markdown)
 vm.Container.add_type("components", CodeClipboard)

pages/_factories.py

@@ -16,7 +16,7 @@ def butterfly_factory(group: str):
         id=f"{group}-butterfly",
         path=f"{group}/butterfly",
         title="Butterfly",
-        layout=vm.Layout(grid=PAGE_GRID),
+        layout=vm.Grid(grid=PAGE_GRID),
         components=[
             vm.Card(
                 text="""
@@ -59,7 +59,7 @@ def connected_scatter_factory(group: str):
         id=f"{group}-connected-scatter",
         path=f"{group}/connected-scatter",
         title="Connected scatter",
-        layout=vm.Layout(grid=PAGE_GRID),
+        layout=vm.Grid(grid=PAGE_GRID),
         components=[
             vm.Card(
                 text="""
@@ -102,7 +102,7 @@ def column_and_line_factory(group: str):
         id=f"{group}-column-and-line",
         path=f"{group}/column-and-line",
         title="Column and line",
-        layout=vm.Layout(grid=PAGE_GRID),
+        layout=vm.Grid(grid=PAGE_GRID),
         components=[
             vm.Card(
                 text="""
@@ -143,7 +143,7 @@ def waterfall_factory(group: str):
         id=f"{group}-waterfall",
         path=f"{group}/waterfall",
         title="Waterfall",
-        layout=vm.Layout(grid=PAGE_GRID),
+        layout=vm.Grid(grid=PAGE_GRID),
         components=[
             vm.Card(
                 text="""
@@ -187,7 +187,7 @@ def lollipop_factory(group: str):
         id=f"{group}-lollipop",
         path=f"{group}/lollipop",
         title="Lollipop",
-        layout=vm.Layout(grid=PAGE_GRID),
+        layout=vm.Grid(grid=PAGE_GRID),
         components=[
             vm.Card(
                 text="""

pages/correlation.py

@@ -9,7 +9,7 @@ from pages.examples import bubble, scatter, scatter_matrix
 scatter_page = vm.Page(
     title="Scatter",
     path="correlation/scatter",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -49,7 +49,7 @@ connected_scatter_page = connected_scatter_factory("correlation")
 scatter_matrix_page = vm.Page(
     title="Scatter matrix",
     path="correlation/scatter-matrix",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -89,7 +89,7 @@ scatter_matrix_page = vm.Page(
 bubble_page = vm.Page(
     title="Bubble",
     path="correlation/bubble",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""

pages/deviation.py

@@ -12,7 +12,7 @@ butterfly_page = butterfly_factory("deviation")
 diverging_bar_page = vm.Page(
     title="Diverging bar",
     path="deviation/diverging-bar",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -54,7 +54,7 @@ diverging_bar_page = vm.Page(
 diverging_stacked_bar_page = vm.Page(
     title="Diverging stacked bar",
     path="deviation/diverging-stacked-bar",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""

pages/distribution.py

@@ -9,7 +9,7 @@ from pages.examples import boxplot, dumbbell, histogram, violin
 violin_page = vm.Page(
     title="Violin",
     path="distribution/violin",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -45,7 +45,7 @@ violin_page = vm.Page(
 boxplot_page = vm.Page(
     title="Boxplot",
     path="distribution/boxplot",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -87,7 +87,7 @@ butterfly_page = butterfly_factory("distribution")
 histogram_page = vm.Page(
     title="Histogram",
     path="distribution/histogram",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -124,7 +124,7 @@ histogram_page = vm.Page(
 dumbbell_page = vm.Page(
     title="Dumbbell",
     path="distribution/dumbbell",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""

pages/examples/violin.py

@@ -2,4 +2,4 @@ import vizro.plotly.express as px
 
 tips = px.data.tips()
 
-fig = px.violin(tips, y="total_bill", x="day", color="day", box=True)
+fig = px.violin(tips, y="tip", x="day", color="day", box=True)

pages/flow.py

@@ -9,7 +9,7 @@ from pages.examples import sankey
 sankey_page = vm.Page(
     title="Sankey",
     path="flow/sankey",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""

pages/magnitude.py

@@ -9,7 +9,7 @@ from pages.examples import bar, magnitude_column, paired_bar, paired_column, par
 bar_page = vm.Page(
     title="Bar",
     path="magnitude/bar",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -50,7 +50,7 @@ column_page = vm.Page(
     id="magnitude-column",
     path="magnitude/column",
     title="Column",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -88,7 +88,7 @@ column_page = vm.Page(
 paired_bar_page = vm.Page(
     title="Paired bar",
     path="magnitude/paired-bar",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -129,7 +129,7 @@ paired_bar_page = vm.Page(
 paired_column_page = vm.Page(
     title="Paired column",
     path="magnitude/paired-column",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -170,7 +170,7 @@ paired_column_page = vm.Page(
 parallel_coordinates_page = vm.Page(
     path="magnitude/parallel-coordinates ",
     title="Parallel coordinates",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -209,7 +209,7 @@ parallel_coordinates_page = vm.Page(
 radar_page = vm.Page(
     path="magnitude/radar",
     title="Radar",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""

pages/part_to_whole.py

@@ -9,7 +9,7 @@ from pages.examples import donut, funnel, pie, stacked_bar, stacked_column, tree
 pie_page = vm.Page(
     title="Pie",
     path="part-to-whole/pie",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -50,7 +50,7 @@ pie_page = vm.Page(
 donut_page = vm.Page(
     title="Donut",
     path="part-to-whole/donut",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -87,7 +87,7 @@ donut_page = vm.Page(
 treemap_page = vm.Page(
     title="Treemap",
     path="part-to-whole/treemap",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -126,7 +126,7 @@ treemap_page = vm.Page(
 stacked_bar_page = vm.Page(
     title="Stacked bar",
     path="part-to-whole/stacked-bar",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -168,7 +168,7 @@ stacked_bar_page = vm.Page(
 stacked_column_page = vm.Page(
     title="Stacked column",
     path="part-to-whole/stacked-column",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -210,7 +210,7 @@ stacked_column_page = vm.Page(
 funnel_page = vm.Page(
     title="Funnel",
     path="part-to-whole/funnel",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""

pages/ranking.py

@@ -9,7 +9,7 @@ from pages.examples import ordered_bar, ordered_column
 ordered_bar_page = vm.Page(
     title="Ordered bar",
     path="ranking/ordered-bar",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -48,7 +48,7 @@ ordered_bar_page = vm.Page(
 ordered_column_page = vm.Page(
     title="Ordered column",
     path="ranking/ordered-column",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""

pages/spatial.py

@@ -8,7 +8,7 @@ from pages.examples import bubble_map, choropleth, dot_map
 choropleth_page = vm.Page(
     title="Choropleth",
     path="spatial/choropleth",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -49,7 +49,7 @@ choropleth_page = vm.Page(
 dot_map_page = vm.Page(
     title="Dot map",
     path="spatial/dot-map",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -89,7 +89,7 @@ dot_map_page = vm.Page(
 bubble_map_page = vm.Page(
     title="Bubble map",
     path="spatial/bubble-map",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""

pages/time.py

@@ -12,7 +12,7 @@ from pages.examples import area, gantt, heatmap, line, sparkline, stepped_line,
 line_page = vm.Page(
     title="Line",
     path="time/line",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -52,7 +52,7 @@ column_page = vm.Page(
     id="time-column",
     path="time/column",
     title="Column",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -90,7 +90,7 @@ column_page = vm.Page(
 area_page = vm.Page(
     title="Area",
     path="time/area",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -131,7 +131,7 @@ column_and_line_page = column_and_line_factory("time")
 stepped_line_page = vm.Page(
     title="Stepped line",
     path="time/stepped-line",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -168,7 +168,7 @@ stepped_line_page = vm.Page(
 heatmap_page = vm.Page(
     title="Heatmap",
     path="time/heatmap",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -205,7 +205,7 @@ heatmap_page = vm.Page(
 gantt_page = vm.Page(
     title="Gantt",
     path="time/gantt",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""
@@ -245,7 +245,7 @@ gantt_page = vm.Page(
 sparkline_page = vm.Page(
     title="Sparkline",
     path="time/sparkline",
-    layout=vm.Layout(grid=PAGE_GRID),
+    layout=vm.Grid(grid=PAGE_GRID),
     components=[
         vm.Card(
             text="""

requirements.in

@@ -3,5 +3,5 @@ autoflake==2.3.1
 black==24.4.2
 isort==5.13.2
 plotly==6.0.0
-vizro==0.1.28
+vizro==0.1.44
 gunicorn

requirements.txt

@@ -22,23 +22,18 @@ click==8.1.7
     # via
     #   black
     #   flask
-dash==2.18.1
+dash==3.1.1
     # via
     #   dash-ag-grid
     #   dash-bootstrap-components
+    #   dash-mantine-components
     #   vizro
-dash-ag-grid==31.2.0
+dash-ag-grid==32.3.0
     # via vizro
-dash-bootstrap-components==1.6.0
+dash-bootstrap-components==2.0.3
     # via vizro
-dash-core-components==2.0.0
-    # via dash
-dash-html-components==2.0.0
-    # via dash
-dash-mantine-components==0.12.1
+dash-mantine-components==2.1.0
     # via vizro
-dash-table==5.0.0
-    # via dash
 flask==3.0.3
     # via
     #   dash
@@ -74,6 +69,7 @@ packaging==24.1
     #   black
     #   gunicorn
     #   plotly
+    #   vizro
 pandas==2.2.3
     # via vizro
 pathspec==0.12.1
@@ -114,7 +110,7 @@ tzdata==2024.2
     # via pandas
 urllib3==2.2.3
     # via requests
-vizro==0.1.28
+vizro==0.1.44
     # via -r requirements.in
 werkzeug==3.0.6
     # via