Enhance/UI feasible space (#1721)

* Add input type number * Add non-zero validator on step * remove non-standard css
kubeflow · Dec 1, 2021 · a701fd6 · a701fd6
1 parent 53baba8
commit a701fd6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/services/experiment-form.service.ts b/pkg/new-ui/v1beta1/frontend/src/app/services/experiment-form.service.ts
@@ -240,10 +240,15 @@ export class ExperimentFormService {
       return param;
     }
 
-    if ((param.feasibleSpace as FeasibleSpaceMinMax).step === '') {
+    const step = (param.feasibleSpace as FeasibleSpaceMinMax).step;
+    if (step === '' || step === null) {
       delete (param.feasibleSpace as FeasibleSpaceMinMax).step;
     }
 
+    for (const key in param.feasibleSpace) {
+      param.feasibleSpace[key] = param.feasibleSpace[key].toString();
+    }
+
     return param;
   }
 

diff --git a/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/add-modal/add-modal.component.html b/pkg/new-ui/v1beta1/frontend/src/app/shared/params-list/add-modal/add-modal.component.html
@@ -27,17 +27,17 @@ <h1 mat-dialog-title>Add new parameter</h1>
       <div class="range-wrapper" [formGroup]="formGroup.get('feasibleSpace')">
         <mat-form-field appearance="outline">
           <mat-label>Min</mat-label>
-          <input matInput formControlName="min" />
+          <input matInput formControlName="min" type="number" />
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Max</mat-label>
-          <input matInput formControlName="max" />
+          <input matInput formControlName="max" type="number" />
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Step (optional)</mat-label>
-          <input matInput formControlName="step" />
+          <input matInput formControlName="step" type="number" />
         </mat-form-field>
       </div>
     </ng-container>

diff --git a/pkg/new-ui/v1beta1/frontend/src/app/shared/utils.ts b/pkg/new-ui/v1beta1/frontend/src/app/shared/utils.ts
@@ -1,5 +1,13 @@
 import lowerCase from 'lodash-es/lowerCase';
-import { FormControl, FormGroup, Validators, FormArray } from '@angular/forms';
+import {
+  FormControl,
+  FormGroup,
+  Validators,
+  FormArray,
+  ValidatorFn,
+  AbstractControl,
+  ValidationErrors,
+} from '@angular/forms';
 import {
   ParameterSpec,
   FeasibleSpaceMinMax,
@@ -31,7 +39,7 @@ export function createFeasibleSpaceGroup(
     return new FormGroup({
       min: new FormControl(fs.min, Validators.required),
       max: new FormControl(fs.max, Validators.required),
-      step: new FormControl(fs.step, []),
+      step: new FormControl(fs.step, checkIfZero()),
     });
   }
 
@@ -133,3 +141,12 @@ export const safeMultiplication = (
   multiplicand: number,
   multiplier: number,
 ): number => Math.round(multiplicand * 10000.0 * multiplier) / 10000;
+
+export const checkIfZero = (): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+    if (control.value === null || control.value === '') return null;
+
+    const isZero = !/[^0.]/g.test(control.value.toString());
+    return isZero ? { mustNotBeZero: { value: control.value } } : null;
+  };
+};