src/app/app.module.ts

@@ -54,6 +54,14 @@ import {MatOption, MatSelect} from "@angular/material/select";
 import {
   ProductGamesystemEditorComponent
 } from "./editor/gamesystem-editor/product-gamesystem-editor/product-gamesystem-editor.component";
+import {
+  ProductTransitionEditorComponent
+} from "./editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component";
+import {
+  ProductStateEditorComponent
+} from "./editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component";
+import {MatTooltip} from "@angular/material/tooltip";
+import {MatCard, MatCardContent} from "@angular/material/card";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -70,7 +78,10 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     GamesystemEditorComponent,
     SimpleGamesystemEditorComponent,
     SimpleStateEditorComponent,
-    SimpleTransitionEditorComponent
+    SimpleTransitionEditorComponent,
+    ProductTransitionEditorComponent,
+    ProductStateEditorComponent,
+    ProductGamesystemEditorComponent
   ],
   imports: [
     BrowserModule,
@@ -125,7 +136,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatSelect,
     MatOption,
     MatHint,
-    ProductGamesystemEditorComponent
+    MatTooltip,
+    MatCard,
+    MatCardContent
   ],
   providers: [],
   bootstrap: [AppComponent]

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>
+<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/product-gamesystem-editor/product-gamesystem-editor.component.ts

@@ -10,11 +10,6 @@ import {
 
 @Component({
   selector: 'app-product-gamesystem-editor',
-  standalone: true,
-  imports: [
-    ProductStateEditorComponent,
-    ProductTransitionEditorComponent
-  ],
   templateUrl: './product-gamesystem-editor.component.html',
   styleUrl: './product-gamesystem-editor.component.scss'
 })

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

@@ -1,2 +1,4 @@
 <app-simple-state-editor [states]="simpleGamesystem!.states" [gamesystem]="simpleGamesystem"></app-simple-state-editor>
-<app-simple-transition-editor class="transition-editor" [gamesystem]="simpleGamesystem"></app-simple-transition-editor>
+<div id="transition-editor">
+  <app-simple-transition-editor [gamesystem]="simpleGamesystem"></app-simple-transition-editor>
+</div>

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

@@ -1,3 +1,4 @@
-.transition-editor {
-  margin-top: 15px;
+#transition-editor {
+  margin-top: 20px !important;
+
 }

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

@@ -1,3 +1,9 @@
+<mat-card>
+  <mat-card-content>
+    <mat-form-field appearance="fill" class="long-form">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
+    </mat-form-field>
     <table mat-table [dataSource]="datasource" class="mat-elevation-z8">
       <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">
         <th mat-header-cell *matHeaderCellDef>{{col}}</th>
@@ -12,3 +18,5 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
+  </mat-card-content>
+</mat-card>

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

@@ -5,3 +5,7 @@ table {
 .mat-column-Initial {
   width: 32px;
 }
+
+.long-form {
+  width: 100%;
+}

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

@@ -2,43 +2,16 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {ProductGamesystem} from "../../../../game-model/gamesystems/ProductGamesystem";
 import {SimpleGamesystem} from "../../../../game-model/gamesystems/SimpleGamesystem";
 import {
-  MatCell, MatCellDef,
-  MatColumnDef, MatHeaderCell, MatHeaderCellDef,
-  MatHeaderRow,
-  MatHeaderRowDef,
-  MatRow,
-  MatRowDef,
-  MatTable,
   MatTableDataSource
 } from "@angular/material/table";
 import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
 import {State} from "../../../../game-model/gamesystems/State";
-import {NgForOf, NgIf} from "@angular/common";
-import {ProductState} from "../../../../game-model/gamesystems/ProductState";
-import {MatIcon} from "@angular/material/icon";
-import {Gamesystem} from "../../../../game-model/gamesystems/Gamesystem";
 import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
-import {MatTooltip} from "@angular/material/tooltip";
+import {ProductTransition} from "../../../../game-model/gamesystems/ProductTransition";
+import {ProductState} from "../../../../game-model/gamesystems/ProductState";
 
 @Component({
   selector: 'app-product-state-editor',
-  standalone: true,
-  imports: [
-    MatTable,
-    MatRow,
-    MatRowDef,
-    MatHeaderRow,
-    MatHeaderRowDef,
-    MatColumnDef,
-    MatHeaderCell,
-    MatHeaderCellDef,
-    MatCell,
-    MatCellDef,
-    NgForOf,
-    NgIf,
-    MatIcon,
-    MatTooltip
-  ],
   templateUrl: './product-state-editor.component.html',
   styleUrl: './product-state-editor.component.scss'
 })
@@ -47,7 +20,7 @@ export class ProductStateEditorComponent implements OnInit{
   @Input() gamesystem: ProductGamesystem | undefined
   @Output('onOpenGamesystemEditor') openGamesystemEditorEmitter = new EventEmitter<SimpleGamesystem>();
   displayedColumns: string[] = [];
-  datasource = new MatTableDataSource();
+  datasource = new MatTableDataSource<ProductState>();
 
 
   ngOnInit() {
@@ -55,6 +28,10 @@ export class ProductStateEditorComponent implements OnInit{
     this.generateColumnNamesRecursively(this.gamesystem!, "");
     this.displayedColumns.push('Initial');
     this.datasource.data = this.gamesystem!.states;
+    this.datasource.filterPredicate = (data: ProductState, filter: string) => {
+      const leaf_states = LeafGamesystemCalculator.calcLeafStates(data);
+      return leaf_states.some((state) => state.stateLabel.toLowerCase().includes(filter))
+    }
   }
 
   generateColumnNamesRecursively(gamesystem: ProductGamesystem, nestedColumnName: string) {
@@ -79,4 +56,9 @@ export class ProductStateEditorComponent implements OnInit{
     this.openGamesystemEditorEmitter.emit(clicked_gamesystem);
   }
 
+  applyFilter(event: KeyboardEvent) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.datasource.filter = filterValue.trim().toLowerCase();
+  }
+
 }

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html

@@ -1,3 +1,9 @@
+<mat-card>
+  <mat-card-content>
+    <mat-form-field appearance="fill" class="long-form">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
+    </mat-form-field>
     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>Label</th>
@@ -75,3 +81,6 @@
       </tr>
       <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
     </table>
+
+  </mat-card-content>
+</mat-card>

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.ts

@@ -4,6 +4,8 @@ import {MatTableDataSource} from "@angular/material/table";
 import {animate, state, style, transition, trigger} from "@angular/animations";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {SimpleGamesystem} from "../../../../game-model/gamesystems/SimpleGamesystem";
+import {ProductState} from "../../../../game-model/gamesystems/ProductState";
+import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
 
 @Component({
   selector: 'app-simple-state-editor',
@@ -21,7 +23,7 @@ export class SimpleStateEditorComponent implements OnInit{
 
   @Input() states: SimpleState[] = [];
   @Input() gamesystem: SimpleGamesystem | undefined
-  dataSource = new MatTableDataSource();
+  dataSource = new MatTableDataSource<SimpleState>();
   displayedColumns = ["name", "initial", "edit", "delete"];
   columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
   expandedElement: SimpleState | null = null;
@@ -34,6 +36,9 @@ export class SimpleStateEditorComponent implements OnInit{
 
   ngOnInit() {
     this.dataSource.data = this.states;
+    this.dataSource.filterPredicate = (data: SimpleState, filter: string) => {
+      return data.stateLabel.toLowerCase().includes(filter);
+    }
   }
 
   editState(state: SimpleState) {
@@ -83,4 +88,9 @@ export class SimpleStateEditorComponent implements OnInit{
   onStateChange() {
     this.gamesystem!.onModifyContent();
   }
+
+  applyFilter(event: KeyboardEvent) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
 }

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

@@ -1,3 +1,9 @@
+<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>
@@ -39,4 +45,10 @@
       <tr mat-header-row *matHeaderRowDef="columns;sticky:true"></tr>
       <tr mat-row *matRowDef="let row; columns: columns;"></tr>
 
+      <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

@@ -2,19 +2,11 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {ProductGamesystem} from "../../../../game-model/gamesystems/ProductGamesystem";
 import {SimpleGamesystem} from "../../../../game-model/gamesystems/SimpleGamesystem";
 import {
-  MatCell, MatCellDef,
-  MatColumnDef,
-  MatHeaderCell,
-  MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
-  MatTable,
   MatTableDataSource
 } from "@angular/material/table";
 import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
-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";
-
 class DisplayedColumnName {
   displayedName: string
   internalName: string
@@ -27,22 +19,6 @@ class DisplayedColumnName {
 }
 @Component({
   selector: 'app-product-transition-editor',
-  standalone: true,
-  imports: [
-    MatTable,
-    NgForOf,
-    MatColumnDef,
-    MatHeaderCell,
-    MatHeaderCellDef,
-    MatCell,
-    MatCellDef,
-    NgIf,
-    MatHeaderRow,
-    MatRow,
-    MatHeaderRowDef,
-    MatRowDef,
-    MatTooltip
-  ],
   templateUrl: './product-transition-editor.component.html',
   styleUrl: './product-transition-editor.component.scss'
 })
@@ -51,7 +27,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 +42,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 +63,6 @@ export class ProductTransitionEditorComponent implements OnInit{
       index = leafIndex - this.numberLeafSystems;
     }
 
-
-
     const leafStates = LeafGamesystemCalculator.calcLeafStates(state);
     console.log(leafStates)
     return leafStates[index];
@@ -94,4 +76,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/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html

@@ -1,3 +1,10 @@
+<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" class="mat-elevation-z8" multiTemplateDataRows>
       <ng-container matColumnDef="starting-state">
         <th mat-header-cell *matHeaderCellDef>Starting State</th>
@@ -79,3 +86,6 @@
       </tr>
       <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
     </table>
+
+  </mat-card-content>
+</mat-card>

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

@@ -13,6 +13,8 @@ import {
 import {SimpleTransition} from "../../../../game-model/gamesystems/SimpleTransition";
 import {animate, state, style, transition, trigger} from "@angular/animations";
 import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
+import {ProductTransition} from "../../../../game-model/gamesystems/ProductTransition";
+import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
 
 @Component({
   selector: 'app-simple-transition-editor',
@@ -44,6 +46,9 @@ export class SimpleTransitionEditorComponent implements OnInit {
   transitionEndingStateError = true;
   ngOnInit() {
     this.dataSource.data = this.gamesystem!.transitions;
+    this.dataSource.filterPredicate = (data: SimpleTransition, filter: string) => {
+      return [data.startingState, data.endingState].some((state) => state.stateLabel.toLowerCase().includes(filter))
+    }
   }
 
   addTransition() {
@@ -83,4 +88,9 @@ export class SimpleTransitionEditorComponent implements OnInit {
       this.dataSource.data = this.gamesystem!.transitions;
     }
   }
+
+  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);
+  }
 }