Show/change experiment default template in UI

src/app/app.module.ts

@@ -86,6 +86,7 @@ import { ExperimentWorkspaceDetailComponent } from './components/experiment-work
 import { PluginFilterNodeComponent } from './components-small/plugin-filter-node/plugin-filter-node.component';
 import { PluginFilterEditorComponent } from './components-small/plugin-filter-editor/plugin-filter-editor.component';
 import { TabGroupListComponent } from './components/tab-group-list/tab-group-list.component';
+import { ChooseTemplateDialog } from './dialogs/choose-template/choose-template.component';
 
 @NgModule({
     declarations: [
@@ -131,6 +132,7 @@ import { TabGroupListComponent } from './components/tab-group-list/tab-group-lis
         PluginFilterNodeComponent,
         PluginFilterEditorComponent,
         TabGroupListComponent,
+        ChooseTemplateDialog,
     ],
     imports: [
         BrowserModule,

src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.ts

@@ -10,7 +10,7 @@ import { filter } from 'rxjs/operators';
 import { DeleteDialog } from 'src/app/dialogs/delete-dialog/delete-dialog.dialog';
 import { ApiLink, CollectionApiObject, PageApiObject } from 'src/app/services/api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
-import { TAB_GROUP_NAME_OVERRIDES, TAB_GROUP_SORT_KEYS, TemplateApiObject, TemplateTabApiObject, TemplatesService } from 'src/app/services/templates.service';
+import { ALL_PLUGINS_TEMPLATE_ID, TAB_GROUP_NAME_OVERRIDES, TAB_GROUP_SORT_KEYS, TemplateApiObject, TemplateTabApiObject, TemplatesService } from 'src/app/services/templates.service';
 
 @Component({
     selector: 'qhana-experiment-workspace-detail',
@@ -63,7 +63,7 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
     ngOnInit() {
         this.routeParamSubscription = this.route.queryParamMap.subscribe(async params => {
             let templateId = params.get('template');
-            if (templateId === "all-plugins") {
+            if (templateId === ALL_PLUGINS_TEMPLATE_ID) {
                 // treat builtin template as default template for the workspace details
                 templateId = null;
             }
@@ -203,7 +203,7 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
     }
 
     private async updateTemplateId(templateId: string | null) {
-        if (templateId == null) {
+        if (templateId == null || templateId === "") {
             return; // no template selected
         }
         if (templateId === this.templateId) {

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

@@ -31,12 +31,25 @@ <h1 class="t-page-headline">Experiment</h1>
                 <mat-icon>cancel</mat-icon>
             </button>
         </mat-card-title>
-        <mat-card-content>
+        <mat-card-content class="experiment-settings">
+            <div class="default-template-selection t-subheading">
+                <span>
+                    Default Template:
+                </span>
+                <a [routerLink]="['/experiments', experimentId, 'workspace']" [queryParams]="{ template: uiTemplate?.self?.resourceKey?.uiTemplateId ?? 'all-plugins' }">
+                    {{uiTemplate?.name ?? 'All Plugins'}}
+                </a>
+                <button mat-raised-button color="primary" (click)="showSelectDefaultTemplateDialog()">
+                    Change Template
+                </button>
+                <button mat-raised-button color="primary" *ngIf="uiTemplate != null" (click)="updateExperimentDefaultTemplate(null)">
+                    Remove Template
+                </button>
+            </div>
             <qhana-markdown class="description" [markdown]="experimentDescription"
                 (markdownChanges)="updateDescription($event)" [editable]="true">
             </qhana-markdown>
         </mat-card-content>
-
     </mat-card>
     <div class="updates">
         <div class="update-status" *ngIf="updateStatus === 'changed'">

src/app/components/experiment/experiment.component.sass

@@ -36,3 +36,15 @@
     display: inline-flex
     align-items: center
     gap: 0.5em
+
+.experiment-settings
+    display: flex
+    flex-direction: column
+    gap: 1.5rem
+
+.default-template-selection
+    display: flex
+    flex-direction: row
+    justify-content: flex-start
+    align-items: center
+    gap: 1rem

src/app/components/experiment/experiment.component.ts

@@ -4,16 +4,17 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { debounceTime, filter, map } from 'rxjs/operators';
 import { ExportExperimentDialog } from 'src/app/dialogs/export-experiment/export-experiment.component';
+import { ChooseTemplateDialog } from 'src/app/dialogs/choose-template/choose-template.component';
 import { CurrentExperimentService } from 'src/app/services/current-experiment.service';
 import { ExperimentApiObject, QhanaBackendService } from 'src/app/services/qhana-backend.service';
+import { ALL_PLUGINS_TEMPLATE_ID, TemplateApiObject, TemplatesService } from 'src/app/services/templates.service';
 
 @Component({
     selector: 'qhana-experiment',
     templateUrl: './experiment.component.html',
     styleUrls: ['./experiment.component.sass']
 })
 export class ExperimentComponent implements OnInit, OnDestroy {
-
     private routeSubscription: Subscription | null = null;
 
     private experimentSubscription: Subscription | null = null;
@@ -24,6 +25,7 @@ export class ExperimentComponent implements OnInit, OnDestroy {
     private descriptionUpdates: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);
     private autoSaveTitleSubscription: Subscription | null = null;
     private autoSaveDescriptionSubscription: Subscription | null = null;
+    private uiTemplateIdSubscription: Subscription | null = null;
 
     updateStatus: "original" | "changed" | "saved" = "original";
 
@@ -34,7 +36,9 @@ export class ExperimentComponent implements OnInit, OnDestroy {
     experimentDescription: string = ""; // only updated on initial experiment load
     currentExperimentDescription: string = "";
 
-    constructor(private route: ActivatedRoute, private router: Router, private experimentService: CurrentExperimentService, private backend: QhanaBackendService, public dialog: MatDialog) { }
+    uiTemplate: TemplateApiObject | null = null;
+
+    constructor(private route: ActivatedRoute, private router: Router, private experimentService: CurrentExperimentService, private backend: QhanaBackendService, private templates: TemplatesService, public dialog: MatDialog) { }
 
     ngOnInit(): void {
         this.routeSubscription = this.route.params.pipe(map(params => params.experimentId)).subscribe(experimentId => {
@@ -49,6 +53,15 @@ export class ExperimentComponent implements OnInit, OnDestroy {
             this.experimentDescription = experiment?.description ?? "";
             this.currentExperimentDescription = experiment?.description ?? "";
         });
+        this.uiTemplateIdSubscription = this.experimentService.experimentTemplateId.subscribe(templateId => {
+            if (templateId == null) {
+                this.uiTemplate = null;
+                return;
+            }
+            this.templates.getTemplate(templateId.toString()).then(templateResponse => {
+                this.uiTemplate = templateResponse?.data ?? null;
+            });
+        });
         this.autoSaveTitleSubscription = this.titleUpdates.pipe(
             filter(value => value != null && value !== this.lastSavedTitle),
             debounceTime(500)
@@ -64,6 +77,7 @@ export class ExperimentComponent implements OnInit, OnDestroy {
         this.experimentSubscription?.unsubscribe();
         this.autoSaveTitleSubscription?.unsubscribe();
         this.autoSaveDescriptionSubscription?.unsubscribe();
+        this.uiTemplateIdSubscription?.unsubscribe();
     }
 
     cloneExperiment() {
@@ -156,4 +170,24 @@ export class ExperimentComponent implements OnInit, OnDestroy {
         });
     }
 
+    showSelectDefaultTemplateDialog() {
+        const dialogRef = this.dialog.open(ChooseTemplateDialog, {
+            minWidth: "20rem", maxWidth: "40rem", width: "20%", maxHeight: "95%",
+            data: this.uiTemplate
+        });
+        dialogRef.afterClosed().subscribe(templateId => {
+            if (templateId != null) {
+                const id = templateId === ALL_PLUGINS_TEMPLATE_ID ? null : templateId;
+                this.updateExperimentDefaultTemplate(id);
+            }
+        });
+    }
+
+    updateExperimentDefaultTemplate(templateId: string | null) {
+        if (this.experimentId == null) {
+            console.warn("Experiment ID is null!");
+            return;
+        }
+        this.templates.setExperimentDefaultTemplate(this.experimentId, templateId);
+    }
 }

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

@@ -7,7 +7,7 @@ import { ChangeUiTemplateComponent } from 'src/app/dialogs/change-ui-template/ch
 import { DeleteDialog } from 'src/app/dialogs/delete-dialog/delete-dialog.dialog';
 import { ApiLink, ApiResponse, CollectionApiObject, PageApiObject } from 'src/app/services/api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
-import { TemplateApiObject, TemplateTabApiObject, TemplatesService } from 'src/app/services/templates.service';
+import { ALL_PLUGINS_TEMPLATE_ID, TemplateApiObject, TemplateTabApiObject, TemplatesService } from 'src/app/services/templates.service';
 
 
 export interface PluginGroup {
@@ -19,9 +19,6 @@ export interface PluginGroup {
 }
 
 
-const ALL_PLUGINS_TEMPLATE_ID = "all-plugins";
-
-
 @Component({
     selector: 'qhana-plugin-sidebar',
     templateUrl: './plugin-sidebar.component.html',

src/app/dialogs/choose-template/choose-template.component.html

@@ -0,0 +1,24 @@
+<h1 mat-dialog-title>Select Default Template</h1>
+<div mat-dialog-content>
+    <mat-form-field class="full-width" color="primary">
+        <mat-label>Search templates</mat-label>
+        <input matInput placeholder="search" autocomplete="off" #searchInput>
+        <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+    <div class="template-list mat-elevation-z2">
+        <qhana-growing-list [rels]="['ui-template', 'collection']" [newItemRels]="['ui-template']" [search]="searchInput.value"
+            [highlighted]="highlightedTemplateSet" [highlightByKey]="'uiTemplateId'" (clickItem)="selectTemplate($event)">
+        </qhana-growing-list>
+    </div>
+    <div class="selected-template">
+        <span class="t-title">Selected Template: {{template?.name ?? 'All Plugins'}}</span><br>
+        <span><i>{{template?.description ?? 'This template contains all plugins that are available in Qhana.'}}</i></span>
+    </div>
+</div>
+<div class="dialog-actions" mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="'all-plugins'">Unset</button>
+    <button mat-raised-button [mat-dialog-close]="templateId" color="primary" [disabled]="templateId == null" cdkFocusInitial>
+        Choose
+    </button>
+    <button mat-button (click)="onCancel()">Cancel</button>
+</div>

src/app/dialogs/choose-template/choose-template.component.sass

@@ -0,0 +1,13 @@
+.template-list
+    max-height: 14rem
+    overflow-y: auto
+    border-radius: 0.25rem
+
+.dialog-actions
+    justify-content: flex-end
+
+.selected-template
+    padding-top: 1rem
+
+.full-width
+    width: 100%

src/app/dialogs/choose-template/choose-template.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChooseTemplateDialog } from './choose-template.component';
+
+describe('ChooseTemplateDialog', () => {
+  let component: ChooseTemplateDialog;
+  let fixture: ComponentFixture<ChooseTemplateDialog>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChooseTemplateDialog ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChooseTemplateDialog);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dialogs/choose-template/choose-template.component.ts

@@ -0,0 +1,51 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ApiLink } from 'src/app/services/api-data-types';
+import { PluginRegistryBaseService } from 'src/app/services/registry.service';
+import { TemplateApiObject } from 'src/app/services/templates.service';
+
+@Component({
+    selector: 'qhana-choose-template',
+    templateUrl: './choose-template.component.html',
+    styleUrls: ['./choose-template.component.sass']
+})
+export class ChooseTemplateDialog implements OnInit {
+    highlightedTemplateSet: Set<string> = new Set();
+    templateId: string | null = null;
+    template: TemplateApiObject | null = null;
+
+    constructor(public dialogRef: MatDialogRef<ChooseTemplateDialog>, @Inject(MAT_DIALOG_DATA) public data: TemplateApiObject, private registry: PluginRegistryBaseService) {
+        if (data != null && data.self.resourceKey?.uiTemplateId != null) {
+            const templateId = data.self.resourceKey?.uiTemplateId;
+            this.templateId = templateId;
+            this.highlightedTemplateSet = new Set([templateId]);
+            this.template = data;
+        }
+    }
+
+    ngOnInit(): void {
+    }
+
+    async selectTemplate(templateLink: ApiLink) {
+        const templateId = templateLink.resourceKey?.uiTemplateId ?? null;
+        if (templateId == null) {
+            return;
+        }
+        if (this.highlightedTemplateSet.has(templateId)) {
+            // double click deselects template
+            this.highlightedTemplateSet.clear();
+            this.templateId = null;
+            this.template = null;
+            return;
+        }
+        this.highlightedTemplateSet.clear();
+        this.highlightedTemplateSet = new Set([templateId]);
+        const template = await this.registry.getByApiLink<TemplateApiObject>(templateLink, null, false);
+        this.template = template?.data ?? null;
+        this.templateId = templateId;
+    }
+
+    onCancel(): void {
+        this.dialogRef.close();
+    }
+}

src/app/services/current-experiment.service.ts

@@ -45,6 +45,10 @@ export class CurrentExperimentService {
         return this.currentExperiment.asObservable().pipe(map(experiment => experiment?.description ?? null));
     }
 
+    get experimentTemplateId() {
+        return this.currentExperiment.asObservable().pipe(map(experiment => experiment?.templateId ?? null));
+    }
+
     constructor(private backend: QhanaBackendService) { }
 
     private updateCurrentExperiment(experimentId: string | null) {
@@ -64,7 +68,7 @@ export class CurrentExperimentService {
             this.currentExperimentId.next(experimentId);
         }
         const current = this.currentExperiment.getValue();
-        if (current != experiment || current?.name !== experiment?.name || current?.description !== experiment?.description) {
+        if (current != experiment || current?.name !== experiment?.name || current?.description !== experiment?.description || current?.templateId !== experiment?.templateId) {
             this.currentExperiment.next(experiment);
         }
     }
@@ -81,5 +85,4 @@ export class CurrentExperimentService {
             this.updateCurrentExperiment(experimentId);
         }
     }
-
 }

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

@@ -177,6 +177,15 @@ export interface TimelineStepPageOptions {
     unclearedSubstep?: number;
 }
 
+export interface TemplateApiObject extends ApiObject {
+    templateId: string;
+}
+
+export interface TemplatePostResponseApiObject extends ApiObject {
+    experimentId: number;
+    templateId?: string;
+}
+
 function urlIsString(url: string | null): url is string {
     return url != null;
 }
@@ -491,4 +500,16 @@ export class QhanaBackendService {
             rootUrl => this.http.get<TimelineSubStepApiObject>(`${rootUrl}/experiments/${experimentId}/timeline/${step}/substeps/${substep}`)
         );
     }
+
+    public getExperimentDefaultTemplate(experimentId: number | string): Observable<TemplateApiObject> {
+        return this.callWithRootUrl<TemplateApiObject>(
+            rootUrl => this.http.get<TemplateApiObject>(`${rootUrl}/experiments/${experimentId}/template`)
+        );
+    }
+
+    public updateExperimentDefaultTemplate(experimentId: number | string, templateId: string | number | null): Observable<TemplatePostResponseApiObject> {
+        return this.callWithRootUrl<TemplatePostResponseApiObject>(
+            rootUrl => this.http.post<TemplatePostResponseApiObject>(`${rootUrl}/experiments/${experimentId}/template`, { templateId: templateId })
+        );
+    }
 }

src/app/services/registry.service.ts

@@ -483,7 +483,9 @@ export class PluginRegistryBaseService {
 
     public async getByApiLink<T>(link: ApiLink, searchParams: URLSearchParams | null = null, ignoreCache: boolean | "ignore-embedded" = false): Promise<ApiResponse<T> | null> {
         const url = new URL(link.href)
-        searchParams?.forEach((value, key) => url.searchParams.append(key, value));
+        searchParams?.forEach((value, key) => {
+            url.searchParams.set(key, value);
+        });
         return await this._fetch<ApiResponse<T>>(url.toString(), ignoreCache);
     }