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 @@

Export Config

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