Feature: export timeline steps

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,19 @@ <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)">
+                <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>
 </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>

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

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);
+    }
 }