Keep model architectures list expanded when navigating back

application/ui/src/features/models/train-model/model-architectures-list/model-architectures-list.component.tsx

@@ -13,13 +13,20 @@ import { getRecommendedArchitectures } from './utils';
 const SHOW_MORE_THRESHOLD = 4;
 
 export const ModelArchitecturesList = () => {
-    const [showMore, setShowMore] = useState<boolean>(false);
     const { modelArchitectures, selectedModelArchitectureId, onSelectModelArchitectureId } = useTrainModelState();
 
     const recommendedArchitectures = getRecommendedArchitectures(modelArchitectures);
     const collapsedArchitectures = recommendedArchitectures.slice(0, SHOW_MORE_THRESHOLD);
     const canToggleArchitecturesList = modelArchitectures.length > SHOW_MORE_THRESHOLD;
 
+    const [showMore, setShowMore] = useState<boolean>(() => {
+        if (selectedModelArchitectureId !== null) {
+            const isSelectedInCollapsed = collapsedArchitectures.some((arch) => arch.id === selectedModelArchitectureId);
+            return !isSelectedInCollapsed;
+        }
+        return false;
+    });
+
     return (
         <Flex direction={'column'} minHeight={0} gap={'size-300'}>
             {showMore ? (

application/ui/src/features/models/train-model/model-architectures-list/model-architectures-list.test.tsx

@@ -8,6 +8,7 @@ import { render } from 'test-utils/render';
 import { ModelArchitecturesList } from './model-architectures-list.component';
 
 const mockOnSelectModelArchitectureId = vi.hoisted(() => vi.fn());
+const mockSelectedModelArchitectureId = vi.hoisted(() => ({ value: null as string | null }));
 
 const mockModelArchitectures = [
     getMockedModelArchitecture({ id: 'arch-1', name: 'Alpha Model' }),
@@ -20,14 +21,15 @@ const mockModelArchitectures = [
 vi.mock('../train-model-provider.component', () => ({
     useTrainModelState: () => ({
         modelArchitectures: mockModelArchitectures,
-        selectedModelArchitectureId: null,
+        selectedModelArchitectureId: mockSelectedModelArchitectureId.value,
         onSelectModelArchitectureId: mockOnSelectModelArchitectureId,
     }),
 }));
 
 describe('ModelArchitecturesList', () => {
     beforeEach(() => {
         mockOnSelectModelArchitectureId.mockReset();
+        mockSelectedModelArchitectureId.value = null;
     });
 
     it('does not render the sort control in the default (recommended) view', () => {
@@ -53,4 +55,12 @@ describe('ModelArchitecturesList', () => {
         fireEvent.click(screen.getByRole('button', { name: 'Show less' }));
         expect(screen.queryByRole('button', { name: /Sort Models by:/i })).not.toBeInTheDocument();
     });
+
+    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();
+    });
 });