ITEP-69433 refactor: Change active learning config logic to make it easy to use project configuration (#420)

dwesolow · web-flow · commit 81aa9581c544 · 2025-06-10T12:58:20.000Z
diff --git a/web_ui/src/core/configurable-parameters/hooks/use-reconfig-auto-training.hook.ts b/web_ui/src/core/configurable-parameters/hooks/use-reconfig-auto-training.hook.ts
@@ -16,7 +16,7 @@ import {
 } from '../services/configurable-parameters.interface';
 import { getReconfigureParametersDTO, updateSelectedParameter } from '../utils';
 
-interface UseReconfigureParams {
+export interface UseReconfigureParams {
     configParameters: ConfigurableParametersTaskChain[];
     newConfigParameter: ConfigurableParametersParams;
     onOptimisticUpdate: (newConfig: ConfigurableParametersTaskChain[]) => ConfigurableParametersTaskChain[];
diff --git a/web_ui/src/core/configurable-parameters/services/configuration.interface.ts b/web_ui/src/core/configurable-parameters/services/configuration.interface.ts
@@ -7,7 +7,7 @@ interface ParameterBase {
     description: string;
 }
 
-interface NumberParameter extends ParameterBase {
+export interface NumberParameter extends ParameterBase {
     type: 'int' | 'float';
     value: number;
     minValue: number;
diff --git a/web_ui/src/shared/components/header/active-learning-configuration/training-settings/auto-training-config-switch.component.tsx b/web_ui/src/shared/components/header/active-learning-configuration/training-settings/auto-training-config-switch.component.tsx
@@ -5,46 +5,24 @@ import { FC } from 'react';
 
 import { Flex, Switch, Text } from '@geti/ui';
 
-import { useReconfigAutoTraining } from '../../../../../core/configurable-parameters/hooks/use-reconfig-auto-training.hook';
-import {
-    BooleanGroupParams,
-    ConfigurableParametersTaskChain,
-} from '../../../../../core/configurable-parameters/services/configurable-parameters.interface';
-import { findAutoTrainingConfig } from '../../../../../core/configurable-parameters/utils';
 import { Task } from '../../../../../core/projects/task.interface';
 import { idMatchingFormat } from '../../../../../test-utils/id-utils';
 
 interface AutoTrainingConfigSwitchProps {
     task: Task;
     isDisabled: boolean;
-    trainingConfig: BooleanGroupParams;
-    autoTrainingOptimisticUpdates: ReturnType<typeof useReconfigAutoTraining>;
-    configParameters: ConfigurableParametersTaskChain[];
+    isAutoTrainingEnabled: boolean;
+    onAutoTraining: (value: boolean) => void;
 }
 
 export const AutoTrainingConfigSwitch: FC<AutoTrainingConfigSwitchProps> = ({
     task,
     isDisabled,
-    autoTrainingOptimisticUpdates,
-    configParameters,
-    trainingConfig,
+    onAutoTraining,
+    isAutoTrainingEnabled,
 }) => {
     const onChange = () => {
-        autoTrainingOptimisticUpdates.mutate({
-            configParameters,
-            newConfigParameter: {
-                ...trainingConfig,
-                value: !trainingConfig.value,
-            },
-            onOptimisticUpdate: (config) => {
-                const autoTrainingConfig = findAutoTrainingConfig(task.id, config);
-                if (autoTrainingConfig !== undefined) {
-                    autoTrainingConfig.value = !autoTrainingConfig.value;
-                }
-
-                return config;
-            },
-        });
+        onAutoTraining(!isAutoTrainingEnabled);
     };
 
     return (
@@ -53,7 +31,7 @@ export const AutoTrainingConfigSwitch: FC<AutoTrainingConfigSwitchProps> = ({
                 isEmphasized
                 justifySelf={'end'}
                 aria-label={`Toggle auto training for ${task.title}`}
-                isSelected={trainingConfig.value}
+                isSelected={isAutoTrainingEnabled}
                 isDisabled={isDisabled}
                 onChange={onChange}
                 id={`training-switch-${idMatchingFormat(task.title)}`}
diff --git a/web_ui/src/shared/components/header/active-learning-configuration/training-settings/auto-training-switch.component.tsx b/web_ui/src/shared/components/header/active-learning-configuration/training-settings/auto-training-switch.component.tsx
@@ -7,12 +7,20 @@ import { paths } from '@geti/core';
 import { Divider, Flex, Text, View } from '@geti/ui';
 import { isEmpty, isEqual } from 'lodash-es';
 
-import { useReconfigAutoTraining } from '../../../../../core/configurable-parameters/hooks/use-reconfig-auto-training.hook';
+import {
+    useReconfigAutoTraining,
+    UseReconfigureParams,
+} from '../../../../../core/configurable-parameters/hooks/use-reconfig-auto-training.hook';
 import {
     BooleanGroupParams,
     ConfigurableParametersTaskChain,
     NumberGroupParams,
 } from '../../../../../core/configurable-parameters/services/configurable-parameters.interface';
+import {
+    findAutoTrainingConfig,
+    findDynamicRequiredAnnotationsConfig,
+    findRequiredImagesAutoTrainingConfig,
+} from '../../../../../core/configurable-parameters/utils';
 import { useGetRunningJobs } from '../../../../../core/jobs/hooks/use-jobs.hook';
 import { RunningJobProps, RunningTrainingJob } from '../../../../../core/jobs/jobs.interface';
 import { ModelsGroups } from '../../../../../core/models/models.interface';
@@ -113,6 +121,87 @@ export const AutoTrainingSwitch: FC<AutoTrainingSwitchProps> = ({
         hasEqualProjectAndTask(projectIdentifier.projectId, task.title)
     );
 
+    const updateTrainingParametersLegacy = ({
+        newConfigParameter,
+        onOptimisticUpdate,
+    }: Pick<UseReconfigureParams, 'newConfigParameter' | 'onOptimisticUpdate'>) => {
+        autoTrainingOptimisticUpdates.mutate({
+            configParameters,
+            onOptimisticUpdate,
+            newConfigParameter,
+        });
+    };
+
+    const updateDynamicRequiredAnnotations = (value: boolean) => {
+        if (dynamicRequiredAnnotationsConfig === undefined) {
+            return;
+        }
+
+        updateTrainingParametersLegacy({
+            newConfigParameter: {
+                ...dynamicRequiredAnnotationsConfig,
+                value,
+            },
+            onOptimisticUpdate: (config) => {
+                const dynamicRequiredAnnotationsConfigOptimistic = findDynamicRequiredAnnotationsConfig(
+                    task.id,
+                    config
+                );
+                if (dynamicRequiredAnnotationsConfigOptimistic !== undefined) {
+                    dynamicRequiredAnnotationsConfigOptimistic.value = value;
+                }
+
+                return config;
+            },
+        });
+    };
+
+    const updateNumberOfRequiredAnnotations = (newNumberOfRequiredAnnotations: number) => {
+        if (requiredImagesAutoTrainingConfig === undefined) {
+            return;
+        }
+
+        updateTrainingParametersLegacy({
+            newConfigParameter: {
+                ...requiredImagesAutoTrainingConfig,
+                value: newNumberOfRequiredAnnotations,
+            },
+            onOptimisticUpdate: (config) => {
+                const requiredImagesAutoTrainingConfigOptimistic = findRequiredImagesAutoTrainingConfig(
+                    task.id,
+                    config
+                );
+
+                if (requiredImagesAutoTrainingConfigOptimistic !== undefined) {
+                    requiredImagesAutoTrainingConfigOptimistic.value = newNumberOfRequiredAnnotations;
+                }
+
+                return config;
+            },
+        });
+    };
+
+    const updateAutoTraining = (value: boolean) => {
+        if (trainingConfig === undefined) {
+            return;
+        }
+
+        updateTrainingParametersLegacy({
+            newConfigParameter: {
+                ...trainingConfig,
+                value,
+            },
+            onOptimisticUpdate: (config) => {
+                const autoTrainingConfig = findAutoTrainingConfig(task.id, config);
+                if (autoTrainingConfig !== undefined) {
+                    autoTrainingConfig.value = value;
+                }
+
+                return config;
+            },
+        });
+    };
+
     const isAutotrainingOn = Boolean(trainingConfig?.value);
 
     const hasRunningJobs = !isEmpty(runningTaskJobs);
@@ -132,21 +221,19 @@ export const AutoTrainingSwitch: FC<AutoTrainingSwitchProps> = ({
                         <AutoTrainingConfigSwitch
                             task={task}
                             isDisabled={hasRunningJobs}
-                            autoTrainingOptimisticUpdates={autoTrainingOptimisticUpdates}
-                            configParameters={configParameters}
-                            trainingConfig={trainingConfig}
+                            isAutoTrainingEnabled={trainingConfig.value}
+                            onAutoTraining={updateAutoTraining}
                         />
                     )}
 
                     {isAutotrainingOn &&
                         requiredImagesAutoTrainingConfig !== undefined &&
                         dynamicRequiredAnnotationsConfig !== undefined && (
                             <AutoTrainingThreshold
-                                task={task}
-                                autoTrainingOptimisticUpdates={autoTrainingOptimisticUpdates}
-                                configParameters={configParameters}
                                 requiredImagesAutoTrainingConfig={requiredImagesAutoTrainingConfig}
-                                dynamicRequiredAnnotationsConfig={dynamicRequiredAnnotationsConfig}
+                                dynamicRequiredAnnotations={dynamicRequiredAnnotationsConfig.value}
+                                onUpdateDynamicRequiredAnnotations={updateDynamicRequiredAnnotations}
+                                onUpdateRequiredAnnotations={updateNumberOfRequiredAnnotations}
                             />
                         )}
                 </Flex>
diff --git a/web_ui/src/shared/components/header/active-learning-configuration/training-settings/auto-training-threshold.component.tsx b/web_ui/src/shared/components/header/active-learning-configuration/training-settings/auto-training-threshold.component.tsx
@@ -5,14 +5,8 @@ import { FC } from 'react';
 
 import { Content, ContextualHelp, Flex, Radio, RadioGroup, Text } from '@geti/ui';
 
-import { useReconfigAutoTraining } from '../../../../../core/configurable-parameters/hooks/use-reconfig-auto-training.hook';
-import {
-    BooleanGroupParams,
-    ConfigurableParametersTaskChain,
-    NumberGroupParams,
-} from '../../../../../core/configurable-parameters/services/configurable-parameters.interface';
-import { findDynamicRequiredAnnotationsConfig } from '../../../../../core/configurable-parameters/utils';
-import { Task } from '../../../../../core/projects/task.interface';
+import { NumberGroupParams } from '../../../../../core/configurable-parameters/services/configurable-parameters.interface';
+import { NumberParameter } from '../../../../../core/configurable-parameters/services/configuration.interface';
 import { RequiredAnnotationsSlider } from './required-annotations-slider.component';
 
 enum AutoTrainingThresholdOption {
@@ -39,46 +33,27 @@ const AutoTrainingThresholdContextualHelp: FC = () => {
 };
 
 interface AutoTrainingThresholdProps {
-    task: Task;
-    requiredImagesAutoTrainingConfig: NumberGroupParams;
-    dynamicRequiredAnnotationsConfig: BooleanGroupParams;
-    autoTrainingOptimisticUpdates: ReturnType<typeof useReconfigAutoTraining>;
-    configParameters: ConfigurableParametersTaskChain[];
+    requiredImagesAutoTrainingConfig: NumberGroupParams | NumberParameter;
+    dynamicRequiredAnnotations: boolean;
+    onUpdateDynamicRequiredAnnotations: (value: boolean) => void;
+    onUpdateRequiredAnnotations: (newNumberOfRequiredAnnotations: number) => void;
 }
 
 export const AutoTrainingThreshold: FC<AutoTrainingThresholdProps> = ({
-    task,
     requiredImagesAutoTrainingConfig,
-    dynamicRequiredAnnotationsConfig,
-    autoTrainingOptimisticUpdates,
-    configParameters,
+    dynamicRequiredAnnotations,
+    onUpdateRequiredAnnotations,
+    onUpdateDynamicRequiredAnnotations,
 }) => {
-    const selectedThresholdOption = dynamicRequiredAnnotationsConfig.value
+    const selectedThresholdOption = dynamicRequiredAnnotations
         ? AutoTrainingThresholdOption.ADAPTIVE
         : AutoTrainingThresholdOption.FIXED;
     const isFixedThreshold = selectedThresholdOption === AutoTrainingThresholdOption.FIXED;
 
     const handleThresholdOptionChange = (value: string): void => {
         const isAdaptiveSelected = value === AutoTrainingThresholdOption.ADAPTIVE;
 
-        autoTrainingOptimisticUpdates.mutate({
-            configParameters,
-            newConfigParameter: {
-                ...dynamicRequiredAnnotationsConfig,
-                value: isAdaptiveSelected,
-            },
-            onOptimisticUpdate: (config) => {
-                const dynamicRequiredAnnotationsConfigOptimistic = findDynamicRequiredAnnotationsConfig(
-                    task.id,
-                    config
-                );
-                if (dynamicRequiredAnnotationsConfigOptimistic !== undefined) {
-                    dynamicRequiredAnnotationsConfigOptimistic.value = isAdaptiveSelected;
-                }
-
-                return config;
-            },
-        });
+        onUpdateDynamicRequiredAnnotations(isAdaptiveSelected);
     };
 
     return (
@@ -97,10 +72,8 @@ export const AutoTrainingThreshold: FC<AutoTrainingThresholdProps> = ({
 
             {isFixedThreshold && (
                 <RequiredAnnotationsSlider
-                    task={task}
-                    autoTrainingOptimisticUpdates={autoTrainingOptimisticUpdates}
-                    configParameters={configParameters}
                     requiredImagesAutoTrainingConfig={requiredImagesAutoTrainingConfig}
+                    onUpdateRequiredAnnotations={onUpdateRequiredAnnotations}
                 />
             )}
         </>
diff --git a/web_ui/src/shared/components/header/active-learning-configuration/training-settings/required-annotations-slider.component.tsx b/web_ui/src/shared/components/header/active-learning-configuration/training-settings/required-annotations-slider.component.tsx
@@ -5,53 +5,22 @@ import { FC, useState } from 'react';
 
 import { Flex, Slider, Text, View } from '@geti/ui';
 
-import { useReconfigAutoTraining } from '../../../../../core/configurable-parameters/hooks/use-reconfig-auto-training.hook';
-import {
-    ConfigurableParametersTaskChain,
-    NumberGroupParams,
-} from '../../../../../core/configurable-parameters/services/configurable-parameters.interface';
-import { findRequiredImagesAutoTrainingConfig } from '../../../../../core/configurable-parameters/utils';
-import { Task } from '../../../../../core/projects/task.interface';
+import { NumberGroupParams } from '../../../../../core/configurable-parameters/services/configurable-parameters.interface';
+import { NumberParameter } from '../../../../../core/configurable-parameters/services/configuration.interface';
 
 interface RequiredAnnotationsSliderProps {
-    task: Task;
-    requiredImagesAutoTrainingConfig: NumberGroupParams;
-    autoTrainingOptimisticUpdates: ReturnType<typeof useReconfigAutoTraining>;
-    configParameters: ConfigurableParametersTaskChain[];
+    requiredImagesAutoTrainingConfig: NumberGroupParams | NumberParameter;
+    onUpdateRequiredAnnotations: (newNumberOfRequiredAnnotations: number) => void;
 }
 
 export const RequiredAnnotationsSlider: FC<RequiredAnnotationsSliderProps> = ({
-    task,
     requiredImagesAutoTrainingConfig,
-    autoTrainingOptimisticUpdates,
-    configParameters,
+    onUpdateRequiredAnnotations,
 }) => {
     const [numberOfRequiredAnnotations, setNumberOfRequiredAnnotations] = useState<number>(
         requiredImagesAutoTrainingConfig.value
     );
 
-    const handleRequiredAnnotationsChange = (newNumberOfRequiredAnnotations: number) => {
-        autoTrainingOptimisticUpdates.mutate({
-            configParameters,
-            newConfigParameter: {
-                ...requiredImagesAutoTrainingConfig,
-                value: newNumberOfRequiredAnnotations,
-            },
-            onOptimisticUpdate: (config) => {
-                const requiredImagesAutoTrainingConfigOptimistic = findRequiredImagesAutoTrainingConfig(
-                    task.id,
-                    config
-                );
-
-                if (requiredImagesAutoTrainingConfigOptimistic !== undefined) {
-                    requiredImagesAutoTrainingConfigOptimistic.value = newNumberOfRequiredAnnotations;
-                }
-
-                return config;
-            },
-        });
-    };
-
     return (
         <Flex alignItems={'center'} gap={'size-100'}>
             <Slider
@@ -60,7 +29,7 @@ export const RequiredAnnotationsSlider: FC<RequiredAnnotationsSliderProps> = ({
                 minValue={requiredImagesAutoTrainingConfig.minValue}
                 maxValue={requiredImagesAutoTrainingConfig.maxValue}
                 onChange={setNumberOfRequiredAnnotations}
-                onChangeEnd={handleRequiredAnnotationsChange}
+                onChangeEnd={onUpdateRequiredAnnotations}
                 label={'Number of required annotations'}
                 getValueLabel={() => ''}
                 isFilled

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ interface ParameterBase {`
`7`	`7`	`description: string;`
`8`	`8`	`}`
`9`	`9`
`10`		`-interface NumberParameter extends ParameterBase {`
	`10`	`+export interface NumberParameter extends ParameterBase {`
`11`	`11`	`type: 'int' \| 'float';`
`12`	`12`	`value: number;`
`13`	`13`	`minValue: number;`