UI template editor

src/app/app-routing.module.ts

@@ -25,6 +25,7 @@ import { ExperimentsPageComponent } from './components/experiments-page/experime
 import { PluginTabComponent } from './components/plugin-tab/plugin-tab.component';
 import { SettingsPageComponent } from './components/settings-page/settings-page.component';
 import { TimelineStepComponent } from './components/timeline-step/timeline-step.component';
+import { UiTemplatesPageComponent } from './components/ui-templates-page/ui-templates-page.component';
 
 const NUMBER_REGEX = /^[0-9]+$/;
 
@@ -118,6 +119,8 @@ const extraTabsMatcher: UrlMatcher = (segments: UrlSegment[], group, route): Url
 const routes: Routes = [
     { path: '', component: ExperimentsPageComponent },
     { path: 'settings', component: SettingsPageComponent },
+    { path: 'templates', component: UiTemplatesPageComponent },
+    { path: 'templates/:templateId', component: UiTemplatesPageComponent },
     { path: 'experiments', component: ExperimentsPageComponent },
     { path: 'experiments/:experimentId', redirectTo: "info" },
     { path: 'experiments/:experimentId/info', component: ExperimentComponent },

src/app/app.module.ts

@@ -78,6 +78,7 @@ import { TabGroupListComponent } from './components/tab-group-list/tab-group-lis
 import { TimelineStepNavComponent } from './components/timeline-step-nav/timeline-step-nav.component';
 import { TimelineStepComponent } from './components/timeline-step/timeline-step.component';
 import { TimelineSubstepsComponent } from './components/timeline-substeps/timeline-substeps.component';
+import { UiTemplatesPageComponent } from './components/ui-templates-page/ui-templates-page.component';
 import { ChangeUiTemplateDialog } from './dialogs/change-ui-template/change-ui-template.dialog';
 import { ChooseDataDialog } from './dialogs/choose-data/choose-data.dialog';
 import { ChoosePluginDialog } from './dialogs/choose-plugin/choose-plugin.dialog';
@@ -86,6 +87,12 @@ import { CreateExperimentDialog } from './dialogs/create-experiment/create-exper
 import { DeleteDialog } from './dialogs/delete-dialog/delete-dialog.dialog';
 import { ExportExperimentDialog } from './dialogs/export-experiment/export-experiment.dialog';
 import { MarkdownHelpDialog } from './dialogs/markdown-help/markdown-help.dialog';
+import { UiTemplateComponent } from "./components-small/ui-template/ui-template.component";
+import { UiTemplateTabListComponent } from './components-small/ui-template-tab-list/ui-template-tab-list.component';
+import { UiTemplateTabComponent } from './components-small/ui-template-tab/ui-template-tab.component';
+import { PluginFilterViewComponent } from './components-small/plugin-filter-view/plugin-filter-view.component';
+import { UiTemplateTabFormComponent } from './components-small/ui-template-tab-form/ui-template-tab-form.component';
+import { PluginFilterFormComponent } from './components-small/plugin-filter-form/plugin-filter-form.component';
 
 @NgModule({
     declarations: [
@@ -132,6 +139,13 @@ import { MarkdownHelpDialog } from './dialogs/markdown-help/markdown-help.dialog
         PluginFilterEditorComponent,
         TabGroupListComponent,
         ChooseTemplateDialog,
+        UiTemplatesPageComponent,
+        UiTemplateComponent,
+        UiTemplateTabListComponent,
+        UiTemplateTabComponent,
+        UiTemplateTabFormComponent,
+        PluginFilterViewComponent,
+        PluginFilterFormComponent,
     ],
     imports: [
         BrowserModule,

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

@@ -0,0 +1,90 @@
+@if (filterValue == null) {
+    <p>Flter Plugins by:</p>
+    <mat-button-toggle-group class="toggle-group" aria-label="Filter Type">
+        <mat-button-toggle (click)="setType('id')">Identifier</mat-button-toggle>
+        <mat-button-toggle (click)="setType('name')">Name</mat-button-toggle>
+        <mat-button-toggle (click)="setType('version')">Version</mat-button-toggle>
+        <mat-button-toggle (click)="setType('type')">Type</mat-button-toggle>
+        <mat-button-toggle (click)="setType('tag')">Tag</mat-button-toggle>
+    </mat-button-toggle-group>
+    @if(depth < 4) {
+        <p>Or combine multiple filters with:</p>
+        <mat-button-toggle-group class="toggle-group" aria-label="Filter combinator">
+            <mat-button-toggle (click)="setType('and')">AND (match all filters)</mat-button-toggle>
+            <mat-button-toggle (click)="setType('or')">OR (match any filter)</mat-button-toggle>
+        </mat-button-toggle-group>
+    }
+} @else {
+    <div class="filter-head">
+        <mat-slide-toggle [checked]="isNegated" (toggleChange)="isNegated = !isNegated; updateFilterObject()">Exclude plugins matching this filter</mat-slide-toggle>
+        <button mat-icon-button (click)="resetCurrentFilter(); updateFilterObject()"><mat-icon>clear</mat-icon></button>
+    </div>
+}
+@if (isNestedFilter) {
+    <mat-button-toggle-group class="toggle-group" [value]="nestedFilterCombinator" (valueChange)="changeFilterCombinator($event)" aria-label="Filter combinator" >
+        <mat-button-toggle [value]="'and'">AND (match all filters)</mat-button-toggle>
+        <mat-button-toggle [value]="'or'">OR (match any filter)</mat-button-toggle>
+    </mat-button-toggle-group>
+
+    <div class="nested-filter-container">
+        <div class="filter-combinator">
+            <div class="line"></div>
+            <div>{{nestedFilterCombinator.toUpperCase()}}</div>
+            <div class="line"></div>
+        </div>
+        <div class="child-filter-list">
+            @if (filterValue?.length === 0) {
+                <p class="warning">Must have at least one plugin filter!</p>
+            }
+            @for (f of filterValue; track $index) {
+                <div class="child-filter-container">
+                    <mat-card class="child-filter">
+                        <mat-card-content>
+                            <qhana-plugin-filter-form [depth]="depth + 1" [filterIn]="f" (filterOut)="childFiltersOutput[$index] = $event; updateFilterObject()" (valid)="childFiltersValid[$index] = $event"></qhana-plugin-filter-form>
+                        </mat-card-content>
+                    </mat-card>
+                    <button mat-flat-button class="child-filter-remove-button" (click)="deleteChild($index)"><div><mat-icon>delete</mat-icon></div></button>
+                </div>
+            }
+            <button mat-raised-button class="add-child-filter-button" (click)="addChildFilter()"><mat-icon>plus</mat-icon>Add new filter</button>
+        </div>
+    </div>
+}
+@if (!isNestedFilter && filterType != null) {
+    <div class="simple-filter">
+        <mat-form-field class="filter-type-select">
+            <mat-label>Filter By:</mat-label>
+            <mat-select [value]="filterType" (valueChange)="changeSimpleFilterType($event)">
+                <mat-option value="id">Identifier</mat-option>
+                <mat-option value="name">Name</mat-option>
+                <mat-option value="tag">Tag</mat-option>
+                <mat-option value="version">Version</mat-option>
+                <mat-option value="type">Type</mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field class="filter-value">
+            <mat-label>Match against:</mat-label>
+            <input matInput [ngModel]="filterValue" (ngModelChange)="filterValue = $event; updateFilterObject()" [attr.list]="filterType === 'type' ? 'plugin-types' : null">
+            <datalist *ngIf="filterType === 'type'" id="plugin-types">
+                <option value="processing"></option>
+                <option value="visualization"></option>
+                <option value="conversion"></option>
+                <option value="dataloader"></option>
+                <option value="interaction"></option>
+            </datalist>
+            <mat-hint *ngIf="filterType === 'version'">
+                Examples: ">= 0.1.0", "== 1.0.2", "< 2.0.0", ">= 1.0.0, < 2.0.0" , "!= 1.0.14"
+            </mat-hint>
+            <mat-hint *ngIf="filterType === 'type'">
+                Examples: "processing", "conversion", "dataloader", "visualization", "interaction"
+            </mat-hint>
+        </mat-form-field>
+        <button mat-raised-button class="filter-button" (click)="openPluginChooser()" *ngIf="filterType === 'name' || filterType === 'id'">
+            choose
+        </button>
+    </div>
+}
+@if (depth > 0 && (filterValue == null || filterValue === "")) {
+    <p class="warning">Filter may not be empty!</p>
+}
+

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

@@ -0,0 +1,67 @@
+.toggle-group
+    height: 3em
+
+.filter-head
+    display: flex
+    align-items: center
+    justify-content: space-between
+    width: 100%
+    margin-block-end: 0.5rem
+
+.simple-filter
+    display: flex
+    align-items: start
+    gap: 0.5rem
+    width: 100%
+
+.filter-type-selec
+    width: 8rem
+
+.filter-value
+    width: unset
+    flex-grow: 1
+
+.filter-button
+    height: 3.5rem
+
+.nested-filter-container
+    display: flex
+    gap: 1rem
+    align-items: stretch
+    margin-block: 1rem
+
+.filter-combinator
+    display: flex
+    flex-direction: column
+    align-items: center
+    min-width: 2.1rem
+
+    .line
+        flex-grow: 1
+        width: 0px
+        border-inline-start: 1px solid var(--text-washed)
+
+.child-filter-list
+    display: flex
+    flex-direction: column
+    gap: 0.8rem
+    flex-grow: 1
+
+.child-filter-container
+    display: flex
+    align-items: stretch
+    gap: 0.5rem
+
+.child-filter
+    flex-grow: 1
+
+.child-filter-remove-button
+    height: unset
+    min-width: 2rem
+    padding: 0px
+    display: flex
+    flex-direction: column
+    align-items: center
+
+.warning
+    color: var(--accent-text)