From 5616886cc6ea4f5e1cf1909f4cd55f6f3b6875a6 Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Tue, 11 Jul 2023 10:14:30 +0200
Subject: [PATCH] refactor: improve filter editor usability

---
 src/app/app.module.ts                         |  2 +
 .../plugin-filter-editor.component.html       | 77 ++++++++++---------
 .../plugin-filter-editor.component.ts         |  2 +
 .../plugin-filter-node.component.html         | 19 +++--
 4 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7fb620a..269c5e8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { FormsModule } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
@@ -140,6 +141,7 @@ import { PluginFilterEditorComponent } from './components-small/plugin-filter-ed
         MatCardModule,
         MatButtonModule,
         MatButtonToggleModule,
+        MatSlideToggleModule,
         MatCommonModule,
         MatTabsModule,
         MatRippleModule,
diff --git a/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.html b/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.html
index 5e8fb51..8a2653e 100644
--- a/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.html
+++ b/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.html
@@ -1,52 +1,57 @@
 <div class="filter-editor mat-elevation-z0">
     <h3 class="editor-description">Filter Editor</h3>
-    <qhana-plugin-filter-node *ngIf="filterObject" [filterObject]="filterObject" (childChange)="updateFilter($event)"></qhana-plugin-filter-node>
-    <details>
-        <summary>Filter String Info</summary>
-        
-        <i>Enter a filter string as JSON object. Filter strings have the following keys:</i>
-        <dl>
-            <dt>name</dt> <dd>Represents the name of a plugin.</dd>
-            <dt>tag</dt> <dd>Allows filtering elements by their assigned tags.</dd>
-            <dt>version</dt> <dd>Uses PEP 440 version specifier to filter elements based on specific versions or version ranges.</dd>
-            <dt>not</dt> <dd>Specifies a filter string to exclude certain elements.</dd>
-            <dt>and</dt> <dd>Includes multiple filter strings, with elements passing all conditions included in the filtered results (intersection).</dd>
-            <dt>or</dt> <dd>Includes multiple filter strings, with elements meeting at least one condition included in the filtered results (union).</dd>
-        </dl>
-        <mat-divider></mat-divider>
-        <p>Examples:</p>
+    <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)"></qhana-plugin-filter-node>
+    <ng-container *ngIf="!showEditor">
         <mat-form-field class="form-field">
-            <textarea class="filter-example" matInput disabled rows="3">
+            <mat-label>Filter String:</mat-label>
+            <textarea matInput [formControl]="filterControl" cdkTextareaAutosize #autosize="cdkTextareaAutosize"
+                cdkAutosizeMinRows="1" cdkAutosizeMaxRows="20" (input)="updateFilterEditor()">
+            </textarea>
+            <button mat-raised-button class="copy-button" type="button" (click)="copyFilterString()">
+                <mat-icon>content_copy</mat-icon>
+            </button>
+        </mat-form-field>
+        <details>
+            <summary>Filter String Info</summary>
+            
+            <i>Enter a filter string as JSON object. Filter strings have the following keys:</i>
+            <dl>
+                <dt>name</dt> <dd>Represents the name of a plugin.</dd>
+                <dt>tag</dt> <dd>Allows filtering elements by their assigned tags.</dd>
+                <dt>version</dt> <dd>Uses PEP 440 version specifier to filter elements based on specific versions or version ranges.</dd>
+                <dt>not</dt> <dd>Specifies a filter string to exclude certain elements.</dd>
+                <dt>and</dt> <dd>Includes multiple filter strings, with elements passing all conditions included in the filtered results (intersection).</dd>
+                <dt>or</dt> <dd>Includes multiple filter strings, with elements meeting at least one condition included in the filtered results (union).</dd>
+            </dl>
+            <mat-divider></mat-divider>
+            <p>Examples:</p>
+            <mat-form-field class="form-field">
+                <textarea class="filter-example" matInput disabled rows="3">
 { 
 "name": "hello-world" 
 }
-            </textarea>
-        </mat-form-field>
-        <mat-form-field class="form-field">
-            <textarea class="filter-example" matInput disabled rows="3">
+                </textarea>
+            </mat-form-field>
+            <mat-form-field class="form-field">
+                <textarea class="filter-example" matInput disabled rows="3">
 { 
 "not": { "name": "hello-world" } 
 }
-            </textarea>
-        </mat-form-field>
-        <mat-form-field class="form-field">
-            <textarea class="filter-example" matInput disabled rows="6">
+                </textarea>
+            </mat-form-field>
+            <mat-form-field class="form-field">
+                <textarea class="filter-example" matInput disabled rows="6">
 { 
 "and": [
     { "tag": "data-loading" },
     { "version": ">=0.2.0" }
 ]
 }
-            </textarea>
-        </mat-form-field>
-    </details>
-    <mat-form-field class="form-field">
-        <mat-label>Filter String:</mat-label>
-        <textarea matInput [formControl]="filterControl" cdkTextareaAutosize #autosize="cdkTextareaAutosize"
-            cdkAutosizeMinRows="1" cdkAutosizeMaxRows="20" (input)="updateFilterEditor()">
-        </textarea>
-        <button mat-raised-button class="copy-button" type="button" (click)="copyFilterString()">
-            <mat-icon>content_copy</mat-icon>
-        </button>
-    </mat-form-field>
+                </textarea>
+            </mat-form-field>
+        </details>
+    </ng-container>
 </div>
diff --git a/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts b/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts
index 5ca2aac..73438cb 100644
--- a/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts
+++ b/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts
@@ -17,6 +17,8 @@ export class PluginFilterEditorComponent implements OnInit {
 
     filterObject: any = {};
 
+    showEditor: boolean = true;
+
     constructor(private registry: PluginRegistryBaseService) { }
 
     ngOnInit(): void {
diff --git a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
index f630a11..88dc7c5 100644
--- a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
+++ b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
@@ -2,7 +2,11 @@
     <div *ngIf="isFilterEmpty()" class="create-buttons">
         <button mat-raised-button type="button" (click)="setFilter('and')" color="primary">
             <mat-icon>add</mat-icon>
-            Filter Set
+            AND
+        </button>
+        <button mat-raised-button type="button" (click)="setFilter('or')" color="primary">
+            <mat-icon>add</mat-icon>
+            OR
         </button>
         <button mat-raised-button type="button" (click)="setFilter('name')" color="primary">
             <mat-icon>add</mat-icon>
@@ -20,13 +24,17 @@
                     <div class="config-header-buttons">
                         <button mat-raised-button *ngIf="depth < 2" type="button" (click)="addFilter('and')" color="primary">
                             <mat-icon>add</mat-icon>
-                            Filter Set
+                            AND
+                        </button>
+                        <button mat-raised-button *ngIf="depth < 2" type="button" (click)="addFilter('or')" color="primary">
+                            <mat-icon>add</mat-icon>
+                            OR
                         </button>
                         <button mat-raised-button type="button" (click)="addFilter('name')" color="primary">
                             <mat-icon>add</mat-icon>
                             Filter
                         </button>
-                        <button mat-raised-button type="button" (click)="deleteFilter()" color="warn">
+                        <button mat-raised-button type="button" (click)="deleteFilter()">
                             <mat-icon>delete</mat-icon>
                         </button>
                     </div>
@@ -39,6 +47,7 @@
                     [depth]="depth + 1" (childChange)="updateChild($event)"></qhana-plugin-filter-node>
             </ng-container>
             <div class="config-filter" *ngIf="value != null">
+                <h3 *ngIf="inverted">Not:</h3>
                 <mat-form-field class="inner-form-field">
                     <mat-label>Filter Type:</mat-label>
                     <mat-select [value]="type" (valueChange)="changeType($event)">
@@ -52,11 +61,11 @@
                     <textarea matInput [value]="value" (input)="updateFilterString($event)" cdkTextareaAutosize #autosize="cdkTextareaAutosize"
                     cdkAutosizeMinRows="1" cdkAutosizeMaxRows="15"></textarea>
                 </mat-form-field>
-                <button mat-raised-button type="button" (click)="deleteFilter()" color="warn">
+                <button mat-raised-button type="button" (click)="deleteFilter()">
                     <mat-icon>delete</mat-icon>
                 </button>
             </div>
-            <mat-checkbox [checked]="inverted" (change)="invertFilter()">Invert</mat-checkbox>
+            <mat-checkbox [checked]="inverted" (change)="invertFilter()">Invert - <i>Negate this filter</i></mat-checkbox>
         </mat-card-content>
     </mat-card>
 </div>
\ No newline at end of file