From f2de9772a98160c1fe052a03f221c85055ca625c Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Fri, 4 Aug 2023 12:31:11 +0200
Subject: [PATCH 1/2] implement option to export timeline steps

---
 .../export-experiment.component.html          | 27 +++++++++----
 .../export-experiment.component.sass          | 10 ++++-
 .../export-experiment.component.ts            | 40 ++++++++++++++++---
 3 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/src/app/dialogs/export-experiment/export-experiment.component.html b/src/app/dialogs/export-experiment/export-experiment.component.html
index 684b979..ee7f693 100644
--- a/src/app/dialogs/export-experiment/export-experiment.component.html
+++ b/src/app/dialogs/export-experiment/export-experiment.component.html
@@ -1,10 +1,18 @@
 <h1 mat-dialog-title>Export Config</h1>
 <div mat-dialog-content>
-    <mat-radio-group [(ngModel)]="configRestriction" name="restriction">
-        <mat-radio-button *ngFor="let restriction of restrictionValues"
-            [value]="restriction.value">{{restriction.viewValue}}
-        </mat-radio-button>
-    </mat-radio-group>
+    <div class="export-selection">
+        <mat-form-field class="full-width">
+            <mat-label>What to Export</mat-label>
+            <mat-select [(ngModel)]="configRestriction" name="restriction">
+                <mat-option *ngFor="let restriction of restrictionValues" (onSelectionChange)="resetSteps()"
+                    [value]="restriction.value">{{restriction.viewValue}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-paginator class="full-width" *ngIf="configRestriction == 'STEPS'" (page)="onStepPageChange($event.pageIndex, $event.pageSize)" 
+            [length]="stepCollectionSize" [pageSize]="pageSize" aria-label="Select page">
+        </mat-paginator>
+    </div>
 
     <div class="radio-label" *ngIf="configRestriction == 'DATA'">
         <mat-label>Data versions</mat-label><br>
@@ -17,10 +25,15 @@ <h1 mat-dialog-title>Export Config</h1>
 
     <div *ngIf="configRestriction == 'STEPS'">
         <mat-label>Step selection</mat-label><br>
-        <!-- TODO -->
+        <mat-selection-list>
+            <mat-list-option *ngFor="let step of stepListPage" [value]="step.sequence" [selected]="stepList.includes(step.sequence)" 
+                    (selectedChange)="selectStep(step.sequence, $event)">
+                Step {{step.sequence}} ({{step.processorName}}@{{step.processorVersion}}) - Status: {{step.status}}, Result Quality: {{step.resultQuality}}
+            </mat-list-option>
+        </mat-selection-list>
     </div>
 </div>
 <div class="dialog-actions" mat-dialog-actions>
     <button mat-button (click)="onCancel()">Cancel</button>
-    <button mat-button [disabled]="!canExport" (click)="onExport()">Export</button>
+    <button mat-button [disabled]="!canExport || (configRestriction === 'STEPS' && stepList.length === 0)" (click)="onExport()">Export</button>
 </div>
diff --git a/src/app/dialogs/export-experiment/export-experiment.component.sass b/src/app/dialogs/export-experiment/export-experiment.component.sass
index dc6a80d..0cff944 100644
--- a/src/app/dialogs/export-experiment/export-experiment.component.sass
+++ b/src/app/dialogs/export-experiment/export-experiment.component.sass
@@ -1,7 +1,10 @@
 .dialog-actions
     justify-content: flex-end
 
-.form-field
+.mat-dialog-content
+    max-height: 70vh
+
+.full-width
     width: 100%
 
 .description-textarea
@@ -16,3 +19,8 @@
 
 .mat-radio-button
     margin: 0.5em
+
+.export-selection
+    display: flex
+    flex-direction: row
+    align-items: flex-start
diff --git a/src/app/dialogs/export-experiment/export-experiment.component.ts b/src/app/dialogs/export-experiment/export-experiment.component.ts
index 217073e..f0a57ad 100644
--- a/src/app/dialogs/export-experiment/export-experiment.component.ts
+++ b/src/app/dialogs/export-experiment/export-experiment.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { QhanaBackendService } from 'src/app/services/qhana-backend.service';
+import { QhanaBackendService, TimelineStepApiObject } from 'src/app/services/qhana-backend.service';
 
 interface SelectValue {
     value: string | boolean;
@@ -35,17 +35,16 @@ export class ExportExperimentDialog implements OnInit {
     ];
 
     stepList: number[] = [];
+    stepListPage: TimelineStepApiObject[] = [];
+    stepCollectionSize: number = 0;
+    readonly pageSize = 10;
 
     constructor(public dialogRef: MatDialogRef<ExportExperimentDialog>, @Inject(MAT_DIALOG_DATA) public data: any) { }
 
     ngOnInit(): void {
         this.backend = this.data.backend;
         this.experimentId = this.data.experimentId;
-        if (this.experimentId == null || this.backend == null) {
-            // should never happen
-            console.warn("Experiment id or backend not set correctly.");
-            this.canExport = false;
-        }
+        this.onStepPageChange(0, this.pageSize);
     }
 
     onExport() {
@@ -65,4 +64,33 @@ export class ExportExperimentDialog implements OnInit {
     onCancel(): void {
         this.dialogRef.close();
     }
+
+    onStepPageChange(page: number, pageSize: number) {
+        if (this.experimentId == null || this.backend == null) {
+            // should never happen
+            console.warn("Experiment id or backend not set correctly.");
+            this.canExport = false;
+            return;
+        }
+        this.backend.getTimelineStepsPage(this.experimentId, {
+            page: page,
+            itemCount: pageSize,
+        }).subscribe(resp => {
+            this.stepCollectionSize = resp.itemCount;
+            this.stepListPage = resp.items;
+        });
+    }
+
+    selectStep(step: number, checked: boolean) {
+        if (!checked && this.stepList.includes(step)) {
+            this.stepList = this.stepList.filter(id => id !== step);
+        } else if (checked && !this.stepList.includes(step)) {
+            this.stepList.push(step);
+        }
+    }
+
+    resetSteps() {
+        this.stepList = [];
+        this.onStepPageChange(0, this.pageSize);
+    }
 }

From 0be05f321baf73e71e2577b0bb496d5c12f68f57 Mon Sep 17 00:00:00 2001
From: infacc <st154936@stud.uni-stuttgart.de>
Date: Fri, 4 Aug 2023 14:35:29 +0200
Subject: [PATCH 2/2] improve how timline step options are displayed

---
 .../export-experiment/export-experiment.component.html      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/dialogs/export-experiment/export-experiment.component.html b/src/app/dialogs/export-experiment/export-experiment.component.html
index ee7f693..8b4b729 100644
--- a/src/app/dialogs/export-experiment/export-experiment.component.html
+++ b/src/app/dialogs/export-experiment/export-experiment.component.html
@@ -28,7 +28,11 @@ <h1 mat-dialog-title>Export Config</h1>
         <mat-selection-list>
             <mat-list-option *ngFor="let step of stepListPage" [value]="step.sequence" [selected]="stepList.includes(step.sequence)" 
                     (selectedChange)="selectStep(step.sequence, $event)">
-                Step {{step.sequence}} ({{step.processorName}}@{{step.processorVersion}}) - Status: {{step.status}}, Result Quality: {{step.resultQuality}}
+                <div class="export-selection">
+                    <span>Step {{step.sequence}} ({{step.processorName}}@{{step.processorVersion}})</span>
+                    <qhana-step-status matTooltip="Status: {{step.status}}" [step]="step" [noText]="step.status !== 'PENDING'" [spinner]="0"></qhana-step-status>
+                    <div matTooltip="Result Quality" *ngIf="step.resultQuality !== 'UNKNOWN'">- Quality: {{step.resultQuality}}</div>
+                </div>
             </mat-list-option>
         </mat-selection-list>
     </div>