From 50e636469ee18f882ed9bb2deefaa0718d372be4 Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Tue, 24 Oct 2023 13:33:08 +0200
Subject: [PATCH 1/7] fix: keep URL params when navigating

This change is intenden to preserve the template and plugin URL parameters when navigating between workspace, data, and timeline.
---
 .../components/data-detail/data-detail.component.html  |  4 ++--
 .../experiment-data/experiment-data.component.html     |  2 +-
 .../experiment-timeline.component.html                 |  2 +-
 .../experiment-workspace.component.ts                  |  2 +-
 src/app/components/navbar/navbar.component.html        | 10 +++++-----
 .../preview-list/preview-list.component.html           |  2 +-
 .../timeline-step-nav/timeline-step-nav.component.html |  4 ++--
 .../timeline-step/timeline-step.component.html         |  2 +-
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/data-detail/data-detail.component.html b/src/app/components/data-detail/data-detail.component.html
index b39de9c..9f1d839 100644
--- a/src/app/components/data-detail/data-detail.component.html
+++ b/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="preserve">
             <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>
diff --git a/src/app/components/experiment-data/experiment-data.component.html b/src/app/components/experiment-data/experiment-data.component.html
index cca0372..811e8b2 100644
--- a/src/app/components/experiment-data/experiment-data.component.html
+++ b/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>
diff --git a/src/app/components/experiment-timeline/experiment-timeline.component.html b/src/app/components/experiment-timeline/experiment-timeline.component.html
index 80d3807..681c0f2 100644
--- a/src/app/components/experiment-timeline/experiment-timeline.component.html
+++ b/src/app/components/experiment-timeline/experiment-timeline.component.html
@@ -67,7 +67,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="preserve">
                     Step {{step.sequence}} ({{step.processorName}}@{{step.processorVersion}})
                 </a>
                 <qhana-step-status [step]="step" [noText]="step.status !== 'PENDING'" [spinner]="0"></qhana-step-status>
diff --git a/src/app/components/experiment-workspace/experiment-workspace.component.ts b/src/app/components/experiment-workspace/experiment-workspace.component.ts
index 37f3204..c49c3cf 100644
--- a/src/app/components/experiment-workspace/experiment-workspace.component.ts
+++ b/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' }));
     }
 }
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 3c71fb7..62dfe1e 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/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>
diff --git a/src/app/components/preview-list/preview-list.component.html b/src/app/components/preview-list/preview-list.component.html
index 92d20e3..42eb68f 100644
--- a/src/app/components/preview-list/preview-list.component.html
+++ b/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>
diff --git a/src/app/components/timeline-step-nav/timeline-step-nav.component.html b/src/app/components/timeline-step-nav/timeline-step-nav.component.html
index 33eedf6..867526f 100644
--- a/src/app/components/timeline-step-nav/timeline-step-nav.component.html
+++ b/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="preserve"
         [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="preserve"
         [active]="active === tab.tabId">
         {{tab.name}}
     </a>
diff --git a/src/app/components/timeline-step/timeline-step.component.html b/src/app/components/timeline-step/timeline-step.component.html
index 16a92b4..880fedc 100644
--- a/src/app/components/timeline-step/timeline-step.component.html
+++ b/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="preserve">
             <mat-icon>arrow_back</mat-icon>
         </a>
     </div>

From 5792b0780780179483ef73b17a1907533f601b27 Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Tue, 24 Oct 2023 14:52:07 +0200
Subject: [PATCH 2/7] feature: filter timline steps by result quality

---
 .../experiment-timeline.component.html              |  9 +++++++++
 .../experiment-timeline.component.ts                | 13 ++++++++++++-
 .../timeline-step/timeline-step.component.ts        |  6 +++---
 src/app/services/qhana-backend.service.ts           | 10 +++++++---
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/app/components/experiment-timeline/experiment-timeline.component.html b/src/app/components/experiment-timeline/experiment-timeline.component.html
index 80d3807..c3be550 100644
--- a/src/app/components/experiment-timeline/experiment-timeline.component.html
+++ b/src/app/components/experiment-timeline/experiment-timeline.component.html
@@ -53,6 +53,15 @@ <h1 class="t-page-headline align-arrow">Experiment Timeline</h1>
                 [value]="unclearedSubstepValue.value">{{unclearedSubstepValue.viewValue}}
             </mat-radio-button>
         </mat-radio-group>
+
+        <div class="radio-label">
+            <mat-label>Result quality</mat-label><br>
+        </div>
+        <mat-radio-group [(ngModel)]="resultQuality" (ngModelChange)="updatePageContent()">
+            <mat-radio-button *ngFor="let resultQualityValue of resultQualityValues"
+                [value]="resultQualityValue.value">{{resultQualityValue.viewValue}}
+            </mat-radio-button>
+        </mat-radio-group>
     </mat-expansion-panel>
 
     <div class="page-item-list">
diff --git a/src/app/components/experiment-timeline/experiment-timeline.component.ts b/src/app/components/experiment-timeline/experiment-timeline.component.ts
index ee92ff9..aa8e8e8 100644
--- a/src/app/components/experiment-timeline/experiment-timeline.component.ts
+++ b/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, QhanaBackendService, TimelineStepApiObject } from 'src/app/services/qhana-backend.service';
 import { ServiceRegistryService } from 'src/app/services/service-registry.service';
 
 interface SelectValue {
@@ -50,6 +50,16 @@ 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: SelectValue[] = [
+        { value: "", viewValue: "Not selected" },
+        { value: "UNKNOWN", viewValue: "Unknown" },
+        { value: "NEUTRAL", viewValue: "Neutral" },
+        { value: "GOOD", viewValue: "Good" },
+        { value: "BAD", viewValue: "Bad" },
+        { value: "ERROR", viewValue: "Error" },
+        { value: "UNUSABLE", viewValue: "Unusable"}
+    ];
 
     constructor(private route: ActivatedRoute, private experiment: CurrentExperimentService, private backend: QhanaBackendService, private serviceRegistry: ServiceRegistryService) { }
 
@@ -99,6 +109,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) {
diff --git a/src/app/components/timeline-step/timeline-step.component.ts b/src/app/components/timeline-step/timeline-step.component.ts
index 27f5336..b2a7e40 100644
--- a/src/app/components/timeline-step/timeline-step.component.ts
+++ b/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;
         }
diff --git a/src/app/services/qhana-backend.service.ts b/src/app/services/qhana-backend.service.ts
index ddfc0bc..f0b590c 100644
--- a/src/app/services/qhana-backend.service.ts
+++ b/src/app/services/qhana-backend.service.ts
@@ -20,6 +20,8 @@ import { Observable, Subject } from 'rxjs';
 import { filter, map, mergeMap, take } from 'rxjs/operators';
 import { ServiceRegistryService } from './service-registry.service';
 
+export type ExperimentResultQuality = "UNKNOWN" | "NEUTRAL" | "GOOD" | "BAD" | "ERROR" | "UNUSABLE";
+
 export interface ApiObject {
     "@self": string;
 }
@@ -142,7 +144,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 +177,7 @@ export interface TimelineStepPageOptions {
     version?: string;
     stepStatus?: "SUCCESS" | "PENDING" | "ERROR" | "";
     unclearedSubstep?: number;
+    resultQuality?: ExperimentResultQuality | "";
 }
 
 export interface TemplateApiObject extends ApiObject {
@@ -446,12 +449,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 +490,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 })
         );

From efe13aecfeb987f8e4cfc37f5cfaba31ffae6b99 Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Wed, 25 Oct 2023 11:25:20 +0200
Subject: [PATCH 3/7] fix(downloads): panel width

---
 src/app/components/navbar/navbar.component.sass | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/components/navbar/navbar.component.sass b/src/app/components/navbar/navbar.component.sass
index 1f5b714..a8baae2 100644
--- a/src/app/components/navbar/navbar.component.sass
+++ b/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

From 4d927e3871997d75e7a78b212b63b50fe64091dd Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Wed, 25 Oct 2023 12:31:04 +0200
Subject: [PATCH 4/7] fix(template tab): disallow empty tab names

---
 .../template-details/template-details.component.html        | 3 ++-
 .../template-details/template-details.component.ts          | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/components-small/template-details/template-details.component.html b/src/app/components-small/template-details/template-details.component.html
index c3ea833..5b2777b 100644
--- a/src/app/components-small/template-details/template-details.component.html
+++ b/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>
diff --git a/src/app/components-small/template-details/template-details.component.ts b/src/app/components-small/template-details/template-details.component.ts
index 932622b..a12755a 100644
--- a/src/app/components-small/template-details/template-details.component.ts
+++ b/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,10 @@ export class TemplateDetailsComponent implements OnInit {
     async onSubmit() {
         let findString: string;
         let response: ApiResponse<TemplateApiObject | TemplateTabApiObject> | null;
+        if (this.templateForm.invalid) {
+            console.log("TemplateDetailsComponent: form invalid");
+            return;
+        }
         if (this.templateLink != null) {
             findString = "create";
             response = await this.registry.getByApiLink<TemplateApiObject>(this.templateLink);

From 93ed15a2f1cc69d0b4a03cad07d021ab34a4b24b Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Wed, 25 Oct 2023 12:34:47 +0200
Subject: [PATCH 5/7] remove debug output

---
 .../template-details/template-details.component.ts               | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/components-small/template-details/template-details.component.ts b/src/app/components-small/template-details/template-details.component.ts
index a12755a..35c6251 100644
--- a/src/app/components-small/template-details/template-details.component.ts
+++ b/src/app/components-small/template-details/template-details.component.ts
@@ -60,7 +60,6 @@ export class TemplateDetailsComponent implements OnInit {
         let findString: string;
         let response: ApiResponse<TemplateApiObject | TemplateTabApiObject> | null;
         if (this.templateForm.invalid) {
-            console.log("TemplateDetailsComponent: form invalid");
             return;
         }
         if (this.templateLink != null) {

From 7e114384b0145e84b398f0756479c47e504cbb88 Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Thu, 26 Oct 2023 16:42:13 +0200
Subject: [PATCH 6/7] refactor: consistently use "merge" to handle query
 parameters

---
 src/app/components/data-detail/data-detail.component.html     | 2 +-
 .../experiment-timeline/experiment-timeline.component.html    | 2 +-
 .../timeline-step-nav/timeline-step-nav.component.html        | 4 ++--
 src/app/components/timeline-step/timeline-step.component.html | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/data-detail/data-detail.component.html b/src/app/components/data-detail/data-detail.component.html
index 9f1d839..5d92b29 100644
--- a/src/app/components/data-detail/data-detail.component.html
+++ b/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']" queryParamsHandling="preserve">
+        <a mat-icon-button aria-label="back to data list" [routerLink]="['/experiments', experimentId, 'data']" queryParamsHandling="merge">
             <mat-icon>arrow_back</mat-icon>
         </a>
     </div>
diff --git a/src/app/components/experiment-timeline/experiment-timeline.component.html b/src/app/components/experiment-timeline/experiment-timeline.component.html
index 681c0f2..b0990a2 100644
--- a/src/app/components/experiment-timeline/experiment-timeline.component.html
+++ b/src/app/components/experiment-timeline/experiment-timeline.component.html
@@ -67,7 +67,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]" queryParamsHandling="preserve">
+                    [routerLink]="['/experiments', experimentId, 'timeline', step.sequence]" queryParamsHandling="merge">
                     Step {{step.sequence}} ({{step.processorName}}@{{step.processorVersion}})
                 </a>
                 <qhana-step-status [step]="step" [noText]="step.status !== 'PENDING'" [spinner]="0"></qhana-step-status>
diff --git a/src/app/components/timeline-step-nav/timeline-step-nav.component.html b/src/app/components/timeline-step-nav/timeline-step-nav.component.html
index 867526f..9f989c4 100644
--- a/src/app/components/timeline-step-nav/timeline-step-nav.component.html
+++ b/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']" queryParamsHandling="preserve"
+    <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]" queryParamsHandling="preserve"
+        [routerLink]="['/experiments', experimentId, 'timeline', timelineStep, tab.tabId]" queryParamsHandling="merge"
         [active]="active === tab.tabId">
         {{tab.name}}
     </a>
diff --git a/src/app/components/timeline-step/timeline-step.component.html b/src/app/components/timeline-step/timeline-step.component.html
index 880fedc..1386b74 100644
--- a/src/app/components/timeline-step/timeline-step.component.html
+++ b/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']" queryParamsHandling="preserve">
+            [routerLink]="['/experiments', experimentId, 'timeline']" queryParamsHandling="merge">
             <mat-icon>arrow_back</mat-icon>
         </a>
     </div>

From 2566c694d758eacf7e875a826095be4c51813f4c Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Thu, 26 Oct 2023 17:17:43 +0200
Subject: [PATCH 7/7] refactor(timeline search): use select for result quality
 filter

---
 .../experiment-timeline.component.html        | 19 ++++++++++---------
 .../experiment-timeline.component.ts          | 12 ++----------
 src/app/services/qhana-backend.service.ts     |  3 ++-
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/app/components/experiment-timeline/experiment-timeline.component.html b/src/app/components/experiment-timeline/experiment-timeline.component.html
index c3be550..3a608ab 100644
--- a/src/app/components/experiment-timeline/experiment-timeline.component.html
+++ b/src/app/components/experiment-timeline/experiment-timeline.component.html
@@ -53,15 +53,16 @@ <h1 class="t-page-headline align-arrow">Experiment Timeline</h1>
                 [value]="unclearedSubstepValue.value">{{unclearedSubstepValue.viewValue}}
             </mat-radio-button>
         </mat-radio-group>
-
-        <div class="radio-label">
-            <mat-label>Result quality</mat-label><br>
-        </div>
-        <mat-radio-group [(ngModel)]="resultQuality" (ngModelChange)="updatePageContent()">
-            <mat-radio-button *ngFor="let resultQualityValue of resultQualityValues"
-                [value]="resultQualityValue.value">{{resultQualityValue.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">
diff --git a/src/app/components/experiment-timeline/experiment-timeline.component.ts b/src/app/components/experiment-timeline/experiment-timeline.component.ts
index aa8e8e8..ed88c77 100644
--- a/src/app/components/experiment-timeline/experiment-timeline.component.ts
+++ b/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 { ExperimentResultQuality, 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 {
@@ -51,15 +51,7 @@ export class ExperimentTimelineComponent implements OnInit, OnDestroy {
         { value: -1, viewValue: "Only steps with cleared substeps" }
     ];
     resultQuality: ExperimentResultQuality | "" = "";
-    resultQualityValues: SelectValue[] = [
-        { value: "", viewValue: "Not selected" },
-        { value: "UNKNOWN", viewValue: "Unknown" },
-        { value: "NEUTRAL", viewValue: "Neutral" },
-        { value: "GOOD", viewValue: "Good" },
-        { value: "BAD", viewValue: "Bad" },
-        { value: "ERROR", viewValue: "Error" },
-        { value: "UNUSABLE", viewValue: "Unusable"}
-    ];
+    resultQualityValues = ExperimentResultQualityValues;
 
     constructor(private route: ActivatedRoute, private experiment: CurrentExperimentService, private backend: QhanaBackendService, private serviceRegistry: ServiceRegistryService) { }
 
diff --git a/src/app/services/qhana-backend.service.ts b/src/app/services/qhana-backend.service.ts
index f0b590c..1489f02 100644
--- a/src/app/services/qhana-backend.service.ts
+++ b/src/app/services/qhana-backend.service.ts
@@ -20,7 +20,8 @@ import { Observable, Subject } from 'rxjs';
 import { filter, map, mergeMap, take } from 'rxjs/operators';
 import { ServiceRegistryService } from './service-registry.service';
 
-export type ExperimentResultQuality = "UNKNOWN" | "NEUTRAL" | "GOOD" | "BAD" | "ERROR" | "UNUSABLE";
+export const ExperimentResultQualityValues = ["UNKNOWN", "NEUTRAL", "GOOD", "BAD", "ERROR", "UNUSABLE"] as const;
+export type ExperimentResultQuality = typeof ExperimentResultQualityValues[number];
 
 export interface ApiObject {
     "@self": string;