Add docs and unit tests for dashboard logo (#278)

vizro-core/changelog.d/20240123_131012_nadija_ratkusic_graca_logo.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/docs/pages/user_guides/assets.md

@@ -16,6 +16,7 @@ The user-provided `assets` folder thus always takes precedence.
 │       ├── icons
 │           ├── collections.svg
 │       ├── app.svg
+│       ├── logo.svg
 │   ├── favicon.ico
 ```
 
@@ -185,3 +186,9 @@ clients. To include an image in the preview, place an image file in the assets f
 `logo.<extension>`. Vizro searches the assets folder and uses the first one it finds.
 
 Image types of `apng`, `avif`, `gif`, `jpeg`, `jpg`, `png`, `svg`, and `webp` are supported.
+
+## Logo image
+
+Vizro will automatically incorporate the dashboard logo in the top-left corner of each page if an image named `logo.<extension>` is present within the assets folder.
+
+Image types of `apng`, `avif`, `gif`, `jpeg`, `jpg`, `png`, `svg`, and `webp` are supported.

vizro-core/docs/pages/user_guides/components.md

@@ -37,5 +37,3 @@ listed below to fill your dashboard with visuals.
     Use containers to group your page components into sections and subsections.
 
     [:octicons-arrow-right-24: View User Guide](container.md)
-
-</div>

vizro-core/docs/pages/user_guides/dashboard.md

@@ -188,6 +188,12 @@ After running the dashboard, you can access the dashboard via `localhost:8050`.
 If supplied, the `title` of the [`Dashboard`][vizro.models.Dashboard] displays a heading at the top of every page.
 
 
+## Adding a dashboard logo
+
+Vizro will automatically incorporate the dashboard [logo](assets.md/#logo-image) in the top-left corner of each page if an image named `logo.<extension>` is present within the assets folder.
+
+![Dashboard with logo](../../assets/user_guides/dashboard/dashboard_with_logo.png)
+
 ## Browser title
 
 The [website icon](assets.md/#changing-the-favicon), Dashboard `title` (if supplied) and [Page `title`][vizro.models.Page] are displayed in the browser's

vizro-core/docs/pages/user_guides/graph.md

@@ -65,7 +65,7 @@ To add a [`Graph`][vizro.models.Graph] to your page, do the following:
     === "Result"
         [![Graph]][Graph]
 
-    [Graph]: ../../assets/user_guides/components/graph1.png
+    [Graph]: ../../assets/user_guides/components/graph.png
 
 Note that in the above example we directly inserted the chart into the `figure` argument for the `.py` version. This is also the simplest way to connect your chart to a Pandas `DataFrame` - for other connections, please refer to [this guide on data connections](data.md). For the `yaml` version, we simply referred to the [`plotly.express`](https://plotly.com/python/plotly-express/) name by string.
 

vizro-core/docs/pages/user_guides/table.md

@@ -40,7 +40,6 @@ setting some defaults for some of the arguments to help with styling.
             components=[
                 vm.Table(title="Dash DataTable", figure=dash_data_table(data_frame=df)),
             ],
-            controls=[vm.Filter(column="continent")],
         )
         dashboard = vm.Dashboard(pages=[page])
 
@@ -57,9 +56,6 @@ setting some defaults for some of the arguments to help with styling.
               data_frame: gapminder_2007
             title: Dash DataTable
             type: table
-          controls:
-            - column: continent
-              type: filter
           title: Example of a Dash DataTable
         ```
     === "Result"
@@ -130,7 +126,6 @@ an example of a styled table where some conditional formatting is applied. There
                     ),
                 ),
             ],
-            controls=[vm.Filter(column="continent")],
         )
         dashboard = vm.Dashboard(pages=[page])
 
@@ -190,9 +185,6 @@ an example of a styled table where some conditional formatting is applied. There
                       backgroundColor: rgba(0, 116, 217, 0.3)
                       border: 1px solid rgb(0, 116, 217)
                 type: table
-            controls:
-              - column: continent
-                type: filter
             title: Dash DataTable
 
         ```

vizro-core/mkdocs.yml

@@ -6,39 +6,39 @@ nav:
       - Quickstart: pages/tutorials/first_dashboard.md
       - Explore Vizro: pages/tutorials/explore_components.md
   - User Guides:
-      - Fundamentals:
+      - FUNDAMENTALS:
           - Install: pages/user_guides/install.md
           - Dashboards: pages/user_guides/dashboard.md
           - Pages: pages/user_guides/pages.md
           - Run Methods: pages/user_guides/run.md
-      - Components:
+      - COMPONENTS:
           - Overview: pages/user_guides/components.md
           - Graphs: pages/user_guides/graph.md
           - Tables: pages/user_guides/table.md
           - Cards & Buttons: pages/user_guides/card_button.md
           - Containers: pages/user_guides/container.md
 
-      - Controls:
+      - CONTROLS:
           - Filters: pages/user_guides/filters.md
           - Parameters: pages/user_guides/parameters.md
           - Selectors: pages/user_guides/selectors.md
-      - Navigation:
+      - NAVIGATION:
           - Navigation: pages/user_guides/navigation.md
-      - Visual Formatting:
+      - VISUAL FORMATTING:
           - Layouts: pages/user_guides/layouts.md
           - Themes: pages/user_guides/themes.md
           - Assets: pages/user_guides/assets.md
-      - Actions:
+      - ACTIONS:
           - Actions: pages/user_guides/actions.md
-      - Data Connections:
+      - DATA CONNECTIONS:
           - Data: pages/user_guides/data.md
           - Integrations: pages/user_guides/integration.md
-      - Extensions:
+      - EXTENSIONS:
           - Custom Charts: pages/user_guides/custom_charts.md
           - Custom Tables: pages/user_guides/custom_tables.md
           - Custom Components: pages/user_guides/custom_components.md
           - Custom Actions: pages/user_guides/custom_actions.md
-  - API reference:
+  - API Reference:
       - Vizro: pages/API_reference/vizro.md
       - Models: pages/API_reference/models.md
       - Data Manager: pages/API_reference/manager.md

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

@@ -156,6 +156,31 @@ def test_page_registry_with_image(self, page_1, mocker, tmp_path, image_path):
             layout=mocker.ANY,  # partial call is tricky to mock out so we ignore it.
         )
 
+    # TODO: Move the test to `TestDashboardBuild` once asset_component_equal is implemented for dashboard build method
+    @pytest.mark.parametrize(
+        "image_path",
+        [
+            "logo.svg",
+            "logo.png",
+            "logo.apng",
+            "logo.avif",
+            "logo.gif",
+            "logo.jpeg",
+            "logo.jpg",
+            "logo.webp",
+            "images/logo.svg",
+        ],
+    )
+    def test_infer_image(self, page_1, tmp_path, image_path):
+        if Path(image_path).parent != Path("."):
+            Path(tmp_path / image_path).parent.mkdir()
+
+        Path(tmp_path / image_path).touch()
+        Vizro(assets_folder=tmp_path)
+        vm.Dashboard(pages=[page_1]).pre_build()
+
+        assert_component_equal(vm.Dashboard._infer_image("logo"), image_path)
+
     def test_page_registry_with_images(self, page_1, mocker, tmp_path):
         Path(tmp_path / "app.svg").touch()
         Path(tmp_path / "logo.svg").touch()