Feature/refactor tab group loading

src/app/components-small/template-details/template-details.component.html

@@ -3,7 +3,7 @@ <h2>Template Tab</h2>
     <mat-form-field class="form-field">
         <mat-label>Location</mat-label>
         <mat-select formControlName="location">
-            <mat-option *ngFor="let location of getLocations() | keyvalue" [value]="location.key">
+            <mat-option *ngFor="let location of tabGroupNameOverrides | keyvalue" [value]="location.key">
                 {{location.value}}
             </mat-option>
         </mat-select>

src/app/components-small/template-details/template-details.component.ts

@@ -3,7 +3,7 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 import { ApiLink, ApiResponse } from 'src/app/services/api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
 import { TemplateApiObject, TemplateTabApiObject } from 'src/app/services/templates.service';
-import { TAB_GROUP_NAME_OVERRIDES } from "src/app/components/tab-group-list/tab-group-list.component";
+import { TAB_GROUP_NAME_OVERRIDES } from 'src/app/services/templates.service';
 
 export function isInSetValidator(validValues: any[]): Validators {
     return (control: FormControl): { [key: string]: any } | null => {
@@ -29,12 +29,14 @@ export class TemplateDetailsComponent implements OnInit {
     @Input() templateLink: ApiLink | null = null;
     @Input() tabLink: ApiLink | null = null;
 
+    tabGroupNameOverrides = {...TAB_GROUP_NAME_OVERRIDES};
+
     private initialValues = {
         name: "",
         description: "",
         sortKey: 0,
         filterString: "{}",
-        location: TAB_GROUP_NAME_OVERRIDES["workspace"]
+        location: "workspace"
     };
 
     templateForm: FormGroup = this.fb.group({
@@ -89,8 +91,4 @@ export class TemplateDetailsComponent implements OnInit {
             }
         }
     }
-
-    getLocations(): { [group: string]: string } {
-        return TAB_GROUP_NAME_OVERRIDES;
-    }
 }

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

@@ -67,8 +67,8 @@ <h3 mat-subheader>Create New Template Tab</h3>
         </mat-expansion-panel>
         <mat-divider></mat-divider>
 
-        <ng-container *ngFor="let group of templateTabLinks | keyvalue: tabOrder">
-            <h3 mat-subheader>{{getTabName(group.key)}}</h3>
+        <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)" 
             [id]="'tab-' + tab.resourceKey?.uiTemplateTabId">

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

@@ -11,7 +11,7 @@ import { TemplateApiObject } from 'src/app/services/templates.service';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { Subscription } from 'rxjs';
-import { TAB_GROUP_NAME_OVERRIDES, TAB_GROUP_SORT_KEYS } from 'src/app/components/tab-group-list/tab-group-list.component';
+import { TAB_GROUP_NAME_OVERRIDES, TAB_GROUP_SORT_KEYS } from 'src/app/services/templates.service';
 import { KeyValue } from '@angular/common';
 
 @Component({
@@ -23,6 +23,8 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
 
     readonly separatorKeysCodes = [ENTER, COMMA] as const;
 
+    tabGroupNameOverrides = { ...TAB_GROUP_NAME_OVERRIDES };
+
     templateId: string | null = null;
     tabId: string | null = null;
 
@@ -335,13 +337,11 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
         this.cancelEditTemplate();
     }
 
-    getTabName(group: string): string {
-        return TAB_GROUP_NAME_OVERRIDES[group] ?? group;
-    }
-
     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;
         return aSortKey - bSortKey;
     }
+
+    trackByTabLink = (index: number, item: KeyValue<string, ApiLink[]>) => item.key;
 }

src/app/components/navbar/navbar.component.html

@@ -23,14 +23,14 @@
         </a>
         <a class="navigation-link" mat-button
             [routerLink]="['/experiments', (experimentId|async), 'extra', tab.resourceKey?.uiTemplateTabId]" [queryParams]="{template: templateId}"
-            routerLinkActive="active" *ngFor="let tab of extraTabs">
+            routerLinkActive="active" *ngFor="let tab of experimentExtraTabs">
             {{tab.name}}
         </a>
     </ng-container>
     <ng-container *ngIf="(currentExperiment|async) == null">
         <a class="navigation-link" mat-button
             [routerLink]="['extra', tab.resourceKey?.uiTemplateTabId]" [queryParams]="{template: templateId}"
-            routerLinkActive="active" *ngFor="let tab of extraTabs">
+            routerLinkActive="active" *ngFor="let tab of generalExtraTabs">
             {{tab.name}}
         </a>
     </ng-container>

src/app/components/navbar/navbar.component.ts

@@ -45,8 +45,6 @@ export class NavbarComponent implements OnInit, OnDestroy {
     experimentExtraTabsGroupLink: ApiLink | null = null;
     experimentExtraTabs: ApiLink[] = [];
 
-    extraTabs: ApiLink[] = [];
-
     templateId: string | null = null;
     template: TemplateApiObject | null = null;
 
@@ -94,7 +92,6 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
     private async onTemplateChanges(template: TemplateApiObject | null) {
         if (template == null) {
-            this.extraTabs = [];
             return;
         }
         const experimentNavGroup = template.groups.find(group => group.resourceKey?.["?group"] === "experiment-navigation") ?? null;
@@ -118,7 +115,6 @@ export class NavbarComponent implements OnInit, OnDestroy {
         if (groupLink == null) {
             this.experimentExtraTabs = [];
             this.experimentExtraTabsGroupLink = null;
-            this.updateExtraTabs();
             return;
         }
 
@@ -129,15 +125,13 @@ export class NavbarComponent implements OnInit, OnDestroy {
         groupResponse?.data?.items?.forEach(tab => extraTabs.push(tab));
 
         this.experimentExtraTabs = extraTabs;
-        this.updateExtraTabs();
     }
 
     private async updateGeneralExtraTabGroup() {
         const groupLink = this.generalExtraTabsGroupLink;
         if (groupLink == null) {
             this.generalExtraTabs = [];
             this.generalExtraTabsGroupLink = null;
-            this.updateExtraTabs();
             return;
         }
 
@@ -148,17 +142,5 @@ export class NavbarComponent implements OnInit, OnDestroy {
         groupResponse?.data?.items?.forEach(tab => extraTabs.push(tab));
 
         this.generalExtraTabs = extraTabs;
-        this.updateExtraTabs();
-    }
-
-    private updateExtraTabs() {
-        this.experimentId.subscribe(experimentId => {
-            if (experimentId != null) {
-                // only show experiment navigation tabs if an experiment is active
-                this.extraTabs = this.experimentExtraTabs;
-            } else {
-                this.extraTabs = this.generalExtraTabs;
-            }
-        });
     }
 }

src/app/components/tab-group-list/tab-group-list.component.ts

@@ -18,20 +18,7 @@ import { Subscription } from 'rxjs';
 import { ApiLink } from 'src/app/services/api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
 import { TemplatesService } from 'src/app/services/templates.service';
-
-
-export const TAB_GROUP_SORT_KEYS: { [group: string]: number } = {
-    "DEFAULT": 10000,
-    "workspace": 10,
-    "experiment-navigation": 20,
-    "navigation": 30,
-}
-
-export const TAB_GROUP_NAME_OVERRIDES: { [group: string]: string } = {
-    "workspace": "Workspace Tabs (Sidebar)",
-    "experiment-navigation": "Experiment Navigation Tabs",
-    "navigation": "Navigation Tabs",
-}
+import { TAB_GROUP_NAME_OVERRIDES, TAB_GROUP_SORT_KEYS } from 'src/app/services/templates.service';
 
 @Component({
     selector: 'qhana-tab-group-list',

src/app/services/templates.service.ts

@@ -41,6 +41,19 @@ export interface TemplateTabApiObject extends ApiObject {  // TODO check fields
     plugins: ApiLink;
 }
 
+export const TAB_GROUP_SORT_KEYS: { [group: string]: number } = {
+    "DEFAULT": 10000,
+    "workspace": 10,
+    "experiment-navigation": 20,
+    "navigation": 30,
+}
+
+export const TAB_GROUP_NAME_OVERRIDES: { [group: string]: string } = {
+    "workspace": "Workspace Tabs (Sidebar)",
+    "experiment-navigation": "Experiment Navigation Tabs",
+    "navigation": "Navigation Tabs",
+}
+
 
 @Injectable({
     providedIn: 'root'