Feature/plugin filter editor

src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.html

@@ -3,7 +3,7 @@ <h3 class="editor-description">Filter Editor</h3>
     <mat-slide-toggle [(ngModel)]="showEditor">
         Editor Mode {{ showEditor ? '(UI)' : '(JSON)' }}
     </mat-slide-toggle>
-    <qhana-plugin-filter-node *ngIf="filterObject && showEditor" [filterObject]="filterObject" (childChange)="updateFilter($event)" (delete)="deleteFilter()"></qhana-plugin-filter-node>
+    <qhana-plugin-filter-node *ngIf="filterObject && showEditor" [filterIn]="filterObject" (filterOut)="updateFilter($event)" (delete)="deleteFilter()"></qhana-plugin-filter-node>
     <ng-container *ngIf="!showEditor">
         <mat-form-field class="form-field">
             <mat-label>Filter String:</mat-label>

src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts

@@ -29,6 +29,7 @@ export class PluginFilterEditorComponent implements OnInit {
         this.registry.getByApiLink<TemplateTabApiObject>(this.tabLink).then(response => {
             this.filterString = response?.data?.filterString ?? this.filterString;
             this.filterObject = JSON.parse(this.filterString);
+            this.updateFilter(this.filterObject);
         });
     }
 

src/app/components-small/plugin-filter-node/plugin-filter-node.component.html

@@ -44,8 +44,8 @@
         <mat-card-content>
             <ng-container *ngIf="children != null">
                 <span *ngIf="inverted" class="t-subheading">Not:</span>
-                <qhana-plugin-filter-node *ngFor="let child of children; let i = index" [filterObject]="children[i]"
-                    [depth]="depth + 1" (childChange)="updateChild($event, i)" (delete)="deleteChild(i)"></qhana-plugin-filter-node>
+                <qhana-plugin-filter-node *ngFor="let child of children; let i = index" [filterIn]="children[i]"
+                    [depth]="depth + 1" (filterOut)="updateChild($event, i)" (delete)="deleteChild(i)"></qhana-plugin-filter-node>
             </ng-container>
             <div class="config-filter" *ngIf="value != null">
                 <span *ngIf="inverted" class="t-subheading">Not:</span>
@@ -66,7 +66,7 @@
                     <mat-icon>delete</mat-icon>
                 </button>
             </div>
-            <mat-checkbox [checked]="inverted" (change)="invertFilter()">Invert - <i>Negate this filter</i></mat-checkbox>
+            <mat-checkbox [checked]="inverted" (change)="invertFilter($event)">Invert - <i>Negate this filter</i></mat-checkbox>
         </mat-card-content>
     </mat-card>
 </div>

src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts

@@ -8,11 +8,12 @@ type FilterType = 'and' | 'or' | 'name' | 'tag' | 'version';
     styleUrls: ['./plugin-filter-node.component.sass']
 })
 export class PluginFilterNodeComponent implements OnInit {
-    @Input() filterObject: any;
+    @Input() filterIn: any;
     @Input() depth: number = 0;
-    @Output() childChange = new EventEmitter<any>();
+    @Output() filterOut = new EventEmitter<any>();
     @Output() delete = new EventEmitter<void>();
 
+    filterObject: any = {};
     type: FilterType | null = null;
     children: any[] | null = null;
     value: string | null = null;
@@ -26,25 +27,23 @@ export class PluginFilterNodeComponent implements OnInit {
     }
 
     ngOnChanges(changes: SimpleChanges) {
-        if (changes.filterObject != null) {
+        if (changes.filterIn.previousValue != null) {
             this.setupFilter();
         }
     }
 
     setupFilter() {
-        this.isEmpty = Object.keys(this.filterObject).length === 0;
-        if (this.isEmpty) {
-            return;
-        }
-        const currentValue = this.filterObject;
-        const filter = currentValue.not ?? this.filterObject;
-        this.inverted = currentValue.not != null;
+        this.isEmpty = Object.keys(this.filterIn).length === 0;
+        this.filterObject = { ...this.filterIn };
+        const filter = this.filterObject.not ?? this.filterObject;
+        this.inverted = this.filterObject.not != null;
         if (filter == null) {
             console.warn("No filter object provided to plugin filter node component");
             return;
         }
         // Should filters have multiple attributes at some point, this must be changed
         const type = Object.keys(filter)[0];
+        // TODO: check for empty filter (currently prints warning)
         if (type !== 'and' && type !== 'or' && type !== 'name' && type !== 'tag' && type !== 'version') {
             console.warn("Invalid filter type provided to plugin filter node component");
             return;
@@ -56,8 +55,20 @@ export class PluginFilterNodeComponent implements OnInit {
         } else {
             this.children = filter[this.type];
         }
-        this.filterObject = currentValue;
-        this.childChange.emit(this.filterObject);
+    }
+
+    updateFilterObject() {
+        if (this.type == null) {
+            console.warn("No type provided to plugin filter node component");
+            return;
+        }
+        const filter = { ...this.filterObject };
+        if (this.inverted) {
+            filter.not[this.type] = this.children ?? this.value;
+        } else {
+            filter[this.type] = this.children ?? this.value;
+        }
+        this.filterOut.emit(filter);
     }
 
     setFilter(type: FilterType) {
@@ -88,16 +99,6 @@ export class PluginFilterNodeComponent implements OnInit {
         this.updateFilterObject();
     }
 
-    updateFilterObject() {
-        if (this.type == null) {
-            console.warn("No type provided to plugin filter node component");
-            return;
-        }
-        const filter = this.filterObject.not ?? this.filterObject;
-        filter[this.type] = this.children ?? this.value;
-        this.childChange.emit(this.filterObject);
-    }
-
     updateChild(value: any, index: number) {
         if (this.children == null) {
             console.warn("No children provided to plugin filter node component");
@@ -112,10 +113,10 @@ export class PluginFilterNodeComponent implements OnInit {
     }
 
     changeType(type: FilterType) {
-        if (type == null) {
+        if (type == null || this.type === type) {
             return;
         }
-        const filter = this.filterObject.not ?? this.filterObject;
+        const filter = { ...(this.filterObject.not ?? this.filterObject) };
         const isLeaf = type !== 'and' && type !== 'or';
         if (this.type != null) {
             delete filter[this.type]
@@ -128,21 +129,21 @@ export class PluginFilterNodeComponent implements OnInit {
             this.value = null;
             filter[type] = this.children ?? [];
         }
-        this.childChange.emit(this.filterObject);
+        this.filterOut.emit(filter);
     }
 
     updateFilterString(event: any) {
         this.value = event.target.value;
         this.updateFilterObject();
     }
 
-    invertFilter() {
-        this.inverted = !this.inverted;
+    invertFilter(event: any) {
+        this.inverted = event.checked;
         if (this.inverted) {
             this.filterObject = { not: this.filterObject };
         } else {
             this.filterObject = this.filterObject.not;
         }
-        this.childChange.emit(this.filterObject);
+        this.filterOut.emit({ ...this.filterObject });
     }
 }