-
Notifications
You must be signed in to change notification settings - Fork 4k
[Fix] MPA page layout #9479
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
Merged
[Fix] MPA page layout #9479
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
71d193f to
e9dd814
Compare
a459447 to
5f90314
Compare
5f90314 to
6fdbd62
Compare
Contributor
Author
|
back to draft since I still need to add mpa v1 tests |
kmcgrady
approved these changes
Oct 4, 2024
Collaborator
kmcgrady
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.
Looks great!
sfc-gh-pchiu
added a commit
that referenced
this pull request
Oct 30, 2024
…t in User Settings (#9723) ## Describe your changes Update: In this update, we revamped the `preferredLayouts` state in `App.tsx` (previously `pageLayouts`) and fixed a number of issues with 1. apps flickering (when not calling `set_page_config`) 2. apps having fragments rerunning 3. wide mode in User Settings Here's a breakdown of the implementation by functions/files: 1. `handlePageConfigChanged` & `saveSetting`: `set_page_config` and User Settings panel are the 2 only places that could change the layout. As a result, we save the layout value to `preferredLayouts` in these 2 handlers 2. `handleNewSession` (not changed): For every rerun, we apply previously saved `preferredLayouts` of the corresponding page. If none matches, apply `CENTERED` 3. `handleNavigation`: If we get a new page script hash from navigation which has never been initialized in `preferredLayouts`, we carry over the layout from previous page for the new one. -- ~~We are seeing an unexpected behavior such that when an MPA page containing fragments reruns, the page layout would change to centered. This is an [issue reported in our forum](https://discuss.streamlit.io/t/bad-setin-index-issue-with-using-fragments-that-do-not-render-anything-within-multipage-app/82675/9?u=raethlein) flagged by @raethlein. Upon investigation, we have identified that the fix in #9479 introduced this behavior change.~~ ~~The root cause is that after a triggered rerun the page script hash changes, causing the `pageLayouts` object state not recognizing the new hash value and assigning the default/centered layout. Our proposed fix here is to only perform layout update when there is no fragment running.~~ ~~I also added new e2e test cases with fragments to verify the fix.~~ ## GitHub Issue Link (if applicable) [Post in discuss forum](https://discuss.streamlit.io/t/bad-setin-index-issue-with-using-fragments-that-do-not-render-anything-within-multipage-app/82675?u=raethlein) ## Testing Plan - E2E Tests: new test case in MPAv2 that mocks fragment rerunning ### Manually testing app reported in forum #### Before https://github.com/user-attachments/assets/41c3f629-5f69-42c3-9e5f-e0fec9d1bff3 #### After https://github.com/user-attachments/assets/77de515e-2e89-47d4-b49d-c03126d61f41 --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.
edegp
pushed a commit
to edegp/streamlit
that referenced
this pull request
Jan 19, 2025
## Describe your changes This PR addresses 2 issues with layout in both MPA v1 and v2 -- * default page layout (centered) is not respected when navigating *from* a wide layout page * when a page's layout is dynamic, e.g. changeable based on user interaction, navigating back to that page does not preserve the last set layout The proposed changes now preserve the layouts for each page in an MPA, by storing the mapping of `page script hash <> layout` in React state on page change. The layout of the page to be rendered will be looked up in every new session handling, defaulting to centered. Demo: https://multipage-layout-fix.streamlit.app/ ## GitHub Issue Link streamlit#6237 ## Testing Plan - Explanation of why no additional tests are needed - Unit Tests (JS and/or Python) - E2E Tests - Any manual testing needed? --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.
edegp
pushed a commit
to edegp/streamlit
that referenced
this pull request
Jan 19, 2025
…t in User Settings (streamlit#9723) ## Describe your changes Update: In this update, we revamped the `preferredLayouts` state in `App.tsx` (previously `pageLayouts`) and fixed a number of issues with 1. apps flickering (when not calling `set_page_config`) 2. apps having fragments rerunning 3. wide mode in User Settings Here's a breakdown of the implementation by functions/files: 1. `handlePageConfigChanged` & `saveSetting`: `set_page_config` and User Settings panel are the 2 only places that could change the layout. As a result, we save the layout value to `preferredLayouts` in these 2 handlers 2. `handleNewSession` (not changed): For every rerun, we apply previously saved `preferredLayouts` of the corresponding page. If none matches, apply `CENTERED` 3. `handleNavigation`: If we get a new page script hash from navigation which has never been initialized in `preferredLayouts`, we carry over the layout from previous page for the new one. -- ~~We are seeing an unexpected behavior such that when an MPA page containing fragments reruns, the page layout would change to centered. This is an [issue reported in our forum](https://discuss.streamlit.io/t/bad-setin-index-issue-with-using-fragments-that-do-not-render-anything-within-multipage-app/82675/9?u=raethlein) flagged by @raethlein. Upon investigation, we have identified that the fix in streamlit#9479 introduced this behavior change.~~ ~~The root cause is that after a triggered rerun the page script hash changes, causing the `pageLayouts` object state not recognizing the new hash value and assigning the default/centered layout. Our proposed fix here is to only perform layout update when there is no fragment running.~~ ~~I also added new e2e test cases with fragments to verify the fix.~~ ## GitHub Issue Link (if applicable) [Post in discuss forum](https://discuss.streamlit.io/t/bad-setin-index-issue-with-using-fragments-that-do-not-render-anything-within-multipage-app/82675?u=raethlein) ## Testing Plan - E2E Tests: new test case in MPAv2 that mocks fragment rerunning ### Manually testing app reported in forum #### Before https://github.com/user-attachments/assets/41c3f629-5f69-42c3-9e5f-e0fec9d1bff3 #### After https://github.com/user-attachments/assets/77de515e-2e89-47d4-b49d-c03126d61f41 --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.
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
This PR addresses 2 issues with layout in both MPA v1 and v2 --
The proposed changes now preserve the layouts for each page in an MPA, by storing the mapping of
page script hash <> layoutin React state on page change. The layout of the page to be rendered will be looked up in every new session handling, defaulting to centered.Demo: https://multipage-layout-fix.streamlit.app/
GitHub Issue Link
#6237
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.