show navigation tabs in navbar if no experiment is selected

UST-QuAntiL · Jul 7, 2023 · 215f213 · 215f213
1 parent 2470af9
commit 215f213
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 20 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -29,6 +29,8 @@ import { TimelineStepComponent } from './components/timeline-step/timeline-step.
 const routes: Routes = [
     { path: '', component: ExperimentsPageComponent },
     { path: 'settings', component: SettingsPageComponent },
+    { path: 'extra/:templateTabId', component: PluginTabComponent },
+    { path: 'extra/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
     { path: 'experiments', component: ExperimentsPageComponent },
     { path: 'experiments/:experimentId', redirectTo: "info" },
     { path: 'experiments/:experimentId/info', component: ExperimentComponent },

diff --git a/src/app/components-small/template-details/template-details.component.html b/src/app/components-small/template-details/template-details.component.html
@@ -3,8 +3,8 @@ <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 locations" [value]="location.value">
-                {{location.description}}
+            <mat-option *ngFor="let location of getLocations() | keyvalue" [value]="location.key">
+                {{location.value}}
             </mat-option>
         </mat-select>
     </mat-form-field>

diff --git a/src/app/components-small/template-details/template-details.component.ts b/src/app/components-small/template-details/template-details.component.ts
@@ -3,6 +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";
 
 export function isInSetValidator(validValues: any[]): Validators {
     return (control: FormControl): { [key: string]: any } | null => {
@@ -28,25 +29,20 @@ export class TemplateDetailsComponent implements OnInit {
     @Input() templateLink: ApiLink | null = null;
     @Input() tabLink: ApiLink | null = null;
 
-    locations: Location[] = [
-        { value: "workspace", description: "Workspace (appears in the plugin sidebar)" },
-        { value: "experiment-navigation", description: "Experiment Navigation (appears in the top navigation bar)" }
-    ];
-
     private initialValues = {
         name: "",
         description: "",
         sortKey: 0,
         filterString: "{}",
-        location: this.locations[0].value
+        location: TAB_GROUP_NAME_OVERRIDES["workspace"]
     };
 
     templateForm: FormGroup = this.fb.group({
         name: [this.initialValues.name, Validators.required],
         description: this.initialValues.description,
         sortKey: this.initialValues.sortKey,
         filterString: [this.initialValues.filterString, Validators.minLength(2)], // TODO: validate using JSON schema
-        location: [this.initialValues.location, [Validators.required, isInSetValidator(this.locations.map(location => location.value))]]
+        location: [this.initialValues.location, [Validators.required, isInSetValidator(Object.keys(TAB_GROUP_NAME_OVERRIDES))]]
     });
 
     constructor(private registry: PluginRegistryBaseService, private fb: FormBuilder) { }
@@ -93,4 +89,8 @@ export class TemplateDetailsComponent implements OnInit {
             }
         }
     }
+
+    getLocations(): { [group: string]: string } {
+        return TAB_GROUP_NAME_OVERRIDES;
+    }
 }
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
@@ -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 '../tab-group-list/tab-group-list.component';
+import { TAB_GROUP_NAME_OVERRIDES, TAB_GROUP_SORT_KEYS } from 'src/app/components/tab-group-list/tab-group-list.component';
 import { KeyValue } from '@angular/common';
 
 @Component({
@@ -175,6 +175,9 @@ export class ExperimentWorkspaceDetailComponent implements OnInit {
                     console.warn("changed tab has no group", changedObject.changed);
                     return;
                 }
+                if (!Object.hasOwn(this.templateTabLinks, group)) {
+                    this.templateTabLinks[group] = [];
+                }
                 if (!this.templateTabLinks[group].includes(changedObject.changed)) {
                     for (const group in this.templateTabLinks) {
                         this.templateTabLinks[group] = this.templateTabLinks[group].filter(link => link.href !== changedObject.changed.href);

diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
@@ -27,6 +27,13 @@
             {{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">
+            {{tab.name}}
+        </a>
+    </ng-container>
 
     <div class="toolbar-spacer"></div>
 

diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
@@ -102,7 +102,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
         this.experimentExtraTabsGroupLink = experimentNavGroup;
 
         const generalNavGroup = template.groups.find(group => group.resourceKey?.["?group"] === "navigation") ?? null;
-        const generalTabsLinkChanged = this.experimentExtraTabsGroupLink?.href !== experimentNavGroup?.href;
+        const generalTabsLinkChanged = this.generalExtraTabsGroupLink?.href !== generalNavGroup?.href;
         this.generalExtraTabsGroupLink = generalNavGroup;
 
         if (experimentTabsLinkChanged) {
@@ -152,11 +152,13 @@ export class NavbarComponent implements OnInit, OnDestroy {
     }
 
     private updateExtraTabs() {
-        if (this.experimentId != null) {
-            // only show experiment navigatio tabs if an experiment is active
-            this.extraTabs = this.experimentExtraTabs;
-        } else {
-            this.extraTabs = this.generalExtraTabs;
-        }
+        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;
+            }
+        });
     }
 }
diff --git a/src/app/components/plugin-tab/plugin-tab.component.ts b/src/app/components/plugin-tab/plugin-tab.component.ts
@@ -63,7 +63,6 @@ export class PluginTabComponent implements OnInit, OnDestroy {
 
         if ((pluginsResponse?.data?.collectionSize ?? 0) < 25) {
             pluginsResponse?.data?.items?.forEach(pluginLink => plugins.push(pluginLink));
-            console.log(this.plugins)
             this.onPluginIdChanges(this.currentPluginId, true);
         }
     }
@@ -116,10 +115,11 @@ export class PluginTabComponent implements OnInit, OnDestroy {
         }
 
         if (navigate) {
+            const experimentPrefix = this.currentExperimentId != null ? ['/experiments', this.currentExperimentId] : [];
             if (pluginLink != null) {
-                this.router.navigate(['/experiments', this.currentExperimentId, 'extra', this.currentTabId, 'plugin', pluginLink.resourceKey?.pluginId], { queryParamsHandling: 'preserve' });
+                this.router.navigate([...experimentPrefix, 'extra', this.currentTabId, 'plugin', pluginLink.resourceKey?.pluginId], { queryParamsHandling: 'preserve' });
             } else {
-                this.router.navigate(['/experiments', this.currentExperimentId, 'extra', this.currentTabId], { queryParamsHandling: 'preserve' });
+                this.router.navigate([...experimentPrefix, 'extra', this.currentTabId], { queryParamsHandling: 'preserve' });
             }
         }
     }

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
@@ -24,11 +24,13 @@ 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",
 }
 
 @Component({