Refactor overview page to simplify navigation and reduce code repetition

- Replace vm.Action navigation functions with simple href-based navigation
- Create reusable helper function for chart containers with optional navigation buttons
- Improve naming: rename pages (page_1 -> overview_page) and controls (pg1_parameter_1 -> metric)
- Remove unused imports and helper functions
- Update CSS selectors to match new container IDs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -1,14 +1,10 @@
 """Dev app to try things out."""
 
-import json
-import base64
-
 import vizro.plotly.express as px
 from vizro import Vizro
 import vizro.models as vm
 import vizro.actions as va
 from vizro.figures import kpi_card, kpi_card_reference
-from vizro.models.types import capture
 from vizro.tables import dash_ag_grid
 
 from data import superstore_df, create_superstore_product, pareto_customers_table, create_kpi_data
@@ -49,38 +45,28 @@ order_kpi_df = create_kpi_data(superstore_df, value_col="Order ID")
 customer_kpi_df = create_kpi_data(superstore_df, value_col="Customer ID")
 
 
-def _encode_to_base64(value):
-    json_bytes = json.dumps(value, separators=(",", ":")).encode("utf-8")
-    b64_bytes = base64.urlsafe_b64encode(json_bytes)
-    return f"b64_{b64_bytes.decode('utf-8').rstrip('=')}"
-
-
-@capture("action")
-def nav_region(parameter_value):
-    url_query_params = f"?pg2-parameter-2={_encode_to_base64(parameter_value)}"
-    return "/regions", url_query_params
-
-
-@capture("action")
-def nav_product():
-    return "/products"
+def create_chart_container_with_nav(id, figure, nav_href=None):
+    """Create a container with a chart and optional navigation button."""
+    components = [vm.Graph(id=f"{id}_chart", figure=figure)]
 
+    if nav_href:
+        components.append(
+            vm.Button(
+                id=f"{id}_nav_btn", text="View Deep Dive", icon="jump_to_element", variant="outlined", href=nav_href
+            )
+        )
+        layout = vm.Grid(grid=[[0]] * 5 + [[1]], row_gap="8px")
+    else:
+        layout = None
 
-@capture("action")
-def nav_customer():
-    return "/customers"
+    return vm.Container(id=id, components=components, layout=layout, variant="filled")
 
 
-@capture("action")
-def nav_orders():
-    return "/orders"
-
-
-page_1 = vm.Page(
+overview_page = vm.Page(
     title="Overview",
     components=[
         vm.Container(
-            id="pg1-container-1",
+            id="kpi-cards",
             title="💡 Click on a KPI card to update the charts below.",
             components=[
                 vm.Figure(
@@ -93,7 +79,7 @@ page_1 = vm.Page(
                         value_format="${value:,.0f}",
                         icon="bar_chart",
                     ),
-                    actions=va.set_control(control="pg1_parameter_1", value="Sales"),
+                    actions=va.set_control(control="metric", value="Sales"),
                 ),
                 vm.Figure(
                     figure=kpi_card_reference(
@@ -105,7 +91,7 @@ page_1 = vm.Page(
                         value_format="${value:,.0f}",
                         icon="money_bag",
                     ),
-                    actions=va.set_control(control="pg1_parameter_1", value="Profit"),
+                    actions=va.set_control(control="metric", value="Profit"),
                 ),
                 vm.Figure(
                     figure=kpi_card_reference(
@@ -118,7 +104,7 @@ page_1 = vm.Page(
                         icon="orders",
                         # agg_func="nunique",
                     ),
-                    actions=va.set_control(control="pg1_parameter_1", value="Order ID"),
+                    actions=va.set_control(control="metric", value="Order ID"),
                 ),
                 vm.Figure(
                     figure=kpi_card_reference(
@@ -131,96 +117,39 @@ page_1 = vm.Page(
                         icon="group",
                         # agg_func="nunique",
                     ),
-                    actions=va.set_control(control="pg1_parameter_1", value="Customer ID"),
+                    actions=va.set_control(control="metric", value="Customer ID"),
                 ),
             ],
             layout=vm.Grid(grid=[[0, 1, 2, 3]]),
         ),
-        vm.Container(
-            title="",
-            components=[
-                vm.Graph(
-                    id="line_chart_by_month",
-                    figure=create_line_chart_per_month(
-                        superstore_df,
-                        value_col="Sales",
-                    ),
-                ),
-            ],
-            variant="filled",
+        create_chart_container_with_nav(
+            id="line_month",
+            figure=create_line_chart_per_month(superstore_df, value_col="Sales"),
         ),
-        vm.Container(
-            title="",
-            components=[
-                vm.Graph(id="order_status_chart", figure=pie_chart_by_order_status(superstore_df, value_col="Sales")),
-                vm.Button(
-                    id="orders-nav-btn",
-                    text="View Deep Dive",
-                    icon="jump_to_element",
-                    variant="outlined",
-                    actions=vm.Action(function=nav_orders(), outputs=["vizro_url.pathname"]),
-                ),
-            ],
-            layout=vm.Grid(grid=[[0], [0], [0], [0], [0], [1]], row_gap="8px"),
-            variant="filled",
+        create_chart_container_with_nav(
+            id="order_status",
+            figure=pie_chart_by_order_status(superstore_df, value_col="Sales"),
+            nav_href="/orders",
         ),
-        vm.Container(
-            components=[
-                vm.Graph(
-                    id="region_bar_chart", figure=create_lollipop_chart_by_region(superstore_df, value_col="Sales")
-                ),
-                vm.Button(
-                    id="region-nav-btn",
-                    text="View Deep Dive",
-                    icon="jump_to_element",
-                    variant="outlined",
-                    actions=vm.Action(
-                        function=nav_region("pg1_parameter_1"), outputs=["vizro_url.pathname", "vizro_url.search"]
-                    ),
-                ),
-            ],
-            layout=vm.Grid(grid=[[0], [0], [0], [0], [0], [1]], row_gap="8px"),
-            variant="filled",
+        create_chart_container_with_nav(
+            id="region_bar",
+            figure=create_lollipop_chart_by_region(superstore_df, value_col="Sales"),
+            nav_href="/regions",
         ),
-        vm.Container(
-            components=[
-                vm.Graph(
-                    id="bar_chart_by_segment",
-                    figure=create_bar_current_vs_previous_segment(superstore_df, value_col="Sales"),
-                ),
-                vm.Button(
-                    id="segment-nav-btn",
-                    text="View Deep Dive",
-                    icon="jump_to_element",
-                    variant="outlined",
-                    actions=vm.Action(function=nav_customer(), outputs=["vizro_url.pathname"]),
-                ),
-            ],
-            variant="filled",
-            layout=vm.Grid(grid=[[0], [0], [0], [0], [0], [1]], row_gap="8px"),
+        create_chart_container_with_nav(
+            id="segment_bar",
+            figure=create_bar_current_vs_previous_segment(superstore_df, value_col="Sales"),
+            nav_href="/customers",
         ),
-        vm.Container(
-            title="",
-            layout=vm.Grid(grid=[[0], [0], [0], [0], [0], [1]], row_gap="8px"),
-            components=[
-                vm.Graph(
-                    id="category_bar_chart",
-                    figure=create_bar_current_vs_previous_category(superstore_df, value_col="Sales"),
-                ),
-                vm.Button(
-                    id="customer-nav-btn",
-                    text="View Deep Dive",
-                    icon="jump_to_element",
-                    variant="outlined",
-                    actions=vm.Action(function=nav_product(), outputs=["vizro_url.pathname"]),
-                ),
-            ],
-            variant="filled",
+        create_chart_container_with_nav(
+            id="category_bar",
+            figure=create_bar_current_vs_previous_category(superstore_df, value_col="Sales"),
+            nav_href="/products",
         ),
     ],
     controls=[
         vm.Parameter(
-            id="pg1_parameter_1",
+            id="metric",
             selector=vm.RadioItems(
                 options=[
                     {"value": "Sales", "label": "Sales"},
@@ -234,8 +163,8 @@ page_1 = vm.Page(
                 "region_bar_chart.value_col",
                 "category_bar_chart.value_col",
                 "order_status_chart.value_col",
-                "line_chart_by_month.value_col",
-                "bar_chart_by_segment.value_col",
+                "line_month_chart.value_col",
+                "segment_bar_chart.value_col",
             ],
             show_in_url=True,
             visible=False,
@@ -260,7 +189,7 @@ page_1 = vm.Page(
     ),
 )
 
-page_2 = vm.Page(
+regions_page = vm.Page(
     title="Regions",
     components=[
         vm.Container(
@@ -334,7 +263,7 @@ page_2 = vm.Page(
     ],
 )
 
-page_3 = vm.Page(
+customers_page = vm.Page(
     title="Customers",
     components=[
         vm.Container(
@@ -369,7 +298,7 @@ page_3 = vm.Page(
 )
 
 
-page_4 = vm.Page(
+products_page = vm.Page(
     title="Products",
     components=[
         vm.Container(
@@ -447,7 +376,7 @@ page_4 = vm.Page(
     ],
 )
 
-page_5 = vm.Page(
+orders_page = vm.Page(
     title="Orders",
     layout=vm.Flex(),
     components=[
@@ -496,7 +425,7 @@ navigation = vm.Navigation(
 
 dashboard = vm.Dashboard(
     title="Superstore dashboard",
-    pages=[page_1, page_2, page_3, page_4, page_5],
+    pages=[overview_page, regions_page, customers_page, products_page, orders_page],
     navigation=navigation,
     theme="vizro_light",
 )

assets/css/custom.css

@@ -34,7 +34,7 @@
   font-size: 14px;
 }
 
-#pg1-container-1.container-fluid {
+#kpi-cards.container-fluid {
   gap: 0;
 }