#1019 feat: Display warnings when changed training subsets or not valid subsets sizes (#1038)

Author: dwesolow

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

@@ -26,6 +26,7 @@ const ContentWrapper: FC<{ children: ReactNode }> = ({ children }) => {
 };
 
 interface AdvancedSettingsProps {
+    hasSupportedModels: boolean;
     algorithms: SupportedAlgorithm[];
     selectedModelTemplateId: string | null;
     onChangeSelectedTemplateId: (modelTemplateId: string | null) => void;
@@ -46,6 +47,7 @@ interface TabProps {
 }
 
 export const AdvancedSettings: FC<AdvancedSettingsProps> = ({
+    hasSupportedModels,
     algorithms,
     selectedModelTemplateId,
     onChangeSelectedTemplateId,
@@ -73,6 +75,7 @@ export const AdvancedSettings: FC<AdvancedSettingsProps> = ({
             name: 'Data management',
             children: (
                 <DataManagement
+                    hasSupportedModels={hasSupportedModels}
                     trainingConfiguration={trainingConfiguration}
                     onUpdateTrainingConfiguration={onUpdateTrainingConfiguration}
                 />

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

@@ -13,6 +13,7 @@ import { Tiling } from './tiling/tiling.component';
 import { TrainingSubsets } from './training-subsets/training-subsets.component';
 
 interface DataManagementProps {
+    hasSupportedModels: boolean;
     trainingConfiguration: TrainingConfiguration;
     onUpdateTrainingConfiguration: (
         updateFunction: (config: TrainingConfiguration | undefined) => TrainingConfiguration | undefined
@@ -27,7 +28,11 @@ const getAugmentationParameters = (configuration: TrainingConfiguration) => {
     return augmentation;
 };
 
-export const DataManagement: FC<DataManagementProps> = ({ trainingConfiguration, onUpdateTrainingConfiguration }) => {
+export const DataManagement: FC<DataManagementProps> = ({
+    hasSupportedModels,
+    trainingConfiguration,
+    onUpdateTrainingConfiguration,
+}) => {
     const augmentationParameters = getAugmentationParameters(trainingConfiguration);
     const subsetSplitParameters = trainingConfiguration.datasetPreparation.subsetSplit;
     const filteringParameters = trainingConfiguration.datasetPreparation.filtering;
@@ -38,6 +43,7 @@ export const DataManagement: FC<DataManagementProps> = ({ trainingConfiguration,
             {/* Not supported in v1 of training flow revamp <BalanceLabelsDistribution /> */}
             {!isEmpty(subsetSplitParameters) && (
                 <TrainingSubsets
+                    hasSupportedModels={hasSupportedModels}
                     subsetsParameters={trainingConfiguration.datasetPreparation.subsetSplit}
                     onUpdateTrainingConfiguration={onUpdateTrainingConfiguration}
                 />

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

@@ -1,9 +1,10 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { FC, useState } from 'react';
+import { FC, useRef, useState } from 'react';
 
-import { Flex, Grid, minmax, Text, View } from '@geti/ui';
+import { Content, Flex, Grid, Heading, InlineAlert, minmax, Text, View } from '@geti/ui';
+import { isEqual } from 'lodash-es';
 
 import {
     ConfigurationParameter,
@@ -13,7 +14,7 @@ import {
 import { Accordion } from '../../ui/accordion/accordion.component';
 import { ResetButton } from '../../ui/reset-button.component';
 import { SubsetsDistributionSlider } from './subsets-distribution-slider/subsets-distribution-slider.component';
-import { getSubsetsSizes } from './utils';
+import { areSubsetsSizesValid, getSubsetsSizes, MAX_RATIO_VALUE } from './utils';
 
 import styles from './training-subsets.module.scss';
 
@@ -85,17 +86,7 @@ const SubsetsDistribution: FC<SubsetsDistributionProps> = ({
 }) => {
     const handleSubsetDistributionChange = (values: number[] | number): void => {
         if (Array.isArray(values)) {
-            const [startRange, endRange] = values;
-
-            const newSubsetSizes = getSubsetsSizes(subsetParameters, endRange - startRange, MAX_RATIO_VALUE - endRange);
-
-            if (
-                [
-                    newSubsetSizes.trainingSubsetSize,
-                    newSubsetSizes.validationSubsetSize,
-                    newSubsetSizes.testSubsetSize,
-                ].some((size) => size === 0)
-            ) {
+            if (!areSubsetsSizesValid(subsetParameters, values)) {
                 return;
             }
 
@@ -105,17 +96,7 @@ const SubsetsDistribution: FC<SubsetsDistributionProps> = ({
 
     const handleSubsetDistributionChangeEnd = (values: number[] | number): void => {
         if (Array.isArray(values)) {
-            const [startRange, endRange] = values;
-
-            const newSubsetSizes = getSubsetsSizes(subsetParameters, endRange - startRange, MAX_RATIO_VALUE - endRange);
-
-            if (
-                [
-                    newSubsetSizes.trainingSubsetSize,
-                    newSubsetSizes.validationSubsetSize,
-                    newSubsetSizes.testSubsetSize,
-                ].some((size) => size === 0)
-            ) {
+            if (!areSubsetsSizesValid(subsetParameters, values)) {
                 return;
             }
 
@@ -156,11 +137,10 @@ const SubsetsDistribution: FC<SubsetsDistributionProps> = ({
     );
 };
 
-const MAX_RATIO_VALUE = 100;
-
 type SubsetsParameters = TrainingConfiguration['datasetPreparation']['subsetSplit'];
 
 interface TrainingSubsetsProps {
+    hasSupportedModels: boolean;
     subsetsParameters: SubsetsParameters;
     onUpdateTrainingConfiguration: (
         updateFunction: (config: TrainingConfiguration | undefined) => TrainingConfiguration | undefined
@@ -185,9 +165,44 @@ const getSubsets = (subsetsParameters: SubsetsParameters) => {
     };
 };
 
-export const TrainingSubsets: FC<TrainingSubsetsProps> = ({ subsetsParameters, onUpdateTrainingConfiguration }) => {
+const TrainingSubsetsUnavailable = () => {
+    return (
+        <InlineAlert variant={'notice'}>
+            <Heading>Training subsets configuration unavailable</Heading>
+            <Content>
+                The training, validation, and testing subsets are currently unavailable because the project does not
+                contain enough media items to support a proper split.
+                <br />
+                To enable subset configuration, please add more media items so that each subset contains at least one
+                item.
+            </Content>
+        </InlineAlert>
+    );
+};
+
+const TrainingSubsetsChangedDistributionWarning = () => {
+    return (
+        <InlineAlert variant={'notice'}>
+            <Heading>Additional configuration change required to apply new training subsets distribution</Heading>
+            <Content>
+                To apply the updated distribution of training, validation, and testing subsets, please go to{' '}
+                {'"Training"'} tab, choose {'"Pre-trained weights"'}, and enable {'"Reshuffle subsets"'}.
+                <br />
+                This will reset your data splits and begin a new training process, replacing the current model.
+            </Content>
+        </InlineAlert>
+    );
+};
+
+export const TrainingSubsets: FC<TrainingSubsetsProps> = ({
+    hasSupportedModels,
+    subsetsParameters,
+    onUpdateTrainingConfiguration,
+}) => {
     const { trainingSubset, validationSubset } = getSubsets(subsetsParameters);
 
+    const prevSubsetParameters = useRef(subsetsParameters);
+
     const [subsetsDistribution, setSubsetsDistribution] = useState<number[]>([
         trainingSubset.value,
         trainingSubset.value + validationSubset.value,
@@ -259,6 +274,10 @@ export const TrainingSubsets: FC<TrainingSubsetsProps> = ({ subsetsParameters, o
         testSubsetRatio
     );
 
+    const subsetsSizesValid = areSubsetsSizesValid(subsetsParameters, subsetsDistribution);
+    const isChangedDistributionWarningVisible =
+        hasSupportedModels && !isEqual(prevSubsetParameters.current, subsetsParameters);
+
     return (
         <Accordion>
             <Accordion.Title>
@@ -269,21 +288,30 @@ export const TrainingSubsets: FC<TrainingSubsetsProps> = ({ subsetsParameters, o
             </Accordion.Title>
             <Accordion.Content>
                 <Accordion.Description>
-                    Specify the distribution of annotated samples over the training, validation and test subsets. Note:
-                    items that have already been used for training will stay in the same subset even if these parameters
-                    are changed.
+                    Specify the distribution of annotated samples over the training, validation and test subsets. <br />
+                    Note: items that have already been used for training will stay in the same subset even if these
+                    parameters are changed.
+                    <br />
+                    Each subset must have at least one media item.
                 </Accordion.Description>
                 <Accordion.Divider marginY={'size-250'} />
-                <SubsetsDistribution
-                    subsetParameters={subsetsParameters}
-                    subsetsDistribution={subsetsDistribution}
-                    onSubsetsDistributionChange={setSubsetsDistribution}
-                    testSubsetSize={testSubsetSize}
-                    trainingSubsetSize={trainingSubsetSize}
-                    validationSubsetSize={validationSubsetSize}
-                    onSubsetsDistributionChangeEnd={handleUpdateSubsetsConfiguration}
-                    onSubsetsDistributionReset={handleSubsetsConfigurationReset}
-                />
+                <View UNSAFE_className={subsetsSizesValid ? undefined : styles.disabled}>
+                    <SubsetsDistribution
+                        subsetParameters={subsetsParameters}
+                        subsetsDistribution={subsetsDistribution}
+                        onSubsetsDistributionChange={setSubsetsDistribution}
+                        testSubsetSize={testSubsetSize}
+                        trainingSubsetSize={trainingSubsetSize}
+                        validationSubsetSize={validationSubsetSize}
+                        onSubsetsDistributionChangeEnd={handleUpdateSubsetsConfiguration}
+                        onSubsetsDistributionReset={handleSubsetsConfigurationReset}
+                    />
+                </View>
+
+                <Flex direction={'column'} gap={'size-200'} marginTop={'size-200'}>
+                    {!subsetsSizesValid && <TrainingSubsetsUnavailable />}
+                    {isChangedDistributionWarningVisible && <TrainingSubsetsChangedDistributionWarning />}
+                </Flex>
             </Accordion.Content>
         </Accordion>
     );

web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/data-management/training-subsets/training-subsets.module.scss

@@ -11,3 +11,8 @@
 .totalStats {
     font-weight: var(--spectrum-global-font-weight-bold);
 }
+
+.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}

web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/data-management/training-subsets/training-subsets.test.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, within } from '@testing-library/react';
 
 import { TrainingConfiguration } from '../../../../../../../../core/configurable-parameters/services/configuration.interface';
 import {
@@ -109,11 +109,17 @@ describe('TrainingSubsets', () => {
     const [trainingSubset, validationSubset, testSubset] = subsetsParameters;
     const datasetSize = Number(subsetsParameters.at(-1)?.value);
 
-    const App = (props: { subsetParameters: SubsetsParameters }) => {
+    const App = ({
+        subsetParameters,
+        hasSupportedModels = false,
+    }: {
+        subsetParameters: SubsetsParameters;
+        hasSupportedModels?: boolean;
+    }) => {
         const [trainingConfiguration, setTrainingConfiguration] = useState<TrainingConfiguration | undefined>(() =>
             getMockedTrainingConfiguration({
                 datasetPreparation: {
-                    subsetSplit: [...props.subsetParameters],
+                    subsetSplit: subsetParameters,
                     filtering: {},
                     augmentation: {},
                 },
@@ -128,14 +134,15 @@ describe('TrainingSubsets', () => {
 
         return (
             <TrainingSubsets
-                subsetsParameters={trainingConfiguration?.datasetPreparation.subsetSplit ?? props.subsetParameters}
+                hasSupportedModels={hasSupportedModels}
+                subsetsParameters={trainingConfiguration?.datasetPreparation.subsetSplit ?? subsetParameters}
                 onUpdateTrainingConfiguration={handleUpdateTrainingConfiguration}
             />
         );
     };
 
     it('displays subsets distribution properly', () => {
-        render(<App subsetParameters={subsetsParameters} />);
+        render(<App subsetParameters={subsetsParameters} hasSupportedModels />);
 
         expectTrainingSubsetsDistribution({
             validationSubset: Number(validationSubset.value),
@@ -215,4 +222,99 @@ describe('TrainingSubsets', () => {
             testSize: updatedTestSubsetSize,
         });
     });
+
+    it('shows warning that training subsets is unavailable when there are not enough media items', () => {
+        const mockedSubsetsParameters = [
+            getMockedConfigurationParameter({
+                key: 'training',
+                type: 'int',
+                name: 'Training percentage',
+                value: 70,
+                description: 'Percentage of data to use for training',
+                defaultValue: 70,
+                maxValue: 100,
+                minValue: 1,
+            }),
+            getMockedConfigurationParameter({
+                key: 'validation',
+                type: 'int',
+                name: 'Validation percentage',
+                value: 20,
+                description: 'Percentage of data to use for validation',
+                defaultValue: 20,
+                maxValue: 100,
+                minValue: 1,
+            }),
+            getMockedConfigurationParameter({
+                key: 'test',
+                type: 'int',
+                name: 'Test percentage',
+                value: 10,
+                description: 'Percentage of data to use for testing',
+                defaultValue: 10,
+                maxValue: 100,
+                minValue: 1,
+            }),
+            getMockedConfigurationParameter({
+                key: 'auto_selection',
+                type: 'bool',
+                name: 'Auto selection',
+                value: true,
+                description: 'Whether to automatically select data for each subset',
+                defaultValue: true,
+            }),
+            getMockedConfigurationParameter({
+                key: 'remixing',
+                type: 'bool',
+                name: 'Remixing',
+                value: false,
+                description: 'Whether to remix data between subsets',
+                defaultValue: false,
+            }),
+            getMockedConfigurationParameter({
+                key: 'dataset_size',
+                type: 'int',
+                name: 'Dataset size',
+                value: 6,
+                description: 'Total size of the dataset (read-only parameter, not configurable by users)',
+                defaultValue: 6,
+                maxValue: null,
+                minValue: 0,
+            }),
+        ];
+        const [_, mockedValidationSubset, mockedTestSubset] = mockedSubsetsParameters;
+        const mockedDatasetSize = Number(mockedSubsetsParameters.at(-1)?.value);
+
+        render(<App subsetParameters={mockedSubsetsParameters} />);
+
+        const alert = screen.getByRole('alert');
+
+        expect(alert).toBeInTheDocument();
+        expect(within(alert).getByRole('heading')).toHaveTextContent('Training subsets configuration unavailable');
+
+        const validationSize = Math.floor(mockedDatasetSize * (Number(mockedValidationSubset.value) / 100));
+        const testSize = Math.floor(mockedDatasetSize * (Number(mockedTestSubset.value) / 100));
+        const trainingSize = mockedDatasetSize - validationSize - testSize;
+
+        expectSubsetSizes({
+            trainingSize,
+            validationSize,
+            testSize,
+        });
+    });
+
+    it('shows warning when updated subset distribution requires enabling reshuffle and training from scratch', () => {
+        render(<App subsetParameters={subsetsParameters} hasSupportedModels />);
+
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+
+        fireEvent.keyDown(screen.getByLabelText('End range'), { key: 'Left' });
+
+        const alert = screen.getByRole('alert');
+
+        expect(alert).toBeInTheDocument();
+        expect(within(alert).getByRole('heading')).toHaveTextContent(
+            'Additional configuration change required to apply new training subsets distribution'
+        );
+    });
 });