Update settings container and add codeowners

CODEOWNERS

@@ -1,2 +1,3 @@
 * @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL @lingyielia
 docs/ @stichbury @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL
+*.css @huong-li-nguyen @nadijagraca

vizro-core/examples/scratch_dev/app.py

@@ -1,89 +1,40 @@
 """Dev app to try things out."""
 
 from vizro import Vizro
-import vizro.models as vm
 import vizro.plotly.express as px
+import vizro.models as vm
+from typing import Literal
+from dash import html, get_asset_url
+import dash_bootstrap_components as dbc
 
-df = px.data.gapminder()
-gapminder_data = (
-    df.groupby(by=["continent", "year"]).agg({"lifeExp": "mean", "pop": "sum", "gdpPercap": "mean"}).reset_index()
-)
-first_page = vm.Page(
-    title="First Page",
-    layout=vm.Layout(grid=[[0, 0], [1, 2], [1, 2], [1, 2]]),
-    components=[
-        vm.Card(
-            text="""
-                # First dashboard page
-                This pages shows the inclusion of markdown text in a page and how components
-                can be structured using Layout.
-            """,
-        ),
-        vm.Graph(
-            id="box_cont",
-            figure=px.box(
-                gapminder_data,
-                x="continent",
-                y="lifeExp",
-                color="continent",
-                labels={"lifeExp": "Life Expectancy", "continent": "Continent"},
-            ),
-        ),
-        vm.Graph(
-            id="line_gdp",
-            figure=px.line(
-                gapminder_data,
-                x="year",
-                y="gdpPercap",
-                color="continent",
-                labels={"year": "Year", "continent": "Continent", "gdpPercap": "GDP Per Cap"},
-            ),
-        ),
-    ],
-    controls=[
-        vm.Filter(column="continent", targets=["box_cont", "line_gdp"]),
-    ],
-)
+# Create a custom component based on vm.Dashboard.
+# See: https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-components/#extend-an-existing-component
+class CustomDashboard(vm.Dashboard):
+    """Custom implementation of `Dashboard`."""
 
-iris_data = px.data.iris()
-second_page = vm.Page(
-    title="Second Page",
-    components=[
-        vm.Graph(
-            id="scatter_iris",
-            figure=px.scatter(
-                iris_data,
-                x="sepal_width",
-                y="sepal_length",
-                color="species",
-                color_discrete_map={"setosa": "#00b4ff", "versicolor": "#ff9222"},
-                labels={"sepal_width": "Sepal Width", "sepal_length": "Sepal Length", "species": "Species"},
-            ),
-        ),
-        vm.Graph(
-            id="hist_iris",
-            figure=px.histogram(
-                iris_data,
-                x="sepal_width",
-                color="species",
-                color_discrete_map={"setosa": "#00b4ff", "versicolor": "#ff9222"},
-                labels={"sepal_width": "Sepal Width", "count": "Count", "species": "Species"},
-            ),
-        ),
-    ],
+    type: Literal["custom_dashboard"] = "custom_dashboard"
+
+    def _make_page_layout(self, *args, **kwargs):
+        super_build_obj = super()._make_page_layout(*args, **kwargs)
+        # We access the container with id="settings", where the theme switch is placed and add the H4.
+        # You can see what's inside the settings.children container here: https://github.com/mckinsey/vizro/blob/main/vizro-core/src/vizro/models/_dashboard.py
+        super_build_obj["settings"].children = [
+            html.H4("Good morning, Li! ☕", style={"margin-bottom": "0"}),
+            super_build_obj["settings"].children
+        ]
+        return super_build_obj
+
+
+# Test app -----------------
+page = vm.Page(
+    title="Page Title",
+    components=[vm.Graph(figure=px.box(px.data.iris(), x="species", y="petal_width", color="species"))],
     controls=[
-        vm.Parameter(
-            targets=["scatter_iris.color_discrete_map.virginica", "hist_iris.color_discrete_map.virginica"],
-            selector=vm.Dropdown(options=["#ff5267", "#3949ab"], multi=False, value="#3949ab", title="Color Virginica"),
-        ),
-        vm.Parameter(
-            targets=["scatter_iris.opacity"],
-            selector=vm.Slider(min=0, max=1, value=0.8, title="Opacity"),
-        ),
+        vm.Filter(column="species"),
+        vm.Filter(column="sepal_length"),
     ],
 )
-
-dashboard = vm.Dashboard(pages=[first_page, second_page])
+dashboard = CustomDashboard(pages=[page])
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()

vizro-core/src/vizro/static/css/layout.css

@@ -5,6 +5,12 @@
   width: 100vw;
 }
 
+#settings {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 #left-main {
   align-items: flex-start;
   display: flex;