-
Notifications
You must be signed in to change notification settings - Fork 4k
[fix] pyplot/image width regression in fragments, containers #12807
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
sfc-gh-lwilby
merged 11 commits into
develop
from
fix/pyplot-image-width-regression-fragments
Oct 24, 2025
Merged
[fix] pyplot/image width regression in fragments, containers #12807
sfc-gh-lwilby
merged 11 commits into
develop
from
fix/pyplot-image-width-regression-fragments
Oct 24, 2025
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Contributor
✅ PR preview is ready!
|
sfc-gh-lwilby
commented
Oct 18, 2025
sfc-gh-lwilby
commented
Oct 18, 2025
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
commented
Oct 19, 2025
frontend/lib/src/components/core/Block/StyledElementContainerLayoutWrapper.tsx
Outdated
Show resolved
Hide resolved
sfc-gh-lwilby
added a commit
that referenced
this pull request
Oct 19, 2025
Addresses PR #12807 review feedback: 1. BLOCKING: Restructured E2E tests to focus on width modes - Changed from context-based tests (fragment/expander/container) to parameterized tests covering all combinations of: * Width modes: default (stretch/legacy) and content * Contexts: fragment, expander, container - Tests now clearly communicate what's being tested - Eliminated redundant test functions (6 tests → 1 parameterized + 1 count check) 2. Improved terminology in frontend code comment - Changed 'isUsingStretchOrDefault' to 'isUsingStretchOrLegacy' - Added clarifying comment about legacy behavior - Addresses question about what 'default' means 3. Updated test documentation - Removed references to 'workaround' terminology - Added clear explanation of width modes and bug symptoms - Improved comments explaining 200px threshold reasoning Changes maintain the same test coverage but with clearer structure and more maintainable parameterized approach.
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
added a commit
that referenced
this pull request
Oct 19, 2025
Addresses all blocking feedback from PR #12807 review: 1. BLOCKING: Move tests into existing st_pyplot files - Moved regression tests from standalone files into st_pyplot.py - Moved test functions into st_pyplot_test.py - Deleted standalone st_pyplot_image_width_regression* files - Better for test suite performance and organization 2. BLOCKING: Add pixel width test cases - Added 400px width tests for all contexts (fragment, expander, container) - Now tests all width modes: 'stretch', 'content', and pixel values - Ensures conditional logic in StyledElementContainerLayoutWrapper handles all cases 3. BLOCKING: Use 'stretch' instead of 'default' - Changed test app to use 'stretch' directly - Eliminated conditional logic (can pass width value directly to st.pyplot) - Clearer and more aligned with Width type system Test structure: - 9 regression tests (3 width modes × 3 contexts) - Parameterized test function for all combinations - Updated element counts in existing tests (11 → 20) All three blocking issues resolved.
sfc-gh-lwilby
commented
Oct 19, 2025
frontend/lib/src/components/core/Block/StyledElementContainerLayoutWrapper.tsx
Show resolved
Hide resolved
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
commented
Oct 19, 2025
sfc-gh-lwilby
added a commit
that referenced
this pull request
Oct 19, 2025
…ions Addresses three suggestions from PR #12807 review: 1. Simplify test cases (suggestion #2) - Reduced from 9 parameterized tests to 3 focused tests - Removed fragment and expander contexts (regression only in containers) - Eliminated parameterization that made test app hard to read - Simple, clear structure with named containers 2. Add deterministic width assertions (suggestion #3) - stretch: Container width=600, expect ~580-600px (allows padding) - content: Figure 6.4in @ 100 DPI = 640px, expect ~620-640px - pixel: Explicit width=500, expect ~480-500px - More stable than arbitrary >200px threshold 3. Clean up unnecessary comments (suggestion #4) - Removed comments that just describe next line - Kept meaningful comments explaining test logic and expectations - Improved readability Test structure: - 3 regression tests in containers only - Specific figure size (6.4in x 4.8in at 100 DPI) - Known container width for stretch test - Deterministic assertions with reasonable margins Note: Suggestion #1 (use_container_width check) addressed with explanation in PR comment - current logic is correct for the new widthConfig system.
sfc-gh-lwilby
commented
Oct 20, 2025
Fixes width calculation bug where plots and images rendered at 16px in fragments, expanders, and containers (v1.50.0 regression). Root cause: Commit 4954237 changed imgs container from width 100% to auto for horizontal alignment (#12435), breaking initial width calculation when no explicit width is set. Changes: - Conditional width override in StyledElementContainerLayoutWrapper - Use width 100% for stretch/default (fixes width calculation) - Use width auto for content/pixel (preserves alignment fix) - Add comprehensive E2E regression tests (6 tests) Tests verify: - Plots render at proper width (>200px, not 16px) in all contexts - width='content' workaround still works - Horizontal alignment preserved from #12435 Fixes #12678 Fixes #12763
Addresses PR #12807 review feedback: 1. BLOCKING: Restructured E2E tests to focus on width modes - Changed from context-based tests (fragment/expander/container) to parameterized tests covering all combinations of: * Width modes: default (stretch/legacy) and content * Contexts: fragment, expander, container - Tests now clearly communicate what's being tested - Eliminated redundant test functions (6 tests → 1 parameterized + 1 count check) 2. Improved terminology in frontend code comment - Changed 'isUsingStretchOrDefault' to 'isUsingStretchOrLegacy' - Added clarifying comment about legacy behavior - Addresses question about what 'default' means 3. Updated test documentation - Removed references to 'workaround' terminology - Added clear explanation of width modes and bug symptoms - Improved comments explaining 200px threshold reasoning Changes maintain the same test coverage but with clearer structure and more maintainable parameterized approach.
Addresses all blocking feedback from PR #12807 review: 1. BLOCKING: Move tests into existing st_pyplot files - Moved regression tests from standalone files into st_pyplot.py - Moved test functions into st_pyplot_test.py - Deleted standalone st_pyplot_image_width_regression* files - Better for test suite performance and organization 2. BLOCKING: Add pixel width test cases - Added 400px width tests for all contexts (fragment, expander, container) - Now tests all width modes: 'stretch', 'content', and pixel values - Ensures conditional logic in StyledElementContainerLayoutWrapper handles all cases 3. BLOCKING: Use 'stretch' instead of 'default' - Changed test app to use 'stretch' directly - Eliminated conditional logic (can pass width value directly to st.pyplot) - Clearer and more aligned with Width type system Test structure: - 9 regression tests (3 width modes × 3 contexts) - Parameterized test function for all combinations - Updated element counts in existing tests (11 → 20) All three blocking issues resolved.
…ions Addresses three suggestions from PR #12807 review: 1. Simplify test cases (suggestion #2) - Reduced from 9 parameterized tests to 3 focused tests - Removed fragment and expander contexts (regression only in containers) - Eliminated parameterization that made test app hard to read - Simple, clear structure with named containers 2. Add deterministic width assertions (suggestion #3) - stretch: Container width=600, expect ~580-600px (allows padding) - content: Figure 6.4in @ 100 DPI = 640px, expect ~620-640px - pixel: Explicit width=500, expect ~480-500px - More stable than arbitrary >200px threshold 3. Clean up unnecessary comments (suggestion #4) - Removed comments that just describe next line - Kept meaningful comments explaining test logic and expectations - Improved readability Test structure: - 3 regression tests in containers only - Specific figure size (6.4in x 4.8in at 100 DPI) - Known container width for stretch test - Deterministic assertions with reasonable margins Note: Suggestion #1 (use_container_width check) addressed with explanation in PR comment - current logic is correct for the new widthConfig system.
Changed from dimensional assertions to snapshot tests for better robustness: Before: - Asserted exact pixel dimensions (560-600px, 620-680px, 480-500px) - Brittle due to matplotlib rendering variations across browsers - Failed in CI with unexpected 672px for content width After: - Use snapshot testing like other tests in the file - More consistent with existing test patterns - Still catches regression (16px width would look very different) - More maintainable and less brittle Benefits: - Follows existing pattern in st_pyplot_test.py - Visual verification instead of pixel-perfect assertions - Snapshots will clearly show if regression returns - Works across all browsers without adjustment
Addressed suggestion #1 feedback: The suggestion to check use_container_width field revealed a TypeScript error - ImageList proto doesn't have useContainerWidth field (unlike chart elements). ImageList only has deprecated 'width' field (WidthBehavior enum). Current logic is correct: - When widthConfig is not set → default to stretch behavior (width: 100%) - When widthConfig.useStretch → use stretch behavior (width: 100%) - When widthConfig has other values → use auto width The legacy 'width' field (WidthBehavior enum) is handled by ImageList component itself, not by the container wrapper. The container just provides the outer width context. Updated comment to clarify this and explain the default legacy behavior.
Addresses blocking feedback: Use key-based access and snapshot containers. Changes: - Added keys to test containers (regression_stretch, regression_content, regression_pixel) - Changed from index-based access (nth(11), nth(12), nth(13)) to key-based access (get_element_by_key) - Snapshot whole container instead of just the image element Benefits: - More stable (key-based locators over indices) - Follows E2E best practices - Snapshots capture full context (container + border + image) - Clearer test intent with named keys - Eliminates need to count element indices This is the recommended pattern from e2e_playwright best practices for elements that support key parameter.
94ca590 to
b29f8bc
Compare
sfc-gh-nbellante
approved these changes
Oct 24, 2025
Contributor
sfc-gh-nbellante
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
change:bugfix
PR contains bug fix implementation
impact:users
PR changes affect end users
security-assessment-completed
Security assessment has been completed for PR
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Describe your changes
Fixes a v1.50.0 regression where plots and images rendered at 16px width in fragments, expanders, and containers instead of proper dimensions.
Changes Made:
StyledElementContainerLayoutWrapper.tsxfor imgs elementswidth: 100%when using stretch/default width (fixes width calculation in Plots are shown tiny, fixed after maximizing and unmaximizing plot again - v1.50.0 #12678)width: autowhen using content/pixel/rem width (preserves horizontal alignment fromst.imageinst.containerwithhorizontal_alignmentis always left-aligned #12435)Root Cause:
Commit 4954237 (Sept 11, 2025) changed imgs container from
width: 100%towidth: autoto fix horizontal alignment (#12435). This inadvertently broke initial width calculation:width: autodepends on contentExpected Behavior (now fixed):
GitHub Issue Link (if applicable)
Fixes #12678
Fixes #12763
Testing Plan
Test Results:
✅ All 6 new regression tests PASS (were failing at 16px, now pass with proper width)
✅ Existing st_image and st_pyplot tests PASS
✅ Container alignment tests PASS (preserves #12435 fix)
Manual Testing:
Additional Notes:
This fix carefully balances two requirements:
st.imageinst.containerwithhorizontal_alignmentis always left-aligned #12435The conditional logic ensures both features work correctly without interfering with each other.
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.