Feature/plugin filter editor

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

@@ -1,8 +1,14 @@
 <div class="filter-editor mat-elevation-z0">
     <h3 class="editor-description">Filter Editor</h3>
-    <mat-slide-toggle [(ngModel)]="showEditor">
-        Editor Mode {{ showEditor ? '(UI)' : '(JSON)' }}
-    </mat-slide-toggle>
+    <div class="editor-header">
+        <mat-slide-toggle [(ngModel)]="showEditor">
+            Editor Mode {{ showEditor ? '(UI)' : '(JSON)' }}
+        </mat-slide-toggle>
+        <button mat-raised-button type="button" (click)="ngOnInit()">
+            <mat-icon>refresh</mat-icon>
+            Reload Filter
+        </button>
+    </div>
     <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">
@@ -13,6 +19,7 @@ <h3 class="editor-description">Filter Editor</h3>
             <button mat-raised-button class="copy-button" type="button" (click)="copyFilterString()">
                 <mat-icon>content_copy</mat-icon>
             </button>
+            <mat-error *ngIf="filterControl.hasError('invalidJSON')">Invalid JSON</mat-error>
         </mat-form-field>
         <details>
             <summary>Filter String Info</summary>

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

@@ -13,4 +13,9 @@
     padding-bottom: 0px
 
 .editor-description
-    margin: 0
+    margin: 0
+
+.editor-header
+    display: flex
+    justify-content: space-between
+    align-items: center

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

@@ -1,9 +1,20 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
+import { AbstractControl, FormControl, Validators, ValidatorFn } from '@angular/forms';
 import { ApiLink } from 'src/app/services/api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
 import { TemplateTabApiObject } from 'src/app/services/templates.service';
 
+export function isJSONValidator(): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: any } | null => {
+        try {
+            JSON.parse(control.value);
+            return null;
+        } catch (e) {
+            return { invalidJSON: true };
+        }
+    };
+}
+
 @Component({
     selector: 'qhana-plugin-filter-editor',
     templateUrl: './plugin-filter-editor.component.html',
@@ -14,7 +25,8 @@ export class PluginFilterEditorComponent implements OnInit {
     @Output() filterEmitter: EventEmitter<string> = new EventEmitter<string>();
 
     filterString: string = "{}";
-    filterControl = new FormControl(this.filterString, [Validators.required, Validators.minLength(2)]);  // TODO: Add validator for JSON
+    // TODO: Add JSON validator for filter strings
+    filterControl = new FormControl(this.filterString, [isJSONValidator()]);
 
     filterObject: any = {};
 

src/app/components-small/template-details/template-details.component.ts

@@ -14,12 +14,6 @@ export function isInSetValidator(validValues: any[]): Validators {
     };
 }
 
-export interface Location {
-    value: string;
-    description: string;
-}
-
-
 @Component({
     selector: 'qhana-template-details',
     templateUrl: './template-details.component.html',