[80002] Improve form appearance and validation (#18)

Author: vishniakov-nikolai

automation/jenkinsfiles/deploy.groovy

@@ -1,4 +1,4 @@
-@Library(['workbench_lib', 'mainlib@0.1.0']) _
+@Library(['workbench_lib@PR-17', 'mainlib@0.1.0']) _
 import java.text.SimpleDateFormat
 
 

automation/jenkinsfiles/precommit.groovy

@@ -1,4 +1,4 @@
-@Library(['workbench_lib', 'mainlib@0.4.0']) _
+@Library(['workbench_lib@PR-17', 'mainlib@0.4.0']) _
 
 properties([
     buildDiscarder(logRotator(daysToKeepStr: "10")),

client/automation/package_BOM.txt

@@ -48,6 +48,7 @@ assets/js/track.js
 assets/netron/openvino-metadata.json
 assets/netron/view-grapher.css
 assets/netron/view-sidebar.css
+assets/svg/arrow-down.svg
 assets/svg/icon_set.svg
 assets/svg/point-a.svg
 assets/svg/point-b.svg

client/e2e/src/create-na-dataset.e2e-spec.ts

@@ -5,7 +5,7 @@ import {
   ConfigurationWizardPage,
   InferenceType,
   NotAnnotatedDataSet,
-  TranformationOptions,
+  TransformationOptions,
 } from './pages/configuration-wizard.po';
 import { Helpers } from './pages/helpers';
 import { TestUtils } from './pages/test-utils';
@@ -114,10 +114,10 @@ describe('UI tests on Creating Not Annotated Datasets', () => {
     dataSet.imageFiles = [browser.params.precommit_scope.resources.testImages.streetImage];
     await configurationWizard.openDatasetPageAndImportImages(dataSet);
 
-    await configurationWizard.selectTransformationOption(TranformationOptions.HORIZONTAL);
+    await configurationWizard.selectTransformationOption(TransformationOptions.HORIZONTAL);
     await configurationWizard.importDataset(dataSet.name);
 
-    expect(await configurationWizard.checkImagesInDataset(dataSet.name, TranformationOptions.HORIZONTAL)).toBeTruthy(
+    expect(await configurationWizard.checkImagesInDataset(dataSet.name, TransformationOptions.HORIZONTAL)).toBeTruthy(
       `Image not found in dataset`
     );
 
@@ -128,10 +128,10 @@ describe('UI tests on Creating Not Annotated Datasets', () => {
     dataSet.imageFiles = [browser.params.precommit_scope.resources.testImages.personImage];
     await configurationWizard.openDatasetPageAndImportImages(dataSet);
 
-    await configurationWizard.selectTransformationOption(TranformationOptions.VERTICAL);
+    await configurationWizard.selectTransformationOption(TransformationOptions.VERTICAL);
     await configurationWizard.importDataset(dataSet.name);
 
-    expect(await configurationWizard.checkImagesInDataset(dataSet.name, TranformationOptions.VERTICAL)).toBeTruthy(
+    expect(await configurationWizard.checkImagesInDataset(dataSet.name, TransformationOptions.VERTICAL)).toBeTruthy(
       `Image not found in dataset`
     );
 
@@ -145,7 +145,7 @@ describe('UI tests on Creating Not Annotated Datasets', () => {
     ];
     await configurationWizard.openDatasetPageAndImportImages(dataSet);
 
-    await configurationWizard.selectTransformationOption(TranformationOptions.ERASE);
+    await configurationWizard.selectTransformationOption(TransformationOptions.ERASE);
 
     const eraseRatio = Helpers.getRandomInRange(1, 21);
     console.log(`Set value of erase ratio to ${eraseRatio}%`);
@@ -179,7 +179,7 @@ describe('UI tests on Creating Not Annotated Datasets', () => {
     dataSet.imageFiles = [browser.params.precommit_scope.resources.testImages.personImage];
     await configurationWizard.openDatasetPageAndImportImages(dataSet);
 
-    await configurationWizard.selectTransformationOption(TranformationOptions.ERASE);
+    await configurationWizard.selectTransformationOption(TransformationOptions.ERASE);
 
     const eraseRatio = 21;
     await TestUtils.setInput('eraseRatio', eraseRatio);
@@ -205,7 +205,7 @@ describe('UI tests on Creating Not Annotated Datasets', () => {
     ];
     await configurationWizard.openDatasetPageAndImportImages(dataSet);
 
-    await configurationWizard.selectTransformationOption(TranformationOptions.NOISE);
+    await configurationWizard.selectTransformationOption(TransformationOptions.NOISE);
 
     const noiseInjection = Helpers.getRandomInRange(1, 5);
     console.log(`Set value of noise injection to ${noiseInjection}%`);
@@ -239,7 +239,7 @@ describe('UI tests on Creating Not Annotated Datasets', () => {
     dataSet.imageFiles = [browser.params.precommit_scope.resources.testImages.personImage];
     await configurationWizard.openDatasetPageAndImportImages(dataSet);
 
-    await configurationWizard.selectTransformationOption(TranformationOptions.NOISE);
+    await configurationWizard.selectTransformationOption(TransformationOptions.NOISE);
 
     const noiseInjection = 5.01;
     await TestUtils.setInput('noiseRatio', noiseInjection);
@@ -267,7 +267,7 @@ describe('UI tests on Creating Not Annotated Datasets', () => {
     const presetsCount = 6;
     await configurationWizard.openDatasetPageAndImportImages(dataSet);
 
-    await configurationWizard.selectTransformationOption(TranformationOptions.COLOR);
+    await configurationWizard.selectTransformationOption(TransformationOptions.COLOR);
 
     await configurationWizard.importDataset(dataSet.name);
 

client/e2e/src/pages/configuration-wizard.po.ts

@@ -28,7 +28,7 @@ enum EditButtonDataTestId {
   DATASETS = 'edit-import-dataset-button',
 }
 
-export enum TranformationOptions {
+export enum TransformationOptions {
   HORIZONTAL = 'applyHorizontalFlip',
   VERTICAL = 'applyVerticalFlip',
   ERASE = 'applyErase',
@@ -1280,21 +1280,21 @@ export class ConfigurationWizardPage {
   }
 
   async selectAllTransformation(): Promise<void> {
-    await this.selectTransformationOption(TranformationOptions.HORIZONTAL);
-    await this.selectTransformationOption(TranformationOptions.VERTICAL);
-    await this.selectTransformationOption(TranformationOptions.ERASE);
-    await this.selectTransformationOption(TranformationOptions.NOISE);
-    await this.selectTransformationOption(TranformationOptions.COLOR);
+    await this.selectTransformationOption(TransformationOptions.HORIZONTAL);
+    await this.selectTransformationOption(TransformationOptions.VERTICAL);
+    await this.selectTransformationOption(TransformationOptions.ERASE);
+    await this.selectTransformationOption(TransformationOptions.NOISE);
+    await this.selectTransformationOption(TransformationOptions.COLOR);
   }
 
   async selectTransformationOption(option: string): Promise<void> {
-    const checkBox = TestUtils.getElementByDataTestId(option);
-    await TestUtils.scrollToElement(checkBox);
+    const augmentationTypeSection = TestUtils.getElementByDataTestId(option);
+    await TestUtils.scrollToElement(augmentationTypeSection);
     await browser.sleep(1000);
-    await checkBox.click();
+    await augmentationTypeSection.click();
     await browser.sleep(1000);
 
-    if (option === TranformationOptions.COLOR) {
+    if (option === TransformationOptions.COLOR) {
       await this.selectAllColorPresets();
     }
   }
@@ -1312,10 +1312,10 @@ export class ConfigurationWizardPage {
   async checkImagesInDataset(datasetName: string, transformation: string): Promise<boolean> {
     let transformedImagePath;
     switch (transformation) {
-      case TranformationOptions.HORIZONTAL:
+      case TransformationOptions.HORIZONTAL:
         transformedImagePath = browser.params.precommit_scope.resources.transformedImages.horizontalFlip.pathToImage;
         break;
-      case TranformationOptions.VERTICAL:
+      case TransformationOptions.VERTICAL:
         transformedImagePath = browser.params.precommit_scope.resources.transformedImages.verticalFlip.pathToImage;
     }
     console.log('Get hash from transformed image');

client/e2e/src/pages/model-manager.po.ts

@@ -324,7 +324,7 @@ export class ModelManagerPage {
   }
 
   async clickMoreTips(fieldCss) {
-    const field = await element(by.css(`a[data-test-id="${fieldCss}"]`));
+    const field = await element(by.css(`wb-button[data-test-id="${fieldCss}"]`));
     await field.click();
     const tipName = fieldCss.substring(5, fieldCss.length - 4);
     await console.log(`Learn more for ${tipName} is clicked.`);

client/src/app/modules/accuracy/components/visualization/network-output/original-image-controls/original-image-controls.component.scss

@@ -9,6 +9,7 @@
 
   wb-config-form-field {
     margin-right: auto;
+    margin-bottom: 0;
   }
 
   > wb-button + wb-button {

client/src/app/modules/dataset-manager/components/create-dataset/dataset-augmentation/color-transformations-section/color-transformations-section.component.html

@@ -4,7 +4,12 @@
       <wb-info-hint [message]="'Choose one or several transformations. ' + augmentationTipMessage"></wb-info-hint>
       <div class="row">
         <div class="col" *ngFor="let preset of colorSpacePresets">
-          <div class="transform-img" data-test-id="transform-img" *ngIf="defaultImagePath" (click)="addPreset(preset)">
+          <div
+            *ngIf="defaultImagePath"
+            class="transform-img"
+            data-test-id="transform-img"
+            (click)="togglePreset(preset)"
+          >
             <img
               [ngStyle]="{
                 filter: 'brightness(' + preset.brightness + ') contrast(' + preset.contrast + ')'
@@ -20,9 +25,7 @@
               <span>Contrast: {{ getPercentageValue(preset.contrast) }}</span>
             </div>
           </div>
-          <mat-checkbox [checked]="selectedPresets.includes(preset)" (change)="addPreset(preset)">
-            {{ preset.name }}
-          </mat-checkbox>
+          <wb-config-form-field [field]="getField(preset)" [group]="group"></wb-config-form-field>
         </div>
       </div>
     </div>

client/src/app/modules/dataset-manager/components/create-dataset/dataset-augmentation/color-transformations-section/color-transformations-section.component.scss

@@ -24,19 +24,25 @@ $icon-size: 30px;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: $container-padding;
+  gap: 10px 20px;
 }
 
 .transform-img {
   position: relative;
 
   img {
     width: $image-card-size;
+    border: 1px solid $very-light-pink;
+    border-radius: 3px;
   }
 }
 
 .col {
   flex: 0 0 calc(33.33% - 20px);
-  margin: 5px;
+
+  wb-config-form-field {
+    margin-bottom: 0;
+  }
 }
 
 .img-overlay {

client/src/app/modules/dataset-manager/components/create-dataset/dataset-augmentation/color-transformations-section/color-transformations-section.component.ts

@@ -8,6 +8,7 @@ import {
   OnDestroy,
 } from '@angular/core';
 import { DecimalPipe } from '@angular/common';
+import { FormControl, FormGroup } from '@angular/forms';
 
 import { isNil } from 'lodash';
 import { Subject } from 'rxjs';
@@ -18,6 +19,8 @@ import { DatasetsService } from '@core/services/api/rest/datasets.service';
 
 import { IImageCorrection } from '@store/dataset-store/dataset.model';
 
+import { AdvancedConfigField } from '@shared/components/config-form-field/config-form-field.component';
+
 import { colorSpacePresets } from '../dataset-augmentation-fields';
 import defaultImages from '../../../../../../../assets/img/default-dataset/images.json';
 
@@ -52,7 +55,8 @@ export class ColorTransformationsSectionComponent implements OnDestroy {
   public augmentationTipMessage = this.messagesService.getHint('createDatasetTips', 'augmentationTip');
   public readonly defaultImageName = defaultImages[0];
   public defaultImagePath: string = null;
-  public dafaultImage: File = null;
+
+  readonly group = new FormGroup({});
 
   private unsubscribe$: Subject<void> = new Subject<void>();
   isNil = isNil;
@@ -62,15 +66,29 @@ export class ColorTransformationsSectionComponent implements OnDestroy {
     private decimalPipe: DecimalPipe,
     private datasetService: DatasetsService,
     private _cdr: ChangeDetectorRef
-  ) {}
+  ) {
+    this.colorSpacePresets.forEach(({ id }) => {
+      this.group.addControl(id, new FormControl());
+    });
 
-  addPreset(preset): void {
-    if (this.selectedPresets.includes(preset)) {
-      this.selectedPresets = this.selectedPresets.filter((el) => el.name !== preset.name);
-    } else {
-      this.selectedPresets.push(preset);
-    }
-    this.setPresetsEvent.emit({ presets: this.selectedPresets });
+    this.group.valueChanges.pipe(takeUntil(this.unsubscribe$)).subscribe((checkboxes) => {
+      const selectedPresetIds = Object.keys(checkboxes).filter((key) => checkboxes[key]);
+
+      this.selectedPresets = this.colorSpacePresets.filter(({ id }) => selectedPresetIds.includes(id));
+      this.setPresetsEvent.emit({ presets: this.selectedPresets });
+    });
+  }
+
+  togglePreset({ id }): void {
+    this.group.get(id).setValue(!this.group.get(id).value);
+  }
+
+  getField({ id, name }: IImageCorrection): AdvancedConfigField {
+    return {
+      name: id,
+      label: name,
+      type: 'checkbox',
+    };
   }
 
   getPercentageValue(value): string {

client/src/app/modules/dataset-manager/components/create-dataset/dataset-augmentation/dataset-augmentation-fields.ts

@@ -20,30 +20,35 @@ const horizontalFlipField: AdvancedConfigField = {
   type: 'checkbox',
   name: AugmentationFormFieldNames.HORIZONTAL_FLIP,
   value: false,
+  label: 'Horizontal Flip',
 };
 
 const verticalFlipField: AdvancedConfigField = {
   type: 'checkbox',
   name: AugmentationFormFieldNames.VERTICAL_FLIP,
   value: false,
+  label: 'Vertical Flip',
 };
 
 const applyEraseField: AdvancedConfigField = {
   type: 'checkbox',
   name: AugmentationFormFieldNames.RANDOM_ERASE,
   value: false,
+  label: 'Random Erase',
 };
 
 const applyNoiseField: AdvancedConfigField = {
   type: 'checkbox',
   name: AugmentationFormFieldNames.NOISE_INJECTION,
   value: false,
+  label: 'Noise Injection',
 };
 
 const changeColorSpace: AdvancedConfigField = {
   type: 'checkbox',
   name: AugmentationFormFieldNames.IMAGE_CORRECTIONS,
   value: false,
+  label: 'Color Transformations',
 };
 
 const eraseFields: AdvancedConfigField[] = [
@@ -91,31 +96,37 @@ const noiseFields: AdvancedConfigField[] = [
 
 export const colorSpacePresets: IImageCorrection[] = [
   {
+    id: 'preset-1',
     name: 'Preset 1',
     brightness: 1.2,
     contrast: 1.2,
   },
   {
+    id: 'preset-2',
     name: 'Preset 2',
     brightness: 1.2,
     contrast: 0.8,
   },
   {
+    id: 'preset-3',
     name: 'Preset 3',
     brightness: 1.0,
     contrast: 1.2,
   },
   {
+    id: 'preset-4',
     name: 'Preset 4',
     brightness: 0.8,
     contrast: 1.0,
   },
   {
+    id: 'preset-5',
     name: 'Preset 5',
     brightness: 0.8,
     contrast: 1.2,
   },
   {
+    id: 'preset-6',
     name: 'Preset 6',
     brightness: 0.8,
     contrast: 0.8,