Add show pattern description in hints

src/app/canvas-meta-model/canvas-model-consistency.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { FeatureModel } from './feature-model';
 import { Feature, FeatureType, SubfeatureConnectionsType } from './feature';
 import { Instance } from './instance';
-import { ConformanceReport } from './conformance-report';
+import { ConformanceReport, PatternHint } from './conformance-report';
 
 @Injectable({
   providedIn: 'root',
@@ -574,11 +574,11 @@ export class CanvasModelConsistencyService {
     patterns: Instance[]
   ): {
     patternHintFeatureIds: string[];
-    patternHints: string[];
+    patternHints: PatternHint[];
     usedPatterns: Instance[];
   } {
     const patternHintFeatureIds = new Set<string>();
-    const patternHints: string[] = [];
+    const patternHints: PatternHint[] = [];
     const usedPatterns: Instance[] = [];
 
     patterns.forEach((pattern) => {
@@ -607,11 +607,11 @@ export class CanvasModelConsistencyService {
       if (usedLeafFeatures / leafFeatures >= 0.5) {
         let hasMissingFeatures = false;
         let isPossible = true;
-        let hint =
-          'You could add the pattern ' +
-          pattern.name +
-          ' by adding the following features: ';
-        const featureIds = new Set<string>();
+        const hint: PatternHint = {
+          pattern: pattern,
+          missingFeatures: [],
+        };
+        const features = new Set<Feature>();
         featureModel.iterateFeatures(
           (feature) => {
             if (!instance.usedFeatures.includes(feature.id)) {
@@ -619,8 +619,7 @@ export class CanvasModelConsistencyService {
                 isPossible = false;
                 return true;
               } else {
-                featureIds.add(feature.id);
-                hint += feature.name + ', ';
+                features.add(feature);
                 hasMissingFeatures = true;
               }
             }
@@ -630,9 +629,11 @@ export class CanvasModelConsistencyService {
         );
         if (isPossible) {
           if (hasMissingFeatures) {
-            hint = hint.substring(0, hint.length - 2);
+            hint.missingFeatures.push(...Array.from(features));
             patternHints.push(hint);
-            featureIds.forEach((id) => patternHintFeatureIds.add(id));
+            features.forEach((feature) =>
+              patternHintFeatureIds.add(feature.id)
+            );
           } else {
             usedPatterns.push(pattern);
           }

src/app/canvas-meta-model/conformance-report.ts

 import { Instance } from './instance';
+import { Feature } from './feature';
+
+export interface PatternHint {
+  pattern: Instance;
+  missingFeatures: Feature[];
+}
 
 export class ConformanceReport {
   errorFeatureIds: string[] = [];
@@ -10,7 +16,7 @@ export class ConformanceReport {
   hintFeatureIds: string[] = [];
   hints: string[] = [];
   patternHintFeatureIds: string[] = [];
-  patternHints: string[] = [];
+  patternHints: PatternHint[] = [];
   usedPatterns: Instance[] = [];
 
   constructor(conformanceReport: Partial<ConformanceReport> = {}) {

src/app/canvas/api/refine-canvas/refine-canvas.component.html

@@ -168,7 +168,7 @@
               <h6>Pattern Hints</h6>
               <ul>
                 <li *ngFor="let hint of conformance.patternHints">
-                  {{ hint }}
+                  <app-pattern-hint [patternHint]="hint"></app-pattern-hint>
                 </li>
               </ul>
             </div>

src/app/canvas/canvas.module.ts

@@ -63,6 +63,7 @@ import { CanvasElementsComponent } from './elements/canvas-elements/canvas-eleme
 import { CanvasDefinitionOverviewComponent } from './canvas-definition/canvas-definition-overview/canvas-definition-overview.component';
 import { PatternDescriptionModalComponent } from './instances/pattern-description-modal/pattern-description-modal.component';
 import { PatternViewComponent } from './instances/pattern-view/pattern-view.component';
+import { PatternHintComponent } from './instances/pattern-hint/pattern-hint.component';
 
 @NgModule({
   providers: [
@@ -141,6 +142,7 @@ import { PatternViewComponent } from './instances/pattern-view/pattern-view.comp
     InstanceSelectPatternFormComponent,
     PatternComponent,
     PatternDescriptionModalComponent,
+    PatternHintComponent,
     PatternViewComponent,
 
     // merge

src/app/canvas/instances/example/example.component.html

@@ -228,7 +228,7 @@
               <h6>Pattern Hints</h6>
               <ul>
                 <li *ngFor="let hint of conformance.patternHints">
-                  {{ hint }}
+                  <app-pattern-hint [patternHint]="hint"></app-pattern-hint>
                 </li>
               </ul>
             </div>

src/app/canvas/instances/pattern-hint/pattern-hint.component.html

+You could add the pattern
+<app-pattern-view [pattern]="patternHint.pattern"></app-pattern-view> by adding
+the following features: {{ missingFeaturesInfo }}

src/app/canvas/instances/pattern-hint/pattern-hint.component.ts

+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { PatternHint } from '../../../canvas-meta-model/conformance-report';
+
+@Component({
+  selector: 'app-pattern-hint',
+  templateUrl: './pattern-hint.component.html',
+  styleUrls: ['./pattern-hint.component.css'],
+})
+export class PatternHintComponent implements OnChanges {
+  @Input() patternHint: PatternHint;
+
+  missingFeaturesInfo: string;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.patternHint) {
+      this.buildMissingFeaturesInfo();
+    }
+  }
+
+  private buildMissingFeaturesInfo(): void {
+    this.missingFeaturesInfo = this.patternHint.missingFeatures
+      .map((feature) => feature.name)
+      .join(', ');
+  }
+}

src/app/canvas/instances/pattern-view/pattern-view.component.html

-<span class="btn btn-link p-0 border-0" (click)="openDescription()">{{
-  pattern.name
-}}</span>
+<span
+  class="btn btn-link p-0 border-0 align-baseline"
+  (click)="openDescription()"
+  >{{ pattern.name }}</span
+>