refactor(timeline search): use select for result quality filter

UST-QuAntiL · Oct 26, 2023 · 2566c69 · 2566c69
1 parent 5792b07
commit 2566c69
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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;