(streampipes) branch dev updated: wip(#3460): Fix broken pipeline templates (#3461)

[zehnder]

This is an automated email from the ASF dual-hosted git repository.

zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git


The following commit(s) were added to refs/heads/dev by this push:
     new f43d79855a wip(#3460): Fix broken pipeline templates (#3461)
f43d79855a is described below

commit f43d79855a241ad1c7161ae4b03e0ae1d111609c
Author: Philipp Zehnder <ten...@users.noreply.github.com>
AuthorDate: Thu Feb 6 14:15:53 2025 +0100

    wip(#3460): Fix broken pipeline templates (#3461)
    
    * refactor(#3139): Remove deprecated 
IParameterExtractor.selectedTreeNodesInternalNames
    
    * fix(#3460): Properly reset jsplumb instance when using pipeline templates
    
    ---------
    
    Co-authored-by: Dominik Riemer <dominik.rie...@gmail.com>
---
 .../pipeline-assembly-options.component.ts         |  1 -
 .../pipeline-assembly.component.html               |  4 ++--
 .../pipeline-assembly.component.ts                 | 27 +++++++++++++++-------
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git 
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.ts
 
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.ts
index 8169337736..9b04913888 100644
--- 
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.ts
+++ 
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.ts
@@ -121,7 +121,6 @@ export class PipelineAssemblyOptionsComponent {
         });
         dialogRef.afterClosed().subscribe(pipeline => {
             if (pipeline !== undefined) {
-                this.clearAssemblyEmitter.emit();
                 this.displayPipelineTemplateEmitter.emit(pipeline);
             }
         });
diff --git 
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
 
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
index 249eb2b489..770b00ce0a 100644
--- 
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
+++ 
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
@@ -23,7 +23,7 @@
             [rawPipelineModel]="rawPipelineModel"
             [pipelineCanvasMetadata]="pipelineCanvasMetadata"
             [allElements]="allElements"
-            [jsplumbBridge]="JsplumbBridge"
+            [jsplumbBridge]="jsplumbBridge"
             [previewModeActive]="previewModeActive"
             (clearAssemblyEmitter)="clearAssembly()"
             (togglePreviewEmitter)="togglePreview()"
@@ -44,7 +44,7 @@
             [rawPipelineModel]="rawPipelineModel"
             [pipelineCanvasMetadata]="pipelineCanvasMetadata"
             [pipelineCanvasMetadataAvailable]="pipelineCanvasMetadataAvailable"
-            [jsplumbBridge]="JsplumbBridge"
+            [jsplumbBridge]="jsplumbBridge"
         >
         </sp-pipeline-assembly-drawing-area>
     </div>
diff --git 
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts 
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
index 231344d095..4ce06053e0 100644
--- 
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
+++ 
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
@@ -63,7 +63,7 @@ export class PipelineAssemblyComponent implements 
AfterViewInit {
     previewModeActive = false;
     readonly: boolean;
 
-    JsplumbBridge: JsplumbBridge;
+    jsplumbBridge: JsplumbBridge;
 
     @ViewChild('assemblyOptionsComponent')
     assemblyOptionsComponent: PipelineAssemblyOptionsComponent;
@@ -82,7 +82,7 @@ export class PipelineAssemblyComponent implements 
AfterViewInit {
     ) {}
 
     ngAfterViewInit() {
-        this.JsplumbBridge = this.jsPlumbFactoryService.getJsplumbBridge(
+        this.jsplumbBridge = this.jsPlumbFactoryService.getJsplumbBridge(
             this.readonly,
         );
     }
@@ -93,9 +93,9 @@ export class PipelineAssemblyComponent implements 
AfterViewInit {
     clearAssembly() {
         this.editorService.makePipelineAssemblyEmpty(true);
         this.rawPipelineModel = [];
-        this.JsplumbBridge.deleteEveryEndpoint();
+        this.jsplumbBridge.deleteEveryEndpoint();
         this.drawingAreaComponent.resetZoom();
-        this.JsplumbBridge.repaintEverything();
+        this.jsplumbBridge.repaintEverything();
 
         forkJoin([
             this.editorService.removePipelineFromCache(),
@@ -156,14 +156,25 @@ export class PipelineAssemblyComponent implements 
AfterViewInit {
     }
 
     displayPipelineTemplate(pipeline: Pipeline) {
+        // Clears old pipeline before new elements are added
+        this.clearAssembly();
+        this.jsplumbBridge.reset();
+        this.pipelineCanvasMetadata = new PipelineCanvasMetadata();
+        this.pipelineCanvasMetadataAvailable = false;
+
         this.originalPipeline = pipeline;
         this.rawPipelineModel = [];
+        this.rawPipelineModel = this.jsplumbService.makeRawPipeline(
+            pipeline,
+            false,
+        );
         setTimeout(() => {
-            this.rawPipelineModel = this.jsplumbService.makeRawPipeline(
-                pipeline,
-                false,
+            this.drawingAreaComponent.displayPipelineInEditor(
+                true,
+                this.pipelineCanvasMetadata,
             );
-            this.drawingAreaComponent.displayPipelineInEditor(true, undefined);
+
+            this.triggerCacheUpdate();
         });
     }
 }