src/app/editor/gamesystem-editor/product-gamesystem-editor/product-gamesystem-editor.component.html

@@ -1,2 +1,4 @@
 <app-product-state-editor [gamesystem]="gamesystem" (onOpenGamesystemEditor)="onOpenGamesystemEditor($event)"></app-product-state-editor>
-<app-product-transition-editor [gamesystem]="gamesystem" (onOpenGamesystem)="onOpenGamesystemEditor($event)"></app-product-transition-editor>
+<div id="productStateEditor">
+  <app-product-transition-editor [gamesystem]="gamesystem" (onOpenGamesystem)="onOpenGamesystemEditor($event)"></app-product-transition-editor>
+</div>

src/app/editor/gamesystem-editor/product-gamesystem-editor/product-gamesystem-editor.component.scss

@@ -0,0 +1,3 @@
+#productStateEditor {
+  margin-top: 20px;
+}

src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.html

@@ -1,42 +1,54 @@
-<table mat-table [dataSource]="dataSource">
-  <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col.internalName">
-    <th mat-header-cell *matHeaderCellDef (dblclick)="openGamesystemEditor(i)">{{col.displayedName}}</th>
-    <td mat-cell *matCellDef="let transition" [matTooltip]="getLeafStateByIndex(transition, i).stateDescription" (dblclick)="openGamesystemEditor(i)">
-      {{getLeafStateByIndex(transition, i).stateLabel}}
-    </td>
-  </ng-container>
+<mat-card>
+  <mat-card-content>
+    <mat-form-field class="long-form">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
+    </mat-form-field>
+    <table mat-table [dataSource]="dataSource">
+      <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col.internalName">
+        <th mat-header-cell *matHeaderCellDef (dblclick)="openGamesystemEditor(i)">{{col.displayedName}}</th>
+        <td mat-cell *matCellDef="let transition" [matTooltip]="getLeafStateByIndex(transition, i).stateDescription" (dblclick)="openGamesystemEditor(i)">
+          {{getLeafStateByIndex(transition, i).stateLabel}}
+        </td>
+      </ng-container>
 
-  <ng-container matColumnDef="header-row-sec-group">
-    <th
-      mat-header-cell
-      *matHeaderCellDef
-      [style.text-align]="'center'"
-      [attr.colspan]="numberLeafSystems"
-      class="start-end-col"
-    >
-      Starting State
-    </th>
-  </ng-container>
-  <ng-container matColumnDef="header-row-third-group">
-    <th
-      mat-header-cell
-      *matHeaderCellDef
-      [style.text-align]="'center'"
-      [attr.colspan]="numberLeafSystems"
-    >
-      Ending State
-    </th>
-  </ng-container>
+      <ng-container matColumnDef="header-row-sec-group">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          [style.text-align]="'center'"
+          [attr.colspan]="numberLeafSystems"
+          class="start-end-col"
+        >
+          Starting State
+        </th>
+      </ng-container>
+      <ng-container matColumnDef="header-row-third-group">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          [style.text-align]="'center'"
+          [attr.colspan]="numberLeafSystems"
+        >
+          Ending State
+        </th>
+      </ng-container>
 
-  <ng-container *ngIf="displayedColumns.length">
-    <tr
-      mat-header-row
-      *matHeaderRowDef="['header-row-sec-group', 'header-row-third-group']"
-    ></tr>
-  </ng-container>
+      <ng-container *ngIf="displayedColumns.length">
+        <tr
+          mat-header-row
+          *matHeaderRowDef="['header-row-sec-group', 'header-row-third-group']"
+        ></tr>
+      </ng-container>
 
 
-  <tr mat-header-row *matHeaderRowDef="columns;sticky:true"></tr>
-  <tr mat-row *matRowDef="let row; columns: columns;"></tr>
+      <tr mat-header-row *matHeaderRowDef="columns;sticky:true"></tr>
+      <tr mat-row *matRowDef="let row; columns: columns;"></tr>
 
-</table>
+      <tr class="mat-row" *matNoDataRow>
+        <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+      </tr>
+    </table>
+
+  </mat-card-content>
+</mat-card>

src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.scss

@@ -0,0 +1,4 @@
+.long-form {
+  width: 100%;
+}
+

src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.ts

@@ -5,7 +5,7 @@ import {
   MatCell, MatCellDef,
   MatColumnDef,
   MatHeaderCell,
-  MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef,
   MatTable,
   MatTableDataSource
 } from "@angular/material/table";
@@ -14,6 +14,10 @@ import {NgForOf, NgIf} from "@angular/common";
 import {ProductTransition} from "../../../../game-model/gamesystems/ProductTransition";
 import {ProductState} from "../../../../game-model/gamesystems/ProductState";
 import {MatTooltip} from "@angular/material/tooltip";
+import {MatFormField} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {Transition} from "../../../../game-model/gamesystems/Transition";
+import {MatCard, MatCardContent, MatCardTitle} from "@angular/material/card";
 
 class DisplayedColumnName {
   displayedName: string
@@ -41,7 +45,13 @@ class DisplayedColumnName {
     MatRow,
     MatHeaderRowDef,
     MatRowDef,
-    MatTooltip
+    MatTooltip,
+    MatFormField,
+    MatInput,
+    MatNoDataRow,
+    MatCard,
+    MatCardContent,
+    MatCardTitle
   ],
   templateUrl: './product-transition-editor.component.html',
   styleUrl: './product-transition-editor.component.scss'
@@ -51,7 +61,7 @@ export class ProductTransitionEditorComponent implements OnInit{
   @Input() gamesystem: ProductGamesystem | undefined
   @Output() onOpenGamesystem = new EventEmitter<SimpleGamesystem>();
 
-  dataSource = new MatTableDataSource();
+  dataSource = new MatTableDataSource<ProductTransition>();
   displayedColumns: DisplayedColumnName[] = [];
   columns: string[] = [];
   numberLeafSystems: number = -1;
@@ -66,6 +76,14 @@ export class ProductTransitionEditorComponent implements OnInit{
       this.columns = this.displayedColumns.map(column => column.internalName)
 
       this.dataSource.data = this.gamesystem.transitions;
+      this.dataSource.filterPredicate = (data: ProductTransition, filter: string) => {
+        const leaf_starting_states = LeafGamesystemCalculator.calcLeafStates(data.startingState);
+        const leaf_ending_states = LeafGamesystemCalculator.calcLeafStates(data.endingState);
+
+        const combined_leaf_states = leaf_starting_states.concat(leaf_ending_states);
+
+        return combined_leaf_states.some((state) => state.stateLabel.toLowerCase().includes(filter))
+      }
     }
   }
 
@@ -79,8 +97,6 @@ export class ProductTransitionEditorComponent implements OnInit{
       index = leafIndex - this.numberLeafSystems;
     }
 
-
-
     const leafStates = LeafGamesystemCalculator.calcLeafStates(state);
     console.log(leafStates)
     return leafStates[index];
@@ -94,4 +110,9 @@ export class ProductTransitionEditorComponent implements OnInit{
       this.onOpenGamesystem.emit(leafGamesystems[leafIndex - this.numberLeafSystems])
     }
   }
+
+  applyFilter(event: KeyboardEvent) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
 }

src/app/game-model/gamesystems/ProductState.ts

@@ -38,5 +38,16 @@ export class ProductState extends State<ProductTransition> {
     return true;
   }
 
+  existsInnerStateByLowerCaseLabel(label: string): boolean {
+    this.innerStates.forEach(innerState => {
+      if(innerState instanceof SimpleState && innerState.stateLabel.toLowerCase() === label) {
+        return true;
+      } else if(innerState instanceof ProductState) {
+        return innerState.existsInnerStateByLowerCaseLabel(label);
+      }
+    })
+
+    return false;
+  }
 
 }

src/app/game-model/gamesystems/ProductTransition.ts

@@ -3,4 +3,7 @@ import {ProductState} from "./ProductState";
 
 export class ProductTransition extends Transition<ProductState> {
 
+  containsInnerStateByLabel(label: string) {
+    return this.startingState.existsInnerStateByLowerCaseLabel(label) || this.endingState.existsInnerStateByLowerCaseLabel(label);
+  }
 }