Swap dictionary keys and values for pages

Change dictionary structure to use icons as keys and page objects as values.
Also extract container definitions for regions and products pages to improve readability.

🤖 Generated with Claude Code

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

app.py

@@ -147,197 +147,177 @@ overview_page = vm.Page(
     ],
 )
 
+region_map_container = vm.Container(
+    components=[
+        vm.Graph(
+            id="region_map_chart",
+            header="💡 Click on a state to filter ranked bars on the right.",
+            figure=create_map_bubble_new(superstore_df, value_col="Sales", custom_data=["State_Code"]),
+            actions=va.set_control(control="state_filter", value="State_Code"),
+        )
+    ],
+    variant="filled",
+)
+top_rank_bars_container = vm.Container(
+    components=[vm.Graph(id="top_rank_bars", figure=bar_chart_top_n(superstore_df, x="Sales", y="City"))],
+    controls=[
+        vm.Parameter(
+            targets=["top_rank_bars.top_n"],
+            selector=vm.Slider(min=5, max=30, step=5, value=20, title="Choose top N"),
+        ),
+        vm.Parameter(
+            selector=vm.RadioItems(
+                options=["City", "Customer Name", "Sub-Category"],
+                title="Choose y-axis",
+            ),
+            targets=["top_rank_bars.y"],
+        ),
+    ],
+    variant="filled",
+)
 regions_page = vm.Page(
     title="Regions",
     components=[
         vm.Container(
             layout=vm.Grid(grid=[[0, 1]]),
-            components=[
-                vm.Container(
-                    components=[
-                        vm.Graph(
-                            id="region_map_chart",
-                            header="💡 Click on a state to filter charts on the right.",
-                            figure=create_map_bubble_new(superstore_df, value_col="Sales", custom_data=["State_Code"]),
-                            actions=va.set_control(control="state_filter", value="State_Code"),
-                        )
-                    ],
-                    variant="filled",
-                ),
-                vm.Container(
-                    components=[vm.Graph(id="pg2-chart-1", figure=bar_chart_top_n(superstore_df, x="Sales", y="City"))],
-                    controls=[
-                        vm.Parameter(
-                            targets=["pg2-chart-1.top_n"],
-                            selector=vm.Slider(min=5, max=30, step=5, value=20, title="Choose top N"),
-                        ),
-                        vm.Parameter(
-                            selector=vm.RadioItems(
-                                options=["City", "Customer Name", "Sub-Category"],
-                                title="Choose y-axis",
-                            ),
-                            targets=["pg2-chart-1.y"],
-                        ),
-                    ],
-                    variant="filled",
-                ),
-            ],
+            components=[region_map_container, top_rank_bars_container],
             controls=[
-                vm.Filter(
-                    id="state_filter",
-                    column="State_Code",
-                    visible=False,
-                ),
+                vm.Filter(id="state_filter", column="State_Code", visible=False),
                 vm.Filter(column="Segment", selector=vm.Checklist(title="Choose segment")),
                 vm.Filter(column="Category", selector=vm.Checklist(title="Choose category")),
                 vm.Parameter(
-                    selector=vm.RadioItems(
-                        options=["Sales", "Profit"],
-                        title="Choose metric",
-                    ),
-                    targets=[
-                        "region_map_chart.value_col",
-                        "pg2-chart-1.x",
-                    ],
+                    selector=vm.RadioItems(options=["Sales", "Profit"], title="Choose metric"),
+                    targets=["region_map_chart.value_col", "top_rank_bars.x"],
                 ),
             ],
         )
     ],
 )
 
-customers_page = vm.Page(
-    title="Customers",
+# TODO: highlight state instead of filter?
+
+product_category_container = vm.Container(
     components=[
-        vm.Container(
-            layout=vm.Grid(grid=[[0, 1]]),
-            components=[
-                vm.AgGrid(
-                    id="table-2",
-                    header="💡 Click on a row to highlight the customer.",
-                    figure=dash_ag_grid(
-                        aggrid_df,
-                        columnDefs=COLUMN_DEFS_CUSTOMERS,
-                    ),
-                    actions=va.set_control(control="pg3_parameter_1", value="Customer Name"),
-                ),
-                vm.Graph(id="pg3_pareto_chart", figure=pareto_customers_chart(superstore_df, highlight_customer=None)),
-            ],
-            controls=[
-                vm.Filter(column="Region", selector=vm.Checklist(title="Choose region")),
-                vm.Filter(column="Segment", selector=vm.Checklist(title="Choose segment")),
-                vm.Filter(column="Category", selector=vm.Checklist(title="Choose category")),
-            ],
+        vm.Graph(
+            id="product_category_bar",
+            figure=bar_chart_by_category(superstore_df, custom_data=["Category"]),
+            actions=va.set_control(control="product_category_filter", value="Category"),
         )
     ],
     controls=[
-        vm.Parameter(
-            id="pg3_parameter_1",
-            targets=["pg3_pareto_chart.highlight_customer"],
-            selector=vm.Dropdown(options=customer_name, value="NONE", multi=False),
+        vm.Filter(
+            id="product_category_filter",
+            column="Category",
+            targets=["product_category_bar"],
+            selector=vm.Checklist(),
             visible=False,
         )
     ],
+    variant="filled",
 )
 
+product_table_container = vm.Container(
+    components=[
+        vm.AgGrid(
+            header="💡 Click on a row to highlight the data point in the matrix on the right.",
+            figure=dash_ag_grid(superstore_product_df, columnDefs=COLUMN_DEFS_PRODUCT),
+            actions=va.set_control(control="quadrant_subcategory", value="Sub-Category"),
+        )
+    ],
+    variant="filled",
+)
+
+profit_vs_sales_container = vm.Container(
+    components=[
+        vm.Graph(
+            id="profit_vs_sales_quadrant",
+            figure=scatter_with_quadrants(
+                data_frame=superstore_product_df,
+                x="Sales",
+                y="Profit",
+                custom_data=["Sub-Category"],
+            ),
+        )
+    ],
+    controls=[
+        vm.Parameter(
+            id="quadrant_subcategory",
+            targets=["profit_vs_sales_quadrant.highlight_sub_category"],
+            selector=vm.Dropdown(options=subcategories, value="NONE", multi=False),
+            visible=False,
+        ),
+    ],
+    variant="filled",
+)
+
+# TODO: fill vm.Container helper?
+# TODO: bar chart into histogram
+# TODO: fix quadrant highlight
 
 products_page = vm.Page(
     title="Products",
     components=[
         vm.Container(
-            layout=vm.Grid(grid=[[0, 0, 2, 2], [1, 1, 2, 2], [1, 1, 2, 2]]),
+            layout=vm.Grid(grid=[[0, 2], [1, 2], [1, 2]]),
+            components=[product_category_container, product_table_container, profit_vs_sales_container],
+        )
+    ],
+)
+
+customers_page = vm.Page(
+    title="Customers",
+    components=[
+        vm.Container(
+            layout=vm.Grid(grid=[[0, 1]]),
             components=[
-                vm.Container(
-                    components=[
-                        vm.Graph(
-                            id="pg4-chart-1",
-                            figure=bar_chart_by_category(superstore_df, custom_data=["Category"]),
-                            actions=va.set_control(control="pg4-filter-1", value="Category"),
-                        )
-                    ],
-                    variant="filled",
-                ),
-                vm.Container(
-                    components=[
-                        vm.AgGrid(
-                            id="table",
-                            header="💡 Click on a row to highlight the data point in the matrix on the right.",
-                            figure=dash_ag_grid(superstore_product_df, columnDefs=COLUMN_DEFS_PRODUCT),
-                            actions=va.set_control(control="pg4_parameter_1", value="Sub-Category"),
-                        )
-                    ],
-                    variant="filled",
+                vm.AgGrid(
+                    header="💡 Click on a row to highlight the customer.",
+                    figure=dash_ag_grid(aggrid_df, columnDefs=COLUMN_DEFS_CUSTOMERS),
+                    actions=va.set_control(control="customer_parameter", value="Customer Name"),
                 ),
-                vm.Container(
-                    components=[
-                        vm.Graph(
-                            id="pg4-chart-3",
-                            figure=scatter_with_quadrants(
-                                data_frame=superstore_product_df,
-                                x="Sales",
-                                y="Profit",
-                                custom_data=["Sub-Category"],
-                            ),
-                        )
-                    ],
-                    variant="filled",
+                vm.Graph(id="pareto_chart", figure=pareto_customers_chart(superstore_df, highlight_customer=None)),
+            ],
+            controls=[
+                vm.Filter(column="Region", selector=vm.Checklist(title="Choose region")),
+                vm.Filter(column="Segment", selector=vm.Checklist(title="Choose segment")),
+                vm.Filter(column="Category", selector=vm.Checklist(title="Choose category")),
+                vm.Parameter(
+                    id="customer_parameter",
+                    targets=["pareto_chart.highlight_customer"],
+                    selector=vm.Dropdown(options=customer_name, value="NONE", multi=False),
+                    visible=False,
                 ),
             ],
         )
     ],
-    controls=[
-        vm.Filter(
-            id="pg4-filter-1",
-            column="Category",
-            targets=["pg4-chart-1"],
-            selector=vm.Checklist(title="Product Category"),
-            visible=False,
-        ),
-        # vm.Filter(
-        #     column="Category / Sub-Category",
-        #     targets=["pg4-chart-3"],
-        #     selector=vm.Dropdown(multi=False, value="Technology / Phones"),
-        # ),
-        vm.Parameter(
-            id="pg4_parameter_1",
-            targets=["pg4-chart-3.highlight_sub_category"],
-            selector=vm.Dropdown(options=subcategories, value="NONE", multi=False),
-            visible=False,
-        ),
-    ],
 )
 
 orders_page = vm.Page(
     title="Orders",
     layout=vm.Flex(),
     components=[
-        vm.AgGrid(id="table_id", figure=custom_orders_aggrid(superstore_df)),
-        vm.Button(
-            text="Export data", icon="download", actions=va.export_data(targets=["table_id"], file_format="xlsx")
-        ),
+        vm.AgGrid(figure=custom_orders_aggrid(superstore_df)),
+        vm.Button(text="Export data", icon="download", actions=va.export_data(file_format="xlsx")),
     ],
 )
 
 
 pages = {
-    overview_page: "Home",
-    regions_page: "Globe Asia",
-    products_page: "Barcode",
-    customers_page: "Group",
-    orders_page: "Shopping Cart",
+    "Home": overview_page,
+    "Globe Asia": regions_page,
+    "Barcode": products_page,
+    "Group": customers_page,
+    "Shopping Cart": orders_page,
 }
 
 navigation = vm.Navigation(
-    pages=[page.title for page in pages.keys()],
     nav_selector=vm.NavBar(
-        items=[vm.NavLink(pages=[page.title], label=page.title, icon=icon) for page, icon in pages.items()]
+        items=[vm.NavLink(pages=[page.id], label=page.title, icon=icon) for icon, page in pages.items()]
     ),
 )
 
 dashboard = vm.Dashboard(
-    title="Superstore dashboard",
-    pages=list(pages.keys()),
-    navigation=navigation,
-    theme="vizro_light",
+    title="Superstore dashboard", pages=list(pages.values()), navigation=navigation, theme="vizro_light"
 )
 
 app = Vizro().build(dashboard)