Merge branch 'main' of https://github.com/mckinsey/vizro into qa/comp…

…onent_library_tests

vizro-ai/changelog.d/20241112_202616_nadija_ratkusic_graca_add_risk_mitigation_links.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-ai/docs/pages/user-guides/customize-vizro-ai.md

@@ -1,6 +1,6 @@
 # Model usage
 
-This guide shows how to set up a large language model (LLM) for use with Vizro-AI. Setting up a LLM is required for the package to generate charts and dashboards based on natural language queries.
+This guide shows how to set up a large language model (LLM) for use with Vizro-AI. Setting up a LLM is required for the package to generate charts and dashboards based on natural language queries. To ensure responsible use, review the vendor’s guidelines on risk mitigation before using the model to understand potential model limitations and best practices.
 
 ## Supported models
 Vizro-AI supports **any** model that is available via [Langchain's `BaseChatModel` class](https://api.python.langchain.com/en/latest/language_models/langchain_core.language_models.chat_models.BaseChatModel.html#langchain_core.language_models.chat_models.BaseChatModel), and that has the [`with_structured_output` method](https://python.langchain.com/v0.2/docs/how_to/structured_output/#the-with_structured_output-method) implemented. An overview of the [most common vendor models supporting this functionality](https://python.langchain.com/v0.2/docs/integrations/chat/) can be found in Langchain's documentation. For ease of use one can also choose some models via a string parameter.
@@ -24,7 +24,8 @@ vizro_ai = VizroAI(model="<chosen model>")
     | API key           | `OPENAI_API_KEY`                      |
     | Base API URL      | `OPENAI_API_BASE`                     |
 
-    To use OpenAI with Vizro-AI, you must have an account with paid-for credits available. None of the free accounts will suffice. You can check [all available OpenAI models including pricing on their website](https://platform.openai.com/docs/models). This will also explain which version the below string acronyms currently point to.
+    To use OpenAI with Vizro-AI, you must have an account with paid-for credits available. None of the free accounts will suffice. [Check the OpenAI models and pricing on their website](https://platform.openai.com/docs/models). Before using a model, please review OpenAI's guidelines on risk mitigation to understand potential model limitations and best practices.
+    [See the OpenAI site for more details on responsible usage](https://platform.openai.com/docs/guides/safety-best-practices).
 
     - `gpt-4o-mini` **default**
     - `gpt-4-turbo`
@@ -39,7 +40,8 @@ vizro_ai = VizroAI(model="<chosen model>")
     | API key           | `ANTHROPIC_API_KEY`                       |
     | Base API URL      | `ANTHROPIC_API_URL`,`ANTHROPIC_BASE_URL`  |
 
-    To use Anthropic with Vizro-AI, you must have an account with paid-for credits available. None of the free accounts will suffice. You can check [all available Anthropic models including pricing on their website](https://docs.anthropic.com/en/docs/about-claude/models).
+    To use Anthropic with Vizro-AI, you must have an account with paid-for credits available. None of the free accounts will suffice. [Check the Anthropic models and pricing on their website](https://docs.anthropic.com/en/docs/about-claude/models). Before using a model, please review Anthropic guidelines on risk mitigation to understand potential model limitations and best practices.
+    [See the Anthropic site for more details on responsible usage](https://support.anthropic.com/en/collections/4078535-trust-safety/).
 
     - `claude-3-5-sonnet-latest`
     - `claude-3-opus-latest`
@@ -62,6 +64,8 @@ vizro_ai = VizroAI(model="<chosen model>")
     | Base API URL      | `MISTRAL_BASE_URL`                        |
 
     To use Mistral with Vizro-AI, you can either use their API, which comes with [an associated cost](https://mistral.ai/technology/#pricing), or you could use their models for free under the Apache 2.0 license. In that case you need to setup the model API yourself. You can check [all available Mistral models including pricing on their website](https://docs.mistral.ai/getting-started/models/models_overview). This will also explain which version the below string acronyms currently point to.
+    Before usage, please review Mistral guidelines on risk mitigation to understand potential model limitations and best practices.
+    [See the Mistral site for more details on responsible usage](https://help.mistral.ai/en/collections/272960-le-chat/).
 
     - `mistral-large-latest`
     - `open-mistral-nemo`

vizro-core/changelog.d/20241112_120233_huong_li_nguyen_fix_404_page.md

@@ -0,0 +1,47 @@
+<!--
+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
+
+- Fix 404 error page and page flickering on refresh ([#865](https://github.com/mckinsey/vizro/pull/865)).
+
+<!--
+### 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/src/vizro/_vizro.py

@@ -90,10 +90,6 @@ def build(self, dashboard: Dashboard):
             self: Vizro app
 
         """
-        # Note Dash.index uses self.dash.title instead of self.dash.app.config.title.
-        if dashboard.title:
-            self.dash.title = dashboard.title
-
         # Set global chart template to vizro_light or vizro_dark.
         # The choice between these is generally meaningless because chart colors in the two are identical, and
         # everything else gets overridden in the clientside theme selector callback.
@@ -108,9 +104,16 @@ def build(self, dashboard: Dashboard):
 
         # Note that model instantiation and pre_build are independent of Dash.
         self._pre_build()
-
         self.dash.layout = dashboard.build()
 
+        # Add data-bs-theme attribute that is always present, even for pages without theme selector,
+        # i.e. the Dash "Loading..." screen.
+        bootstrap_theme = dashboard.theme.removeprefix("vizro_")
+        self.dash.index_string = self.dash.index_string.replace("<html>", f"<html data-bs-theme='{bootstrap_theme}'>")
+
+        # Note Dash.index uses self.dash.title instead of self.dash.app.config.title.
+        if dashboard.title:
+            self.dash.title = dashboard.title
         return self
 
     def run(self, *args, **kwargs):  # if type annotated, mkdocstring stops seeing the class

vizro-core/src/vizro/models/_dashboard.py

@@ -302,14 +302,24 @@ def _make_page_layout(self, page: Page, **kwargs):
         page_layout.id = page.id
         return page_layout
 
-    @staticmethod
-    def _make_page_404_layout():
+    def _make_page_404_layout(self):
         # The svg file is available through the _dash-component-suites/vizro route, as used in Dash's
         # _relative_url_path, but that feels too private to access directly. Hence read the file in directly rather
         # than referring to its path.
         error_404_svg = base64.b64encode((VIZRO_ASSETS_PATH / "images/error_404.svg").read_bytes()).decode("utf-8")
         return html.Div(
             [
+                # Theme switch is added such that the 404 page has the same theme as the user-selected one.
+                html.Div(
+                    children=dmc.Switch(
+                        id="theme_selector",
+                        checked=self.theme == "vizro_light",
+                        persistence=True,
+                        persistence_type="session",
+                        className="toggle-switch",
+                    ),
+                    id="settings",
+                ),
                 html.Img(src=f"data:image/svg+xml;base64,{error_404_svg}"),
                 html.Div(
                     [

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

@@ -87,11 +87,10 @@
 
 .page-error-container {
   align-items: center;
-  background: var(--surfaces-bg-03);
   display: flex;
   flex-direction: column;
   height: 100vh;
-  padding: 64px;
+  justify-content: center;
   width: 100vw;
 }
 
@@ -242,3 +241,8 @@
     zoom: 80%;
   }
 }
+
+/* Hide Loading... text on loading page */
+._dash-loading {
+  display: none;
+}

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

@@ -2,6 +2,7 @@
 
 import dash
 import dash_bootstrap_components as dbc
+import dash_mantine_components as dmc
 import plotly.io as pio
 import pytest
 from asserts import assert_component_equal
@@ -239,10 +240,20 @@ def test_valid_logo_combinations(self, page_1, tmp_path, logo_files):
         Vizro(assets_folder=tmp_path)
         vm.Dashboard(pages=[page_1]).pre_build()
 
-    def test_make_page_404_layout(self, vizro_app):
+    def test_make_page_404_layout(self, page_1, vizro_app):
         # vizro_app fixture is needed to avoid mocking out get_relative_path.
         expected = html.Div(
             [
+                html.Div(
+                    children=dmc.Switch(
+                        id="theme_selector",
+                        checked=False,
+                        persistence=True,
+                        persistence_type="session",
+                        className="toggle-switch",
+                    ),
+                    id="settings",
+                ),
                 html.Img(),
                 html.Div(
                     [
@@ -263,7 +274,7 @@ def test_make_page_404_layout(self, vizro_app):
 
         # Strip out src since it's too long to be worth comparing and just comes directly
         # from reading a file.
-        assert_component_equal(vm.Dashboard._make_page_404_layout(), expected, keys_to_strip={"src"})
+        assert_component_equal(vm.Dashboard(pages=[page_1])._make_page_404_layout(), expected, keys_to_strip={"src"})
 
 
 class TestDashboardBuild: