✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

✅ PR preview is ready!

• [fix] Restore layered vconcat width propagation and add #13974 regression tests #13980 👈 (View in Graphite)
• develop

This stack of pull requests is managed by Graphite. Learn more about stacking.

Summary

This PR fixes a bug (#13974) where layered Altair charts inside vconcat compositions with autosize="fit-x" and width="stretch" weren't rendering properly. The root cause was in useVegaElementPreprocessor.ts, where vconcat children containing a layer key were being skipped during width propagation. Since layer is an overlay operator (not a concatenation operator), it can safely receive a width value. The fix removes "layer" in child from the skip condition, and adds both unit and E2E regression tests.

Files changed:

• frontend/lib/src/components/elements/ArrowVegaLiteChart/useVegaElementPreprocessor.ts — core fix
• frontend/lib/src/components/elements/ArrowVegaLiteChart/useVegaElementPreprocessor.test.ts — updated unit tests
• e2e_playwright/st_altair_chart.py — added regression scenario
• e2e_playwright/st_altair_chart_test.py — added regression E2E test

Code Quality

The code change is minimal, well-scoped, and correct. The distinction between layer (overlay) and hconcat/vconcat/concat (concatenation) is semantically sound in Vega-Lite: layer compositions share a spatial area and can accept a unified width, while concatenation operators create separate spatial areas that cannot.

The updated comments in useVegaElementPreprocessor.ts (lines 158-161) clearly explain the rationale for the change, making the intent easy to understand for future maintainers.

Minor note: the child.width = containerWidth assignment unconditionally overwrites any existing width on the child, but this is consistent with the pre-existing behavior for non-composition children and is correct in the useContainerWidth context where the intent is to stretch to the container.

Test Coverage

Unit tests (useVegaElementPreprocessor.test.ts):

• The old parameterized test case for layer (which expected [undefined, 400] — no width on layer children) was correctly removed.
• A new standalone test "sets width on vconcat children that contain layer" was added, asserting both the layer child and the sibling child receive width 400. This properly validates the behavioral change.
• The test follows the project's conventions (uses renderHook, consistent structure with neighboring tests).

E2E tests (st_altair_chart_test.py):

• A new test test_layered_vconcat_fit_x_regression_renders was added as a regression guard.
• It verifies the chart is visible, has exactly one graphics-document element, and the rendered canvas/SVG is visible (the bug manifested as a hidden SVG with width=0).
• The test uses the app fixture (light mode), which is appropriate for a functional regression test.
• The test includes both positive (visibility, correct count) and implicit negative assertions (a chart with width=0 would fail to_be_visible()).

One observation: the removal of expect(charts.locator("[role='graphics-document']")).to_have_count(NUM_CHARTS) in test_altair_chart_displays_correctly slightly weakens the baseline test. This assertion was likely removed because the vconcat+layer regression chart may produce a different number of graphics-document elements. The per-chart visibility loop still provides adequate coverage, but a comment explaining why this global count check was removed would improve clarity.

Backwards Compatibility

The change is fully backwards compatible:

• Width propagation to vconcat children only happens when useContainerWidth is true, so charts not using container width are unaffected.
• Charts that previously worked with layer in vconcat (without useContainerWidth) remain unaffected.
• Charts that were broken by the original skip logic (issue Altair chart width regression for Layered component inside VConcat #13974) will now render correctly.
• No public API changes; no protobuf changes.

Security & Risk

No security concerns identified. The change is limited to frontend spec preprocessing logic with no impact on data handling, authentication, or external communication.

Risk is low: the fix is a single-line condition change that aligns layer behavior with how Vega-Lite expects width propagation to work. The existing parameterized tests for hconcat, nested vconcat, and concat confirm that those composition types are still correctly excluded from width propagation.

Accessibility

No accessibility impact. This PR changes chart rendering logic only; no DOM structure, ARIA attributes, keyboard interactions, or focus management are affected.

Recommendations

1. Consider adding a brief comment in test_altair_chart_displays_correctly explaining why the to_have_count assertion for graphics-document was removed (e.g., "Removed because compound charts like vconcat+layer may contain multiple graphics-document elements"), to prevent someone from re-adding it and causing test failures.

2. The E2E regression test could optionally include a snapshot assertion (assert_snapshot) for visual regression coverage, though the current visibility-based assertions are sufficient for guarding against the specific width=0 bug.

Verdict

APPROVED: Well-scoped, correct bugfix with appropriate unit and E2E test coverage. The semantic distinction between layer and concatenation operators is sound, and the change is fully backwards compatible.

This is an automated AI review by opus-4.6-thinking.

Consolidated Code Review

Summary

This PR fixes a rendering regression (issue #13974) where Altair charts containing a layer composition inside a vconcat with autosize="fit-x" and width="stretch" failed to render, producing "infinite extent" errors or a hidden SVG with width=0.

Root cause: PR #13423 (commit 46524be57) introduced a width-propagation skip for all Vega-Lite composition operators (hconcat, vconcat, concat, layer) when iterating vconcat children. However, layer is semantically different from concatenation operators — it overlays multiple marks within the same spatial frame and should receive width. This PR correctly narrows the skip to only true concatenation operators (hconcat, vconcat, concat), removing "layer" in child from the condition.

Changes:

• useVegaElementPreprocessor.ts: Removed "layer" in child from the skip condition so layer children within vconcat receive containerWidth.
• useVegaElementPreprocessor.test.ts: Replaced the parameterized test case (which expected layer children to NOT receive width) with a standalone test asserting the corrected behavior.
• st_altair_chart.py: Added a regression scenario with a layered chart inside vconcat using autosize="fit-x" and width="stretch".
• st_altair_chart_test.py: Added a new regression test and updated baseline chart verification logic.

Reviewer Agreement

Both reviewers (gpt-5.3-codex-high and opus-4.6-thinking) are in full agreement on all aspects:

No disagreements or conflicts to resolve.

Code Quality

The code change is minimal and well-targeted — a single condition removed from an if statement in useVegaElementPreprocessor.ts. Both reviewers confirmed the change is semantically correct: layer operates differently from concatenation operators in Vega-Lite (it shares the same spatial frame), so setting width on it is valid and expected.

The unit test restructuring is appropriate: the old it.each case for layer (expecting [undefined, 400]) was removed and replaced with a standalone test asserting the opposite — that both vconcat children (including the layer child) receive width 400. This is cleaner since it now asserts the inverse of what the remaining parameterized cases test.

Test Coverage

Unit tests: The new standalone test properly validates that vconcat children containing layer now receive width, while existing parameterized tests continue to verify that hconcat, nested vconcat, and concat children are still skipped. Good positive/negative coverage.

E2E tests: The regression test checks chart visibility, correct graphics-document count, and rendered canvas/svg element visibility — directly guarding against the regression signal of a hidden SVG with width=0. The existing test_altair_chart_displays_correctly was improved by validating each baseline chart individually rather than checking a single global count, which is more precise and resilient.

Backwards Compatibility

No API or protocol changes. This restores the behavior from before PR #13423 specifically for layer children. Charts using other nested composition operators (hconcat, vconcat, concat) inside vconcat are unaffected.

Security & Risk

No security concerns. Regression risk is low: the change is narrowly scoped, covered by both unit and E2E tests, and the existing marginal histogram chart test (which uses vconcat + hconcat) continues to pass.

Accessibility

No accessibility impact — changes are limited to chart spec preprocessing logic and E2E test infrastructure.

Minor Suggestions (Non-blocking)

1. (Both reviewers): Consider adding a bounding-box assertion in the E2E regression test (e.g., assert non-zero width on the rendered chart) to make the width-related failure signal even more direct.
2. (opus-4.6-thinking): Consider adding a brief inline comment near REGRESSION_CHART_INDEX in the E2E test to note which chart it references, for future maintainers.

Verdict

APPROVED — Clean, well-scoped bug fix that correctly restores width propagation for layer children in vconcat compositions, with appropriate unit and E2E test coverage. Both reviewers approved unanimously with no blocking issues.

Consolidated review by opus-4.6-thinking.

FWIW, this improved a vconcat with width='stretch' for me where now the charts are expanding, but they are now extending beyond the width of the container causing it to scroll horizontally. I'm using a sidebar layout.

    st.altair_chart(                                                            
        alt.vconcat(*charts),                                                   
        width='stretch',                                                        
    )

Thanks for the comment here @ndawe. Can you open up a new issue with clear repro code? Thanks!

@sfc-gh-bnisco yes, I'll try to reproduce with a simple example and open an issue here if it seems to be a streamlit regression. Based on the positioning of surrounding elements, I'm also suspecting that I might be dealing with an altair issue.