Merge branch 'main' into feature/enable_kwargs

.github/workflows/build-vizro-whl.yml

@@ -8,7 +8,7 @@ on:
       - main
     paths:
       - "vizro-core/**"
-      - "vizro-ai/examples/**"
+      - "vizro-ai/**"
 
 defaults:
   run:
@@ -30,25 +30,44 @@ jobs:
         run: pip install hatch
       - name: Build vizro-core package
         run: hatch build -t wheel
-      - name: Upload artifact
+      - name: Upload vizro-core artifact
         uses: actions/upload-artifact@v4
         with:
           name: pip
           path: vizro-core/dist/*.whl
           retention-days: 14
+      - name: Build vizro-ai package
+        working-directory: vizro-ai
+        run: hatch build -t wheel
+      - name: Upload vizro-ai artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: pip2
+          path: vizro-ai/dist/*.whl
+          retention-days: 14
       # The below can be commented out in order to dry run the test creation of the PyCafe links
       # Once satisfied, comment them again, because the actual links will be created by the pycafe-dashboards.yml workflow
       # which is run from the main branch
       ############### Start of PyCafe links creation ###############
+      # - name: Install Playwright and browser
+      #   run: |
+      #     hatch run pip install playwright
+      #     hatch run playwright install --with-deps chromium
+      # - name: Install vizro-ai in editable mode # This makes vizro-ai present in env to get the version
+      #   run: |
+      #     hatch run pip install -e ../vizro-ai
       # - name: Print PR Number
       #   run: |
       #     echo "Pull Request Number: ${{ github.event.workflow_run.pull_requests[0].number }}"
+      # - name: Test PyCafe links
+      #   run: |
+      #     hatch run python ../tools/pycafe/test_pycafe_links.py --github-token ${{ github.token }} --repo-name ${{ github.repository }} --run-id ${{ github.run_id }} --commit-sha ${{ github.sha }}
       # - name: Create PyCafe links
       #   run: |
       #     PR_NUMBER=${{ github.event.workflow_run.pull_requests[0].number || '' }}
       #     if [ -n "$PR_NUMBER" ]; then
-      #       hatch run python ../tools/pycafe/create_pycafe_links.py --github-token ${{ github.token }} --repo-name ${{ github.repository }} --pr-number $PR_NUMBER --run-id ${{ github.run_id }} --commit-sha ${{ github.sha }}
+      #       hatch run python ../tools/pycafe/create_pycafe_links_comments.py --github-token ${{ github.token }} --repo-name ${{ github.repository }} --pr-number $PR_NUMBER --run-id ${{ github.run_id }} --commit-sha ${{ github.sha }}
       #     else
-      #       hatch run python ../tools/pycafe/create_pycafe_links.py --github-token ${{ github.token }} --repo-name ${{ github.repository }} --run-id ${{ github.run_id }} --commit-sha ${{ github.sha }}
+      #       hatch run python ../tools/pycafe/create_pycafe_links_comments.py --github-token ${{ github.token }} --repo-name ${{ github.repository }} --run-id ${{ github.run_id }} --commit-sha ${{ github.sha }}
       #     fi
-      ############### End of PyCafe links creation ###############
+      ############## End of PyCafe links creation ###############

.github/workflows/checks-vizro-ai.yml

@@ -41,6 +41,9 @@ jobs:
       - name: Show dependency tree
         run: hatch run pip tree
 
+      - name: Install vizro-core to check compatibility with vizro-ai
+        run: hatch run pip install ../vizro-core
+
       - name: Find changed files to see if changelog fragment needed
         id: changed-files
         if: ${{ github.event_name == 'pull_request' }}

.github/workflows/checks-vizro-core.yml

@@ -47,6 +47,9 @@ jobs:
       - name: Check plotly template is up to date
         run: hatch run templates-check
 
+      - name: Install vizro-ai to check compatibility with vizro-core
+        run: hatch run pip install ../vizro-ai
+
       - name: Find changed files to see if changelog fragment needed
         id: changed-files
         if: ${{ github.event_name == 'pull_request' }}

.github/workflows/pycafe-dashboards.yml

@@ -1,4 +1,4 @@
-name: PyCafe Playground Link
+name: PyCafe Playground Links
 
 on:
   workflow_run:
@@ -27,6 +27,10 @@ jobs:
         run: |
           hatch run pip install playwright
           hatch run playwright install --with-deps chromium
+      # Below: only to have access to vizro-ai latest version in the test_pycafe_links.py and create_pycafe_links_comments.py scripts
+      - name: Install vizro-ai in editable mode to check compatibility with vizro-core and get the version
+        run: |
+          hatch run pip install ../vizro-ai
       - name: Print PR Number
         run: |
           echo "Pull Request Number: ${{ github.event.workflow_run.pull_requests[0].number }}"

tools/pycafe/pycafe_utils.py

@@ -10,6 +10,7 @@
 
 import requests
 import vizro
+import vizro_ai
 from github import Auth, Github
 from github.Commit import Commit
 from github.Repository import Repository
@@ -27,6 +28,7 @@ class PyCafeConfig:
     pycafe_url: str = "https://py.cafe"
     vizro_raw_url: str = "https://raw.githubusercontent.com/mckinsey/vizro"
     package_version: str = vizro.__version__
+    vizro_ai_package_version: str = vizro_ai.__version__
 
 
 def create_github_client(config: PyCafeConfig) -> tuple[Repository, Commit]:
@@ -48,6 +50,16 @@ def _get_vizro_requirement(config: PyCafeConfig, use_latest_release: bool = Fals
     )
 
 
+def _get_vizro_ai_requirement(config: PyCafeConfig, use_latest_release: bool = False) -> str:
+    """Get the Vizro AI requirement string for PyCafe."""
+    if use_latest_release:
+        return "vizro-ai"
+    return (
+        f"{config.pycafe_url}/gh/artifact/mckinsey/vizro/actions/runs/{config.run_id}/"
+        f"pip2/vizro_ai-{config.vizro_ai_package_version}-py3-none-any.whl"
+    )
+
+
 def _fetch_app_content(base_url: str) -> str:
     """Fetch and process app.py content from the repository."""
     response = requests.get(f"{base_url}/app.py", timeout=10)
@@ -80,12 +92,18 @@ def generate_link(
     base_url = f"{config.vizro_raw_url}/{config.commit_sha}/{directory_path}"
 
     # Requirements - either use latest release or commit's wheel file
-    requirements = "\n".join(
-        [
-            _get_vizro_requirement(config, use_latest_release),
-            *(extra_requirements or []),
-        ]
-    )
+    requirements = []
+    if directory_path.startswith("vizro-ai/"):
+        # An example in this folder may require the latest vizro-ai and vizro-core releases
+        requirements.extend(
+            [_get_vizro_ai_requirement(config, use_latest_release), _get_vizro_requirement(config, use_latest_release)]
+        )
+    else:
+        # All other examples do not require vizro-ai, but still the latest vizro-core release
+        requirements.extend([_get_vizro_requirement(config, use_latest_release)])
+
+    if extra_requirements:
+        requirements.extend(extra_requirements)
 
     # App file - get current commit, and modify to remove if clause
     app_content = _fetch_app_content(base_url)
@@ -96,7 +114,7 @@ def generate_link(
     # JSON object
     json_object = {
         "code": app_content,
-        "requirements": requirements,
+        "requirements": "\n".join(requirements),
         "files": [
             {
                 "name": file["path"].removeprefix(f"{directory_path}"),
@@ -125,9 +143,14 @@ def generate_comparison_links(
     }
 
 
-def create_status_check(commit: Commit, directory: str, url: str, state: str = "success"):
+def create_status_check(
+    commit: Commit,
+    directory: str,
+    url: str,
+    state: str = "success",
+    description: str = "Test out the app live on PyCafe",
+):
     """Create a GitHub status check for a PyCafe link."""
-    description = "Test out the app live on PyCafe"
     context = f"PyCafe Example ({directory})"
     commit.create_status(state=state, target_url=url, description=description, context=context)
     print(f"Status created for {context} with URL: {url}")  # noqa
@@ -146,7 +169,6 @@ def get_example_directories() -> dict[str, Optional[list[str]]]:
         ],
         "vizro-core/examples/tutorial/": None,
         "vizro-ai/examples/dashboard_ui/": [
-            "vizro-ai>=0.3.0",
             "black",
             "openpyxl",
             "langchain_anthropic",

tools/pycafe/test_pycafe_links.py

@@ -24,7 +24,7 @@ def test_pycafe_link(url: str, wait_for_text: str):
 
             # Get the app frame and wait for title
             frame = page.frame_locator("#app")
-            frame.get_by_text(wait_for_text).wait_for()
+            frame.get_by_text(wait_for_text).wait_for(timeout=90000)
 
             print(f"✅ Successfully verified PyCafe link: {url}")  # noqa
             return True
@@ -70,7 +70,13 @@ def test_pycafe_link(url: str, wait_for_text: str):
     # Only create a status check if the test fails. On success, the status check will be created
     # by the create_pycafe_links_comments.py script when it posts the comment.
     if not success:
-        create_status_check(commit, dev_directory, url_generated, state="failure")
+        create_status_check(
+            commit,
+            dev_directory,
+            url_generated,
+            state="failure",
+            description="Check if PyCafe links load properly (using vizro-core dev example)",
+        )
 
     # Exit with appropriate status code
     sys.exit(0 if success else 1)

vizro-core/changelog.d/20250304_201419_huong_li_nguyen_add_minor_visual_changes.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
+
+- Turn `AgGrid` background transparent. ([#1047](https://github.com/mckinsey/vizro/pull/1047))
+
+
+<!--
+### 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/changelog.d/20250306_110149_maximilian_schulz_test_vizro_ai_in_pycafe.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/custom-tables.md

@@ -38,7 +38,7 @@ The following examples show a possible version of a custom table. In this case t
                 "style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
                 "style_header": {
                     "border_bottom": "1px solid var(--stateOverlays-selectedHover)",
-                    "border_top": "1px solid var(--right-side-bg)",
+                    "border_top": "None",
                     "height": "32px",
                 },
             }

vizro-core/examples/dev/app.py

@@ -609,7 +609,7 @@ def my_custom_table(data_frame=None, chosen_columns: Optional[list[str]] = None)
         "style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
         "style_header": {
             "border_bottom": "1px solid var(--stateOverlays-selectedHover)",
-            "border_top": "1px solid var(--right-side-bg)",
+            "border_top": "None",
             "height": "32px",
         },
     }

vizro-core/examples/scratch_dev/app.py

@@ -5,6 +5,7 @@
 import vizro.models as vm
 import vizro.plotly.express as px
 from vizro import Vizro
+from vizro.tables import dash_data_table
 
 iris = px.data.iris()
 
@@ -55,6 +56,7 @@
 page_dropdown = vm.Page(
     title="Dropdown",
     components=[
+        vm.Table(figure=dash_data_table(iris)),
         vm.Container(
             title="Dropdown examples",
             components=[

vizro-core/src/vizro/models/_components/ag_grid.py

@@ -121,6 +121,8 @@ def pre_build(self):
         self._input_component_id = self.figure._arguments.get("id", f"__input_{self.id}")
 
     def build(self):
+        # Most of the theming in AgGrid is controlled through CSS in `aggrid.css`. However, this callback is necessary
+        # to ensure that all grid elements, such as menu icons and filter icons, are consistent with the theme.
         clientside_callback(
             ClientsideFunction(namespace="dashboard", function_name="update_ag_grid_theme"),
             Output(self._input_component_id, "className"),

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

@@ -1,11 +1,11 @@
 .ag-theme-quartz.ag-theme-vizro,
 .ag-theme-quartz-dark.ag-theme-vizro {
   --ag-active-color: var(--stateOverlays-selectedHover);
-  --ag-background-color: var(--right-side-bg);
-  --ag-odd-row-background-color: var(--right-side-bg);
+  --ag-background-color: transparent;
+  --ag-odd-row-background-color: transparent;
   --ag-header-foreground-color: var(--text-secondary);
   --ag-data-color: var(--text-primary);
-  --ag-header-background-color: var(--right-side-bg);
+  --ag-header-background-color: transparent;
   --ag-icon-font-family: aggridquartz;
   --ag-icon-size: 0.875rem;
   --ag-row-height: 48px;

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

@@ -42,8 +42,9 @@ All the HEX values starting with --text-code are taken from the Github code high
 
 /* CARDS */
 .card {
-  height: 100%;
-  width: 100%;
+  height: calc(100% - 8px);
+  margin: 4px;
+  width: calc(100% - 8px);
 }
 
 .card .nav-link {

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

@@ -24,6 +24,7 @@
 
 #left-side {
   background-color: var(--left-side-bg);
+  border-right: 1px solid var(--bs-border-color);
   display: flex;
   flex-direction: row;
   height: 100%;

vizro-core/src/vizro/tables/_dash_table.py

@@ -34,7 +34,7 @@ def dash_data_table(data_frame: pd.DataFrame, **kwargs: Any) -> dash_table.DataT
         "style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
         "style_header": {
             "border_bottom": "1px solid var(--stateOverlays-selectedHover)",
-            "border_top": "1px solid var(--right-side-bg)",
+            "border_top": "None",
             "height": "32px",
         },
         "style_data_conditional": [