Add show description to instance selection

src/app/canvas/instances/instance-select-pattern-form/instance-select-pattern-form.component.html

@@ -11,7 +11,7 @@
       >
         <option
           *ngFor="let expertModel of expertModels"
-          [ngValue]="expertModel._id"
+          [ngValue]="expertModel"
         >
           {{ expertModel.name }}
         </option>
@@ -24,13 +24,26 @@
       <select id="instance" formControlName="instance" class="form-control">
         <option
           *ngFor="let instance of expertModel ? expertModel.getPatterns() : []"
-          [ngValue]="instance.id"
+          [ngValue]="instance"
         >
           {{ instance.name }}
         </option>
       </select>
     </div>
   </div>
+  <div
+    *ngIf="
+      (selectPatternForm.valid || showsPattern) &&
+      instance != null &&
+      instance.description
+    "
+    class="form-group form-row"
+  >
+    <label class="col-sm-4 col-form-label">Description</label>
+    <div class="col-sm-8">
+      {{ instance.description }}
+    </div>
+  </div>
   <div class="form-group form-row">
     <div class="col-sm-12">
       <button

src/app/canvas/instances/instance-select-pattern-form/instance-select-pattern-form.component.ts

@@ -3,8 +3,6 @@ import {
   EventEmitter,
   Input,
   OnChanges,
-  OnDestroy,
-  OnInit,
   Output,
   SimpleChanges,
 } from '@angular/core';
@@ -16,16 +14,13 @@ import {
 } from '@angular/forms';
 import { Instance } from '../../../canvas-meta-model/instance';
 import { ExpertModel } from '../../../canvas-meta-model/expert-model';
-import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-instance-select-pattern-form',
   templateUrl: './instance-select-pattern-form.component.html',
   styleUrls: ['./instance-select-pattern-form.component.css'],
 })
-export class InstanceSelectPatternFormComponent
-  implements OnInit, OnChanges, OnDestroy
-{
+export class InstanceSelectPatternFormComponent implements OnChanges {
   @Input() expertModels: ExpertModel[] = [];
   @Input() showsPattern = false;
 
@@ -40,22 +35,8 @@ export class InstanceSelectPatternFormComponent
     instance: [null, Validators.required],
   });
 
-  expertModel: ExpertModel;
-
-  private formSubscription: Subscription;
-
   constructor(private fb: FormBuilder) {}
 
-  ngOnInit() {
-    this.formSubscription = this.featureModelControl.valueChanges.subscribe(
-      (value) => {
-        this.expertModel = this.expertModels.find(
-          (expertModel) => expertModel._id === value
-        );
-      }
-    );
-  }
-
   ngOnChanges(changes: SimpleChanges) {
     if (changes.showsPattern) {
       if (changes.showsPattern.currentValue) {
@@ -66,19 +47,21 @@ export class InstanceSelectPatternFormComponent
     }
   }
 
-  ngOnDestroy() {
-    if (this.formSubscription) {
-      this.formSubscription.unsubscribe();
-    }
-  }
-
   submit() {
     this.showPattern.emit({
-      instance: this.expertModel.getInstance(this.instanceControl.value),
+      instance: this.instance,
       featureModelId: this.expertModel._id,
     });
   }
 
+  get expertModel(): ExpertModel | undefined {
+    return this.featureModelControl.value;
+  }
+
+  get instance(): Instance | undefined {
+    return this.instanceControl.value;
+  }
+
   get featureModelControl(): FormControl {
     return this.selectPatternForm.get('featureModel') as FormControl;
   }