Merge branch 'main' into update/angular16

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

@@ -10,7 +10,8 @@ <h2>Template Tab</h2>
     </mat-form-field>
     <mat-form-field class="form-field">
         <mat-label>Name:</mat-label>
-        <input matInput formControlName="name" required>
+        <input matInput formControlName="name">
+        <mat-error *ngIf="templateForm.controls['name'].invalid">Invalid tab name!</mat-error>
     </mat-form-field>
     <mat-form-field class="form-field">
         <mat-label>Description:</mat-label>

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

@@ -35,7 +35,7 @@ export class TemplateDetailsComponent implements OnInit {
     };
 
     templateForm: FormGroup = this.fb.group({
-        name: [this.initialValues.name, Validators.required],
+        name: [this.initialValues.name, [Validators.required, Validators.minLength(1)]],
         description: this.initialValues.description,
         sortKey: this.initialValues.sortKey,
         location: [this.initialValues.location, [Validators.required, isInSetValidator(Object.keys(TAB_GROUP_NAME_OVERRIDES))]]
@@ -59,6 +59,9 @@ export class TemplateDetailsComponent implements OnInit {
     async onSubmit() {
         let findString: string;
         let response: ApiResponse<TemplateApiObject | TemplateTabApiObject> | null;
+        if (this.templateForm.invalid) {
+            return;
+        }
         if (this.templateLink != null) {
             findString = "create";
             response = await this.registry.getByApiLink<TemplateApiObject>(this.templateLink);

src/app/components/data-detail/data-detail.component.html

@@ -1,7 +1,7 @@
 <div class="big-content" *ngIf="data != null">
     <div class="title">
         <h1 class="t-page-headline">Data</h1>
-        <a mat-icon-button aria-label="back to data list" [routerLink]="['/experiments', experimentId, 'data']">
+        <a mat-icon-button aria-label="back to data list" [routerLink]="['/experiments', experimentId, 'data']" queryParamsHandling="merge">
             <mat-icon>arrow_back</mat-icon>
         </a>
     </div>
@@ -33,7 +33,7 @@ <h1 class="t-page-headline">Data</h1>
                 <div *ngIf="data?.producedBy != null">
                     <dt>Created in</dt>
                     <dd>
-                        <a [routerLink]="['/experiments', experimentId, 'timeline', data.producedBy]">
+                        <a [routerLink]="['/experiments', experimentId, 'timeline', data.producedBy]" queryParamsHandling="merge">
                             Step {{data.producedBy}}
                         </a>
                     </dd>

src/app/components/experiment-data/experiment-data.component.html

@@ -35,7 +35,7 @@ <h1 class="t-page-headline align-arrow">Experiment Data</h1>
         </mat-card>
         <mat-card appearance="outlined" class="page-item card" *ngFor="let data of experimentData | async">
             <mat-card-title>
-                <a class="t-headline title-link"
+                <a class="t-headline title-link" queryParamsHandling="merge"
                     [routerLink]="['/experiments', experimentId, 'data', data.name, {version: data.version.toString()}]">{{data.name}}</a>
             </mat-card-title>
             <mat-card-content>

src/app/components/experiment-timeline/experiment-timeline.component.html

@@ -53,6 +53,16 @@ <h1 class="t-page-headline align-arrow">Experiment Timeline</h1>
                 [value]="unclearedSubstepValue.value">{{unclearedSubstepValue.viewValue}}
             </mat-radio-button>
         </mat-radio-group>
+        <br>
+        <mat-form-field>
+            <mat-label>Result quality</mat-label>
+            <mat-select [(ngModel)]="resultQuality" (ngModelChange)="updatePageContent()">
+                <mat-option [value]="''">Not Selected</mat-option>
+                <mat-option *ngFor="let resultQualityValue of resultQualityValues"
+                    [value]="resultQualityValue">{{resultQualityValue.charAt(0).toUpperCase() + resultQualityValue.slice(1).toLowerCase()}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </mat-expansion-panel>
 
     <div class="page-item-list">
@@ -67,7 +77,7 @@ <h1 class="t-page-headline align-arrow">Experiment Timeline</h1>
         <mat-card appearance="outlined" class="page-item card" *ngFor="let step of timelineSteps | async">
             <mat-card-title>
                 <a class="t-headline title-link"
-                    [routerLink]="['/experiments', experimentId, 'timeline', step.sequence]">
+                    [routerLink]="['/experiments', experimentId, 'timeline', step.sequence]" queryParamsHandling="merge">
                     Step {{step.sequence}} ({{step.processorName}}&#64;{{step.processorVersion}})
                 </a>
                 <qhana-step-status [step]="step" [noText]="step.status !== 'PENDING'" [spinner]="0"></qhana-step-status>

src/app/components/experiment-timeline/experiment-timeline.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Observable, Subscription, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { CurrentExperimentService } from 'src/app/services/current-experiment.service';
-import { QhanaBackendService, TimelineStepApiObject } from 'src/app/services/qhana-backend.service';
+import { ExperimentResultQuality, ExperimentResultQualityValues, QhanaBackendService, TimelineStepApiObject } from 'src/app/services/qhana-backend.service';
 import { ServiceRegistryService } from 'src/app/services/service-registry.service';
 
 interface SelectValue {
@@ -50,6 +50,8 @@ export class ExperimentTimelineComponent implements OnInit, OnDestroy {
         { value: 1, viewValue: "Only steps with uncleared substeps" },
         { value: -1, viewValue: "Only steps with cleared substeps" }
     ];
+    resultQuality: ExperimentResultQuality | "" = "";
+    resultQualityValues = ExperimentResultQualityValues;
 
     constructor(private route: ActivatedRoute, private experiment: CurrentExperimentService, private backend: QhanaBackendService, private serviceRegistry: ServiceRegistryService) { }
 
@@ -99,6 +101,7 @@ export class ExperimentTimelineComponent implements OnInit, OnDestroy {
             version: this.version ?? "",
             stepStatus: this.stepStatus,
             unclearedSubstep: this.unclearedSubstep,
+            resultQuality: this.resultQuality,
         }).pipe(
             map(value => {
                 if (this.currentPage !== currentRequest) {

src/app/components/experiment-workspace/experiment-workspace.component.ts

@@ -100,6 +100,6 @@ export class ExperimentWorkspaceComponent implements OnInit, OnDestroy {
             processorName: plugin.identifier,
             processorVersion: plugin.version,
             resultLocation: formData.resultUrl,
-        }).subscribe(timelineStep => this.router.navigate(['/experiments', experimentId, 'timeline', timelineStep.sequence.toString()]));
+        }).subscribe(timelineStep => this.router.navigate(['/experiments', experimentId, 'timeline', timelineStep.sequence.toString()], { queryParamsHandling: 'preserve' }));
     }
 }

src/app/components/navbar/navbar.component.html

@@ -9,27 +9,27 @@
             Info
         </a>
         <a class="navigation-link" mat-button [routerLink]="['/experiments', (experimentId|async), 'workspace']"
-            [queryParams]="{template: routeTemplateId}" routerLinkActive="active">
+            queryParamsHandling="merge" routerLinkActive="active">
             Workspace
         </a>
         <a class="navigation-link" mat-button [routerLink]="['/experiments', (experimentId|async), 'data']"
-            [queryParams]="{template: routeTemplateId}" routerLinkActive="active">
+        queryParamsHandling="merge" routerLinkActive="active">
             Data
         </a>
         <a class="navigation-link" mat-button [routerLink]="['/experiments', (experimentId|async), 'timeline']"
-            [queryParams]="{template: routeTemplateId}" routerLinkActive="active">
+        queryParamsHandling="merge" routerLinkActive="active">
             Timeline
         </a>
         <a class="navigation-link" mat-button
             [routerLink]="['/experiments', (experimentId|async), 'extra', tab.resourceKey?.uiTemplateTabId]"
-            [queryParams]="{template: routeTemplateId}" routerLinkActive="active"
+            queryParamsHandling="merge" routerLinkActive="active"
             *ngFor="let tab of experimentExtraTabs">
             {{tab.name}}
         </a>
     </ng-container>
     <ng-container *ngIf="(currentExperiment|async) == null">
         <a class="navigation-link" mat-button [routerLink]="['extra', tab.resourceKey?.uiTemplateTabId]"
-            [queryParams]="{template: routeTemplateId}" routerLinkActive="active" *ngFor="let tab of generalExtraTabs">
+            queryParamsHandling="merge" routerLinkActive="active" *ngFor="let tab of generalExtraTabs">
             {{tab.name}}
         </a>
     </ng-container>

src/app/components/navbar/navbar.component.sass

@@ -55,6 +55,9 @@
     width: 20rem
     padding: 0.5em
 
+::ng-deep.mat-mdc-menu-panel.download
+    max-width: 100% !important
+
 .download-container
     width: 100%
     display: flex

src/app/components/preview-list/preview-list.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngFor="let data of resolvedDataList; trackBy: trackByFn">
     <qhana-data-preview [data]="data">
-        <a [routerLink]="['/experiments', experimentId, 'data', data.name, {version: data.version}]">
+        <a [routerLink]="['/experiments', experimentId, 'data', data.name, {version: data.version}]" queryParamsHandling="merge">
             <h5>{{data.name}} (version {{data.version}})</h5>
         </a>
     </qhana-data-preview>

src/app/components/timeline-step-nav/timeline-step-nav.component.html

@@ -1,10 +1,10 @@
 <nav mat-tab-nav-bar class="big-nav-tabs">
-    <a mat-tab-link [routerLink]="['/experiments', experimentId, 'timeline', timelineStep, 'overview']"
+    <a mat-tab-link [routerLink]="['/experiments', experimentId, 'timeline', timelineStep, 'overview']" queryParamsHandling="merge"
         [active]="active === 'overview'">
         Overview
     </a>
     <a mat-tab-link *ngFor="let tab of tabs"
-        [routerLink]="['/experiments', experimentId, 'timeline', timelineStep, tab.tabId]"
+        [routerLink]="['/experiments', experimentId, 'timeline', timelineStep, tab.tabId]" queryParamsHandling="merge"
         [active]="active === tab.tabId">
         {{tab.name}}
     </a>

src/app/components/timeline-step/timeline-step.component.html

@@ -2,7 +2,7 @@
     <div class="title">
         <h1 class="t-page-headline">Timeline Step {{stepId}}</h1>
         <a mat-icon-button aria-label="back to timeline step list"
-            [routerLink]="['/experiments', experimentId, 'timeline']">
+            [routerLink]="['/experiments', experimentId, 'timeline']" queryParamsHandling="merge">
             <mat-icon>arrow_back</mat-icon>
         </a>
     </div>

src/app/components/timeline-step/timeline-step.component.ts

@@ -4,7 +4,7 @@ import { BehaviorSubject, Observable, Subject, Subscription, from, of, timer } f
 import { catchError, concatMap, debounceTime, filter, mergeAll, mergeMap, take, throttleTime } from 'rxjs/operators';
 import { ApiLink, CollectionApiObject, PageApiObject } from 'src/app/services/api-data-types';
 import { CurrentExperimentService } from 'src/app/services/current-experiment.service';
-import { QhanaBackendService, TimelineStepApiObject, TimelineSubStepApiObject } from 'src/app/services/qhana-backend.service';
+import { ExperimentResultQuality, QhanaBackendService, TimelineStepApiObject, TimelineSubStepApiObject } from 'src/app/services/qhana-backend.service';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
 import { TabDefinition } from '../timeline-step-nav/timeline-step-nav.component';
 
@@ -46,7 +46,7 @@ export class TimelineStepComponent implements OnInit, OnDestroy {
     ];
 
     timelineStep: TimelineStepApiObject | null = null;
-    resultQuality: "UNKNOWN" | "NEUTRAL" | "GOOD" | "BAD" | "ERROR" | "UNUSABLE" = "UNKNOWN";
+    resultQuality: ExperimentResultQuality = "UNKNOWN";
     stepProcessor: Promise<string | null> | null = null;
     stepProgress: Progress | null = null;
     substeps: TimelineSubStepApiObject[] | null = null;
@@ -248,7 +248,7 @@ export class TimelineStepComponent implements OnInit, OnDestroy {
         });
     }
 
-    saveResultQuality(newQuality: "UNKNOWN" | "NEUTRAL" | "GOOD" | "BAD" | "ERROR" | "UNUSABLE") {
+    saveResultQuality(newQuality: ExperimentResultQuality) {
         if (this.stepId == null) {
             return;
         }

src/app/services/qhana-backend.service.ts

@@ -20,6 +20,9 @@ import { Observable, Subject } from 'rxjs';
 import { filter, map, mergeMap, take } from 'rxjs/operators';
 import { ServiceRegistryService } from './service-registry.service';
 
+export const ExperimentResultQualityValues = ["UNKNOWN", "NEUTRAL", "GOOD", "BAD", "ERROR", "UNUSABLE"] as const;
+export type ExperimentResultQuality = typeof ExperimentResultQualityValues[number];
+
 export interface ApiObject {
     "@self": string;
 }
@@ -142,7 +145,7 @@ export interface TimelineStepApiObject extends ApiObject {
     start: string;
     end: string;
     status: string;
-    resultQuality: "UNKNOWN" | "NEUTRAL" | "GOOD" | "BAD" | "ERROR" | "UNUSABLE";
+    resultQuality: ExperimentResultQuality;
     resultLog?: string;
     notes: string;
     processorName: string;
@@ -175,6 +178,7 @@ export interface TimelineStepPageOptions {
     version?: string;
     stepStatus?: "SUCCESS" | "PENDING" | "ERROR" | "";
     unclearedSubstep?: number;
+    resultQuality?: ExperimentResultQuality | "";
 }
 
 export interface TemplateApiObject extends ApiObject {
@@ -446,12 +450,13 @@ export class QhanaBackendService {
         );
     }
 
-    public getTimelineStepsPage(experimentId: number | string, { page = 0, itemCount = 10, sort = 1, pluginName = "", version = "", stepStatus = "", unclearedSubstep = 0 }: TimelineStepPageOptions): Observable<ApiObjectList<TimelineStepApiObject>> {
+    public getTimelineStepsPage(experimentId: number | string, { page = 0, itemCount = 10, sort = 1, pluginName = "", version = "", stepStatus = "", unclearedSubstep = 0, resultQuality = "", }: TimelineStepPageOptions): Observable<ApiObjectList<TimelineStepApiObject>> {
         const queryParams = new HttpParams()
             .append("plugin-name", pluginName)
             .append("version", version)
             .append("status", stepStatus)
             .append("uncleared-substep", unclearedSubstep)
+            .append("result-quality", resultQuality)
             .append("page", page)
             .append("item-count", itemCount)
             .append("sort", sort);
@@ -486,7 +491,7 @@ export class QhanaBackendService {
         );
     }
 
-    public saveTimelineStepResultQuality(experimentId: number | string, step: number | string, newQuality: "UNKNOWN" | "NEUTRAL" | "GOOD" | "BAD" | "ERROR" | "UNUSABLE"): Observable<null> {
+    public saveTimelineStepResultQuality(experimentId: number | string, step: number | string, newQuality: ExperimentResultQuality): Observable<null> {
         return this.callWithRootUrl<null>(
             rootUrl => this.http.put<null>(`${rootUrl}/experiments/${experimentId}/timeline/${step}`, { resultQuality: newQuality })
         );