BI-2053-fix - Fixed Trait Form Scale Units Handling

src/breeding-insight/model/Scale.ts

@@ -27,14 +27,16 @@ export enum DataType {
 
 export class Scale {
   scaleName?: string;
+  units?: string;
   dataType?: string;
   categories?: Array<Category>;
   decimalPlaces?: number;
   validValueMin?: number;
   validValueMax?: number;
 
-  constructor(scaleName?:string, dataType?:string, categories?:Array<Category>, decimalPlaces?:number, validValueMin?:number, validValueMax?: number) {
+  constructor(scaleName?:string, units?:string, dataType?:string, categories?:Array<Category>, decimalPlaces?:number, validValueMin?:number, validValueMax?: number) {
     this.scaleName = scaleName;
+    this.units = units;
     this.dataType = dataType;
     if (categories) {
       this.categories = categories.map(category => new Category(category.label, category.value));
@@ -45,7 +47,7 @@ export class Scale {
   }
 
   static assign(scale: Scale) {
-    return new Scale(scale.scaleName, scale.dataType, scale.categories, scale.decimalPlaces,
+    return new Scale(scale.scaleName, scale.units, scale.dataType, scale.categories, scale.decimalPlaces,
       scale.validValueMin, scale.validValueMax);
   }
 
@@ -71,6 +73,7 @@ export class Scale {
   equals(scale?: Scale): boolean {
     if (!scale) {return false;}
     return (this.scaleName === scale.scaleName) &&
+      (this.units === scale.units) &&
       (this.dataType === scale.dataType) &&
       (this.decimalPlaces === scale.decimalPlaces) &&
       (this.validValueMin === scale.validValueMin) &&

src/components/trait/forms/BaseTraitForm.vue

@@ -258,11 +258,11 @@
       <div class="column is-full">
         <NumericalTraitForm
             class="p-0"
-            v-bind:unit="trait.scale.scaleName"
+            v-bind:units="trait.scale.units"
             v-bind:decimal-places="trait.scale.decimalPlaces"
             v-bind:valid-min="trait.scale.validValueMin"
             v-bind:valid-max="trait.scale.validValueMax"
-            v-on:unit-change="trait.scale.scaleName = $event"
+            v-on:units-change="trait.scale.units = $event"
             v-on:decimal-change="trait.scale.decimalPlaces = $event"
             v-on:min-change="trait.scale.validValueMin = $event"
             v-on:max-change="trait.scale.validValueMax = $event"
@@ -453,7 +453,7 @@ export default class BaseTraitForm extends Vue {
       }
 
       this.trait.scale.dataType = value;
-      this.trait!.scale!.scaleName = value;
+      this.trait!.scale!.units = value;
 
     } else if (Scale.dataTypeEquals(value, DataType.Ordinal) && Scale.dataTypeEquals(this.lastCategoryType, DataType.Nominal)) {
       //Nominal to Ordinal
@@ -471,15 +471,15 @@ export default class BaseTraitForm extends Vue {
         this.restoreMinCategories(2);
       }
       this.trait.scale.dataType = value;
-      this.trait!.scale!.scaleName = value;
+      this.trait!.scale!.units = value;
 
     //Scale history
     } else if (this.scaleHistory[value.toLowerCase()]) {
       this.trait.scale = this.scaleHistory[value.toLowerCase()];
       this.trait.scale.dataType = value;
 
       if (!Scale.dataTypeEquals(value, DataType.Numerical)) {
-        this.trait!.scale!.scaleName = value;
+        this.trait!.scale!.units = value;
       }
     } else {
       // No history
@@ -488,9 +488,9 @@ export default class BaseTraitForm extends Vue {
 
       // Allow for units in the numerical and duration traits
       if (Scale.dataTypeEquals(value, DataType.Numerical)) {
-        this.trait!.scale!.scaleName = undefined;
+        this.trait!.scale!.units = undefined;
       } else {
-        this.trait!.scale!.scaleName = value;
+        this.trait!.scale!.units = value;
       }
 
       //Establish minimal categories for ordinal and nominal

src/components/trait/forms/NumericalTraitForm.vue

@@ -23,9 +23,9 @@
     <div class="column new-term is-10">
       <BasicInputField
           v-bind:field-name="'Unit'"
-          v-bind:value="unit"
+          v-bind:value="units"
           v-bind:show-label="false"
-          v-on:input="$emit('unit-change', $event)"
+          v-on:input="$emit('units-change', $event)"
           v-bind:field-help="'Can be any measurable unit.'"
           v-bind:server-validations="validationHandler.getValidation(validationIndex, TraitError.ScaleName)"
       />
@@ -89,7 +89,7 @@
 })
 export default class NumericalTraitForm extends Vue {
   @Prop()
-  private unit: string | undefined;
+  private units: string | undefined;
   @Prop()
   private decimalPlaces: number | undefined;
   @Prop()

tests/unit/components/tables/SidePanelTable.spec.ts

@@ -39,7 +39,7 @@ function setup() {
 
   // Mock trait response
   const method = new Method('Test Method', 'Computation', 'A method', '1=1');
-  const scale = new Scale('Test Scale', 'Number', undefined, 3, 0, 999);
+  const scale = new Scale('Test Scale', 'cm', 'Number', undefined, 3, 0, 999);
   const level = new ProgramObservationLevel('Plant');
   const range = [...Array(200).keys()];
   traits = range.map((i:number) => new Trait(i.toString(), `Trait${i}`, `Trait${i}`, level, undefined, undefined, undefined, method, scale));