Start implementing autofill for plugin uis in workspace

src/app/components/experiment-workspace/experiment-workspace.component.html

@@ -42,7 +42,9 @@ <h1 class="t-page-headline">Experiment Workspace</h1>
                         </mat-card-content>
                     </mat-card>
                     <mat-card class="card no-padding">
-                        <qhana-plugin-uiframe [url]="frontendUrl" (formDataSubmit)="onPluginUiFormSubmit($event)">
+                        <qhana-plugin-uiframe [url]="frontendUrl" [plugin]="activePlugin.self"
+                            [context]="{experimentId: experimentId??undefined}"
+                            (formDataSubmit)="onPluginUiFormSubmit($event)">
                         </qhana-plugin-uiframe>
                     </mat-card>
                 </div>

src/app/components/plugin-uiframe/plugin-uiframe.component.html

@@ -1,4 +1,18 @@
 <div class="microfrontend-container" [ngClass]="fullscreen ? 'fullscreen' : ''" [hidden]="frontendUrl === blank">
+    <div class="floating-buttons" [ngClass]="buttonsLeft ? 'left' : ''">
+        <button mat-icon-button (click)="buttonsLeft = !buttonsLeft">
+            <mat-icon *ngIf="buttonsLeft" inline="false" aria-hidden="true">chevron_right</mat-icon>
+            <mat-icon *ngIf="!buttonsLeft" inline="false" aria-hidden="true">chevron_left</mat-icon>
+        </button>
+        <mat-divider [vertical]="true"></mat-divider>
+        <button mat-icon-button (click)="autofillLatest()" [disabled]="autofillData == null">
+            <mat-icon inline="true" aria-hidden="true">rocket_launch</mat-icon>
+        </button>
+        <button mat-icon-button (click)="fullscreen=!fullscreen">
+            <mat-icon *ngIf="fullscreen" inline="false" aria-hidden="true">fullscreen_exit</mat-icon>
+            <mat-icon *ngIf="!fullscreen" inline="false" aria-hidden="true">fullscreen</mat-icon>
+        </button>
+    </div>
     <iframe seamless class="frontend-frame" [src]="frontendUrl" frameborder="0" scroll="no" [height]="frontendHeight"
         sandbox="allow-forms allow-scripts allow-same-origin" allow="fullscreen" #uiframe></iframe>
     <div class="ui-loading-blend" *ngIf="loading">

src/app/components/plugin-uiframe/plugin-uiframe.component.sass

@@ -26,12 +26,41 @@
     background-color: var(--background)
     color: var(--warn-text)
 
-.fullscreen
+.floating-buttons
+    display: none
     position: absolute
-    top: 0
-    left: 0
-    right: 0
-    min-height: 97%
+    height: 2.5rem
+    top: calc(-2.5rem - 3px)
+    right: 0.3rem
+    color: var(--text-card)
+    background-color: var(--background-card)
+    border: solid
+    border-width: 2px
+    border-radius: 2px
+    border-color: var(--border-color)
+    z-index: 2
+
+.floating-buttons.left
+    right: unset
+    left: 0.3rem
+
+.microfrontend-container:focus-within, .microfrontend-container:focus, .microfrontend-container:hover
+    .floating-buttons
+        display: flex
+
+.fullscreen
+    .floating-buttons
+        display: flex
+        top: 2px
+
+.fullscreen
+    position: fixed
+    top: 0px
+    left: 0px
+    right: 0px
+    bottom: 0px
+    background-color: var(--background)
+    z-index: 1
 
 .fsbutton
     position: absolute

src/app/components/plugin-uiframe/plugin-uiframe.component.ts

@@ -3,10 +3,10 @@ import { MatDialog } from '@angular/material/dialog';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { concatAll, filter, map, mergeAll, toArray } from 'rxjs/operators';
+import { catchError, concatAll, filter, map, mergeAll, mergeMap, toArray } from 'rxjs/operators';
 import { ChooseDataDialog } from 'src/app/dialogs/choose-data/choose-data.dialog';
 import { ChoosePluginDialog } from 'src/app/dialogs/choose-plugin/choose-plugin.dialog';
-import { CollectionApiObject } from 'src/app/services/api-data-types';
+import { ApiLink, CollectionApiObject } from 'src/app/services/api-data-types';
 import { PluginApiObject } from 'src/app/services/qhana-api-data-types';
 import { ApiObjectList, ExperimentDataApiObject, QhanaBackendService } from 'src/app/services/qhana-backend.service';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
@@ -20,6 +20,12 @@ export interface FormSubmitData {
     resultUrl: string;
 }
 
+export interface PluginUiContext {
+    experimentId?: string | number;
+    stepId?: string | number;
+    data?: Array<{ downloadUrl: string, dataType: string, contentType: string }>;
+}
+
 function isFormSubmitData(data: any): data is FormSubmitData {
     if (data == null) {
         return false;
@@ -161,6 +167,9 @@ export class PluginUiframeComponent implements OnChanges, OnDestroy {
     @Input() url: string | null = null;
     @Output() formDataSubmit: EventEmitter<FormSubmitData> = new EventEmitter();
 
+    @Input() plugin: ApiLink | null = null;
+    @Input() context: PluginUiContext | null = null;
+
     blank: SafeResourceUrl;
 
     pluginOrigin: string | null = null;
@@ -171,11 +180,16 @@ export class PluginUiframeComponent implements OnChanges, OnDestroy {
     hasFullscreenMode: boolean = false;
     fullscreen: boolean = false;
 
+    buttonsLeft: boolean = false;
+
     loading: boolean = true;
     error: { code: number, status: string } | null = null;
 
+    autofillData: { value: string, encoding: string } | null = null;
+
     private dialogActive = false;
 
+
     listenerFunction = (event: MessageEvent) => this.handleMicroFrontendEvent(event);
 
     constructor(private sanitizer: DomSanitizer, private dialog: MatDialog, private backend: QhanaBackendService, private registry: PluginRegistryBaseService, private route: ActivatedRoute) {
@@ -202,11 +216,65 @@ export class PluginUiframeComponent implements OnChanges, OnDestroy {
             this.frontendHeight = 100;
             return;
         }
-        this.loading = true;
-        this.pluginOrigin = (new URL(url)).origin;
-        this.frontendHeight = 100;
-        this.frontendUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
-        this.hasFullscreenMode = false;
+        if (changes.url != null) {
+            this.loading = true;
+            this.pluginOrigin = (new URL(url)).origin;
+            this.frontendHeight = 100;
+            this.frontendUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+            this.hasFullscreenMode = false;
+        }
+        if (changes.plugin != null || changes.context != null) {
+            this.processContext();
+        }
+    }
+
+    async autofillLatest() {
+        if (this.autofillData != null) {
+            this.sendAutofillData(this.autofillData.value, this.autofillData.encoding);
+        }
+    }
+
+    private async processContext() {
+        if (this.plugin == null) {
+            this.autofillData = null;
+            return;
+        }
+        const plugin = (await this.registry.getByApiLink<PluginApiObject>(this.plugin))?.data ?? null;
+        if (plugin == null) {
+            this.autofillData = null;
+            return;
+        }
+        if (this.context?.experimentId != null) {
+            this.backend.getTimelineStepsPage(this.context.experimentId, { sort: -1, pluginName: plugin.identifier, version: plugin.version, itemCount: 1 }).pipe(
+                map(steps => {
+                    if (steps.items.length == 1) {
+                        const step = steps.items[0];
+                        return {
+                            parametersUrl: step.parameters,
+                            encoding: step.parametersContentType,
+                        };
+                    }
+                    return null;
+                }),
+                mergeMap(params => {
+                    if (params == null) {
+                        return of(null);
+                    }
+                    return this.backend.getTimelineStepParameters(params.parametersUrl).pipe(map(value => {
+                        return { value: value, encoding: params.encoding };
+                    }))
+                }),
+                catchError((err) => {
+                    console.log(err)
+                    return of(null);
+                }),
+            ).subscribe(result => {
+                this.autofillData = result;
+            });
+            return;
+        }
+        this.autofillData = null;
+        return;
     }
 
     private selectPlugin(request: PluginUrlRequest) {
@@ -299,6 +367,14 @@ export class PluginUiframeComponent implements OnChanges, OnDestroy {
         }
     }
 
+    private sendAutofillData(value: string, encoding: string) {
+        this.sendMessage({
+            type: "autofill-response",
+            value: value,
+            encoding: encoding,
+        });
+    }
+
     private sendMessage(message: any) {
         const iframe: HTMLIFrameElement | null = this.uiframe?.nativeElement ?? null;
         iframe?.contentWindow?.postMessage?.(message, this.pluginOrigin ?? "*");

src/app/services/qhana-backend.service.ts

@@ -474,6 +474,12 @@ export class QhanaBackendService {
         );
     }
 
+    public getTimelineStepParameters(url: string): Observable<string> {
+        return this.callWithRootUrl<string>(
+            rootUrl => this.http.get(url, { responseType: "text" })
+        );
+    }
+
     public getTimelineStepNotes(experimentId: number | string, step: number | string): Observable<TimelineStepNotesApiObject> {
         return this.callWithRootUrl<TimelineStepNotesApiObject>(
             rootUrl => this.http.get<TimelineStepNotesApiObject>(`${rootUrl}/experiments/${experimentId}/timeline/${step}/notes`)