feat: modify node display

src/app/services/data/node.service.ts

@@ -109,6 +109,7 @@ export class NodeService implements OnDestroy {
           node.betriebspunktName,
           node.fullName,
           node.labelIds,
+          node.isCollapsed,
         );
       } else {
         const existingLabels = existingNode.getLabelIds();
@@ -223,6 +224,7 @@ export class NodeService implements OnDestroy {
     betriebspunktName?: string,
     fullName?: string,
     labelIds?: number[],
+    isCollapsed?: boolean,
     enforceUpdate = true,
   ): Node {
     const alignedPosition = NodeService.alginNodeToRaster(new Vec2D(positionX, positionY));
@@ -246,6 +248,9 @@ export class NodeService implements OnDestroy {
     if (labelIds !== undefined) {
       node.setLabelIds(labelIds);
     }
+    if (isCollapsed !== undefined) {
+      node.setIsCollapsed(isCollapsed);
+    }
     this.nodesStore.nodes.push(node);
     if (enforceUpdate) {
       this.nodesUpdated();

src/app/services/data/trainrun.service.ts

@@ -22,6 +22,7 @@ import {
   BackwardTrainrunIterator,
   NextExpandedStopIterator,
   TrainrunIterator,
+  ExpandedTrainrunIterator,
 } from "../util/trainrun.iterator";
 import {LogService} from "../../logger/log.service";
 import {LabelService} from "./label.service";
@@ -805,6 +806,10 @@ export class TrainrunService {
   public getBackwardNonStopIterator(node: Node, trainrunSection: TrainrunSection) {
     return new BackwardNonStopTrainrunIterator(this.logService, node, trainrunSection);
   }
+
+  public getExpandedIterator(node: Node, trainrunSection: TrainrunSection) {
+    return new ExpandedTrainrunIterator(this.logService, node, trainrunSection);
+  }
 
   // For each trainrun, get iterator from the smallest consecutiveTime.
   public getRootIterators(): Map<number, TrainrunIterator> {

src/app/services/data/trainrunsection.service.ts

@@ -1490,4 +1490,61 @@ export class TrainrunSectionService implements OnDestroy {
     trainrunSection.routeEdgeAndPlaceText();
     trainrunSection.convertVec2DToPath();
   }
+
+  /**
+   * Groups consecutive TrainrunSections that have collapsed nodes between them
+   * into chains. Each chain starts and ends with a non-collapsed node.
+   * Start and end nodes can be accessed via: sections[0].getSourceNode() and sections[sections.length - 1].getTargetNode()
+   * @param trainrunSections List of TrainrunSections to group
+   * @returns Array of section chains
+   */
+  groupTrainrunSectionsIntoChains(trainrunSections: TrainrunSection[]): TrainrunSection[][] {
+    const groups: TrainrunSection[][] = [];
+    const visitedSections = new Set<number>();
+
+    trainrunSections.forEach((section) => {
+      if (visitedSections.has(section.getId())) {
+        return;
+      }
+
+      const backwardIterator = this.trainrunService.getBackwardIterator(
+        section.getTargetNode(),
+        section,
+      );
+      while (backwardIterator.hasNext() && backwardIterator.current().node.getIsCollapsed()) {
+        backwardIterator.next();
+      }
+      const startNode = backwardIterator.current().node;
+      const startSection = backwardIterator.current().trainrunSection;
+
+      // Build chain using TrainrunIterator to leverage existing graph traversal
+      const chain: TrainrunSection[] = [];
+      const iterator = this.trainrunService.getIterator(startNode, startSection);
+
+      // Traverse the trainrun and collect sections with collapsed intermediate nodes
+      while (iterator.hasNext()) {
+        const pair = iterator.next();
+
+        if (visitedSections.has(pair.trainrunSection.getId())) {
+          throw new Error(
+            `Cycle detected in trainrun section chain: section ${pair.trainrunSection.getId()} already visited for trainrun ${pair.trainrunSection.getTrainrunId()}`,
+          );
+        }
+
+        chain.push(pair.trainrunSection);
+        visitedSections.add(pair.trainrunSection.getId());
+
+        // Stop if we reach a non-collapsed node (end of collapsed chain)
+        if (!pair.node.getIsCollapsed()) {
+          break;
+        }
+      }
+
+      if (chain.length > 0) {
+        groups.push(chain);
+      }
+    });
+
+    return groups;
+  }
 }

src/app/services/util/trainrun.iterator.ts

@@ -139,3 +139,17 @@ export class BackwardNonStopTrainrunIterator extends BackwardTrainrunIterator {
     return super.next();
   }
 }
+
+export class ExpandedTrainrunIterator extends TrainrunIterator {
+  public next(): TrainrunSectionNodePair {
+    // Continue traversing only if the current node is collapsed
+    // Stop when we reach an expanded (non-collapsed) node
+    if (!this.pointerElement.node.getIsCollapsed()) {
+      // The trainrun has reached an expanded (non-collapsed) node and break the forward iteration
+      this.currentElement = Object.assign({}, this.pointerElement);
+      this.pointerElement = new TrainrunSectionNodePair(undefined, undefined);
+      return this.currentElement;
+    }
+    return super.next();
+  }
+}

src/app/view/editor-main-view/data-views/connections.view.ts

@@ -240,6 +240,12 @@ export class ConnectionsView {
     }
 
     const node: Node = this.editorView.getNodeFromConnection(con);
+
+    // filter if node is collapsed - do not show connections for collapsed nodes
+    if (node.getIsCollapsed()) {
+      return false;
+    }
+
     const trainrunSection1: TrainrunSection = node.getPort(con.getPortId1()).getTrainrunSection();
     const trainrunSection2: TrainrunSection = node.getPort(con.getPortId2()).getTrainrunSection();
     const filterTrainrun1 = this.editorView.filterTrainrun(trainrunSection1.getTrainrun());

src/app/view/editor-main-view/data-views/d3.utils.ts

@@ -45,21 +45,21 @@ export class D3Utils {
     d3.selectAll(StaticDomTags.EDGE_LINE_ARROW_DOM_REF)
       .filter(
         (d: TrainrunSectionViewObject) =>
-          d !== undefined && d.trainrunSection.getTrainrunId() === trainrunSection.getTrainrunId(),
+          d !== undefined && d.getTrainrun().getId() === trainrunSection.getTrainrunId(),
       )
       .classed(StaticDomTags.TAG_HOVER, true);
 
     d3.selectAll(StaticDomTags.EDGE_LINE_DOM_REF)
       .filter(
         (d: TrainrunSectionViewObject) =>
-          d !== undefined && d.trainrunSection.getTrainrunId() === trainrunSection.getTrainrunId(),
+          d !== undefined && d.getTrainrun().getId() === trainrunSection.getTrainrunId(),
       )
       .classed(StaticDomTags.TAG_HOVER, true);
 
     d3.selectAll(StaticDomTags.EDGE_ROOT_CONTAINER_DOM_REF)
       .filter(
         (d: TrainrunSectionViewObject) =>
-          d !== undefined && d.trainrunSection.getTrainrunId() === trainrunSection.getTrainrunId(),
+          d !== undefined && d.getTrainrun().getId() === trainrunSection.getTrainrunId(),
       )
       .classed(StaticDomTags.TAG_HOVER, true);
 
@@ -90,20 +90,20 @@ export class D3Utils {
     d3.selectAll(StaticDomTags.EDGE_LINE_ARROW_DOM_REF)
       .filter(
         (d: TrainrunSectionViewObject) =>
-          d !== undefined && d.trainrunSection.getTrainrunId() === trainrunSection.getTrainrunId(),
+          d !== undefined && d.trainrunSections[0].getTrainrunId() === trainrunSection.getTrainrunId(),
       )
       .classed(StaticDomTags.TAG_HOVER, false);
     d3.selectAll(StaticDomTags.EDGE_LINE_DOM_REF)
       .filter(
         (d: TrainrunSectionViewObject) =>
-          d !== undefined && d.trainrunSection.getTrainrunId() === trainrunSection.getTrainrunId(),
+          d !== undefined && d.trainrunSections[0].getTrainrunId() === trainrunSection.getTrainrunId(),
       )
       .classed(StaticDomTags.TAG_HOVER, false);
 
     d3.selectAll(StaticDomTags.EDGE_ROOT_CONTAINER_DOM_REF)
       .filter(
         (d: TrainrunSectionViewObject) =>
-          d !== undefined && d.trainrunSection.getTrainrunId() === trainrunSection.getTrainrunId(),
+          d !== undefined && d.trainrunSections[0].getTrainrunId() === trainrunSection.getTrainrunId(),
       )
       .classed(StaticDomTags.TAG_HOVER, false);
 
@@ -347,7 +347,7 @@ export class D3Utils {
         if (d === undefined) {
           return false;
         }
-        return d.trainrunSection.getId() === trainrunSection.getId();
+        return d.trainrunSections[0].getId() === trainrunSection.getId();
       })
       .classed(StaticDomTags.TAG_SELECTED, false)
       .classed(StaticDomTags.TAG_HOVER, false)
@@ -359,7 +359,7 @@ export class D3Utils {
         if (d === undefined) {
           return false;
         }
-        return d.trainrunSection.getId() === trainrunSection.getId();
+        return d.trainrunSections[0].getId() === trainrunSection.getId();
       })
       .classed(StaticDomTags.TAG_SELECTED, false)
       .classed(StaticDomTags.TAG_HOVER, false)
@@ -371,7 +371,7 @@ export class D3Utils {
         if (d === undefined) {
           return false;
         }
-        return d.trainrunSection.getId() === trainrunSection.getId();
+        return d.trainrunSections[0].getId() === trainrunSection.getId();
       })
       .classed(StaticDomTags.TAG_SELECTED, false)
       .classed(StaticDomTags.TAG_HOVER, false)
@@ -383,7 +383,7 @@ export class D3Utils {
         if (d === undefined) {
           return false;
         }
-        return d.trainrunSection.getId() === trainrunSection.getId();
+        return d.trainrunSections[0].getId() === trainrunSection.getId();
       })
       .classed(StaticDomTags.EDGE_LINE_GRAYEDOUT, true);
 
@@ -394,8 +394,8 @@ export class D3Utils {
             return false;
           }
           return (
-            d.trainrunSection.getId() === trainrunSection.getId() &&
-            d.trainrunSection.getSourceNodeId() === grayoutEdgeLinePinNode.getId()
+            d.trainrunSections[0].getId() === trainrunSection.getId() &&
+            d.trainrunSections[0].getSourceNodeId() === grayoutEdgeLinePinNode.getId()
           );
         })
         .classed(StaticDomTags.EDGE_LINE_GRAYEDOUT, true);
@@ -405,8 +405,8 @@ export class D3Utils {
             return false;
           }
           return (
-            d.trainrunSection.getId() === trainrunSection.getId() &&
-            d.trainrunSection.getTargetNodeId() === grayoutEdgeLinePinNode.getId()
+            d.trainrunSections[0].getId() === trainrunSection.getId() &&
+            d.trainrunSections[0].getTargetNodeId() === grayoutEdgeLinePinNode.getId()
           );
         })
         .classed(StaticDomTags.EDGE_LINE_GRAYEDOUT, true);
@@ -419,7 +419,7 @@ export class D3Utils {
         if (d === undefined) {
           return false;
         }
-        return d.trainrunSection.getId() === trainrunSection.getId();
+        return d.trainrunSections[0].getId() === trainrunSection.getId();
       })
       .classed(StaticDomTags.TAG_SELECTED, true)
       .classed(StaticDomTags.TAG_HOVER, false)
@@ -431,7 +431,7 @@ export class D3Utils {
         if (d === undefined) {
           return false;
         }
-        return d.trainrunSection.getId() === trainrunSection.getId();
+        return d.trainrunSections[0].getId() === trainrunSection.getId();
       })
       .classed(StaticDomTags.TAG_SELECTED, true)
       .classed(StaticDomTags.TAG_HOVER, false)
@@ -443,7 +443,7 @@ export class D3Utils {
         if (d === undefined) {
           return false;
         }
-        return d.trainrunSection.getId() === trainrunSection.getId();
+        return d.trainrunSections[0].getId() === trainrunSection.getId();
       })
       .classed(StaticDomTags.TAG_SELECTED, true)
       .classed(StaticDomTags.TAG_HOVER, false)
@@ -455,7 +455,7 @@ export class D3Utils {
         if (d === undefined) {
           return false;
         }
-        return d.trainrunSection.getId() === trainrunSection.getId();
+        return d.trainrunSections[0].getId() === trainrunSection.getId();
       })
       .classed(StaticDomTags.EDGE_LINE_GRAYEDOUT, false);
 
@@ -466,8 +466,8 @@ export class D3Utils {
             return false;
           }
           return (
-            d.trainrunSection.getId() === trainrunSection.getId() &&
-            d.trainrunSection.getSourceNodeId() === grayoutEdgeLinePinNode.getId()
+            d.trainrunSections[0].getId() === trainrunSection.getId() &&
+            d.trainrunSections[0].getSourceNodeId() === grayoutEdgeLinePinNode.getId()
           );
         })
         .classed(StaticDomTags.EDGE_LINE_GRAYEDOUT, false);
@@ -477,8 +477,8 @@ export class D3Utils {
             return false;
           }
           return (
-            d.trainrunSection.getId() === trainrunSection.getId() &&
-            d.trainrunSection.getTargetNodeId() === grayoutEdgeLinePinNode.getId()
+            d.trainrunSections[0].getId() === trainrunSection.getId() &&
+            d.trainrunSections[0].getTargetNodeId() === grayoutEdgeLinePinNode.getId()
           );
         })
         .classed(StaticDomTags.EDGE_LINE_GRAYEDOUT, false);

src/app/view/editor-main-view/data-views/editor.view.ts

@@ -136,7 +136,7 @@ export class EditorView implements SVGMouseControllerObserver {
     this.nodesView = new NodesView(this);
     this.transitionsView = new TransitionsView(this);
     this.connectionsView = new ConnectionsView(this);
-    this.trainrunSectionsView = new TrainrunSectionsView(this);
+    this.trainrunSectionsView = new TrainrunSectionsView(this, trainrunSectionService);
     this.trainrunSectionPreviewLineView = new TrainrunSectionPreviewLineView(
       nodeService,
       filterService,

src/app/view/editor-main-view/data-views/nodes.view.ts

@@ -89,7 +89,7 @@ export class NodesView {
   }
 
   filterNodesToDisplay(node: Node): boolean {
-    return this.editorView.isNodeVisible(node);
+    return this.editorView.isNodeVisible(node) && !node.getIsCollapsed();
   }
 
   displayNodes(inputNodes: Node[]) {