From 701ffccadad6525eeea9da367bdfa0ec330c9d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 11:15:58 +0200
Subject: [PATCH 01/19] Add custom scrollbar styles

---
 src/index.html  |  2 +-
 src/styles.sass | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)
diff --git a/src/index.html b/src/index.html
index b663b60..7b8ae4e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="root">
+<html lang="en" class="root scrollable">
 
 <head>
     <meta charset="utf-8">
diff --git a/src/styles.sass b/src/styles.sass
index 8ac47fc..df67b20 100644
--- a/src/styles.sass
+++ b/src/styles.sass
@@ -21,6 +21,8 @@ $my-dark-theme: mat.define-dark-theme((color: (primary: $my-primary,accent: $my-
     --background: #{mat.get-color-from-palette(mat.$light-theme-background-palette, 'background')}
     --background-card: #ddd
     --border-color: #aaa
+    --scroll-background: #{mat.get-color-from-palette(mat.$light-theme-background-palette, 'card')}
+    --scroll-color: #888
     --text: #{mat.get-color-from-palette(mat.$light-theme-foreground-palette, 'text')}
     --text-inv: #{mat.get-color-from-palette(mat.$dark-theme-foreground-palette, 'text')}
     --text-washed: #{mat.get-color-from-palette(mat.$light-theme-foreground-palette, 'secondary-text')}
@@ -54,6 +56,8 @@ $my-dark-theme: mat.define-dark-theme((color: (primary: $my-primary,accent: $my-
     --background: #{mat.get-color-from-palette(mat.$light-theme-background-palette, 'card')}
     --background-card: #bbb
     --border-color: #ddd
+    --scroll-background: #bbb
+    --scroll-color: #{mat.get-color-from-palette(mat.$light-theme-background-palette, 'card')}
 
 .mat-mdc-dialog, .color-scheme-dialog
     --background: #{mat.get-color-from-palette(mat.$light-theme-background-palette, 'dialog')}
@@ -70,6 +74,8 @@ $my-dark-theme: mat.define-dark-theme((color: (primary: $my-primary,accent: $my-
         --background: #{mat.get-color-from-palette(mat.$dark-theme-background-palette, 'background')}
         --background-card: #777
         --border-color: #555
+        --scroll-background: #555
+        --scroll-color: #888
         --text: #{mat.get-color-from-palette(mat.$dark-theme-foreground-palette, 'text')}
         --text-inv: #{mat.get-color-from-palette(mat.$light-theme-foreground-palette, 'text')}
         --text-washed: #{mat.get-color-from-palette(mat.$dark-theme-foreground-palette, 'secondary-text')}
@@ -103,6 +109,8 @@ $my-dark-theme: mat.define-dark-theme((color: (primary: $my-primary,accent: $my-
         --background: #{mat.get-color-from-palette(mat.$dark-theme-background-palette, 'card')}
         --background-card: #{mat.get-color-from-palette(mat.$dark-theme-background-palette, 'background')}
         --border-color: #888
+        --scroll-background: #{mat.get-color-from-palette(mat.$dark-theme-background-palette, 'background')}
+        --scroll-color: #888
         --text-primary: #{mat.get-color-from-palette($my-primary, 'card-contrast')}
         --text-primary-lighter: var(--text-inv, black)
         --text-primary-darker: var(--text-primary)
@@ -111,6 +119,8 @@ $my-dark-theme: mat.define-dark-theme((color: (primary: $my-primary,accent: $my-
 
     .mat-mdc-dialog, .color-scheme-dialog
         --background: #{mat.get-color-from-palette(mat.$dark-theme-background-palette, 'dialog')}
+        --scroll-background: #{mat.get-color-from-palette(mat.$dark-theme-background-palette, 'background')}
+        --scroll-color: #{mat.get-color-from-palette(mat.$dark-theme-background-palette, 'dialog')}
         --text-primary: #{mat.get-color-from-palette($my-primary, 'dialog-contrast')}
         --text-primary-lighter: var(--text-inv, black)
         --text-primary-darker: var(--text-primary)
@@ -236,6 +246,9 @@ a:hover, a:visited
 // top level classes applying to all components ////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////
 
+.scrollable
+    scrollbar-color: var(--scroll-color) var(--scroll-background)
+
 .big-content
     // max width for readability
     max-width: 60rem

From e518652fce67e62f587fa2e8ad34eae53669ba94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 11:46:41 +0200
Subject: [PATCH 02/19] Fix potential cyclic updates during angular change
 detection

---
 src/app/components/growing-list/growing-list.component.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/growing-list/growing-list.component.ts b/src/app/components/growing-list/growing-list.component.ts
index b23596c..594dc1f 100644
--- a/src/app/components/growing-list/growing-list.component.ts
+++ b/src/app/components/growing-list/growing-list.component.ts
@@ -155,8 +155,10 @@ export class GrowingListComponent implements OnInit, OnDestroy {
         }
         this.loadMoreApiLink = null;
         this.lastCollectionSize = null;
-        this.collectionSize.emit(0);
-        this.visibleCollectionSize.emit(0);
+        Promise.resolve().then(() => {
+            this.collectionSize.emit(0);
+            this.visibleCollectionSize.emit(0);
+        });
         const query = this.query;
         this.updateQueue.next(() => this.replaceApiLinkQueued(newApiLink, query));
     }

From eca828d1ebc48c46b002d7997cef581f59fc4c65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 11:47:23 +0200
Subject: [PATCH 03/19] Remove list item decorations in growing list component

---
 src/app/components/growing-list/growing-list.component.sass | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/components/growing-list/growing-list.component.sass b/src/app/components/growing-list/growing-list.component.sass
index 9a68f7a..acd9563 100644
--- a/src/app/components/growing-list/growing-list.component.sass
+++ b/src/app/components/growing-list/growing-list.component.sass
@@ -4,6 +4,7 @@
     align-items: stretch
     padding: 0px
     margin: 0px
+    list-style-type: none
 
 .list-item
     min-height: 3rem

From a1e12887713fa50f3cec9cf2a499680acbea5c68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 11:56:33 +0200
Subject: [PATCH 04/19] Refactor plugin sidebar styles to allow independent
 scrolling in sidebar

---
 .../plugin-sidebar/plugin-sidebar.component.html    |  2 +-
 .../plugin-sidebar/plugin-sidebar.component.sass    | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.html b/src/app/components/plugin-sidebar/plugin-sidebar.component.html
index 5e55554..17a3e04 100644
--- a/src/app/components/plugin-sidebar/plugin-sidebar.component.html
+++ b/src/app/components/plugin-sidebar/plugin-sidebar.component.html
@@ -20,7 +20,7 @@
             <mat-icon>extension</mat-icon>
         </button>
     </div>
-    <div class="sidebar-expander color-scheme-card" [attr.data-open]="sidebarOpen ? 'yes' : 'no'">
+    <div class="sidebar-expander color-scheme-card scrollable" [attr.data-open]="sidebarOpen ? 'yes' : 'no'">
         <div class="expander-head">
             <details [open]="activeArea === 'templates'">
                 <summary class="no-decoration" (click)="toggleTemplateHeader($event)">
diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.sass b/src/app/components/plugin-sidebar/plugin-sidebar.component.sass
index beb4f7a..6e4a14d 100644
--- a/src/app/components/plugin-sidebar/plugin-sidebar.component.sass
+++ b/src/app/components/plugin-sidebar/plugin-sidebar.component.sass
@@ -1,7 +1,9 @@
 .sidebar-container
-    min-height: 100%
+    height: 100vh
     display: flex
     flex-direction: row
+    position: sticky
+    top: 0
 
 .nav-icons
     position: sticky
@@ -81,12 +83,17 @@
 .expander-head
     position: sticky
     top: 0px
+    padding-top: 1px
     background: var(--background)
-    z-index: 1
+    z-index: 2
 
 .sidebar-expander
     position: sticky
     top: 0px
+    max-height: 100vh
+    overflow-y: scroll
+    overflow-x: clip
+    scrollbar-width: thin
     min-width: 15rem
     width: 25vw
     max-width: 20rem
@@ -96,7 +103,7 @@
 
 @media (prefers-color-scheme: dark)
     .sidebar-expander
-        border-right: none
+        border-inline-end-color: var(--background)
 
 @media screen and (max-width: 900px)
     .sidebar-expander[data-open=no]

From 456cfa8c562b42b093606e5a471dbffaca49f5af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 12:02:38 +0200
Subject: [PATCH 05/19] Add icon support to plugin groups in sidebar

Add icon support for plugin groups (only used by default template for now)
Autoscroll plugin group into view
---
 .../plugin-sidebar.component.html             |  8 ++--
 .../plugin-sidebar.component.sass             |  1 +
 .../plugin-sidebar.component.ts               | 39 ++++++++++++++-----
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.html b/src/app/components/plugin-sidebar/plugin-sidebar.component.html
index 17a3e04..37538d3 100644
--- a/src/app/components/plugin-sidebar/plugin-sidebar.component.html
+++ b/src/app/components/plugin-sidebar/plugin-sidebar.component.html
@@ -17,10 +17,10 @@
         <button mat-ripple class="sidebar-button {{(activeArea === 'plugins' && activeGroup == group) ? 'active' : ''}}"
             [matTooltip]="group.name" matTooltipPosition="after" [attr.aria-label]="group.name"
             (click)="switchActiveArea('plugins', group)" *ngFor="let group of pluginGroups">
-            <mat-icon>extension</mat-icon>
+            <mat-icon>{{group.icon ?? 'extension'}}</mat-icon>
         </button>
     </div>
-    <div class="sidebar-expander color-scheme-card scrollable" [attr.data-open]="sidebarOpen ? 'yes' : 'no'">
+    <div class="sidebar-expander color-scheme-card scrollable" [attr.data-open]="sidebarOpen ? 'yes' : 'no'" #sidebar>
         <div class="expander-head">
             <details [open]="activeArea === 'templates'">
                 <summary class="no-decoration" (click)="toggleTemplateHeader($event)">
@@ -63,13 +63,13 @@ <h2 class="template-header">
             <qhana-tab-group-list [templateId]="templateId ?? defaultTemplateId" [selectedTab]="tabId"
                 (clickedOnTab)="selectTab($event)"></qhana-tab-group-list>
         </div>
-        <details class="plugin-group" [open]="group.open" *ngFor="let group of pluginGroups"
+        <details class="plugin-group" attr.data-group="{{group.key}}" [open]="group.open" *ngFor="let group of pluginGroups"
             [hidden]="activeArea == 'detail' || activeArea == 'templates'">
             <summary class="no-decoration" (click)="togglePluginGroup(group, $event)">
                 <mat-divider></mat-divider>
                 <h3 class="plugin-group-header">
                     <span class="plugin-group-header-text">
-                        <mat-icon>extension</mat-icon>
+                        <mat-icon>{{group.icon ?? 'extension'}}</mat-icon>
                         {{group.name}}
                         ({{pluginList.visibleCollectionSize|async}}/{{pluginList.collectionSize|async}})
                     </span>
diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.sass b/src/app/components/plugin-sidebar/plugin-sidebar.component.sass
index 6e4a14d..b4c56fb 100644
--- a/src/app/components/plugin-sidebar/plugin-sidebar.component.sass
+++ b/src/app/components/plugin-sidebar/plugin-sidebar.component.sass
@@ -59,6 +59,7 @@
 
 .plugin-group
     margin-block-end: 1rem
+    scroll-margin-block-start: 10rem
 
 .plugin-group-header
     display: flex
diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.ts b/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
index abd637f..ce0cd32 100644
--- a/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
+++ b/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
@@ -13,6 +13,8 @@ import { ALL_PLUGINS_TEMPLATE_ID, TemplateApiObject, TemplateTabApiObject, Templ
 export interface PluginGroup {
     name: string;
     description?: string;
+    key: string;
+    icon?: string | null;
     open: boolean;
     link: ApiLink;
     query?: URLSearchParams;
@@ -72,6 +74,8 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
 
     @ViewChild('searchInput', { static: true }) searchInput: ElementRef<HTMLInputElement> | null = null;
 
+    @ViewChild('sidebar', { static: true }) sidebar: ElementRef<HTMLDivElement> | null = null;
+
     constructor(private route: ActivatedRoute, private router: Router, private templates: TemplatesService, private registry: PluginRegistryBaseService, private dialog: MatDialog) { }
 
     ngOnInit(): void {
@@ -120,23 +124,27 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
         });
 
         this.registry.resolveRecursiveRels([["plugin", "collection"]]).then((apiLink) => {
-            const pluginTypes = new Map<string, string>([
-                ["dataloader", "Dataloader Plugins"],
-                ["processing", "Processing Plugins"],
-                ["conversion", "Conversion Plugins"],
-                ["visualization", "Visualization Plugins"],
-                ["interaction", "Interaction Plugins"]
-            ]);
-            pluginTypes.forEach((name, pluginType) => {
+            const pluginTypes = [
+                ["dataloader", "Dataloader Plugins", "downloading"],
+                ["processing", "Processing Plugins", "calculate"],
+                ["conversion", "Conversion Plugins", "swap_horiz"],
+                ["visualization", "Visualization Plugins", "preview"],
+                ["interaction", "Interaction Plugins", "web_asset"]
+            ];
+            const defaultPlugins: PluginGroup[] = [];
+            pluginTypes.forEach(([pluginType, name, icon]) => {
                 const query = new URLSearchParams();
                 query.set("type", pluginType)
-                this.defaultPluginGroups.push({
+                defaultPlugins.push({
                     name: name,
+                    key: pluginType,
                     open: true,
                     link: apiLink,
+                    icon: icon ?? null,
                     query: query,
                 });
             });
+            this.defaultPluginGroups.push(...defaultPlugins);
         });
 
         this.defaultTemplateIdSubscription = this.templates.defaultTemplateId.subscribe(defaultTemplateId => {
@@ -178,6 +186,7 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
         if (tabResponse) {
             this.pluginGroups.push({
                 name: tabResponse.data.name,
+                key: tabResponse.data.self.href,
                 open: false,
                 description: tabResponse.data.description,
                 link: tabResponse.data.plugins,
@@ -212,6 +221,7 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
                 if (tabIndex < 0) {
                     this.pluginGroups.push({
                         name: tabResponse.data.name,
+                        key: tabResponse.data.self.href,
                         open: false,
                         description: tabResponse.data.description,
                         link: tabResponse.data.plugins,
@@ -306,6 +316,7 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
         sortedTabs.forEach(tab => {
             pluginGroups.push({
                 name: tab.data.name,
+                key: tab.data.self.href,
                 open: true,
                 description: tab.data.description,
                 link: tab.data.plugins,
@@ -381,6 +392,7 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
 
         if (group != null) {
             group.open = true;
+            this.scrollGroupIntoView(group);
         }
 
         if (newArea === "search") {
@@ -389,6 +401,15 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
         }
     }
 
+    scrollGroupIntoView(group: PluginGroup) {
+        const groupElement = this.sidebar?.nativeElement?.querySelector<HTMLDetailsElement>(`[data-group="${group.key}"]`);
+        if (groupElement) {
+            window.requestIdleCallback(() => {
+                groupElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            });
+        }
+    }
+
     togglePluginGroup(group: PluginGroup, event: Event) {
         event.preventDefault();
         const newState = !group.open;

From a917eb9803cb2bb18d6bdd3a45a786fd827d3826 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 12:10:46 +0200
Subject: [PATCH 06/19] Refactor tab group sorting and prefer group link name
 in some cases

---
 ...experiment-workspace-detail.component.html |  8 +--
 .../experiment-workspace-detail.component.ts  | 66 ++++++++++++-------
 .../tab-group-list.component.ts               |  6 +-
 3 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.html b/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.html
index 0e807ea..622a43e 100644
--- a/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.html
+++ b/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.html
@@ -67,10 +67,10 @@ <h3 mat-subheader>Create New Template Tab</h3>
         </mat-expansion-panel>
         <mat-divider></mat-divider>
 
-        <ng-container *ngFor="let group of templateTabLinks | keyvalue:tabOrder; trackBy:trackByTabLink">
-            <h3 mat-subheader>{{tabGroupNameOverrides[group.key] ?? group.key}}</h3>
-            <mat-expansion-panel *ngFor="let tab of group.value" [expanded]="tabId == tab.resourceKey?.uiTemplateTabId"
-            (afterExpand)="selectTab(tab.resourceKey?.uiTemplateTabId ?? 'null')" (closed)="deselectTab(tab.resourceKey?.uiTemplateTabId ?? null)" 
+        <ng-container *ngFor="let group of templateTabLinks; trackBy:trackByTabLink">
+            <h3 mat-subheader>{{tabGroupNameOverrides[group.group] ?? group.name}}</h3>
+            <mat-expansion-panel *ngFor="let tab of group.tabs" [expanded]="tabId == tab.resourceKey?.uiTemplateTabId"
+            (afterExpand)="selectTab(tab.resourceKey?.uiTemplateTabId ?? 'null')" (closed)="deselectTab(tab.resourceKey?.uiTemplateTabId ?? null)"
             [id]="'tab-' + tab.resourceKey?.uiTemplateTabId">
             <mat-expansion-panel-header>
                 <mat-panel-title>
diff --git a/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.ts b/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.ts
index edd7251..4a5ead8 100644
--- a/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.ts
+++ b/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.ts
@@ -33,7 +33,7 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
 
     templateLink: ApiLink | null = null;
     tabLink: ApiLink | null = null;
-    templateTabLinks: { [group: string]: ApiLink[] } = {};
+    templateTabLinks: Array<{ group: string, name: string, tabs: ApiLink[] }> = [];
 
     templateTabObjects: { [id: string]: TemplateTabApiObject } = {};
 
@@ -74,14 +74,13 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
             const tabId = params.get('tab');
             if (tabId !== this.tabId) {
                 this.tabId = tabId;
-                for (const tabLinks of Object.values(this.templateTabLinks)) {
-                    const tabLink = tabLinks.find(link => link.resourceKey?.uiTemplateTabId === tabId);
+                this.templateTabLinks.forEach(group => {
+                    const tabLink = group.tabs.find(link => link.resourceKey?.uiTemplateTabId === tabId);
                     if (tabLink != null) {
                         this.tabLink = tabLink;
                         this.updateTabId();
-                        break;
                     }
-                }
+                });
             }
         });
         this.registerObjectSubscriptions();
@@ -97,8 +96,8 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
         this.defaultTemplateIdSubscription?.unsubscribe();
     }
 
-    private sortTabs(group: string) {
-        this.templateTabLinks[group].sort((a, b) => {
+    private sortTabs(tabs: ApiLink[]) {
+        return tabs.sort((a, b) => {
             const aSort = this.templateTabObjects[a.resourceKey?.uiTemplateTabId ?? ""]?.sortKey ?? 0;
             const bSort = this.templateTabObjects[b.resourceKey?.uiTemplateTabId ?? ""]?.sortKey ?? 0;
             return aSort - bSort;
@@ -132,9 +131,12 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
                 }
                 if (deletedObject.deleted.resourceKey?.uiTemplateTabId && Object.hasOwn(this.templateTabObjects, deletedObject.deleted.resourceKey?.uiTemplateTabId)) {
                     delete this.templateTabObjects[deletedObject.deleted.resourceKey?.uiTemplateTabId];
-                    for (const group in this.templateTabLinks) {
-                        this.templateTabLinks[group] = this.templateTabLinks[group].filter(link => link.href !== deletedObject.deleted.href);
-                    }
+                    this.templateTabLinks = this.templateTabLinks.map(group => {
+                        return {
+                            ...group,
+                            tabs: group.tabs.filter(link => link.href !== deletedObject.deleted.href),
+                        };
+                    });
                 }
             });
 
@@ -155,11 +157,16 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
                         return;
                     }
                     this.templateTabObjects[tabId] = tab?.data;
-                    if (this.templateTabLinks[group] == null) {
-                        this.templateTabLinks[group] = [];
+                    let tabGroup = this.templateTabLinks.find(g => g.group === group);
+                    if (tabGroup == null) {
+                        tabGroup = {
+                            group: group,
+                            name: group,
+                            tabs: [],
+                        };
                     }
-                    this.templateTabLinks[group].push(newObject.new);
-                    this.sortTabs(group);
+                    tabGroup.tabs.push(newObject.new);
+                    tabGroup.tabs = this.sortTabs(tabGroup.tabs);
                 }
             });
 
@@ -189,15 +196,20 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
                     console.warn("changed tab has no group", changedObject.changed);
                     return;
                 }
-                if (!Object.hasOwn(this.templateTabLinks, group)) {
-                    this.templateTabLinks[group] = [];
+                let tabGroup = this.templateTabLinks.find(g => g.group === group);
+                if (tabGroup == null) {
+                    tabGroup = {
+                        group: group,
+                        name: group,
+                        tabs: [],
+                    };
                 }
-                if (!this.templateTabLinks[group].includes(changedObject.changed)) {
+                if (!tabGroup.tabs.includes(changedObject.changed)) {
                     for (const group in this.templateTabLinks) {
-                        this.templateTabLinks[group] = this.templateTabLinks[group].filter(link => link.href !== changedObject.changed.href);
+                        tabGroup.tabs = tabGroup.tabs.filter(link => link.href !== changedObject.changed.href);
                     }
-                    this.templateTabLinks[group].push(changedObject.changed);
-                    this.sortTabs(group);
+                    tabGroup.tabs.push(changedObject.changed);
+                    this.sortTabs(tabGroup.tabs);
                 }
             });
     }
@@ -240,7 +252,11 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
                     this.templateTabObjects[tabLink.resourceKey.uiTemplateTabId] = tab?.data;
                 }
             });
-            this.templateTabLinks[group] = tabLinks;
+            this.templateTabLinks.push({
+                group: group,
+                name: groupLink.name ?? group,
+                tabs: tabLinks,
+            });
         }
     }
 
@@ -355,10 +371,12 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
     }
 
     tabOrder = (a: KeyValue<string, ApiLink[]>, b: KeyValue<string, ApiLink[]>): number => {
-        const aSortKey = TAB_GROUP_SORT_KEYS[a.key] ?? 0;
-        const bSortKey = TAB_GROUP_SORT_KEYS[b.key] ?? 0;
+        const aGroupBase = a.key.split(".", 1)[0];
+        const bGroupBase = b.key.split(".", 1)[0];
+        const aSortKey = TAB_GROUP_SORT_KEYS[aGroupBase] ?? 0;
+        const bSortKey = TAB_GROUP_SORT_KEYS[bGroupBase] ?? 0;
         return aSortKey - bSortKey;
     }
 
-    trackByTabLink = (index: number, item: KeyValue<string, ApiLink[]>) => item.key;
+    trackByTabLink = (index: number, group: { group: string }) => group.group;
 }
diff --git a/src/app/components/tab-group-list/tab-group-list.component.ts b/src/app/components/tab-group-list/tab-group-list.component.ts
index 000ee36..c2fa9e0 100644
--- a/src/app/components/tab-group-list/tab-group-list.component.ts
+++ b/src/app/components/tab-group-list/tab-group-list.component.ts
@@ -98,8 +98,10 @@ export class TabGroupListComponent implements OnChanges, OnInit, OnDestroy {
         const tabGroups = await this.templates.getTemplateTabGroups(templateId, ignoreCache);
         tabGroups.sort((groupA, groupB) => {
             const defaultSort = TAB_GROUP_SORT_KEYS["DEFAULT"];
-            const a = TAB_GROUP_SORT_KEYS[groupA.resourceKey?.["?group"] ?? "DEFAULT"] ?? defaultSort;
-            const b = TAB_GROUP_SORT_KEYS[groupB.resourceKey?.["?group"] ?? "DEFAULT"] ?? defaultSort;
+            const groupStrA = groupA.resourceKey?.["?group"]?.split(".", 1)?.[0];
+            const groupStrB = groupB.resourceKey?.["?group"]?.split(".", 1)?.[0];
+            const a = TAB_GROUP_SORT_KEYS[groupStrA ?? "DEFAULT"] ?? defaultSort;
+            const b = TAB_GROUP_SORT_KEYS[groupStrB ?? "DEFAULT"] ?? defaultSort;
             if (a !== b) {
                 return a - b;
             }

From ccb9390825e299a155b4d9da3fe8a85456924af4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 12:12:14 +0200
Subject: [PATCH 07/19] Fix plugin filter editor error on empty string inputs

---
 .../plugin-filter-editor/plugin-filter-editor.component.ts     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts b/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts
index 51eb9b0..dcc32d8 100644
--- a/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts
+++ b/src/app/components-small/plugin-filter-editor/plugin-filter-editor.component.ts
@@ -40,6 +40,9 @@ export class PluginFilterEditorComponent implements OnInit {
         }
         this.registry.getByApiLink<TemplateTabApiObject>(this.tabLink).then(response => {
             this.filterString = response?.data?.filterString ?? this.filterString;
+            if (!this.filterString) {
+                this.filterString = "{}";
+            }
             this.filterObject = JSON.parse(this.filterString);
             this.updateFilter(this.filterObject);
         });

From ebba2075de4412d64408f9ad558152b9d324b6f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 12:14:13 +0200
Subject: [PATCH 08/19] Add group_key and icon attributes to template tab
 object and edit form

---
 .../template-details.component.html           | 21 ++++++++++--
 .../template-details.component.sass           | 22 ++++++-------
 .../template-details.component.ts             | 32 ++++++++++++++++---
 src/app/services/templates.service.ts         |  2 ++
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/src/app/components-small/template-details/template-details.component.html b/src/app/components-small/template-details/template-details.component.html
index 77e7b12..5e3a9e2 100644
--- a/src/app/components-small/template-details/template-details.component.html
+++ b/src/app/components-small/template-details/template-details.component.html
@@ -9,6 +9,10 @@ <h2>Template Tab</h2>
             </mat-radio-button>
         </mat-radio-group>
     </div>
+    <mat-form-field class="form-field" [hidden]="!templateForm.value.location || templateForm.value.location === 'workspace'">
+        <mat-label>Tab Group:</mat-label>
+        <input matInput formControlName="locationExtra">
+    </mat-form-field>
     <mat-form-field class="form-field">
         <mat-label>Name:</mat-label>
         <input matInput formControlName="name">
@@ -22,8 +26,19 @@ <h2>Template Tab</h2>
         <mat-label>Sort Key:</mat-label>
         <input matInput type="number" formControlName="sortKey">
     </mat-form-field>
+    <div class="icon-field-wrapper">
+        <mat-form-field class="form-field">
+            <mat-label>Icon:</mat-label>
+            <input matInput formControlName="icon">
+        </mat-form-field>
+        <mat-icon class="icon-preview">{{templateForm.value.icon || "extension"}}</mat-icon>
+    </div>
+    <mat-form-field class="form-field">
+        <mat-label>Group Key:</mat-label>
+        <input matInput formControlName="groupKey">
+        <mat-hint>Establish this tab as its own tab group.</mat-hint>
+    </mat-form-field>
     <qhana-plugin-filter-editor [tabLink]="tabLink"
-        (filterEmitter)="filterString = $event"></qhana-plugin-filter-editor>
-    <br>
-    <button mat-raised-button type="submit" color="primary">{{templateLink ? 'Create' : 'Update'}} Tab</button>
+        (filterEmitter)="filterString = $event" [hidden]="templateForm.value.groupKey"></qhana-plugin-filter-editor>
+    <button mat-raised-button class="submit-button" type="submit" color="primary">{{templateLink ? 'Create' : 'Update'}} Tab</button>
 </form>
diff --git a/src/app/components-small/template-details/template-details.component.sass b/src/app/components-small/template-details/template-details.component.sass
index 5310484..4ed5a3f 100644
--- a/src/app/components-small/template-details/template-details.component.sass
+++ b/src/app/components-small/template-details/template-details.component.sass
@@ -8,18 +8,14 @@
 .location-chooser
     margin-block-end: 1rem
 
-details
-    margin-left: 2rem
+.icon-field-wrapper
+    display: flex
+    gap: 1rem
+    align-items: baseline
 
-summary
-    margin-left: -2rem
+.icon-preview
+    font-size: 24px
+    margin-inline: 1rem
 
-dt
-    font-weight: bold
-
-dl,
-dd
-    font-size: 0.9rem
-
-dd
-    margin-bottom: 1em
+.submit-button
+    margin-block-start: 2rem
diff --git a/src/app/components-small/template-details/template-details.component.ts b/src/app/components-small/template-details/template-details.component.ts
index ea531fa..92beda0 100644
--- a/src/app/components-small/template-details/template-details.component.ts
+++ b/src/app/components-small/template-details/template-details.component.ts
@@ -40,15 +40,21 @@ export class TemplateDetailsComponent implements OnInit {
     private initialValues = {
         name: "",
         description: "",
+        icon: null,
         sortKey: 0,
-        location: "workspace"
+        location: "workspace",
+        locationExtra: "",
+        groupKey: "",
     };
 
     templateForm: FormGroup = this.fb.group({
         name: [this.initialValues.name, [Validators.required, Validators.minLength(1)]],
         description: this.initialValues.description,
+        icon: [this.initialValues.locationExtra, [Validators.maxLength(64)]],
         sortKey: this.initialValues.sortKey,
-        location: [this.initialValues.location, [Validators.required, isInSetValidator(Object.keys(TAB_GROUP_NAME_OVERRIDES))]]
+        location: [this.initialValues.location, [Validators.required, isInSetValidator(Object.keys(TAB_GROUP_NAME_OVERRIDES))]],
+        locationExtra: [this.initialValues.locationExtra],
+        groupKey: [this.initialValues.locationExtra, [Validators.maxLength(32)]],
     });
 
     constructor(private registry: PluginRegistryBaseService, private fb: FormBuilder) { }
@@ -56,11 +62,16 @@ export class TemplateDetailsComponent implements OnInit {
     ngOnInit() {
         if (this.tabLink != null) {
             this.registry.getByApiLink<TemplateTabApiObject>(this.tabLink).then(response => {
+                const location = response?.data?.location ?? this.initialValues.location
+                const [baseLocation, locationExtra] = location.split(".", 2);
                 this.templateForm.setValue({
                     name: response?.data?.name ?? this.initialValues.name,
                     description: response?.data?.description ?? this.initialValues.description,
+                    icon: response?.data?.icon ?? this.initialValues.icon,
                     sortKey: response?.data?.sortKey ?? this.initialValues.sortKey,
-                    location: response?.data?.location ?? this.initialValues.location
+                    groupKey: response?.data?.groupKey ?? this.initialValues.groupKey,
+                    location: baseLocation,
+                    locationExtra: locationExtra ?? "",
                 });
             });
         }
@@ -84,12 +95,23 @@ export class TemplateDetailsComponent implements OnInit {
         }
         const link = response?.links?.find(link => link.rel.some(rel => rel === findString) && link.resourceType == "ui-template-tab") ?? null;
         if (link != null) {
+            let iconValue = this.templateForm.value.icon;
+            if (!iconValue) {
+                iconValue = null;
+            }
+            const location = [this.templateForm.value.location]
+            if (this.templateForm.value.location !== "workspace" && this.templateForm.value.locationExtra) {
+                location.push(this.templateForm.value.locationExtra);
+            }
+            const groupKey = this.templateForm.value.groupKey;
             this.registry.submitByApiLink<TemplateTabApiObject>(link, {
                 name: this.templateForm.value.name,
                 description: this.templateForm.value.description,
+                icon: iconValue,
                 sortKey: this.templateForm.value.sortKey,
-                filterString: this.filterString,
-                location: this.templateForm.value.location
+                groupKey: groupKey,
+                filterString: Boolean(groupKey) ? "" : this.filterString,
+                location: location.join("."),
             });
             if (this.templateLink != null) {
                 this.templateForm.reset(this.initialValues);
diff --git a/src/app/services/templates.service.ts b/src/app/services/templates.service.ts
index c881a75..d07c58a 100644
--- a/src/app/services/templates.service.ts
+++ b/src/app/services/templates.service.ts
@@ -36,9 +36,11 @@ export interface TemplateApiObject extends ApiObject {  // TODO check fields
 export interface TemplateTabApiObject extends ApiObject {  // TODO check fields
     name: string;
     description: string;
+    icon: string | null;
     sortKey: number;
     filterString: string;
     location: string;
+    groupKey: string;
     plugins: ApiLink;
 }
 

From 9f7c6c043bcad6be5a706a03ffaa44d8e1454953 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 12:17:50 +0200
Subject: [PATCH 09/19] Display group key for group tabs in template details

---
 .../experiment-workspace-detail.component.html             | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.html b/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.html
index 622a43e..c8349ba 100644
--- a/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.html
+++ b/src/app/components/experiment-workspace-detail/experiment-workspace-detail.component.html
@@ -74,7 +74,12 @@ <h3 mat-subheader>{{tabGroupNameOverrides[group.group] ?? group.name}}</h3>
             [id]="'tab-' + tab.resourceKey?.uiTemplateTabId">
             <mat-expansion-panel-header>
                 <mat-panel-title>
-                    {{tab.name}}
+                    <span>
+                        {{tab.name}}
+                        <span *ngIf="templateTabObjects[tab.resourceKey?.uiTemplateTabId ?? '']?.groupKey">
+                            (Group: {{templateTabObjects[tab.resourceKey?.uiTemplateTabId ?? '']?.groupKey}})
+                        </span>
+                    </span>
                 </mat-panel-title>
                 <mat-panel-description>
                     {{templateTabObjects[tab.resourceKey?.uiTemplateTabId ?? '']?.description}}

From 2365e88bd0e031a8ea0ed45620764706962a1e5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 12:18:43 +0200
Subject: [PATCH 10/19] Display tab icons and group indicator in nav bar

---
 .../components/navbar/navbar.component.html   | 16 ++++++++++++--
 .../components/navbar/navbar.component.sass   |  8 +++++++
 src/app/components/navbar/navbar.component.ts | 21 ++++++++++++++++++-
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 361a165..b4680ce 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -24,13 +24,25 @@
         <a class="navigation-link" mat-button
             [routerLink]="['/experiments', (experimentId|async), 'extra', tab.resourceKey?.uiTemplateTabId]"
             queryParamsHandling="merge" routerLinkActive="active" *ngFor="let tab of experimentExtraTabs">
-            {{tab.name}}
+            <span class="link-label">
+                <mat-icon *ngIf="tabLinkHrefToApiObject.get(tab.href)?.icon">
+                    {{tabLinkHrefToApiObject.get(tab.href)?.icon}}
+                </mat-icon>
+                {{tab.name}}
+                <mat-icon *ngIf="tabLinkHrefToApiObject.get(tab.href)?.groupKey">more_vert</mat-icon>
+            </span>
         </a>
     </ng-container>
     <ng-container *ngIf="(currentExperiment|async) == null">
         <a class="navigation-link" mat-button [routerLink]="['extra', tab.resourceKey?.uiTemplateTabId]"
             queryParamsHandling="merge" routerLinkActive="active" *ngFor="let tab of generalExtraTabs">
-            {{tab.name}}
+            <span class="link-label">
+                <mat-icon *ngIf="tabLinkHrefToApiObject.get(tab.href)?.icon">
+                    {{tabLinkHrefToApiObject.get(tab.href)?.icon}}
+                </mat-icon>
+                {{tab.name}}
+                <mat-icon *ngIf="tabLinkHrefToApiObject.get(tab.href)?.groupKey">more_vert</mat-icon>
+            </span>
         </a>
     </ng-container>
 
diff --git a/src/app/components/navbar/navbar.component.sass b/src/app/components/navbar/navbar.component.sass
index 4f6b280..f0076aa 100644
--- a/src/app/components/navbar/navbar.component.sass
+++ b/src/app/components/navbar/navbar.component.sass
@@ -32,6 +32,14 @@
 .navigation-link.active
     background-color: var(--primary-darker)
 
+.link-label
+    display: inline-flex
+    align-items: baseline
+    gap: 0.3rem
+
+.link-label > mat-icon
+    align-self: center
+
 .toolbar-spacer
     flex-grow: 1
 
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
index 0504a86..ecc2a39 100644
--- a/src/app/components/navbar/navbar.component.ts
+++ b/src/app/components/navbar/navbar.component.ts
@@ -21,7 +21,7 @@ import { CurrentExperimentService } from 'src/app/services/current-experiment.se
 import { DownloadsService } from 'src/app/services/downloads.service';
 import { ExportResult, QhanaBackendService } from 'src/app/services/qhana-backend.service';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
-import { TemplateApiObject, TemplatesService } from 'src/app/services/templates.service';
+import { TemplateApiObject, TemplateTabApiObject, TemplatesService } from 'src/app/services/templates.service';
 
 @Component({
     selector: 'qhana-navbar',
@@ -45,6 +45,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
     experimentExtraTabsGroupLink: ApiLink | null = null;
     experimentExtraTabs: ApiLink[] = [];
 
+    tabLinkHrefToApiObject: Map<string, TemplateTabApiObject> = new Map();
+
     templateId: string | null = null;
     template: TemplateApiObject | null = null;
 
@@ -135,6 +137,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
         groupResponse?.data?.items?.forEach(tab => extraTabs.push(tab));
 
         this.experimentExtraTabs = extraTabs;
+        this.updateTabApiObjects(extraTabs);
     }
 
     private async updateGeneralExtraTabGroup() {
@@ -152,5 +155,21 @@ export class NavbarComponent implements OnInit, OnDestroy {
         groupResponse?.data?.items?.forEach(tab => extraTabs.push(tab));
 
         this.generalExtraTabs = extraTabs;
+        this.updateTabApiObjects(extraTabs);
+    }
+
+    private async updateTabApiObjects(tabLinks: ApiLink[]) {
+        const hrefToTab = new Map<string, TemplateTabApiObject>();
+
+        const promises = tabLinks.map(tabLink => {
+            return this.registry.getByApiLink<TemplateTabApiObject>(tabLink, null, false).then(response => {
+                if (response) {
+                    hrefToTab.set(response.data.self.href, response.data);
+                }
+            });
+        });
+        await Promise.allSettled(promises);
+
+        this.tabLinkHrefToApiObject = hrefToTab;
     }
 }

From ad732c2a0504a7fab08698e08212fc88891a4f8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 12:19:16 +0200
Subject: [PATCH 11/19] Use tab icons in plugin sidebar

---
 src/app/components/plugin-sidebar/plugin-sidebar.component.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.ts b/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
index ce0cd32..5defe74 100644
--- a/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
+++ b/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
@@ -188,6 +188,7 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
                 name: tabResponse.data.name,
                 key: tabResponse.data.self.href,
                 open: false,
+                icon: tabResponse.data.icon,
                 description: tabResponse.data.description,
                 link: tabResponse.data.plugins,
             });
@@ -224,11 +225,13 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
                         key: tabResponse.data.self.href,
                         open: false,
                         description: tabResponse.data.description,
+                        icon: tabResponse.data.icon,
                         link: tabResponse.data.plugins,
                     });
                 } else {
                     this.pluginGroups[tabIndex].name = tabResponse.data.name;
                     this.pluginGroups[tabIndex].description = tabResponse.data.description;
+                    this.pluginGroups[tabIndex].icon = tabResponse.data.icon;
                 }
                 if (tabResponse.data.location !== 'workspace') {
                     this.pluginGroups.splice(tabIndex, 1);
@@ -319,6 +322,7 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
                 key: tab.data.self.href,
                 open: true,
                 description: tab.data.description,
+                icon: tab.data.icon,
                 link: tab.data.plugins,
             });
         });

From 86fce957d9a4f731299d06bd6d7c8760f6e64f9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 12:20:04 +0200
Subject: [PATCH 12/19] Reimplement plugin tab component to work with nested
 groups and display icons

---
 src/app/app-routing.module.ts                 |   4 +
 .../plugin-tab/plugin-tab.component.html      |  50 +++-
 .../plugin-tab/plugin-tab.component.sass      |  52 +++-
 .../plugin-tab/plugin-tab.component.ts        | 236 +++++++++++++-----
 4 files changed, 273 insertions(+), 69 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index a5a3d7c..54f8e53 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -31,6 +31,8 @@ const routes: Routes = [
     { path: 'settings', component: SettingsPageComponent },
     { path: 'extra/:templateTabId', component: PluginTabComponent },
     { path: 'extra/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
+    { path: 'extra/:path/:templateTabId', component: PluginTabComponent },
+    { path: 'extra/:path/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
     { path: 'experiments', component: ExperimentsPageComponent },
     { path: 'experiments/:experimentId', redirectTo: "info" },
     { path: 'experiments/:experimentId/info', component: ExperimentComponent },
@@ -43,6 +45,8 @@ const routes: Routes = [
     { path: 'experiments/:experimentId/timeline/:step/:stepTabId', component: TimelineStepComponent },
     { path: 'experiments/:experimentId/extra/:templateTabId', component: PluginTabComponent },
     { path: 'experiments/:experimentId/extra/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
+    { path: 'experiments/:experimentId/extra/:path/:templateTabId', component: PluginTabComponent },
+    { path: 'experiments/:experimentId/extra/:path/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
 ];
 
 @NgModule({
diff --git a/src/app/components/plugin-tab/plugin-tab.component.html b/src/app/components/plugin-tab/plugin-tab.component.html
index c89bdb7..716366f 100644
--- a/src/app/components/plugin-tab/plugin-tab.component.html
+++ b/src/app/components/plugin-tab/plugin-tab.component.html
@@ -1,10 +1,40 @@
-<nav mat-tab-nav-bar class="big-nav-tabs" *ngIf="plugins.length > 1">
-    <a mat-tab-link
-        [routerLink]="['/experiments', currentExperimentId, 'extra', currentTabId, 'plugin', plugin.resourceKey?.pluginId]"
-        [queryParamsHandling]="'preserve'" [active]="plugin.resourceKey?.pluginId === currentPluginId"
-        *ngFor="let plugin of plugins">
-        {{plugin.name}}
-    </a>
-</nav>
-<qhana-plugin-uiframe class="plugin-frame" [url]="activePluginFrontendUrl" *ngIf="activePluginFrontendUrl != null">
-</qhana-plugin-uiframe>
+<ng-container *ngFor="let navTabBar of navigationTabs">
+    <nav mat-tab-nav-bar class="big-nav-tabs" [tabPanel]="panel">
+        <a mat-tab-link
+            [routerLink]="navTabLinkPrefix.concat(navTab.link)"
+            [queryParamsHandling]="'preserve'" [active]="navTab.tabId === currentTabId || currentPath?.startsWith(navTab.path)"
+            *ngFor="let navTab of navTabBar">
+            <span class="link-label">
+                <mat-icon *ngIf="navTab.icon">
+                    {{navTab.icon}}
+                </mat-icon>
+                {{navTab.name}}
+                <mat-icon *ngIf="navTab.isGroup">more_vert</mat-icon>
+            </span>
+        </a>
+    </nav>
+    <mat-tab-nav-panel #panel></mat-tab-nav-panel>
+</ng-container>
+<ng-container *ngIf="navigationTabs.length === 0 && (currentPluginGroup?.collectionSize ?? 0) > 1 && (currentPluginGroup?.collectionSize ?? 0) < 6">
+    <nav mat-tab-nav-bar class="big-nav-tabs" [tabPanel]="pluginsPanel">
+        <a mat-tab-link
+            [routerLink]="navTabLinkPrefix.concat(currentPath ? [currentPath] : []).concat([currentTabId ?? '-1', 'plugin', plugin.resourceKey?.pluginId ?? '-1'])"
+            [queryParamsHandling]="'preserve'" [active]="plugin.resourceKey?.pluginId === currentPluginId || plugin.resourceKey?.pluginId === activePlugin?.resourceKey?.pluginId"
+            *ngFor="let plugin of currentPluginGroup?.items">
+            {{plugin.name}}
+        </a>
+    </nav>
+    <mat-tab-nav-panel #pluginsPanel></mat-tab-nav-panel>
+</ng-container>
+<div class="main-content">
+    <mat-card class="sidebar" *ngIf="currentPluginGroup && ((currentPluginGroup?.collectionSize ?? 0) >= 6 || (navigationTabs.length > 0 && (currentPluginGroup?.collectionSize ?? 0) > 1))">
+        <mat-card-header class="sidebar-header t-title">Plugins</mat-card-header>
+        <mat-card-content class="sidebar-content-wrapper">
+            <qhana-growing-list class="sidebar-content scrollable" [apiLink]="currentPluginGroup.self"
+                [highlighted]="highlightedPlugin" [highlightByKey]="'pluginId'"
+                (clickItem)="selectPlugin($event)"></qhana-growing-list>
+        </mat-card-content>
+    </mat-card>
+    <qhana-plugin-uiframe class="plugin-frame" [url]="activePluginFrontendUrl" *ngIf="activePluginFrontendUrl != null">
+    </qhana-plugin-uiframe>
+</div>
diff --git a/src/app/components/plugin-tab/plugin-tab.component.sass b/src/app/components/plugin-tab/plugin-tab.component.sass
index b8a83e9..06a4437 100644
--- a/src/app/components/plugin-tab/plugin-tab.component.sass
+++ b/src/app/components/plugin-tab/plugin-tab.component.sass
@@ -1,10 +1,60 @@
 .big-nav-tabs
-    border-color: var(--border-color)
+    --mdc-tab-indicator-active-indicator-color: var(--primary-text)
+    --mat-tab-header-active-label-text-color: var(--primary-text)
+    --mat-tab-header-active-ripple-color: var(--primary-text)
+    --mat-tab-header-inactive-ripple-color: var(--primary-text)
+    --mat-tab-header-active-focus-label-text-color: var(--primary-text)
+    --mat-tab-header-active-hover-label-text-color: var(--primary-text)
+    --mat-tab-header-active-focus-indicator-color: var(--primary-text)
+    --mat-tab-header-active-hover-indicator-color: var(--primary-text)
+    border-block-end: 1px solid var(--border-color)
 
 .big-nav-tabs a
     color: var(--text)
 
+.link-label
+    display: inline-flex
+    align-items: center
+    gap: 0.3rem
+
+.main-content
+    display: flex
+    flex-direction: row
+    width: 100%
+
+.sidebar
+    position: sticky
+    top: 1rem
+    margin-block: 1rem
+    margin-inline: 1rem
+    min-width: 15rem
+    width: 25vw
+    max-width: 22rem
+    max-height: calc( 100vh - 2rem )
+
+.sidebar-header
+    padding-block: 1rem
+    height: 2rem
+
+.sidebar-content-wrapper
+    margin-inline: -16px
+    margin-block-end: -16px
+    height: calc(100% - 4rem)
+
+.sidebar-content
+    display: block
+    box-sizing: border-box
+    padding-inline: 16px
+    padding-block-end: 1rem
+    height: 100%
+    overflow-y: auto
+    scrollbar-width: thin
+
+.sidebar-content ::ng-deep > ul
+    margin-inline: -16px
+
 .plugin-frame
+    flex-grow: 1
     display: flex
     flex-direction: column
     min-height: 50vh
diff --git a/src/app/components/plugin-tab/plugin-tab.component.ts b/src/app/components/plugin-tab/plugin-tab.component.ts
index 34d031e..99bc305 100644
--- a/src/app/components/plugin-tab/plugin-tab.component.ts
+++ b/src/app/components/plugin-tab/plugin-tab.component.ts
@@ -1,10 +1,22 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
-import { ApiLink, PageApiObject } from 'src/app/services/api-data-types';
+import { ApiLink, CollectionApiObject, PageApiObject } from 'src/app/services/api-data-types';
 import { CurrentExperimentService } from 'src/app/services/current-experiment.service';
 import { PluginApiObject } from 'src/app/services/qhana-api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
+import { TemplateApiObject, TemplatesService, TemplateTabApiObject } from 'src/app/services/templates.service';
+
+
+interface NavTab {
+    tabId: string;
+    name: string;
+    icon: string | null;
+    path: string;
+    isGroup: boolean;
+    link: string[];
+}
+
 
 @Component({
     selector: 'qhana-plugin-tab',
@@ -14,114 +26,222 @@ import { PluginRegistryBaseService } from 'src/app/services/registry.service';
 export class PluginTabComponent implements OnInit, OnDestroy {
 
     private routeParamsSubscription: Subscription | null = null;
+    private currentTemplateSubscription: Subscription | null = null;
+    private templateTabUpdatesSubscription: Subscription | null = null;
 
-    currentExperimentId: string | null = null
+    private currentTemplate: TemplateApiObject | null = null;
+    private currentTemplateTab: TemplateTabApiObject | null = null;
+
+    currentExperimentId: string | null = null;
+    currentPath: string | null = null;
+    currentTemplateId: string | null = null;
+    routeTemplateId: string | null = null;
     currentTabId: string | null = null;
     currentPluginId: string | null = null;
 
-    plugins: ApiLink[] = [];
+    navigationTabs: NavTab[][] = [];
+    navTabLinkPrefix: string[] = [];
+
+    currentPluginGroup: PageApiObject | null = null;
 
     activePlugin: ApiLink | null = null;
+    highlightedPlugin: Set<string> = new Set();
 
     activePluginFrontendUrl: string | null = null;
 
-    constructor(private route: ActivatedRoute, private router: Router, private registry: PluginRegistryBaseService, private experiment: CurrentExperimentService) { }
+    constructor(private route: ActivatedRoute, private router: Router, private registry: PluginRegistryBaseService, private templates: TemplatesService, private experiment: CurrentExperimentService) { }
 
     ngOnInit(): void {
+        this.currentTemplateSubscription = this.templates.currentTemplate.subscribe(template => {
+            this.currentTemplate = template;
+            this.onParamsChanged();
+        });
         this.routeParamsSubscription = this.route.params.subscribe(params => {
             this.currentExperimentId = params?.experimentId ?? null;
             this.experiment.setExperimentId(params?.experimentId ?? null);
-            const tabId = params?.templateTabId ?? null;
-            this.updatePlugins(tabId);
-            const pluginId = params?.pluginId ?? null;
-            this.updatePluginId(pluginId);
+            this.currentPath = params?.path ?? null;
+            this.currentTabId = params?.templateTabId ?? null;
+            let pluginId = params?.pluginId ?? null;
+            if (this.currentTabId == null) {
+                pluginId = null;
+            }
+            this.currentPluginId = pluginId;
+            this.onParamsChanged();
+        });
+        this.templateTabUpdatesSubscription = this.templates.currentTemplateTabsUpdates.subscribe(() => {
+            // this.updateGeneralExtraTabGroup();
+            // this.updateExperimentExtraTabGroup();
         });
     }
 
     ngOnDestroy(): void {
         this.routeParamsSubscription?.unsubscribe();
+        this.currentTemplateSubscription?.unsubscribe();
+        this.templateTabUpdatesSubscription?.unsubscribe();
+    }
+
+    private getNavigationGroups(tab: TemplateTabApiObject) {
+        let groupLocation = tab.location;
+        if (tab.groupKey) {
+            groupLocation = `${tab.location}.${tab.groupKey}`;
+        }
+        return this.currentTemplate?.groups?.filter(group => {
+            const groupKey = group.resourceKey?.["?group"] ?? null;
+            if (!groupKey?.includes(".")) {
+                return false;
+            }
+            if (groupKey && groupLocation.startsWith(groupKey)) {
+                return true;
+            }
+            return false;
+        }) ?? [];
     }
 
-    private async updatePlugins(templateTabId: string | null) {
-        if (templateTabId === this.currentTabId) {
+    private async onParamsChanged() {
+        if (this.currentTabId == null || this.currentTemplate == null) {
+            this.currentTemplateTab = null;
+            this.navigationTabs = [];
+            this.currentPluginGroup = null;
+            this.onPluginGroupChanged();
             return;
         }
-        this.currentTabId = templateTabId;
 
-        if (templateTabId == null) {
-            this.plugins = [];
+        if (this.currentExperimentId == null) {
+            this.navTabLinkPrefix = ["/extra"];
+        } else {
+            this.navTabLinkPrefix = ["/experiments", this.currentExperimentId, "extra"];
+        }
+
+        await this.loadTab();
+        await this.loadPluginGroup();
+        await this.loadPlugin();
+    }
+
+    private async loadTab() {
+        if (this.currentTemplateTab?.self?.resourceKey?.templateTabId === this.currentTabId) {
+            return;
+        }
+        if (this.currentTemplate == null) {
             return;
         }
 
-        const plugins: ApiLink[] = [];
-        this.plugins = plugins;
+        const templateResponse = await this.registry.getByApiLink<TemplateApiObject>(this.currentTemplate.self, null, false);
+        const tabsLink = templateResponse?.links?.find(link => link.resourceType === "ui-template-tab" && link.rel.some(r => r === "collection"));
+        if (tabsLink == null) {
+            return;
+        }
 
-        const query = new URLSearchParams();
-        query.set("template-tab", templateTabId);
-        const pluginsResponse = await this.registry.getByRel<PageApiObject>([["plugin", "collection"]], query);
+        const allTabs = await this.registry.getByApiLink<CollectionApiObject>(tabsLink, null, true);
+        const tabLink = allTabs?.data?.items?.find(tab => tab.resourceKey?.uiTemplateTabId === this.currentTabId);
+        if (tabLink == null) {
+            return;
+        }
 
+        const tab = await this.registry.getByApiLink<TemplateTabApiObject>(tabLink, null, false);
+        this.currentTemplateTab = tab?.data ?? null;
 
-        if ((pluginsResponse?.data?.collectionSize ?? 0) < 25) {
-            pluginsResponse?.data?.items?.forEach(pluginLink => plugins.push(pluginLink));
-            this.onPluginIdChanges(this.currentPluginId, true);
+        if (tab == null) {
+            return;
         }
+
+        const groups = this.getNavigationGroups(tab.data);
+        groups.sort((a, b) => (a.resourceKey?.["?group"]?.length ?? 0) - (b.resourceKey?.["?group"]?.length ?? 0));
+
+        const navigationTabs: NavTab[][] = await Promise.all(groups.map(group => {
+            const filtered = allTabs?.data?.items?.filter(tab => tab.resourceKey?.["?group"] != null && tab.resourceKey["?group"] === group.resourceKey?.["?group"]) ?? [];
+            const promises = filtered.map(tabLink => {
+                return this.registry.getByApiLink<TemplateTabApiObject>(tabLink, null, false).then(tab => {
+                    const link: string[] = [];
+                    if (tab?.data?.location) {
+                        link.push(tab?.data?.location);
+                    }
+                    link.push(tabLink.resourceKey?.uiTemplateTabId ?? "-1");
+                    const t: NavTab = {
+                        tabId: tab?.data?.self?.resourceKey?.uiTemplateTabId ?? "-1",
+                        name: tab?.data?.name ?? tabLink.name ?? "UNNAMED TAB",
+                        icon: tab?.data?.icon ?? null,
+                        path: (tab?.data?.location ?? "") + ".",
+                        isGroup: Boolean(tab?.data?.groupKey),
+                        link: link,
+                    }
+                    return t;
+                });
+            });
+            return Promise.all(promises);
+        }));
+        this.navigationTabs = navigationTabs;
     }
 
-    private updatePluginId(pluginId: string | null) {
-        if (pluginId === this.currentPluginId) {
+    private async loadPluginGroup() {
+        if (this.currentTemplateTab?.self?.resourceKey?.uiTemplateTabId == null || this.currentTemplateTab.groupKey) {
+            this.currentPluginGroup = null;
+            await this.onPluginGroupChanged();
             return;
         }
-        this.currentPluginId = pluginId;
-        this.onPluginIdChanges(pluginId);
+
+        const tabId = this.currentTemplateTab.self.resourceKey.uiTemplateTabId;
+        if (tabId === this.currentPluginGroup?.self?.resourceKey?.["?template-tab"]) {
+            return;  // plugin group already loaded
+        }
+
+        const query = new URLSearchParams();
+        query.set("template-tab", tabId);
+        const pluginsResponse = await this.registry.getByRel<PageApiObject>([["plugin", "collection"]], query);
+        this.currentPluginGroup = pluginsResponse?.data ?? null;
+        await this.onPluginGroupChanged();
     }
 
-    private async onPluginIdChanges(pluginId: string | null, navigate = false) {
-        if (pluginId == null) {
-            if (this.plugins.length === 0) {
-                this.updateActivePlugin(null, navigate);
-            } else {
-                this.updateActivePlugin(this.plugins[0], navigate);
-            }
+    private async onPluginGroupChanged() {
+        if (this.currentPluginGroup?.collectionSize === 1) {
+            this.activePlugin = this.currentPluginGroup.items[0] ?? null;
+            await this.onActivePluginChanged();
             return;
         }
-        let pluginLink = this.plugins.find(plugin => plugin.resourceKey?.pluginId === pluginId);
-        if (pluginLink != null) {
-            this.updateActivePlugin(pluginLink, navigate);
+        if (this.currentPluginId == null) {
+            this.activePlugin = null;
+            await this.onActivePluginChanged();
             return;
         }
+    }
 
-        const query = new URLSearchParams();
-        query.set("plugin-id", pluginId);
-        if (this.currentTabId != null) {
-            query.set("template-tab", this.currentTabId);
+    private async loadPlugin() {
+        if (this.currentPluginId == null || (this.activePlugin?.resourceKey?.pluginId ?? null) === this.currentPluginId) {
+            return;
         }
-        const pluginPageResponse = await this.registry.getByRel<PageApiObject>([["plugin", "collection"]], query);
 
-        pluginLink = pluginPageResponse?.data?.items?.[0];
-        if (pluginLink != null) {
-            this.updateActivePlugin(pluginLink, navigate);
-            return;
+        let pluginLink = this.currentPluginGroup?.items?.find(link => link.resourceKey?.pluginId === this.currentPluginId) ?? null;
+
+        if (pluginLink == null && this.currentPluginGroup != null) {
+            const query = new URLSearchParams();
+            query.set("plugin-id", this.currentPluginId);
+            const page = await this.registry.getByApiLink<PageApiObject>(this.currentPluginGroup.self, query);
+            if (page?.data?.items?.[0]?.resourceKey?.pluginId === this.currentPluginId) {
+                pluginLink = page.data.items[0];
+            }
         }
-    }
 
-    private async updateActivePlugin(pluginLink: ApiLink | null, navigate: boolean = false) {
         this.activePlugin = pluginLink;
+        await this.onActivePluginChanged();
+    }
 
-        if (pluginLink == null) {
+    private async onActivePluginChanged() {
+        if (this.activePlugin == null) {
             this.activePluginFrontendUrl = null;
-        } else {
-            const pluginResponse = await this.registry.getByApiLink<PluginApiObject>(pluginLink);
-            this.activePluginFrontendUrl = pluginResponse?.data?.entryPoint?.uiHref ?? null; // FIXME for relative URLs!
+            this.highlightedPlugin = new Set();
+            return;
         }
 
-        if (navigate) {
-            const experimentPrefix = this.currentExperimentId != null ? ['/experiments', this.currentExperimentId] : [];
-            if (pluginLink != null) {
-                this.router.navigate([...experimentPrefix, 'extra', this.currentTabId, 'plugin', pluginLink.resourceKey?.pluginId], { queryParamsHandling: 'preserve' });
-            } else {
-                this.router.navigate([...experimentPrefix, 'extra', this.currentTabId], { queryParamsHandling: 'preserve' });
-            }
-        }
+        this.highlightedPlugin = new Set([this.activePlugin.resourceKey?.pluginId ?? ""]);
+
+        const pluginResponse = await this.registry.getByApiLink<PluginApiObject>(this.activePlugin);
+        this.activePluginFrontendUrl = pluginResponse?.data?.entryPoint?.uiHref ?? null; // FIXME for relative URLs!
+    }
+
+    selectPlugin(plugin: ApiLink) {
+        this.activePlugin = plugin;
+        this.onActivePluginChanged();
+
+        this.router.navigate([...this.navTabLinkPrefix, this.currentTabId, 'plugin', plugin.resourceKey?.pluginId], { queryParamsHandling: 'preserve' });
     }
 
 }

From 493687849e40b8c7d8a8c0099ad3978f9070fc60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 15:09:17 +0200
Subject: [PATCH 13/19] Fix plugin types autocomplete triggereing for wrong
 filter type

Fix button styling
---
 .../plugin-filter-node/plugin-filter-node.component.html  | 4 ++--
 .../plugin-filter-node/plugin-filter-node.component.sass  | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
index 8d91a9e..386b4ee 100644
--- a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
+++ b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
@@ -65,7 +65,7 @@
                 </mat-form-field>
                 <mat-form-field class="form-field">
                     <mat-label>Filter String:</mat-label>
-                    <input matInput [value]="value" (focusout)="updateFilterString($event)" list="plugin-types">
+                    <input matInput [value]="value" (focusout)="updateFilterString($event)" [attr.list]="type === 'type' ? 'plugin-types' : null">
                     <datalist *ngIf="type === 'type'" id="plugin-types">
                         <option value="processing"></option>
                         <option value="visualization"></option>
@@ -80,7 +80,7 @@
                         Examples: "processing", "conversion", "dataloader", "visualization", "interaction"
                     </mat-hint>
                 </mat-form-field>
-                <button mat-raised-button type="button" (click)="delete.emit()">
+                <button mat-raised-button class="config-filter-button" (click)="delete.emit()">
                     <mat-icon>delete</mat-icon>
                 </button>
             </div>
diff --git a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.sass b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.sass
index caf541c..660216e 100644
--- a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.sass
+++ b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.sass
@@ -48,10 +48,16 @@
     display: flex
     flex-direction: row
     justify-content: space-between
-    align-items: center
+    align-items: flex-start
     gap: 10px
     font-size: 12px
 
+.config-filter-button
+    display: inline-flex
+    align-items: center
+    justify-content: center
+    min-height: 56px
+
 ::ng-deep .config-filter > mat-form-field > .mat-mdc-form-field-wrapper
     margin: 0px
     padding: 0px

From 4ddd13fe339caf96d677d341dbba92ea571a3b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Fri, 2 Aug 2024 15:49:59 +0200
Subject: [PATCH 14/19] Add dialog to select plugin name/id in plugin filter
 editor

---
 .../plugin-filter-node.component.html         |  3 +++
 .../plugin-filter-node.component.ts           | 23 ++++++++++++++++++-
 .../choose-plugin/choose-plugin.dialog.ts     |  8 +++----
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
index 386b4ee..8300e76 100644
--- a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
+++ b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
@@ -80,6 +80,9 @@
                         Examples: "processing", "conversion", "dataloader", "visualization", "interaction"
                     </mat-hint>
                 </mat-form-field>
+                <button mat-raised-button class="config-filter-button" (click)="openPluginChooser()" *ngIf="type === 'name' || type === 'id'">
+                    choose
+                </button>
                 <button mat-raised-button class="config-filter-button" (click)="delete.emit()">
                     <mat-icon>delete</mat-icon>
                 </button>
diff --git a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts
index cf76b56..cff023d 100644
--- a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts
+++ b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts
@@ -1,4 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ChoosePluginDialog } from 'src/app/dialogs/choose-plugin/choose-plugin.dialog';
+import { PluginApiObject } from 'src/app/services/qhana-api-data-types';
 
 // Define filter types ('not' excluded)
 // The PluginFilterNodeComponent component is designed to encapsulate a filter object and the information wether the filter is inverted ('not').
@@ -25,7 +28,7 @@ export class PluginFilterNodeComponent implements OnInit {
     inverted: boolean = false;
     isEmpty: boolean = true;
 
-    constructor() { }
+    constructor(private dialog: MatDialog) { }
 
     ngOnInit(): void {
         this.setupFilter();
@@ -156,4 +159,22 @@ export class PluginFilterNodeComponent implements OnInit {
         }
         this.filterOut.emit(JSON.parse(JSON.stringify(this.filterObject)));
     }
+
+    openPluginChooser() {
+        const dialogRef = this.dialog.open(ChoosePluginDialog, {});
+        dialogRef.afterClosed().subscribe((result: PluginApiObject | null) => {
+            if (result == null) {
+                return; // nothing was selected
+            }
+            if (this.type === "id") {
+                this.value = result.identifier;
+                this.updateFilterObject();
+            }
+            if (this.type === "name") {
+                this.value = result.title;
+                this.updateFilterObject();
+            }
+        });
+
+    }
 }
diff --git a/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts b/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts
index 69d1249..cc2fbc9 100644
--- a/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts
+++ b/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts
@@ -22,17 +22,17 @@ export class ChoosePluginDialog {
 
     queryParams: URLSearchParams | null = null;
 
-    constructor(public dialogRef: MatDialogRef<ChoosePluginDialog>, @Inject(MAT_DIALOG_DATA) public data: PluginRestrictions, private registry: PluginRegistryBaseService) {
+    constructor(public dialogRef: MatDialogRef<ChoosePluginDialog>, @Inject(MAT_DIALOG_DATA) public data: PluginRestrictions | null, private registry: PluginRegistryBaseService) {
         const query = new URLSearchParams();
-        if (data.pluginTags) {
+        if (data?.pluginTags) {
             const tag_list = data.pluginTags.join(",");
             console.log(tag_list, data.pluginTags)
             query.set("tags", tag_list);
         }
-        if (data.pluginName) {
+        if (data?.pluginName) {
             query.set("name", data.pluginName);
         }
-        if (data.pluginVersion) {
+        if (data?.pluginVersion) {
             query.set("version", data.pluginVersion)
         }
         this.queryParams = query;

From fc865c680445fdec0541c487beb50f04b6f840e0 Mon Sep 17 00:00:00 2001
From: Philipp Wundrack <philipp.wundrack@live.de>
Date: Mon, 5 Aug 2024 10:49:54 +0200
Subject: [PATCH 15/19] fix default details marker visible in Safari

---
 src/styles.sass | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles.sass b/src/styles.sass
index df67b20..f4cdbb6 100644
--- a/src/styles.sass
+++ b/src/styles.sass
@@ -354,6 +354,7 @@ summary.no-decoration
 summary.no-decoration::marker
 summary.no-decoration::-webkit-details-marker
     content: none
+    display: none
 
 // Milkdown markdown content
 

From fd15d7ee53ddc6f994dccbad7b69b378bf4758c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Mon, 5 Aug 2024 11:06:10 +0200
Subject: [PATCH 16/19] Fix angular not reusing tab component over multiple
 routes

Use a custom route matcher to only use one single route for all routes using the PluginTabComponent
---
 src/app/app-routing.module.ts | 103 +++++++++++++++++++++++++++++++---
 1 file changed, 94 insertions(+), 9 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 54f8e53..ed98425 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -15,7 +15,7 @@
  */
 
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes, UrlMatcher, UrlMatchResult, UrlSegment } from '@angular/router';
 import { DataDetailComponent } from './components/data-detail/data-detail.component';
 import { ExperimentDataComponent } from './components/experiment-data/experiment-data.component';
 import { ExperimentTimelineComponent } from './components/experiment-timeline/experiment-timeline.component';
@@ -26,13 +26,98 @@ import { PluginTabComponent } from './components/plugin-tab/plugin-tab.component
 import { SettingsPageComponent } from './components/settings-page/settings-page.component';
 import { TimelineStepComponent } from './components/timeline-step/timeline-step.component';
 
+const NUMBER_REGEX = /^[0-9]+$/;
+
+const extraTabsMatcher: UrlMatcher = (segments: UrlSegment[], group, route): UrlMatchResult | null => {
+    const consumed: UrlSegment[] = [];
+    const params: { [props: string]: UrlSegment } = {};
+
+    let tabId: UrlSegment | null = null;
+    let pluginId: UrlSegment | null = null;
+
+    // match: /experiments/:experimentId
+    let index = 0;
+    if (segments[index]?.path === "experiments") {
+        consumed.push(segments[index]);
+        index += 1;
+        if ((segments[index]?.path ?? "").match(NUMBER_REGEX)) {
+            params.experimentId = segments[index];
+            consumed.push(segments[index]);
+            index += 1;
+        } else {
+            return null;
+        }
+    }
+
+    console.log(consumed, params)
+
+    // match: ./extra[/:path]/:templateTabId
+    if (segments[index]?.path !== "extra") {
+        return null;
+    }
+    consumed.push(segments[index]);
+    index += 1;
+    if (segments[index + 1]?.path.match(NUMBER_REGEX)) {
+        // push [/:path]
+        params.path = segments[index];
+        consumed.push(segments[index]);
+        index += 1;
+        // push /:templateTabId
+        tabId = segments[index];
+        consumed.push(segments[index]);
+        index += 1;
+    } else if (segments[index]?.path.match(NUMBER_REGEX)) {
+        // push /:templateTabId
+        tabId = segments[index];
+        consumed.push(segments[index]);
+        index += 1;
+    }
+
+    if (tabId == null) {
+        // sanity check
+        return null;
+    }
+    params.templateTabId = tabId;
+
+    console.log(consumed, params)
+
+    // found full match?
+    if (index === segments.length) {
+        return {
+            consumed: consumed,
+            posParams: params,
+        }
+    }
+
+    // match: ./plugin/:pluginId
+    if (segments[index]?.path !== "plugins") {
+        return null;
+    }
+    consumed.push(segments[index]);
+    index += 1;
+    if (segments[index]?.path.match(NUMBER_REGEX)) {
+        pluginId = segments[index];
+        consumed.push(segments[index]);
+        index += 1;
+    }
+
+    console.log(consumed, params)
+
+    // found full match?
+    if (index === segments.length && pluginId != null) {
+        params.pluginId = pluginId;
+        return {
+            consumed: consumed,
+            posParams: params,
+        }
+    }
+
+    return null;
+}
+
 const routes: Routes = [
     { path: '', component: ExperimentsPageComponent },
     { path: 'settings', component: SettingsPageComponent },
-    { path: 'extra/:templateTabId', component: PluginTabComponent },
-    { path: 'extra/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
-    { path: 'extra/:path/:templateTabId', component: PluginTabComponent },
-    { path: 'extra/:path/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
     { path: 'experiments', component: ExperimentsPageComponent },
     { path: 'experiments/:experimentId', redirectTo: "info" },
     { path: 'experiments/:experimentId/info', component: ExperimentComponent },
@@ -43,10 +128,10 @@ const routes: Routes = [
     { path: 'experiments/:experimentId/timeline', component: ExperimentTimelineComponent },
     { path: 'experiments/:experimentId/timeline/:step', component: TimelineStepComponent },
     { path: 'experiments/:experimentId/timeline/:step/:stepTabId', component: TimelineStepComponent },
-    { path: 'experiments/:experimentId/extra/:templateTabId', component: PluginTabComponent },
-    { path: 'experiments/:experimentId/extra/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
-    { path: 'experiments/:experimentId/extra/:path/:templateTabId', component: PluginTabComponent },
-    { path: 'experiments/:experimentId/extra/:path/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
+    {/* path: '[experiments/:experimentId/]extra/[:path/]:templateTabId/[plugins/:pluginId]' */
+        matcher: extraTabsMatcher,
+        component: PluginTabComponent,
+    },
 ];
 
 @NgModule({

From 424b3707ee4d244650351a896d42c0958b4ef41e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Mon, 5 Aug 2024 12:45:05 +0200
Subject: [PATCH 17/19] Improve template tab form validity checking

---
 .../template-details.component.html                |  8 +++++---
 .../template-details.component.sass                |  3 +++
 .../template-details/template-details.component.ts | 14 +++++++++++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/components-small/template-details/template-details.component.html b/src/app/components-small/template-details/template-details.component.html
index 5e3a9e2..c716a9a 100644
--- a/src/app/components-small/template-details/template-details.component.html
+++ b/src/app/components-small/template-details/template-details.component.html
@@ -12,6 +12,7 @@ <h2>Template Tab</h2>
     <mat-form-field class="form-field" [hidden]="!templateForm.value.location || templateForm.value.location === 'workspace'">
         <mat-label>Tab Group:</mat-label>
         <input matInput formControlName="locationExtra">
+        <mat-hint>The group key of the tab this tab should be grouped under. (Use '.' to separate group keys for nested groups.)</mat-hint>
     </mat-form-field>
     <mat-form-field class="form-field">
         <mat-label>Name:</mat-label>
@@ -35,10 +36,11 @@ <h2>Template Tab</h2>
     </div>
     <mat-form-field class="form-field">
         <mat-label>Group Key:</mat-label>
-        <input matInput formControlName="groupKey">
-        <mat-hint>Establish this tab as its own tab group.</mat-hint>
+        <input matInput pattern="[^\.]*" formControlName="groupKey">
+        <mat-hint>Establish this tab as its own tab group. (Cannot contain '.')</mat-hint>
     </mat-form-field>
     <qhana-plugin-filter-editor [tabLink]="tabLink"
         (filterEmitter)="filterString = $event" [hidden]="templateForm.value.groupKey"></qhana-plugin-filter-editor>
-    <button mat-raised-button class="submit-button" type="submit" color="primary">{{templateLink ? 'Create' : 'Update'}} Tab</button>
+    <p class="form-error" *ngIf="templateForm?.errors?.groupKeyForbidden">Group key cannot be used in experiment workspace tabs!</p>
+    <button mat-raised-button class="submit-button" type="submit" color="primary" [disabled]="templateForm.errors">{{templateLink ? 'Create' : 'Update'}} Tab</button>
 </form>
diff --git a/src/app/components-small/template-details/template-details.component.sass b/src/app/components-small/template-details/template-details.component.sass
index 4ed5a3f..f26c304 100644
--- a/src/app/components-small/template-details/template-details.component.sass
+++ b/src/app/components-small/template-details/template-details.component.sass
@@ -19,3 +19,6 @@
 
 .submit-button
     margin-block-start: 2rem
+
+.form-error
+    color: var(--warn-text)
diff --git a/src/app/components-small/template-details/template-details.component.ts b/src/app/components-small/template-details/template-details.component.ts
index 92beda0..f22b5d5 100644
--- a/src/app/components-small/template-details/template-details.component.ts
+++ b/src/app/components-small/template-details/template-details.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
 import { ApiLink, ApiResponse } from 'src/app/services/api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
 import { TAB_GROUP_NAME_OVERRIDES, TemplateApiObject, TemplateTabApiObject } from 'src/app/services/templates.service';
@@ -60,6 +60,18 @@ export class TemplateDetailsComponent implements OnInit {
     constructor(private registry: PluginRegistryBaseService, private fb: FormBuilder) { }
 
     ngOnInit() {
+        this.templateForm.addValidators((control): ValidationErrors | null => {
+            const loc = control.get("location")?.getRawValue() ?? "";
+            if (loc === "workspace") {
+                const groupKey = control.get("groupKey")?.getRawValue() ?? "";
+                if (groupKey) {
+                    return {
+                        groupKeyForbidden: true,
+                    };
+                }
+            }
+            return null;
+        });
         if (this.tabLink != null) {
             this.registry.getByApiLink<TemplateTabApiObject>(this.tabLink).then(response => {
                 const location = response?.data?.location ?? this.initialValues.location

From 99457209188d27bbb2dc4419fca023761500d46c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Mon, 5 Aug 2024 13:55:23 +0200
Subject: [PATCH 18/19] Fix scroll into view not working for safari

---
 .../components/plugin-sidebar/plugin-sidebar.component.ts  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.ts b/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
index 5defe74..d08a56d 100644
--- a/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
+++ b/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
@@ -408,7 +408,12 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
     scrollGroupIntoView(group: PluginGroup) {
         const groupElement = this.sidebar?.nativeElement?.querySelector<HTMLDetailsElement>(`[data-group="${group.key}"]`);
         if (groupElement) {
-            window.requestIdleCallback(() => {
+            let caller: (calback: () => void) => void = window.requestIdleCallback;
+            if (caller == null) {
+                // fix for safari/older browsers
+                caller = Promise.resolve().then;
+            }
+            caller(() => {
                 groupElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
             });
         }

From a3abb2e472a6a502344fd5c1e0c2d250f1eae988 Mon Sep 17 00:00:00 2001
From: Philipp Wundrack <philipp.wundrack@live.de>
Date: Mon, 5 Aug 2024 15:24:45 +0200
Subject: [PATCH 19/19] fix TypeError in Safari

---
 src/app/components/plugin-sidebar/plugin-sidebar.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.ts b/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
index d08a56d..7905a57 100644
--- a/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
+++ b/src/app/components/plugin-sidebar/plugin-sidebar.component.ts
@@ -411,7 +411,7 @@ export class PluginSidebarComponent implements OnInit, OnDestroy {
             let caller: (calback: () => void) => void = window.requestIdleCallback;
             if (caller == null) {
                 // fix for safari/older browsers
-                caller = Promise.resolve().then;
+                caller = (c) => Promise.resolve().then(c);
             }
             caller(() => {
                 groupElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
