fix(automl): improve top_n and prediction_length validation UX

- Re-validate top_n automatically when task_type changes via trigger()
- Restore dynamic max prop on ExperimentSettings NumberInput using useWatch
- Extract MAX_PREDICTION_LENGTH constant for consistency with top_n constants
- Fix and uncomment ExperimentSettings max validation test
- Update switching tests to verify auto-revalidation without manual focus/blur

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: nickmazzi

packages/automl/frontend/src/app/components/configure/AutomlConfigure.tsx

@@ -176,6 +176,7 @@ function AutomlConfigure(): React.JSX.Element {
     control,
     setValue,
     getValues,
+    trigger,
     formState: { isSubmitting: formIsSubmitting },
   } = form;
 
@@ -189,6 +190,13 @@ function AutomlConfigure(): React.JSX.Element {
   // Calculate max top_n based on task type
   const maxTopN = isTimeseries ? MAX_TOP_N_TIMESERIES : MAX_TOP_N_TABULAR;
 
+  // Re-validate top_n when task type changes (max depends on task type)
+  useEffect(() => {
+    if (isTaskTypeSelected) {
+      void trigger('top_n');
+    }
+  }, [taskType, isTaskTypeSelected, trigger]);
+
   const canSelectFiles = !selectedSecret?.invalid && Boolean(trainDataSecretName);
   const isFileSelected = Boolean(trainDataFileKey);
   const showTrainingDataUploadDropzone = !isTrainingDataFileUploading && !trainDataFileKey.trim();

packages/automl/frontend/src/app/components/configure/AutomlExperimentSettings.tsx

@@ -12,12 +12,15 @@ import {
   Title,
 } from '@patternfly/react-core';
 import React from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import {
   ConfigureSchema,
   EXPERIMENT_SETTINGS_FIELDS,
+  MAX_TOP_N_TABULAR,
+  MAX_TOP_N_TIMESERIES,
   MIN_TOP_N,
 } from '~/app/schemas/configure.schema';
+import { TASK_TYPE_TIMESERIES } from '~/app/utilities/const';
 
 type AutomlExperimentSettingsProps = {
   isOpen: boolean;
@@ -37,6 +40,9 @@ const AutomlExperimentSettings: React.FC<AutomlExperimentSettingsProps> = ({
     formState: { isDirty, errors },
   } = useFormContext<ConfigureSchema>();
 
+  const taskType = useWatch({ control, name: 'task_type' });
+  const maxTopN = taskType === TASK_TYPE_TIMESERIES ? MAX_TOP_N_TIMESERIES : MAX_TOP_N_TABULAR;
+
   const hasFieldErrors = EXPERIMENT_SETTINGS_FIELDS.some((field) => errors[field]);
 
   return (
@@ -63,6 +69,7 @@ const AutomlExperimentSettings: React.FC<AutomlExperimentSettingsProps> = ({
                 id="top-n-input"
                 value={field.value}
                 min={MIN_TOP_N}
+                max={maxTopN}
                 validated={fieldState.error ? 'error' : 'default'}
                 onMinus={() => field.onChange(field.value - 1)}
                 onPlus={() => field.onChange(field.value + 1)}

packages/automl/frontend/src/app/components/configure/ConfigureTimeseriesForm.tsx

@@ -13,6 +13,7 @@ import {
 import React, { useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import ConfigureFormGroup from '~/app/components/common/ConfigureFormGroup';
+import { MAX_PREDICTION_LENGTH } from '~/app/schemas/configure.schema';
 import { getTypeAcronym } from '~/app/utilities/columnUtils';
 import LoadingFormField from './LoadingFormField';
 
@@ -408,7 +409,7 @@ function ConfigureTimeseriesForm({
                   id="prediction-length-input"
                   value={field.value}
                   min={1}
-                  max={100}
+                  max={MAX_PREDICTION_LENGTH}
                   validated={fieldState.error ? 'error' : 'default'}
                   onMinus={() => field.onChange(Number(field.value) - 1)}
                   onPlus={() => field.onChange(Number(field.value) + 1)}

packages/automl/frontend/src/app/components/configure/__tests__/AutomlConfigure.spec.tsx

@@ -931,7 +931,7 @@ describe('AutomlConfigure', () => {
           });
         });
 
-        it('should update max validation when switching from tabular to timeseries', async () => {
+        it('should automatically show error when switching from tabular to timeseries with top N exceeding new max', async () => {
           renderComponent();
           selectSecretAndFile();
           selectPredictionType('binary');
@@ -945,19 +945,15 @@ describe('AutomlConfigure', () => {
           expect(screen.queryByText('Maximum number of top models is 10')).not.toBeInTheDocument();
           expect(screen.queryByText('Maximum number of top models is 7')).not.toBeInTheDocument();
 
-          // Switch to timeseries - should now show error (max 7)
+          // Switch to timeseries - error should appear automatically without touching the field
           selectPredictionType('timeseries');
 
-          // Trigger revalidation by touching the field
-          fireEvent.focus(input);
-          fireEvent.blur(input);
-
           await waitFor(() => {
             expect(screen.getByText('Maximum number of top models is 7')).toBeInTheDocument();
           });
         });
 
-        it('should update max validation when switching from timeseries to tabular', async () => {
+        it('should automatically clear error when switching from timeseries to tabular with top N within new max', async () => {
           renderComponent();
           selectSecretAndFile();
           selectPredictionType('timeseries');
@@ -972,13 +968,9 @@ describe('AutomlConfigure', () => {
             expect(screen.getByText('Maximum number of top models is 7')).toBeInTheDocument();
           });
 
-          // Switch to binary - should now be valid (max 10)
+          // Switch to binary - error should clear automatically without touching the field
           selectPredictionType('binary');
 
-          // Trigger revalidation by touching the field
-          fireEvent.focus(input);
-          fireEvent.blur(input);
-
           await waitFor(() => {
             expect(
               screen.queryByText('Maximum number of top models is 10'),

packages/automl/frontend/src/app/components/configure/__tests__/AutomlExperimentSettings.spec.tsx

@@ -1,18 +1,22 @@
+/* eslint-disable camelcase */
 import { zodResolver } from '@hookform/resolvers/zod';
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import AutomlExperimentSettings from '~/app/components/configure/AutomlExperimentSettings';
-import { createConfigureSchema } from '~/app/schemas/configure.schema';
+import { ConfigureSchema, createConfigureSchema } from '~/app/schemas/configure.schema';
 
 const configureSchema = createConfigureSchema();
 
-const FormWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const FormWrapper: React.FC<{
+  children: React.ReactNode;
+  defaultValues?: Partial<ConfigureSchema>;
+}> = ({ children, defaultValues }) => {
   const form = useForm({
     mode: 'onChange',
     resolver: zodResolver(configureSchema.full),
-    defaultValues: configureSchema.defaults,
+    defaultValues: { ...configureSchema.defaults, ...defaultValues },
   });
   return <FormProvider {...form}>{children}</FormProvider>;
 };
@@ -24,9 +28,9 @@ const defaultProps = {
   saveChanges: jest.fn(),
 };
 
-const renderComponent = (props = {}) =>
+const renderComponent = (props = {}, defaultValues?: Partial<ConfigureSchema>) =>
   render(
-    <FormWrapper>
+    <FormWrapper defaultValues={defaultValues}>
       <AutomlExperimentSettings {...defaultProps} {...props} />
     </FormWrapper>,
   );
@@ -80,14 +84,15 @@ describe('AutomlExperimentSettings', () => {
       });
     });
 
-    // it('should show error message when top N exceeds the maximum', async () => {
-    //   renderComponent();
-    //   changeTopN('6');
+    it('should show error message when top N exceeds the maximum', async () => {
+      // Provide a valid task_type so the cross-field top_n max validator runs
+      renderComponent({}, { task_type: 'binary' });
+      changeTopN('11');
 
-    //   await waitFor(() => {
-    //     expect(screen.getByText('Maximum number of top models is 5')).toBeInTheDocument();
-    //   });
-    // });
+      await waitFor(() => {
+        expect(screen.getByText('Maximum number of top models is 10')).toBeInTheDocument();
+      });
+    });
 
     it('should show error message when top N is below the minimum', async () => {
       renderComponent();

packages/automl/frontend/src/app/schemas/configure.schema.ts

@@ -11,6 +11,7 @@ import { createSchema } from '~/app/utilities/schema';
 export const MIN_TOP_N = 1;
 export const MAX_TOP_N_TABULAR = 10;
 export const MAX_TOP_N_TIMESERIES = 7;
+export const MAX_PREDICTION_LENGTH = 100;
 
 export const EXPERIMENT_SETTINGS_FIELDS = ['top_n'] as const;
 
@@ -39,7 +40,7 @@ function createConfigureSchema() {
       target: z.string().default('').optional(),
       id_column: z.string().default('').optional(),
       timestamp_column: z.string().default('').optional(),
-      prediction_length: z.int().min(1).max(100).default(1).optional(),
+      prediction_length: z.int().min(1).max(MAX_PREDICTION_LENGTH).default(1).optional(),
       known_covariates_names: z.array(z.string()).default([]).optional(),
     }),
     validators: [