Add component test of augmentation parameters and add minor fixes (#1353)

Co-authored-by: Mark Redeman <[email protected]>

Author: romanowska

web_ui/src/core/configurable-parameters/dtos/configuration.interface.ts

@@ -10,7 +10,7 @@ interface ParameterBaseDTO {
 interface NumberParameterDTO extends ParameterBaseDTO {
     type: 'int' | 'float';
     value: number;
-    min_value: number;
+    min_value: number | null;
     max_value: number | null;
     default_value: number;
 }

web_ui/src/core/configurable-parameters/services/configuration.interface.ts

@@ -10,7 +10,7 @@ interface ParameterBase {
 export interface NumberParameter extends ParameterBase {
     type: 'int' | 'float';
     value: number;
-    minValue: number;
+    minValue: number | null;
     maxValue: number | null;
     defaultValue: number;
 }

web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/data-management/filters/filters-options.component.tsx

@@ -57,7 +57,7 @@ const FilterOption: FC<FilterOptionProps> = ({ option, onOptionChange }) => {
             <Flex gap={'size-200'} gridColumn={'2/3'}>
                 <NumberField
                     aria-label={`Change ${name}`}
-                    minValue={minValue}
+                    minValue={minValue ?? undefined}
                     maxValue={maxValue ?? undefined}
                     step={1}
                     value={value}

web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/ui/number-parameter-field.component.tsx

@@ -24,15 +24,15 @@ const getStep = ({
     type,
 }: {
     step?: number;
-    minValue: number;
+    minValue: number | null;
     maxValue: number | null;
     type: NumberParameter['type'];
 }): number => {
     if (step !== undefined) {
         return step;
     }
 
-    if (maxValue === null) {
+    if (maxValue === null || minValue === null) {
         return type === 'int' ? DEFAULT_INT_STEP : DEFAULT_FLOAT_STEP;
     }
 
@@ -63,13 +63,14 @@ export const NumberParameterField: FC<NumberGroupParamsProps> = ({
         setParameterValue(value);
     }, [value]);
 
-    if (maxValue === null) {
+    if (maxValue === null || minValue === null) {
         return (
             <NumberField
                 aria-label={`Change ${name}`}
                 step={fieldStep}
                 value={parameterValue}
-                minValue={minValue}
+                minValue={minValue === null ? undefined : minValue}
+                maxValue={maxValue === null ? undefined : maxValue}
                 onChange={handleValueChange}
                 isDisabled={isDisabled}
             />

web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/ui/range-parameter-field.component.tsx

@@ -54,14 +54,14 @@ export const RangeParameterField: FC<RangeParameterFieldProps> = ({
     const handleRangeChange = (inputValue: RangeValue<number>): void => {
         const { start, end } = inputValue;
         // Prevent start and end from being equal
-        if (end - start > fieldStep) {
+        if (end - start >= fieldStep) {
             setParameterValue({ start, end });
         }
     };
 
     const handleNumberChange = (start: number, end: number): void => {
         // Prevent start and end from being equal
-        if (end - start > fieldStep) {
+        if (end - start >= fieldStep) {
             setParameterValue({ start, end });
             onChange([start, end]);
         }
@@ -90,7 +90,7 @@ export const RangeParameterField: FC<RangeParameterFieldProps> = ({
                 step={fieldStep}
                 flex={1}
                 isDisabled={isDisabled}
-                aria-label={`Change ${name} range value`}
+                aria-label={`Change ${name} value`}
                 UNSAFE_className={isDisabled ? '' : classes.rangeSlider}
             />
             <NumberField

web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/ui/range-parameter-field.test.tsx

@@ -1,10 +1,10 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { RequiredProviders } from '../../../../../../../test-utils/required-providers-render';
+import { providersRender as render } from '../../../../../../../test-utils/required-providers-render';
 import { RangeParameterField } from './range-parameter-field.component';
 
 describe('RangeParameterField', () => {
@@ -18,17 +18,15 @@ describe('RangeParameterField', () => {
 
     const renderApp = ({ value = defaultValue, isDisabled = false }: { value?: number[]; isDisabled?: boolean }) => {
         return render(
-            <RequiredProviders>
-                <RangeParameterField
-                    defaultValue={defaultValue}
-                    value={value}
-                    onChange={onChange}
-                    name={name}
-                    type={'array'}
-                    isDisabled={isDisabled}
-                    step={0.001}
-                />
-            </RequiredProviders>
+            <RangeParameterField
+                defaultValue={defaultValue}
+                value={value}
+                onChange={onChange}
+                name={name}
+                type={'array'}
+                isDisabled={isDisabled}
+                step={0.001}
+            />
         );
     };
 
@@ -37,7 +35,7 @@ describe('RangeParameterField', () => {
 
         expect(screen.getByLabelText(`Change ${name} start range value`)).toBeInTheDocument();
         expect(screen.getByLabelText(`Change ${name} end range value`)).toBeInTheDocument();
-        expect(screen.getByLabelText(`Change ${name} range value`)).toBeInTheDocument();
+        expect(screen.getByLabelText(`Change ${name} value`)).toBeInTheDocument();
     });
 
     it('calls onChange when start value changes', async () => {
@@ -85,7 +83,7 @@ describe('RangeParameterField', () => {
         expect(screen.getByLabelText(`Change ${name} start range value`)).toBeDisabled();
         expect(screen.getByLabelText(`Change ${name} end range value`)).toBeDisabled();
 
-        const slider = screen.getByLabelText(`Change ${name} range value`);
+        const slider = screen.getByLabelText(`Change ${name} value`);
 
         expect(slider).toHaveClass('A-RCEa_is-disabled');
     });

web_ui/src/shared/components/header/active-learning-configuration/training-settings/required-annotations.component.tsx

@@ -33,7 +33,7 @@ export const RequiredAnnotations: FC<RequiredAnnotationsProps> = ({
         <NumberField
             step={1}
             value={numberOfRequiredAnnotations}
-            minValue={requiredImagesAutoTrainingConfig.minValue}
+            minValue={requiredImagesAutoTrainingConfig.minValue ?? undefined}
             maxValue={requiredImagesAutoTrainingConfig.maxValue ?? undefined}
             onChange={handleRequiredAnnotationsChange}
             label={'Number of required annotations'}