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 @@
-
- {{restriction.viewValue}}
-
-
+
+
+ What to Export
+
+ {{restriction.viewValue}}
+
+
+
+
+
+
Data versions
@@ -17,10 +25,15 @@
Export Config
Step selection
-
+
+
+ Step {{step.sequence}} ({{step.processorName}}@{{step.processorVersion}}) - Status: {{step.status}}, Result Quality: {{step.resultQuality}}
+
+
-
+
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
, @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);
+ }
}