Implement navigation (forward) in interaction sequence

src/app/editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.html

@@ -40,7 +40,7 @@
     <th mat-header-cell *matHeaderCellDef>Label</th>
     <td mat-cell *matCellDef="let interaction">
       @if(interaction != editedElement) {
-        {{interaction.interactionLabel}}
+        <a class="navigation-link" (click)="onNavigateToInteraction(interaction)"> {{interaction.interactionLabel}}</a>
       } @else {
         <mat-form-field appearance="fill" class="long-form">
           <mat-label>Label</mat-label>

src/app/editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.scss

@@ -53,3 +53,13 @@ tr.example-element-row:not(.example-expanded-row):active {
 .warning {
   color: red;
 }
+
+.navigation-link {
+  text-decoration: none;
+  color: white;
+}
+
+.navigation-link:hover {
+  text-decoration: underline;
+
+}

src/app/editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.ts

@@ -38,12 +38,12 @@ export class InteractionSequenceEditorComponent implements OnInit{
   }
   ngOnInit() {
     if(this.interactionSequence != undefined) {
+      this.currentInteractionNode = this.interactionSequence!.rootInteraction.root;
       this.assignData();
     }
   }
 
   private assignData() {
-    this.currentInteractionNode = this.interactionSequence!.rootInteraction.root;
     if(this.currentInteractionNode != undefined) {
       this.sequenceDatasource.data = this.interactionSequence!.findInteraction(this.currentInteractionNode)!.children.map(node => node.root);
     }
@@ -106,4 +106,9 @@ export class InteractionSequenceEditorComponent implements OnInit{
       interaction.removeAction(action);
     }
   }
+
+  onNavigateToInteraction(interaction: Interaction) {
+    this.currentInteractionNode = interaction;
+    this.assignData();
+  }
 }