to amend

projects/scion/e2e-testing/src/workbench/workbench-layout-migration.e2e-spec.ts

@@ -186,7 +186,7 @@ test.describe('Workbench Layout Migration', () => {
       microfrontendSupport: false,
       localStorage: {
         'scion.workbench.perspective': 'empty',
-        'scion.workbench.perspectives.empty': 'eyJyZWZlcmVuY2VMYXlvdXQiOnsid29ya2JlbmNoR3JpZCI6ImV5SnliMjkwSWpwN0luUjVjR1VpT2lKTlVHRnlkQ0lzSW1sa0lqb2liV0ZwYmkxaGNtVmhJaXdpYzNSeWRXTjBkWEpoYkNJNmRISjFaU3dpZG1sbGQzTWlPbHRkZlN3aVlXTjBhWFpsVUdGeWRFbGtJam9pYldGcGJpMWhjbVZoSW4wdkx6VT0iLCJ2aWV3T3V0bGV0cyI6Int9In0sInVzZXJMYXlvdXQiOnsid29ya2JlbmNoR3JpZCI6ImV5SnliMjkwSWpwN0luUjVjR1VpT2lKTlZISmxaVTV2WkdVaUxDSmphR2xzWkRFaU9uc2lkSGx3WlNJNklrMVFZWEowSWl3aWFXUWlPaUpzWldaMElpd2ljM1J5ZFdOMGRYSmhiQ0k2ZEhKMVpTd2lkbWxsZDNNaU9sdDdJbWxrSWpvaWRtbGxkeTR5SWl3aVlXeDBaWEp1WVhScGRtVkpaQ0k2SW1WNGNHeHZjbVZ5SWl3aVkzTnpRMnhoYzNNaU9sc2laWGh3Ykc5eVpYSWlYU3dpYm1GMmFXZGhkR2x2YmlJNmV5SnBaQ0k2SWpnek4yTTBZV0ZsTFdKbFpXUXRORFl5WkMwNE56TTRMVGM0WlRkbFpUVmlORFV6WkNKOWZTeDdJbWxrSWpvaWRtbGxkeTR6SWl3aVlXeDBaWEp1WVhScGRtVkpaQ0k2SW01aGRtbG5ZWFJ2Y2lJc0ltTnpjME5zWVhOeklqcGJJbTVoZG1sbllYUnZjaUpkTENKdVlYWnBaMkYwYVc5dUlqcDdJbWxrSWpvaU56azJZbVV6TmpZdFltUmhPUzAwWkRnMUxXSXdNV1l0TWpjM1lqYzRaR1l3TmpReUlpd2lhR2x1ZENJNkluUmxjM1F0ZG1sbGR5SjlmVjBzSW1GamRHbDJaVlpwWlhkSlpDSTZJblpwWlhjdU1pSjlMQ0pqYUdsc1pESWlPbnNpZEhsd1pTSTZJazFVY21WbFRtOWtaU0lzSW1Ob2FXeGtNU0k2ZXlKMGVYQmxJam9pVFZCaGNuUWlMQ0pwWkNJNkltMWhhVzR0WVhKbFlTSXNJbk4wY25WamRIVnlZV3dpT25SeWRXVXNJblpwWlhkeklqcGJYWDBzSW1Ob2FXeGtNaUk2ZXlKMGVYQmxJam9pVFZCaGNuUWlMQ0pwWkNJNkluSnBaMmgwSWl3aWMzUnlkV04wZFhKaGJDSTZkSEoxWlN3aWRtbGxkM01pT2x0N0ltbGtJam9pZG1sbGR5NDBJaXdpWVd4MFpYSnVZWFJwZG1WSlpDSTZJbkJ5YjNCbGNuUnBaWE1pTENKamMzTkRiR0Z6Y3lJNld5SndjbTl3WlhKMGFXVnpJbDBzSW01aGRtbG5ZWFJwYjI0aU9uc2lhV1FpT2lJNU1qUm1ZV0ptTUMxaU5qUTFMVFJsTmprdE9UUXpOQzFtWlRrek56QXhOVE01TkRJaWZYMWRMQ0poWTNScGRtVldhV1YzU1dRaU9pSjJhV1YzTGpRaWZTd2laR2x5WldOMGFXOXVJam9pY205M0lpd2ljbUYwYVc4aU9qQXVOelY5TENKa2FYSmxZM1JwYjI0aU9pSnliM2NpTENKeVlYUnBieUk2TUM0eU5YMHNJbUZqZEdsMlpWQmhjblJKWkNJNklteGxablFpZlM4dk5RPT0iLCJ2aWV3T3V0bGV0cyI6IntcInZpZXcuMlwiOlt7XCJwYXRoXCI6XCJ0ZXN0LXZpZXdcIixcInBhcmFtZXRlcnNcIjp7fX1dLFwidmlldy4zXCI6W10sXCJ2aWV3LjRcIjpbe1wicGF0aFwiOlwidGVzdC12aWV3XCIsXCJwYXJhbWV0ZXJzXCI6e319XX0ifX0vLzI=',
+        'scion.workbench.perspectives.empty': 'eyJyZWZlcmVuY2VMYXlvdXQiOnsid29ya2JlbmNoR3JpZCI6ImV5SnliMjkwSWpwN0luUjVjR1VpT2lKTlVHRnlkQ0lzSW1sa0lqb2liV0ZwYmkxaGNtVmhJaXdpYzNSeWRXTjBkWEpoYkNJNmRISjFaU3dpZG1sbGQzTWlPbHRkZlN3aVlXTjBhWFpsVUdGeWRFbGtJam9pYldGcGJpMWhjbVZoSW4wdkx6UT0iLCJ2aWV3T3V0bGV0cyI6Int9In0sInVzZXJMYXlvdXQiOnsid29ya2JlbmNoR3JpZCI6ImV5SnliMjkwSWpwN0luUjVjR1VpT2lKTlZISmxaVTV2WkdVaUxDSmphR2xzWkRFaU9uc2lkSGx3WlNJNklrMVFZWEowSWl3aWFXUWlPaUpzWldaMElpd2ljM1J5ZFdOMGRYSmhiQ0k2ZEhKMVpTd2lkbWxsZDNNaU9sdDdJbWxrSWpvaWRtbGxkeTR5SWl3aWJtRjJhV2RoZEdsdmJpSTZlMzE5TEhzaWFXUWlPaUoyYVdWM0xqTWlMQ0p1WVhacFoyRjBhVzl1SWpwN0ltaHBiblFpT2lKMFpYTjBMWFpwWlhjaWZYMWRMQ0poWTNScGRtVldhV1YzU1dRaU9pSjJhV1YzTGpJaWZTd2lZMmhwYkdReUlqcDdJblI1Y0dVaU9pSk5WSEpsWlU1dlpHVWlMQ0pqYUdsc1pERWlPbnNpZEhsd1pTSTZJazFRWVhKMElpd2lhV1FpT2lKdFlXbHVMV0Z5WldFaUxDSnpkSEoxWTNSMWNtRnNJanAwY25WbExDSjJhV1YzY3lJNlcxMTlMQ0pqYUdsc1pESWlPbnNpZEhsd1pTSTZJazFRWVhKMElpd2lhV1FpT2lKeWFXZG9kQ0lzSW5OMGNuVmpkSFZ5WVd3aU9uUnlkV1VzSW5acFpYZHpJanBiZXlKcFpDSTZJblpwWlhjdU5DSXNJbTVoZG1sbllYUnBiMjRpT250OWZWMHNJbUZqZEdsMlpWWnBaWGRKWkNJNkluWnBaWGN1TkNKOUxDSmthWEpsWTNScGIyNGlPaUp5YjNjaUxDSnlZWFJwYnlJNk1DNDNOWDBzSW1ScGNtVmpkR2x2YmlJNkluSnZkeUlzSW5KaGRHbHZJam93TGpJMWZTd2lZV04wYVhabFVHRnlkRWxrSWpvaWJHVm1kQ0o5THk4MCIsInZpZXdPdXRsZXRzIjoie1widmlldy4yXCI6W3tcInBhdGhcIjpcInRlc3Qtdmlld1wiLFwicGFyYW1ldGVyc1wiOnt9fV0sXCJ2aWV3LjNcIjpbXSxcInZpZXcuNFwiOlt7XCJwYXRoXCI6XCJ0ZXN0LXZpZXdcIixcInBhcmFtZXRlcnNcIjp7fX1dfSJ9fS8vMg==',
       },
     });
 

projects/scion/workbench/src/lib/common/uid.util.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {UUID} from '@scion/toolkit/uuid';
+
+/**
+ * Generates a UID (unique identifier).
+ */
+export const UID = {
+  /**
+   * Generates a UID (unique identifier) with length 8.
+   */
+  randomUID: (): string => {
+    return UUID.randomUUID().substring(0, 8);
+  },
+};
+
+

projects/scion/workbench/src/lib/dialog/ɵworkbench-dialog.ts

@@ -33,7 +33,7 @@ import {WorkbenchDialogHeaderDirective} from './dialog-header/workbench-dialog-h
 import {Disposable} from '../common/disposable';
 import {Blockable} from '../glass-pane/blockable';
 import {Blocking} from '../glass-pane/blocking';
-import {randomUUID} from '../common/uuid.util';
+import {UUID} from '@scion/toolkit/uuid';
 
 /** @inheritDoc */
 export class ɵWorkbenchDialog<R = unknown> implements WorkbenchDialog<R>, Blockable, Blocking {
@@ -57,7 +57,7 @@ export class ɵWorkbenchDialog<R = unknown> implements WorkbenchDialog<R>, Block
   /**
    * Unique identity of this dialog.
    */
-  public readonly id = randomUUID();
+  public readonly id = UUID.randomUUID();
   /**
    * Indicates whether this dialog is blocked by other dialog(s) that overlay this dialog.
    */

projects/scion/workbench/src/lib/filter-field/filter-field.component.ts

@@ -14,7 +14,7 @@ import {noop} from 'rxjs';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {randomUUID} from '../common/uuid.util';
+import {UUID} from '@scion/toolkit/uuid';
 
 /**
  * Provides a filter control.
@@ -35,7 +35,7 @@ export class FilterFieldComponent implements ControlValueAccessor, OnDestroy {
   private _cvaChangeFn: (value: any) => void = noop;
   private _cvaTouchedFn: () => void = noop;
 
-  public readonly id = randomUUID();
+  public readonly id = UUID.randomUUID();
 
   /**
    * Sets focus order in sequential keyboard navigation.

projects/scion/workbench/src/lib/layout/grid-element/grid-element.component.html

@@ -1,19 +1,25 @@
 <!-- MPart (leaf) -->
-<ng-container *ngIf="element | wbInstanceof:MPart as part" [cdkPortalOutlet]="part.id | wbPartPortal"></ng-container>
+@if (element | wbInstanceof:MPart; as part) {
+  <ng-container [cdkPortalOutlet]="part.id | wbPartPortal"/>
+}
 
 <!-- MTreeNode -->
-<ng-container *ngIf="element | wbInstanceof:MTreeNode as treeNode">
-  <!-- Node with a single visible child. -->
-  <wb-grid-element *ngIf="children.length === 1" [element]="children[0].element"></wb-grid-element>
-
-  <!-- Node with multiple visible children. -->
-  <sci-sashbox *ngIf="children.length > 1"
-               [direction]="treeNode.direction"
-               [attr.data-nodeid]="treeNode.nodeId"
-               (sashStart)="onSashStart()"
-               (sashEnd)="onSashEnd(treeNode, $event)">
-    <ng-template *ngFor="let child of children; index as i; trackBy: indexTrackByFn" sciSash [size]="child.size">
-      <wb-grid-element [element]="child.element" [class]="'sash-' + (i + 1)"></wb-grid-element>
-    </ng-template>
-  </sci-sashbox>
-</ng-container>
+@if (element | wbInstanceof:MTreeNode; as treeNode) {
+  @if (children.length === 1) {
+    <!-- Node with a single visible child. -->
+    <wb-grid-element [element]="children[0].element"/>
+  }
+  @if (children.length > 1) {
+    <!-- Node with multiple visible children. -->
+    <sci-sashbox [direction]="treeNode.direction"
+                 [attr.data-nodeid]="treeNode.id"
+                 (sashStart)="onSashStart()"
+                 (sashEnd)="onSashEnd(treeNode, $event)">
+      @for (child of children; track child.element.id) {
+        <ng-template sciSash [size]="child.size">
+          <wb-grid-element [element]="child.element" [class]="'sash-' + ($index + 1)"/>
+        </ng-template>
+      }
+    </sci-sashbox>
+  }
+}

projects/scion/workbench/src/lib/layout/grid-element/grid-element.component.ts

@@ -8,14 +8,13 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import {Component, HostBinding, Input, OnChanges, SimpleChanges, TrackByFunction} from '@angular/core';
+import {Component, HostBinding, Input, OnChanges, SimpleChanges} from '@angular/core';
 import {MPart, MTreeNode} from '../workbench-layout.model';
 import {ɵWorkbenchRouter} from '../../routing/ɵworkbench-router.service';
 import {WorkbenchLayoutService} from '../workbench-layout.service';
 import {InstanceofPipe} from '../../common/instanceof.pipe';
 import {PortalModule} from '@angular/cdk/portal';
 import {PartPortalPipe} from '../../part/part-portal.pipe';
-import {NgFor, NgIf} from '@angular/common';
 import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
 import {WorkbenchLayouts} from '../workbench-layouts.util';
 
@@ -37,8 +36,6 @@ import {WorkbenchLayouts} from '../workbench-layouts.util';
   styleUrls: ['./grid-element.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     InstanceofPipe,
     PortalModule,
     PartPortalPipe,
@@ -70,8 +67,8 @@ export class GridElementComponent implements OnChanges {
 
   public ngOnChanges(changes: SimpleChanges): void {
     this.children = this.element instanceof MTreeNode ? this.computeChildren(this.element) : [];
-    this.parentNodeId = this.element.parent?.nodeId;
-    this.nodeId = this.element instanceof MTreeNode ? this.element.nodeId : undefined;
+    this.parentNodeId = this.element.parent?.id;
+    this.nodeId = this.element instanceof MTreeNode ? this.element.id : undefined;
     this.partId = this.element instanceof MPart ? this.element.id : undefined;
   }
 
@@ -82,7 +79,7 @@ export class GridElementComponent implements OnChanges {
   public onSashEnd(treeNode: MTreeNode, [sashSize1, sashSize2]: number[]): void {
     const ratio = sashSize1 / (sashSize1 + sashSize2);
     this._workbenchLayoutService.notifyDragEnding();
-    this._workbenchRouter.navigate(layout => layout.setSplitRatio(treeNode.nodeId, ratio)).then();
+    this._workbenchRouter.navigate(layout => layout.setSplitRatio(treeNode.id, ratio)).then();
   }
 
   private computeChildren(treeNode: MTreeNode): ChildElement[] {
@@ -104,14 +101,6 @@ export class GridElementComponent implements OnChanges {
     }
     return [];
   }
-
-  /**
-   * Each layout change creates new model object instances since the layout is deserialized from the URL.
-   * Therefore, the "correct" track-by function is critical to help Angular identify DOM elements for reuse, which significantly can
-   * improve performance. Note that we use the index instead of the object identity because a different identity may be computed for
-   * nodes when re-arranging parts. Using the index is like not using *ngFor at all.
-   */
-  public indexTrackByFn: TrackByFunction<ChildElement> = (index: number): number => index;
 }
 
 /**

projects/scion/workbench/src/lib/layout/migration/model/workbench-layout-migration-v5.model.ts

@@ -18,7 +18,7 @@ export interface MPartV5 {
 
 export interface MTreeNodeV5 {
   type: 'MTreeNode';
-  nodeId: string;
+  id: string;
   child1: MTreeNodeV5 | MPartV5;
   child2: MTreeNodeV5 | MPartV5;
   ratio: number;
@@ -44,4 +44,3 @@ export interface MViewV5 {
 }
 
 export type ViewIdV5 = `view.${number}`;
-

projects/scion/workbench/src/lib/layout/migration/workbench-layout-migration-v5.service.ts

@@ -12,7 +12,7 @@ import {Injectable} from '@angular/core';
 import {MPartGridV4, MPartV4, MTreeNodeV4, MViewV4} from './model/workbench-layout-migration-v4.model';
 import {WorkbenchMigration} from '../../migration/workbench-migration';
 import {MPartGridV5, MPartV5, MTreeNodeV5, MViewV5} from './model/workbench-layout-migration-v5.model';
-import {randomUUID} from '../../common/uuid.util';
+import {UID} from '../../common/uid.util';
 
 /**
  * Migrates the workbench layout from version 4 to version 5.
@@ -46,6 +46,7 @@ export class WorkbenchLayoutMigrationV5 implements WorkbenchMigration {
     function migrateNode(nodeV4: MTreeNodeV4): MTreeNodeV5 {
       return {
         ...nodeV4,
+        id: UID.randomUID(),
         child1: migrateGridElement(nodeV4.child1),
         child2: migrateGridElement(nodeV4.child2),
       };
@@ -58,7 +59,8 @@ export class WorkbenchLayoutMigrationV5 implements WorkbenchMigration {
     function migrateView(viewV4: MViewV4): MViewV5 {
       const viewV5: MViewV5 = {
         ...viewV4,
-        navigation: viewV4.navigation ? {...viewV4.navigation, id: randomUUID()} : undefined,
+        uid: UID.randomUID(),
+        navigation: viewV4.navigation ? {...viewV4.navigation, id: UID.randomUID()} : undefined,
       };
       if (!viewV5.navigation) {
         delete viewV5.navigation;