Keep model architectures list expanded when navigating back#6881
Keep model architectures list expanded when navigating back#6881andersendsa wants to merge 6 commits into
Conversation
Initializes the `showMore` state in `ModelArchitecturesList` to `true` if the currently selected model architecture is not in the collapsed list. This ensures that when a user selects a non-default model and navigates back from the "Advanced settings" screen, their selection is still visible.
There was a problem hiding this comment.
Pull request overview
Updates the Train Model dialog’s model-architectures selector so that when a user returns from “Advanced settings”, the architectures list starts expanded if the currently selected architecture would otherwise be hidden in the collapsed/recommended subset.
Changes:
- Initializes
showMorebased on whether the selected architecture is present in the collapsed (recommended) list. - Preserves visibility of non-default (non-collapsed) selections when navigating back from advanced settings.
| const [showMore, setShowMore] = useState<boolean>(() => { | ||
| if (selectedModelArchitectureId !== null) { | ||
| const isSelectedInCollapsed = collapsedArchitectures.some((arch) => arch.id === selectedModelArchitectureId); | ||
| return !isSelectedInCollapsed; | ||
| } |
|
Hi @piotrgrubicki pls let me know if this pr needs any changes or if it is good to merge |
|
Hi @andersendsa, thanks for contribution! Could you please implement test(s) for this change? |
Hi @dwesolow I have added the test for this change the pr is ready for review |
| const [showMore, setShowMore] = useState<boolean>(() => { | ||
| if (selectedModelArchitectureId !== null) { | ||
| const isSelectedInCollapsed = collapsedArchitectures.some((arch) => arch.id === selectedModelArchitectureId); | ||
| return !isSelectedInCollapsed; | ||
| } | ||
| return false; | ||
| }); |
| it('renders expanded list by default if a non-default architecture is already selected', () => { | ||
| mockSelectedModelArchitectureId.value = 'arch-5'; | ||
| render(<ModelArchitecturesList />); | ||
|
|
||
| expect(screen.getByRole('button', { name: 'Show less' })).toBeVisible(); | ||
| expect(screen.getByRole('button', { name: /Sort Models by:/i })).toBeVisible(); | ||
| }); |
| fireEvent.click(screen.getByRole('button', { name: 'Show less' })); | ||
| expect(screen.queryByRole('button', { name: /Sort Models by:/i })).not.toBeInTheDocument(); | ||
| }); | ||
|
|
|
We should test the change in higher level, to actually test expected behavior, i.e. if user clicks back in advanced settings, the model architectures are expended. |
Hi @dwesolow i have added the test pls let me know if the pr needs any changes or if it is good to merge |
jpggvilaca
left a comment
There was a problem hiding this comment.
@andersendsa while the solution works, i feel like it's a bit hacky. Instead of collapsing/opening based on a condition, we should make this logic selection agnostic. By this i mean, selecting "advanced settings" or selecting a model should not affect the "show more logic". The issue right now is that the state is reset whenever you open Advanced settings because the model list is remounted. So, in order to avoid this, i think we should lift the "show more" state logic to the train model provider. This way the model list will be collapsed/opened regardless of where you are.
TL;DR -> Move showMore/setShowMore to TrainModelProvider to avoid state resets when we navigate to AdvancedSettings
Hi @jpggvilaca i have implemented the changes pls let me know if the pr needs anymore changes or if it is good to merge |
| const collapsedArchitectures = recommendedArchitectures.slice(0, SHOW_MORE_THRESHOLD); | ||
| const canToggleArchitecturesList = modelArchitectures.length > SHOW_MORE_THRESHOLD; | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
I dont think we need this useEffect anymore. This was what i mentioned previously. We dont need to open/close any show more. Now that the state is on the provider, the list should not collapse
There was a problem hiding this comment.
I dont think we need this useEffect anymore. This was what i mentioned previously. We dont need to open/close any show more. Now that the state is on the provider, the list should not collapse
@jpggvilaca I have reverted it
Summary
Initializes the
showMorestate inModelArchitecturesListtotrueif the currently selected model architecture is not in the collapsed list. This ensures that when a user selects a non-default model and navigates back from the "Advanced settings" screen, their selection is still visible.Closes:#6823
How to test
Checklist