Skip to content

Commit

Permalink
refactor: improve filter editor usability
Browse files Browse the repository at this point in the history
  • Loading branch information
@infacc
infacc committed Jul 11, 2023
1 parent 8b1fe43 commit 5616886
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 41 deletions.
2 changes: 2 additions & 0 deletions src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -140,6 +141,7 @@ import { PluginFilterEditorComponent } from './components-small/plugin-filter-ed
MatCardModule,
MatButtonModule,
MatButtonToggleModule,
MatSlideToggleModule,
MatCommonModule,
MatTabsModule,
MatRippleModule,
Expand Down
77 changes: 41 additions & 36 deletions src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.html
View file
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 2 additions & 0 deletions src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export class PluginFilterEditorComponent implements OnInit {

filterObject: any = {};

showEditor: boolean = true;

constructor(private registry: PluginRegistryBaseService) { }

ngOnInit(): void {
Expand Down
19 changes: 14 additions & 5 deletions src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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)">
Expand All @@ -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>

0 comments on commit 5616886

Please sign in to comment.