Enable full name display instead of short name in nodes

src/app/data-structures/business.data.structures.ts

@@ -310,6 +310,7 @@ export interface FilterSettingDto {
   filterSymmetry: boolean[]; // list of trainrun symmetry values (true/false) to filter out
   filterAllEmptyNodes: boolean; // flag to filter all empty nodes (hide/show)
   filterAllNonStopNodes: boolean; // flag to filter all only non-stop nodes (hide/show)
+  displayNodesFullName: boolean; // flag to display the nodes full name instead of the short name
   filterNotes: boolean; // flag to filter notes (hide/show)
   timeDisplayPrecision: number; // display time precision : default 2 numbers -> 0.1, 0.05
   isTemporaryDisableFilteringOfItemsInView: boolean; // flag to disable temporally all filering (show all)

src/app/models/filterSettings.model.ts

@@ -34,6 +34,7 @@ export class FilterSetting {
   public filterSymmetry: boolean[];
   public filterAllEmptyNodes;
   public filterAllNonStopNodes;
+  public displayNodesFullName: boolean;
   public filterNotes;
   public timeDisplayPrecision;
   public isTemporaryDisableFilteringOfItemsInView;
@@ -62,6 +63,7 @@ export class FilterSetting {
       filterSymmetry,
       filterAllEmptyNodes,
       filterAllNonStopNodes,
+      displayNodesFullName,
       filterNotes,
       timeDisplayPrecision,
       isTemporaryDisableFilteringOfItemsInView,
@@ -88,6 +90,7 @@ export class FilterSetting {
       filterSymmetry: null,
       filterAllEmptyNodes: false,
       filterAllNonStopNodes: false,
+      displayNodesFullName: false,
       filterNotes: false,
       timeDisplayPrecision: 1,
       isTemporaryDisableFilteringOfItemsInView: false,
@@ -115,6 +118,7 @@ export class FilterSetting {
     this.filterSymmetry = filterSymmetry ?? [true, false];
     this.filterAllEmptyNodes = filterAllEmptyNodes;
     this.filterAllNonStopNodes = filterAllNonStopNodes;
+    this.displayNodesFullName = displayNodesFullName;
     this.filterNotes = filterNotes;
     this.timeDisplayPrecision = timeDisplayPrecision;
     this.isTemporaryDisableFilteringOfItemsInView = isTemporaryDisableFilteringOfItemsInView;
@@ -191,6 +195,7 @@ export class FilterSetting {
       this.filterSymmetry.length === 2 &&
       this.filterAllEmptyNodes === false &&
       this.filterAllNonStopNodes === false &&
+      this.displayNodesFullName === false &&
       this.filterNotes === false &&
       this.timeDisplayPrecision === 1 &&
       this.isTemporaryDisableFilteringOfItemsInView === false &&
@@ -221,6 +226,7 @@ export class FilterSetting {
       filterSymmetry: this.filterSymmetry,
       filterAllEmptyNodes: this.filterAllEmptyNodes,
       filterAllNonStopNodes: this.filterAllNonStopNodes,
+      displayNodesFullName: this.displayNodesFullName,
       filterNotes: this.filterNotes,
       timeDisplayPrecision: this.timeDisplayPrecision,
       isTemporaryDisableFilteringOfItemsInView: this.isTemporaryDisableFilteringOfItemsInView,

src/app/perlenkette/perlenkette-node/perlenkette-node.component.html

@@ -20,7 +20,7 @@
       width="94px"
       height="28px"
     />
-    <text x="8" y="55" class="node_text">{{ perlenketteNode.shortName }}</text>
+    <text x="8" y="55" class="node_text">{{ getNodeName() }}</text>
     <text x="88" y="55" text-anchor="end" class="node_connection_time">
       {{ perlenketteNode.connectionTime }}
     </text>
@@ -260,7 +260,7 @@
       </ng-container>
 
       <text x="8" [attr.y]="55 + heightConnectionSurplus" class="node_text">
-        {{ perlenketteNode.shortName }}
+        {{ getNodeName() }}
       </text>
       <text
         [attr.x]="getTimeFieldPos()"

src/app/perlenkette/perlenkette-node/perlenkette-node.component.ts

@@ -1,4 +1,12 @@
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  AfterViewInit,
+  ElementRef,
+} from "@angular/core";
 import {PerlenketteNode} from "../model/perlenketteNode";
 import {NodeService} from "../../services/data/node.service";
 import {PerlenketteTrainrun} from "../model/perlenketteTrainrun";
@@ -22,7 +30,7 @@ import {MathUtils} from "../../utils/math";
   styleUrls: ["./perlenkette-node.component.scss"],
   standalone: false,
 })
-export class PerlenketteNodeComponent implements OnInit {
+export class PerlenketteNodeComponent implements OnInit, AfterViewInit {
   @Input() perlenketteNode: PerlenketteNode;
   @Input() perlenketteTrainrun: PerlenketteTrainrun;
   @Input() isTopNode = false;
@@ -33,9 +41,19 @@ export class PerlenketteNodeComponent implements OnInit {
   heightConnectionSurplus: number;
   isExpanded = true;
 
-  surplus = 20;
+  readonly surplus = 20;
+
+  // Width of node
+  readonly MIN_NODE_WITH_CONNECTIONS_WIDTH = 192;
+  readonly MAX_NODE_WITH_CONNECTIONS_WIDTH = 320;
+
+  // Max width of node name (truncated with an ellipsis if exceeded)
+  readonly MAX_NODE_NAME_WIDTH = 76;
+  readonly MAX_NODE_WITH_CONNECTIONS_NAME_WIDTH = 300;
+  readonly MAX_NODE_CONNECTION_WIDTH = 90;
 
   constructor(
+    private elementRef: ElementRef,
     public nodeService: NodeService,
     public trainrunService: TrainrunService,
     readonly filterService: FilterService,
@@ -48,6 +66,12 @@ export class PerlenketteNodeComponent implements OnInit {
     this.calculateHeightConnectionSurplus();
   }
 
+  ngAfterViewInit() {
+    // Adjust node name if it exceeds the label area
+    this.adjustNodeNameWithEllipsis();
+    this.adjustTerminalStationWithEllipsis();
+  }
+
   getVariantIsWritable(): boolean {
     return this.versionControlService.getVariantIsWritable();
   }
@@ -327,9 +351,12 @@ export class PerlenketteNodeComponent implements OnInit {
     });
 
     if (maxTrainrunNameLen < 5) {
-      return 192;
+      return this.MIN_NODE_WITH_CONNECTIONS_WIDTH;
     }
-    return Math.min(192.0 * Math.min(1.8125, 1.0 + (maxTrainrunNameLen - 5) / 12), 320);
+    return Math.min(
+      this.MIN_NODE_WITH_CONNECTIONS_WIDTH * Math.min(1.8125, 1.0 + (maxTrainrunNameLen - 5) / 12),
+      this.MAX_NODE_WITH_CONNECTIONS_WIDTH,
+    );
   }
 
   getTrainrunNameFieldPosition(): number {
@@ -363,4 +390,41 @@ export class PerlenketteNodeComponent implements OnInit {
     }
     this.nodeService.selectConnection(connection.id);
   }
+
+  getNodeName(): string {
+    return this.filterService.isDisplayingNodesFullName()
+      ? this.perlenketteNode.fullName
+      : this.perlenketteNode.shortName;
+  }
+
+  private truncateTextWithEllipsis(textElement: SVGTextElement, maxWidth: number) {
+    if (textElement.getComputedTextLength() <= maxWidth) {
+      return;
+    }
+    let truncatedText = textElement.textContent;
+    textElement.textContent = truncatedText + "…";
+    while (textElement.getComputedTextLength() > maxWidth && truncatedText.length) {
+      truncatedText = truncatedText.slice(0, -1);
+      textElement.textContent = truncatedText + "…";
+    }
+  }
+
+  private adjustNodeNameWithEllipsis() {
+    this.elementRef.nativeElement
+      .querySelectorAll(".node_text")
+      .forEach((textElement: SVGTextElement) => {
+        const availableWidth = this.hasConnections()
+          ? this.MAX_NODE_WITH_CONNECTIONS_NAME_WIDTH
+          : this.MAX_NODE_NAME_WIDTH;
+        this.truncateTextWithEllipsis(textElement, availableWidth);
+      });
+  }
+
+  private adjustTerminalStationWithEllipsis() {
+    this.elementRef.nativeElement
+      .querySelectorAll(".edge_text.station")
+      .forEach((textElement: SVGTextElement) =>
+        this.truncateTextWithEllipsis(textElement, this.MAX_NODE_CONNECTION_WIDTH),
+      );
+  }
 }

src/app/services/analytics/origin-destination/components/origin-destination.component.ts

@@ -194,7 +194,11 @@ export class OriginDestinationComponent implements OnInit, AfterViewInit, OnDest
         d3
           .axisBottom<number>(x)
           .tickSize(0)
-          .tickFormat((d) => this.nodeService.getNodeFromId(d).getBetriebspunktName()),
+          .tickFormat((d) =>
+            this.filterService.isDisplayingNodesFullName()
+              ? this.nodeService.getNodeFromId(d).getFullName()
+              : this.nodeService.getNodeFromId(d).getBetriebspunktName(),
+          ),
       )
       .style("user-select", "none")
       .call((g) =>
@@ -223,7 +227,11 @@ export class OriginDestinationComponent implements OnInit, AfterViewInit, OnDest
         d3
           .axisLeft<number>(y)
           .tickSize(0)
-          .tickFormat((d) => this.nodeService.getNodeFromId(d).getBetriebspunktName()),
+          .tickFormat((d) =>
+            this.filterService.isDisplayingNodesFullName()
+              ? this.nodeService.getNodeFromId(d).getFullName()
+              : this.nodeService.getNodeFromId(d).getBetriebspunktName(),
+          ),
       )
       .style("user-select", "none")
       .call((g) => g.selectAll("text").attr("data-origin-label", (d: string) => d))

src/app/services/ui/filter.service.ts

@@ -285,6 +285,20 @@ export class FilterService implements OnDestroy {
     this.filterChanged();
   }
 
+  isDisplayingNodesFullName(): boolean {
+    return this.activeFilterSetting.displayNodesFullName;
+  }
+
+  enableDisplayNodesFullName() {
+    this.activeFilterSetting.displayNodesFullName = true;
+    this.filterChanged();
+  }
+
+  disableDisplayNodesFullName() {
+    this.activeFilterSetting.displayNodesFullName = false;
+    this.filterChanged();
+  }
+
   filterTrainrunsection(trainrunSection: TrainrunSection): boolean {
     if (this.isTemporaryDisableFilteringOfItemsInViewEnabled()) {
       // disable filtering in view (render all objects)
@@ -836,7 +850,8 @@ export class FilterService implements OnDestroy {
       this.isFilterTrainrunNameEnabled() &&
       this.isFilterTravelTimeEnabled() &&
       this.isFilterBackwardTravelTimeEnabled() &&
-      this.isFilterShowNonStopTimeEnabled()
+      this.isFilterShowNonStopTimeEnabled() &&
+      !this.isDisplayingNodesFullName()
     );
   }
 

src/app/streckengrafik/components/slider/path-slider/path-slider.component.html

@@ -19,7 +19,7 @@
                 </ng-container>
               </ng-container>
               <text [class]="getNodeTextClassTag(path)" x="0" y="15" (click)="doClick(path)">
-                {{ getNodeShortName(path) }}
+                {{ getNodeName(path) }}
               </text>
             </ng-container>
             <ng-container *ngIf="isTrackOccupier(path)">
@@ -36,7 +36,7 @@
                 class="TrackOccupierShown"
                 (click)="doClick(path)"
               >
-                {{ getNodeShortName(path) }}
+                {{ getNodeName(path) }}
               </text>
               <ng-container *ngIf="!isStartOrEndNode(path) || path.index !== 0">
                 <line class="VerticalNodeLine TrackOccupier" x1="0" y1="0" x2="0" y2="40" />

src/app/streckengrafik/components/slider/path-slider/path-slider.component.ts

@@ -9,6 +9,7 @@ import {SgSelectedTrainrun} from "../../../model/streckengrafik-model/sg-selecte
 import {SgPath} from "../../../model/streckengrafik-model/sg-path";
 import {Sg4ToggleTrackOccupierService} from "../../../services/sg-4-toggle-track-occupier.service";
 import {Sg8RenderService} from "../../../services/sg-8-render.service";
+import {FilterService} from "src/app/services/ui/filter.service";
 
 @Component({
   selector: "sbb-path-slider",
@@ -44,6 +45,7 @@ export class PathSliderComponent implements OnDestroy {
     private readonly viewBoxService: ViewBoxService,
     private readonly sg4ToggleTrackOccupierService: Sg4ToggleTrackOccupierService,
     private readonly sg8RenderService: Sg8RenderService,
+    private readonly filterService: FilterService,
   ) {
     this.sg8RenderService
       .getSgSelectedTrainrun()
@@ -129,9 +131,11 @@ export class PathSliderComponent implements OnDestroy {
     return path.isSection();
   }
 
-  getNodeShortName(path: SgPath) {
+  getNodeName(path: SgPath) {
     if (path.isNode()) {
-      return path.getPathNode().nodeShortName;
+      return this.filterService.isDisplayingNodesFullName()
+        ? path.getPathNode().nodeFullName
+        : path.getPathNode().nodeShortName;
     }
     return "";
   }

src/app/streckengrafik/model/pathNode.ts

@@ -12,6 +12,7 @@ export class PathNode implements PathItem {
     public arrivalTime: number,
     public nodeId: number,
     public nodeShortName: string,
+    public nodeFullName: string,
     public index: number,
     public trackData: TrackData,
     public backward = false,
@@ -83,6 +84,7 @@ export class PathNode implements PathItem {
       this.arrivalTime === pathNode.arrivalTime &&
       this.nodeId === pathNode.nodeId &&
       this.nodeShortName === pathNode.nodeShortName &&
+      this.nodeFullName === pathNode.nodeFullName &&
       this.trackData === pathNode.trackData &&
       this.backward === pathNode.backward &&
       this.haltezeit === pathNode.haltezeit &&
@@ -101,6 +103,7 @@ export class PathNode implements PathItem {
       this.arrivalTime,
       this.nodeId,
       this.nodeShortName,
+      this.nodeFullName,
       this.index,
       this.trackData,
       this.backward,

src/app/streckengrafik/model/streckengrafik-model/sg-path-node.ts

@@ -11,6 +11,7 @@ export class SgPathNode implements SgPath {
     public index: number,
     public nodeId: number,
     public nodeShortName: string,
+    public nodeFullName: string,
     public departureTime: number,
     public arrivalTime: number,
     public departureTrainrunSectionId: number,