You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2022/01/04 09:07:54 UTC

[incubator-streampipes] 01/02: [hotfix] Fix linting errors in editor component

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

riemer pushed a commit to branch STREAMPIPES-494
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git

commit cbb2674482b7a9c8b72fdca7c1bba1c786042cbe
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Jan 4 10:06:14 2022 +0100

    [hotfix] Fix linting errors in editor component
---
 .../pipeline-assembly.component.ts                 |  60 ++++----
 .../components/pipeline/pipeline.component.ts      | 105 +++++++------
 .../services/editor-dialog-manager.service.ts      | 164 ---------------------
 .../app/editor/services/jsplumb-bridge.service.ts  |  12 +-
 .../app/editor/services/jsplumb-config.service.ts  |  74 +++++-----
 .../editor/services/jsplumb-endpoint.service.ts    |  26 ++--
 .../app/editor/services/jsplumb-factory.service.ts |  16 +-
 ui/src/app/editor/services/jsplumb.service.ts      | 112 +++++++-------
 .../app/editor/services/object-provider.service.ts |  41 +++---
 .../services/pipeline-canvas-scrolling.service.ts  |   4 +-
 .../app/editor/services/pipeline-editor.service.ts |  27 ++--
 .../services/pipeline-element-dragged.service.ts   |   6 +-
 .../pipeline-element-recommendation.service.ts     |  25 ++--
 .../services/pipeline-positioning.service.ts       |  99 +++++++------
 .../editor/services/pipeline-validation.service.ts |   4 +-
 .../preview/pipeline-preview.component.ts          |  36 +++--
 16 files changed, 330 insertions(+), 481 deletions(-)

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 9658e17..28f6b40 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
@@ -16,7 +16,17 @@
  *
  */
 
-import { Component, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, ViewChild, } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    NgZone,
+    OnInit,
+    Output,
+    ViewChild,
+} from '@angular/core';
 import { JsplumbBridge } from '../../services/jsplumb-bridge.service';
 import { PipelinePositioningService } from '../../services/pipeline-positioning.service';
 import { PipelineValidationService } from '../../services/pipeline-validation.service';
@@ -46,7 +56,7 @@ import { PipelineElementDiscoveryComponent } from '../../dialog/pipeline-element
     templateUrl: './pipeline-assembly.component.html',
     styleUrls: ['./pipeline-assembly.component.scss']
 })
-export class PipelineAssemblyComponent implements OnInit {
+export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
 
     @Input()
     rawPipelineModel: PipelineElementConfig[];
@@ -88,14 +98,14 @@ export class PipelineAssemblyComponent implements OnInit {
 
     panzoom: PanzoomObject;
 
-    constructor(private JsPlumbFactoryService: JsplumbFactoryService,
-                private PipelinePositioningService: PipelinePositioningService,
-                private ObjectProvider: ObjectProvider,
-                public EditorService: EditorService,
-                public PipelineValidationService: PipelineValidationService,
-                private PipelineService: PipelineService,
-                private JsplumbService: JsplumbService,
-                private ShepherdService: ShepherdService,
+    constructor(private jsPlumbFactoryService: JsplumbFactoryService,
+                private pipelinePositioningService: PipelinePositioningService,
+                private objectProvider: ObjectProvider,
+                public editorService: EditorService,
+                public pipelineValidationService: PipelineValidationService,
+                private pipelineService: PipelineService,
+                private jsplumbService: JsplumbService,
+                private shepherdService: ShepherdService,
                 private dialogService: DialogService,
                 private dialog: MatDialog,
                 private ngZone: NgZone,
@@ -131,18 +141,18 @@ export class PipelineAssemblyComponent implements OnInit {
     }
 
     ngAfterViewInit() {
-        this.JsplumbBridge = this.JsPlumbFactoryService.getJsplumbBridge(this.preview);
+        this.JsplumbBridge = this.jsPlumbFactoryService.getJsplumbBridge(this.preview);
         const elem = document.getElementById('assembly');
         this.panzoom = Panzoom(elem, {
             maxScale: 5,
-            excludeClass: "sp-no-pan",
+            excludeClass: 'sp-no-pan',
             canvas: true,
             contain: 'outside'
         });
     }
 
     autoLayout() {
-        this.PipelinePositioningService.layoutGraph('#assembly', 'div[id^=\'jsplumb\']', 110, false);
+        this.pipelinePositioningService.layoutGraph('#assembly', 'div[id^=\'jsplumb\']', 110, false);
         this.JsplumbBridge.repaintEverything();
     }
 
@@ -178,7 +188,7 @@ export class PipelineAssemblyComponent implements OnInit {
                     this.currentModifiedPipelineId = undefined;
                 }
                 this.clearAssembly();
-                this.EditorService.makePipelineAssemblyEmpty(true);
+                this.editorService.makePipelineAssemblyEmpty(true);
             }
         });
     }
@@ -194,8 +204,8 @@ export class PipelineAssemblyComponent implements OnInit {
         this.JsplumbBridge.setZoom(this.currentZoomLevel);
         this.JsplumbBridge.repaintEverything();
 
-        const removePipelineFromCache = this.EditorService.removePipelineFromCache();
-        const removeCanvasMetadataFromCache = this.EditorService.removeCanvasMetadataFromCache();
+        const removePipelineFromCache = this.editorService.removePipelineFromCache();
+        const removeCanvasMetadataFromCache = this.editorService.removeCanvasMetadataFromCache();
         forkJoin([removePipelineFromCache, removeCanvasMetadataFromCache]).subscribe(msg => {
             this.pipelineCached = false;
             this.pipelineCacheRunning = false;
@@ -206,8 +216,8 @@ export class PipelineAssemblyComponent implements OnInit {
      * Sends the pipeline to the server
      */
     submit() {
-        const pipeline = this.ObjectProvider.makeFinalPipeline(this.rawPipelineModel);
-        this.PipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, this.rawPipelineModel);
+        const pipeline = this.objectProvider.makeFinalPipeline(this.rawPipelineModel);
+        this.pipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, this.rawPipelineModel);
         pipeline.name = this.currentPipelineName;
         pipeline.description = this.currentPipelineDescription;
         if (this.currentModifiedPipelineId) {
@@ -226,8 +236,8 @@ export class PipelineAssemblyComponent implements OnInit {
     }
 
     checkAndDisplayCachedPipeline() {
-        const cachedPipeline = this.EditorService.getCachedPipeline();
-        const cachedCanvasMetadata = this.EditorService.getCachedPipelineCanvasMetadata();
+        const cachedPipeline = this.editorService.getCachedPipeline();
+        const cachedCanvasMetadata = this.editorService.getCachedPipelineCanvasMetadata();
         forkJoin([cachedPipeline, cachedCanvasMetadata]).subscribe(results => {
             if (results[0] && results[0].length > 0) {
                 this.rawPipelineModel = results[0] as PipelineElementConfig[];
@@ -237,13 +247,13 @@ export class PipelineAssemblyComponent implements OnInit {
     }
 
     displayPipelineById() {
-        const pipelineRequest = this.PipelineService.getPipelineById(this.currentModifiedPipelineId);
+        const pipelineRequest = this.pipelineService.getPipelineById(this.currentModifiedPipelineId);
         const canvasRequest = this.pipelineCanvasMetadataService.getPipelineCanvasMetadata(this.currentModifiedPipelineId);
         pipelineRequest.subscribe(pipelineResp => {
                 const pipeline = pipelineResp;
                 this.currentPipelineName = pipeline.name;
                 this.currentPipelineDescription = pipeline.description;
-                this.rawPipelineModel = this.JsplumbService.makeRawPipeline(pipeline, false);
+                this.rawPipelineModel = this.jsplumbService.makeRawPipeline(pipeline, false);
                 canvasRequest.subscribe(canvasResp => {
                     this.handleCanvasMetadataResponse(canvasResp);
                 }, error => {
@@ -266,10 +276,10 @@ export class PipelineAssemblyComponent implements OnInit {
     displayPipelineInEditor(autoLayout,
                             pipelineCanvasMetadata?: PipelineCanvasMetadata) {
         setTimeout(() => {
-            this.PipelinePositioningService.displayPipeline(this.rawPipelineModel, '#assembly', false, autoLayout, pipelineCanvasMetadata);
-            this.EditorService.makePipelineAssemblyEmpty(false);
+            this.pipelinePositioningService.displayPipeline(this.rawPipelineModel, '#assembly', false, autoLayout, pipelineCanvasMetadata);
+            this.editorService.makePipelineAssemblyEmpty(false);
             this.ngZone.run(() => {
-                this.pipelineValid = this.PipelineValidationService
+                this.pipelineValid = this.pipelineValidationService
                     .isValidPipeline(this.rawPipelineModel.filter(pe => !(pe.settings.disabled)), false);
             });
         });
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index f353df0..ee4a47e 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -100,14 +100,14 @@ export class PipelineComponent implements OnInit, OnDestroy {
   previewModeActive = false;
   pipelinePreview: PipelinePreviewModel;
 
-  constructor(private JsplumbService: JsplumbService,
-              private PipelineEditorService: PipelineEditorService,
-              private PipelinePositioningService: PipelinePositioningService,
-              private JsplumbFactoryService: JsplumbFactoryService,
-              private ObjectProvider: ObjectProvider,
-              private EditorService: EditorService,
-              private ShepherdService: ShepherdService,
-              private PipelineValidationService: PipelineValidationService,
+  constructor(private jsplumbService: JsplumbService,
+              private pipelineEditorService: PipelineEditorService,
+              private pipelinePositioningService: PipelinePositioningService,
+              private jsplumbFactoryService: JsplumbFactoryService,
+              private objectProvider: ObjectProvider,
+              private editorService: EditorService,
+              private shepherdService: ShepherdService,
+              private pipelineValidationService: PipelineValidationService,
               private dialogService: DialogService,
               private dialog: MatDialog,
               private ngZone: NgZone, ) {
@@ -120,7 +120,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.JsplumbBridge = this.JsplumbFactoryService.getJsplumbBridge(this.preview);
+    this.JsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(this.preview);
     this.initAssembly();
     this.initPlumb();
   }
@@ -128,7 +128,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
   validatePipeline() {
     setTimeout(() => {
       this.ngZone.run(() => {
-        this.pipelineValid = this.PipelineValidationService
+        this.pipelineValid = this.pipelineValidationService
             .isValidPipeline(this.rawPipelineModel.filter(pe => !(pe.settings.disabled)), this.preview);
       });
     });
@@ -136,7 +136,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.deletePipelineElementPreview(false);
-    this.JsplumbFactoryService.destroy(this.preview);
+    this.jsplumbFactoryService.destroy(this.preview);
     this.plumbReady = false;
   }
 
@@ -145,11 +145,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
   }
 
   updateOptionsClick(elementId) {
-    if (this.currentMouseOverElement == elementId) {
-      this.currentMouseOverElement = '';
-    } else {
-      this.currentMouseOverElement = elementId;
-    }
+    this.currentMouseOverElement = this.currentMouseOverElement === elementId ? '' : elementId;
   }
 
   getElementCss(currentPipelineElementSettings) {
@@ -175,7 +171,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
   }
 
   isInPipeline(type) {
-    return this.rawPipelineModel.some(x => (x.type == type && !(x.settings.disabled)));
+    return this.rawPipelineModel.some(x => (x.type === type && !(x.settings.disabled)));
   }
 
   showMixedStreamAlert() {
@@ -200,39 +196,52 @@ export class PipelineComponent implements OnInit, OnDestroy {
         const pipelineElementId = ui.draggable.data('pe');
         const pipelineElement: PipelineElementUnion = this.findPipelineElementByElementId(pipelineElementId);
         if (ui.draggable.hasClass('draggable-icon')) {
-          this.EditorService.makePipelineAssemblyEmpty(false);
-          const newElementId = pipelineElement.elementId + ':' + this.JsplumbService.makeId(5);
-          const pipelineElementConfig = this.JsplumbService.createNewPipelineElementConfig(pipelineElement,
-              this.PipelineEditorService.getCoordinates(ui, this.currentZoomLevel),
+          this.editorService.makePipelineAssemblyEmpty(false);
+          const newElementId = pipelineElement.elementId + ':' + this.jsplumbService.makeId(5);
+          const pipelineElementConfig = this.jsplumbService.createNewPipelineElementConfig(pipelineElement,
+              this.pipelineEditorService.getCoordinates(ui, this.currentZoomLevel),
               false,
               false,
               newElementId);
-          if ((this.isStreamInPipeline() && pipelineElementConfig.type == 'set') ||
-              this.isSetInPipeline() && pipelineElementConfig.type == 'stream') {
+          if ((this.isStreamInPipeline() && pipelineElementConfig.type === 'set') ||
+              this.isSetInPipeline() && pipelineElementConfig.type === 'stream') {
             this.showMixedStreamAlert();
           } else {
             this.rawPipelineModel.push(pipelineElementConfig);
             if (ui.draggable.hasClass('set')) {
               setTimeout(() => {
-                this.EditorService.updateDataSet(pipelineElementConfig.payload).subscribe(data => {
+                this.editorService.updateDataSet(pipelineElementConfig.payload).subscribe(data => {
                   (pipelineElementConfig.payload as SpDataSet).eventGrounding = data.eventGrounding;
                   (pipelineElementConfig.payload as SpDataSet).datasetInvocationId = data.invocationId;
-                  this.JsplumbService.dataStreamDropped(pipelineElementConfig.payload.dom, pipelineElementConfig.payload as SpDataSet, true, false);
+                  this.jsplumbService.dataStreamDropped(
+                    pipelineElementConfig.payload.dom,
+                    pipelineElementConfig.payload as SpDataSet,
+                    true,
+                    false);
                 });
               }, 0);
             } else if (ui.draggable.hasClass('stream')) {
               this.checkTopicModel(pipelineElementConfig);
             } else if (ui.draggable.hasClass('sepa')) {
               setTimeout(() => {
-                this.JsplumbService.dataProcessorDropped(pipelineElementConfig.payload.dom, pipelineElementConfig.payload as DataProcessorInvocation, true, false);
+                this.jsplumbService.dataProcessorDropped(
+                  pipelineElementConfig.payload.dom,
+                  pipelineElementConfig.payload as DataProcessorInvocation,
+                  true,
+                  false
+                );
               }, 10);
             } else if (ui.draggable.hasClass('action')) {
               setTimeout(() => {
-                this.JsplumbService.dataSinkDropped(pipelineElementConfig.payload.dom, pipelineElementConfig.payload as DataSinkInvocation, true, false);
+                this.jsplumbService.dataSinkDropped(
+                  pipelineElementConfig.payload.dom,
+                  pipelineElementConfig.payload as DataSinkInvocation,
+                  true,
+                  false);
               }, 10);
             }
-            if (this.ShepherdService.isTourActive()) {
-              this.ShepherdService.trigger('drop-' + pipelineElementConfig.type);
+            if (this.shepherdService.isTourActive()) {
+              this.shepherdService.trigger('drop-' + pipelineElementConfig.type);
             }
           }
         }
@@ -246,7 +255,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
 
   checkTopicModel(pipelineElementConfig: PipelineElementConfig) {
     setTimeout(() => {
-      this.JsplumbService.dataStreamDropped(pipelineElementConfig.payload.dom,
+      this.jsplumbService.dataStreamDropped(pipelineElementConfig.payload.dom,
           pipelineElementConfig.payload as SpDataStream,
           true,
           false);
@@ -264,12 +273,12 @@ export class PipelineComponent implements OnInit, OnDestroy {
   handleDeleteOption(pipelineElement: PipelineElementConfig) {
     this.JsplumbBridge.removeAllEndpoints(pipelineElement.payload.dom);
     this.rawPipelineModel.forEach(pe => {
-      if (pe.payload.dom == pipelineElement.payload.dom) {
+      if (pe.payload.dom === pipelineElement.payload.dom) {
         pe.settings.disabled = true;
       }
     });
     if (this.rawPipelineModel.every(pe => pe.settings.disabled)) {
-      this.EditorService.makePipelineAssemblyEmpty(true);
+      this.editorService.makePipelineAssemblyEmpty(true);
     }
     this.JsplumbBridge.repaintEverything();
     this.validatePipeline();
@@ -283,14 +292,14 @@ export class PipelineComponent implements OnInit, OnDestroy {
     this.JsplumbBridge.unbind(EVENT_CONNECTION);
 
     this.JsplumbBridge.bind(EVENT_CONNECTION_MOVED, (info) => {
-      const pe = this.ObjectProvider.findElement(info.newTargetEndpoint.elementId, this.rawPipelineModel);
-      const oldPe = this.ObjectProvider.findElement(info.originalTargetEndpoint.elementId, this.rawPipelineModel);
+      const pe = this.objectProvider.findElement(info.newTargetEndpoint.elementId, this.rawPipelineModel);
+      const oldPe = this.objectProvider.findElement(info.originalTargetEndpoint.elementId, this.rawPipelineModel);
       (oldPe.payload as InvocablePipelineElementUnion).configured = false;
       (pe.payload as InvocablePipelineElementUnion).configured = false;
     });
 
     this.JsplumbBridge.bind(EVENT_CONNECTION_DETACHED, (info) => {
-      const pe = this.ObjectProvider.findElement(info.targetEndpoint.elementId, this.rawPipelineModel);
+      const pe = this.objectProvider.findElement(info.targetEndpoint.elementId, this.rawPipelineModel);
       (pe.payload as InvocablePipelineElementUnion).configured = false;
       pe.settings.openCustomize = true;
       info.targetEndpoint.setType('empty');
@@ -316,17 +325,17 @@ export class PipelineComponent implements OnInit, OnDestroy {
     });
 
     this.JsplumbBridge.bind(EVENT_CONNECTION, (info) => {
-      const pe = this.ObjectProvider.findElement(info.target.id, this.rawPipelineModel);
+      const pe = this.objectProvider.findElement(info.target.id, this.rawPipelineModel);
       if (pe.settings.openCustomize) {
-        this.currentPipelineModel = this.ObjectProvider.makePipeline(this.rawPipelineModel);
+        this.currentPipelineModel = this.objectProvider.makePipeline(this.rawPipelineModel);
         pe.settings.loadingStatus = true;
-        this.ObjectProvider.updatePipeline(this.currentPipelineModel)
+        this.objectProvider.updatePipeline(this.currentPipelineModel)
             .subscribe(pipelineModificationMessage => {
               pe.settings.loadingStatus = false;
               info.targetEndpoint.setType('token');
               this.validatePipeline();
               this.modifyPipeline(pipelineModificationMessage.pipelineModifications);
-              if (this.JsplumbService.isFullyConnected(pe, this.preview)) {
+              if (this.jsplumbService.isFullyConnected(pe, this.preview)) {
                 const payload = pe.payload as InvocablePipelineElementUnion;
                 if ((payload.staticProperties && payload.staticProperties.length > 0) || this.isCustomOutput(pe)) {
                   this.showCustomizeDialog({a: false, b: pe});
@@ -363,7 +372,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
       pipelineModifications.forEach(modification => {
         const id = modification.domId;
         if (id !== 'undefined') {
-          const pe = this.ObjectProvider.findElement(id, this.rawPipelineModel);
+          const pe = this.objectProvider.findElement(id, this.rawPipelineModel);
           (pe.payload as InvocablePipelineElementUnion).staticProperties = modification.staticProperties;
           (pe.payload as DataProcessorInvocation).outputStrategies = modification.outputStrategies;
           (pe.payload as InvocablePipelineElementUnion).inputStreams = modification.inputStreams;
@@ -386,9 +395,9 @@ export class PipelineComponent implements OnInit, OnDestroy {
     setTimeout(() => {
       this.pipelineCacheRunning = true;
       this.pipelineCacheRunningChanged.emit(this.pipelineCacheRunning);
-      this.PipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, this.rawPipelineModel);
-      const updateCachedPipeline = this.EditorService.updateCachedPipeline(this.rawPipelineModel);
-      const updateCachedCanvasMetadata = this.EditorService.updateCachedCanvasMetadata(this.pipelineCanvasMetadata);
+      this.pipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, this.rawPipelineModel);
+      const updateCachedPipeline = this.editorService.updateCachedPipeline(this.rawPipelineModel);
+      const updateCachedCanvasMetadata = this.editorService.updateCachedCanvasMetadata(this.pipelineCanvasMetadata);
       forkJoin([updateCachedPipeline, updateCachedCanvasMetadata]).subscribe(() => {
         this.pipelineCacheRunning = false;
         this.pipelineCacheRunningChanged.emit(this.pipelineCacheRunning);
@@ -420,7 +429,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
     });
   }
 
-  showCustomizeDialog(pipelineElementInfo: Tuple2<Boolean, PipelineElementConfig>) {
+  showCustomizeDialog(pipelineElementInfo: Tuple2<boolean, PipelineElementConfig>) {
     const dialogRef = this.dialogService.open(CustomizeComponent, {
       panelType: PanelType.SLIDE_IN_PANEL,
       title: 'Customize ' + pipelineElementInfo.b.payload.name,
@@ -450,13 +459,13 @@ export class PipelineComponent implements OnInit, OnDestroy {
   }
 
   announceConfiguredElement(pe: PipelineElementConfig) {
-    this.EditorService.announceConfiguredElement(pe.payload.dom);
+    this.editorService.announceConfiguredElement(pe.payload.dom);
   }
 
   initiatePipelineElementPreview() {
     if (!this.previewModeActive) {
-      const pipeline = this.ObjectProvider.makePipeline(this.rawPipelineModel);
-      this.EditorService.initiatePipelinePreview(pipeline).subscribe(response => {
+      const pipeline = this.objectProvider.makePipeline(this.rawPipelineModel);
+      this.editorService.initiatePipelinePreview(pipeline).subscribe(response => {
         this.pipelinePreview = response;
         this.previewModeActive = true;
       });
@@ -467,7 +476,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
 
   deletePipelineElementPreview(resume: boolean) {
     if (this.previewModeActive) {
-      this.EditorService.deletePipelinePreviewRequest(this.pipelinePreview.previewId).subscribe(() => {
+      this.editorService.deletePipelinePreviewRequest(this.pipelinePreview.previewId).subscribe(() => {
         this.previewModeActive = false;
         if (resume) {
           this.initiatePipelineElementPreview();
diff --git a/ui/src/app/editor/services/editor-dialog-manager.service.ts b/ui/src/app/editor/services/editor-dialog-manager.service.ts
deleted file mode 100644
index 83d218a..0000000
--- a/ui/src/app/editor/services/editor-dialog-manager.service.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import * as angular from 'angular';
-import {MatchingErrorController} from "../../editor/dialog/matching-error/matching-error.controller";
-import {TopicSelectionDialog} from "../../editor/dialog/topic/topic-selection-modal.controller";
-import {PossibleElementsController} from "../../editor/dialog/possible-elements/possible-elements-dialog.controller";
-import {HelpDialogController} from "../../editor/dialog/help/help-dialog.controller";
-import {SavePipelineController} from "../../editor/dialog/save-pipeline/save-pipeline.controller";
-import {WelcomeTourDialogController} from "../../editor/dialog/welcome-tour/welcome-tour-dialog.controller";
-import {MissingElementsForTutorialDialogController} from "../../editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial-dialog.controller";
-
-declare const require: any;
-
-export class EditorDialogManager {
-
-    $mdDialog: any;
-    DialogBuilder: any;
-    $mdToast: any;
-
-    constructor($mdDialog, DialogBuilder) {
-        this.$mdDialog = $mdDialog;
-        this.DialogBuilder = DialogBuilder;
-    }
-
-    showMatchingErrorDialog(elementData) {
-        var dialogContent = this.DialogBuilder.getDialogTemplate(MatchingErrorController, require('../../editor/dialog/matching-error/matching-error.tmpl.html'));
-        dialogContent.locals = {
-            elementData: elementData
-        }
-        this.$mdDialog.show(dialogContent);
-    }
-
-    showCustomizeStreamDialog(streamDescription) {
-        var dialogContent = this.DialogBuilder.getDialogTemplate(TopicSelectionDialog, require('../../editor/dialog/topic/topic-selection-modal.tmpl.html'));
-        dialogContent.locals = {
-            streamDescription: streamDescription
-        }
-        this.$mdDialog.show(dialogContent);
-    }
-
-    showSavePipelineDialog(pipelineNew, modificationModeOn) {
-        var dialogContent = this.DialogBuilder.getDialogTemplate(SavePipelineController, require('../../editor/dialog/save-pipeline/submitPipelineModal.tmpl.html'));
-        dialogContent.locals = {
-            pipeline: pipelineNew,
-            modificationMode: modificationModeOn
-        }
-        this.$mdDialog.show(dialogContent);
-    }
-
-    openHelpDialog(pipelineElementPayload) {
-        this.$mdDialog.show({
-            controller: HelpDialogController,
-            controllerAs: 'ctrl',
-            template: require('../../editor/dialog/help/help-dialog.tmpl.html'),
-            parent: angular.element(document.body),
-            // must be false, otherwise polling of live data is not stopped in help-dialog.controller.js when dialog is closed
-            clickOutsideToClose: false,
-            locals: {
-                pipelineElement: pipelineElementPayload,
-            },
-            bindToController: true
-        })
-    };
-
-    openPossibleElementsDialog(rawPipelineModel, possibleElements, pipelineElementDomId) {
-        this.$mdDialog.show({
-            controller: PossibleElementsController,
-            controllerAs: 'ctrl',
-            template: require('../../editor/dialog/possible-elements/possible-elements-dialog.tmpl.html'),
-            parent: angular.element(document.body),
-            clickOutsideToClose: true,
-            bindToController: true,
-            locals: {
-                rawPipelineModel: rawPipelineModel,
-                possibleElements: possibleElements,
-                pipelineElementDomId: pipelineElementDomId
-            }
-        })
-    };
-
-    showToast(type, title, description) {
-        this.$mdToast.show(
-            this.$mdToast.simple()
-                .textContent(title)
-                .position("top right")
-                .hideDelay(3000)
-        );
-    }
-
-    showWelcomeDialog(user) {
-        this.$mdDialog.show({
-            controller: WelcomeTourDialogController,
-            controllerAs: 'ctrl',
-            template: require('../../editor/dialog/welcome-tour/welcome-tour-dialog.tmpl.html'),
-            parent: angular.element(document.body),
-            clickOutsideToClose: false,
-            bindToController: true,
-            locals: {
-                user: user
-            }
-        })
-    }
-
-    showMissingElementsForTutorialDialog(pipelineElements) {
-        this.$mdDialog.show({
-            controller: MissingElementsForTutorialDialogController,
-            controllerAs: 'ctrl',
-            template: require('../../editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial-dialog.tmpl.html'),
-            parent: angular.element(document.body),
-            clickOutsideToClose: false,
-            bindToController: true,
-            locals: {
-                pipelineElements: pipelineElements
-            }
-        })
-    }
-
-    showTutorialDialog() {
-        var confirm = this.$mdDialog.confirm()
-            .title('Welcome to StreamPipes!')
-            .textContent('If you are new to StreamPipes, check out our user guide')
-            .ok('Show tutorial')
-            .cancel('Cancel');
-
-        return this.$mdDialog.show(confirm);
-    }
-
-    showClearAssemblyDialog(ev) {
-        var confirm = this.$mdDialog.confirm()
-            .title('Clear assembly area?')
-            .textContent('All pipeline elements in the assembly area will be removed.')
-            .targetEvent(ev)
-            .ok('Clear assembly')
-            .cancel('Cancel');
-        return this.$mdDialog.show(confirm);
-    }
-
-    showMixedStreamAlert(ev) {
-        var confirm = this.$mdDialog.confirm()
-            .title('Not allowed')
-            .textContent('Currently, it is not possible to mix data streams and data sets in a single pipeline.')
-            .targetEvent(ev)
-            .ok('Ok')
-        return this.$mdDialog.show(confirm);
-    }
-}
-
-EditorDialogManager.$inject = ['$mdDialog', 'DialogBuilder'];
\ No newline at end of file
diff --git a/ui/src/app/editor/services/jsplumb-bridge.service.ts b/ui/src/app/editor/services/jsplumb-bridge.service.ts
index 6a3eb77..69883a4 100644
--- a/ui/src/app/editor/services/jsplumb-bridge.service.ts
+++ b/ui/src/app/editor/services/jsplumb-bridge.service.ts
@@ -17,7 +17,7 @@
  */
 
 import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { SelectOptions } from "@jsplumb/core";
+import { SelectOptions } from '@jsplumb/core';
 
 export class JsplumbBridge {
 
@@ -25,7 +25,7 @@ export class JsplumbBridge {
     }
 
     activateEndpoint(endpointId: string, endpointEnabled: boolean) {
-        let endpoint = this.getEndpointById(endpointId);
+        const endpoint = this.getEndpointById(endpointId);
         endpoint.enabled = endpointEnabled;
     }
 
@@ -35,7 +35,7 @@ export class JsplumbBridge {
     }
 
     setEndpointType(endpointId: string, endpointType: string) {
-        let endpoint = this.getEndpointById(endpointId);
+        const endpoint = this.getEndpointById(endpointId);
         // @ts-ignore
         endpoint.setType(endpointType);
     }
@@ -54,8 +54,8 @@ export class JsplumbBridge {
 
     deleteEveryEndpoint() {
         // TODO
-        //this.jsPlumbInstance.destroy();
-        //this.jsPlumbInstance.deleteEveryEndpoint();
+        // this.jsPlumbInstance.destroy();
+        // this.jsPlumbInstance.deleteEveryEndpoint();
     }
 
     setContainer(container) {
@@ -110,7 +110,7 @@ export class JsplumbBridge {
 
     addEndpoint(pipelineElementDomId: string,
                 options: any) {
-        options.cssClass = "sp-no-pan";
+        options.cssClass = 'sp-no-pan';
         return this.jsPlumbInstance.addEndpoint(document.getElementById(pipelineElementDomId), options);
     }
 
diff --git a/ui/src/app/editor/services/jsplumb-config.service.ts b/ui/src/app/editor/services/jsplumb-config.service.ts
index 2ddacd9..77735a7 100644
--- a/ui/src/app/editor/services/jsplumb-config.service.ts
+++ b/ui/src/app/editor/services/jsplumb-config.service.ts
@@ -16,10 +16,10 @@
  *
  */
 
-import { Injectable } from "@angular/core";
-import { JsplumbSettings } from "../model/jsplumb.model";
-import { BezierConnector } from "@jsplumb/connector-bezier";
-import { EndpointTypeDescriptor } from "@jsplumb/core";
+import { Injectable } from '@angular/core';
+import { JsplumbSettings } from '../model/jsplumb.model';
+import { BezierConnector } from '@jsplumb/connector-bezier';
+import { EndpointTypeDescriptor } from '@jsplumb/core';
 
 @Injectable()
 export class JsplumbConfigService {
@@ -37,37 +37,37 @@ export class JsplumbConfigService {
 
     getEndpointTypeConfig(): Record<string, EndpointTypeDescriptor> {
         return {
-            "empty": {
+            'empty': {
                 paintStyle: {
-                    fill: "white",
-                    stroke: "#9E9E9E",
+                    fill: 'white',
+                    stroke: '#9E9E9E',
                     strokeWidth: 2,
                 }
             },
-            "token": {
+            'token': {
                 paintStyle: {
-                    fill: "#BDBDBD",
-                    stroke: "#9E9E9E",
+                    fill: '#BDBDBD',
+                    stroke: '#9E9E9E',
                     strokeWidth: 2
                 },
                 hoverPaintStyle: {
-                    fill: "#BDBDBD",
-                    stroke: "#4CAF50",
+                    fill: '#BDBDBD',
+                    stroke: '#4CAF50',
                     strokeWidth: 4,
                 }
             },
-            "highlight": {
+            'highlight': {
                 paintStyle: {
-                    fill: "white",
-                    stroke: "#4CAF50",
+                    fill: 'white',
+                    stroke: '#4CAF50',
                     strokeWidth: 4
                 }
             }
-        }
+        };
     }
 
     makeConfig(settings) {
-        let config = {} as any;
+        const config = {} as any;
         config.streamEndpointOptions = this.makeStreamEndpointOptions(settings);
         config.sepaEndpointOptions = this.makeSepaEndpointOptions(settings);
         config.leftTargetPointOptions = this.makeLeftTargetPointOptions(settings);
@@ -80,7 +80,7 @@ export class JsplumbConfigService {
                  arrowLength: number,
                  arrowLineWidth: number,
                  curviness: number) {
-        let settings = {} as JsplumbSettings;
+        const settings = {} as JsplumbSettings;
         settings.dotRadius = dotRadius;
         settings.lineWidth = lineWidth;
         settings.arrowWidth = arrowWidth;
@@ -92,50 +92,50 @@ export class JsplumbConfigService {
 
     makeStreamEndpointOptions(settings: JsplumbSettings) {
         return {
-            endpoint: {type: "Dot", options: {radius: settings.dotRadius}},
-            connectorStyle: {stroke: "#BDBDBD", outlineStroke: "#BDBDBD", strokeWidth: settings.lineWidth},
+            endpoint: {type: 'Dot', options: {radius: settings.dotRadius}},
+            connectorStyle: {stroke: '#BDBDBD', outlineStroke: '#BDBDBD', strokeWidth: settings.lineWidth},
             connector: {type: BezierConnector.type, options: {curviness: settings.curviness}},
             source: true,
-            type: "token",
+            type: 'token',
             maxConnections: -1,
-            anchor: "Right",
+            anchor: 'Right',
             connectorOverlays: this.defaultConnectorOverlay(settings)
-        }
+        };
     }
 
     makeSepaEndpointOptions(settings) {
         return {
-            endpoint: {type: "Dot", options: {radius: settings.dotRadius}},
+            endpoint: {type: 'Dot', options: {radius: settings.dotRadius}},
             connectorStyle: {
-                stroke: "#BDBDBD", outlineStroke: "#9E9E9E", strokeWidth: settings.lineWidth
+                stroke: '#BDBDBD', outlineStroke: '#9E9E9E', strokeWidth: settings.lineWidth
             },
             connector: {type: BezierConnector.type, options: {curviness: settings.curviness}},
             source: true,
             maxConnections: -1,
-            anchor: "Right",
-            type: "empty",
+            anchor: 'Right',
+            type: 'empty',
             connectorOverlays: this.defaultConnectorOverlay(settings),
             parameters: {
-                endpointType: "output"
+                endpointType: 'output'
             }
-        }
+        };
     }
 
     makeLeftTargetPointOptions(settings) {
         return {
-            endpoint: {type: "Dot", options: {radius: settings.dotRadius}},
-            type: "empty",
-            anchor: "Left",
+            endpoint: {type: 'Dot', options: {radius: settings.dotRadius}},
+            type: 'empty',
+            anchor: 'Left',
             target: true
-        }
+        };
     }
 
     defaultConnectorOverlay(settings) {
         return [{
-            type: "Arrow", options: {
-                width: settings.arrowWidth, length: settings.arrowLength, location: 0.5, id: "arrow", paintStyle: {
-                    fillStyle: "#BDBDBD",
-                    stroke: "#9E9E9E",
+            type: 'Arrow', options: {
+                width: settings.arrowWidth, length: settings.arrowLength, location: 0.5, id: 'arrow', paintStyle: {
+                    fillStyle: '#BDBDBD',
+                    stroke: '#9E9E9E',
                     strokeWidth: settings.arrowLineWidth
                 }
             }
diff --git a/ui/src/app/editor/services/jsplumb-endpoint.service.ts b/ui/src/app/editor/services/jsplumb-endpoint.service.ts
index e3e7be3..fc554e4 100644
--- a/ui/src/app/editor/services/jsplumb-endpoint.service.ts
+++ b/ui/src/app/editor/services/jsplumb-endpoint.service.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Injectable} from "@angular/core";
-import {JsplumbConfigService} from "./jsplumb-config.service";
+import { Injectable } from '@angular/core';
+import { JsplumbConfigService } from './jsplumb-config.service';
 
 @Injectable()
 export class JsplumbEndpointService {
@@ -32,29 +32,29 @@ export class JsplumbEndpointService {
 
   getStreamEndpoint(preview: boolean,
                     pipelineElementDomId: string) {
-    let jsplumbConfig = this.getJsplumbConfig(preview);
-    let config = jsplumbConfig.streamEndpointOptions;
-    config.uuid = "out-" + pipelineElementDomId;
+    const jsplumbConfig = this.getJsplumbConfig(preview);
+    const config = jsplumbConfig.streamEndpointOptions;
+    config.uuid = 'out-' + pipelineElementDomId;
     return config;
   }
 
   getInputEndpoint(preview, pipelineElementDomId, index): any {
-    let jsplumbConfig = this.getJsplumbConfig(preview);
-    let inConfig = jsplumbConfig.leftTargetPointOptions;
-    inConfig.uuid = "in-" + index + "-" + pipelineElementDomId;
+    const jsplumbConfig = this.getJsplumbConfig(preview);
+    const inConfig = jsplumbConfig.leftTargetPointOptions;
+    inConfig.uuid = 'in-' + index + '-' + pipelineElementDomId;
     return inConfig;
   }
 
   getOutputEndpoint(preview, pipelineElementDomId): any {
-    let jsplumbConfig = this.getJsplumbConfig(preview);
-    let outConfig = jsplumbConfig.sepaEndpointOptions;
-    outConfig.uuid = "out-" + pipelineElementDomId;
+    const jsplumbConfig = this.getJsplumbConfig(preview);
+    const outConfig = jsplumbConfig.sepaEndpointOptions;
+    outConfig.uuid = 'out-' + pipelineElementDomId;
     return outConfig;
   }
 
   getNewTargetPoint(preview, x, y, pipelineElementDomId, index): any {
-    let inConfig = this.getInputEndpoint(preview, pipelineElementDomId, index);
-    inConfig.type = "empty";
+    const inConfig = this.getInputEndpoint(preview, pipelineElementDomId, index);
+    inConfig.type = 'empty';
     inConfig.anchor = [x, y, -1, 0];
     inConfig.isTarget = true;
 
diff --git a/ui/src/app/editor/services/jsplumb-factory.service.ts b/ui/src/app/editor/services/jsplumb-factory.service.ts
index 6671a82..a0f98c9 100644
--- a/ui/src/app/editor/services/jsplumb-factory.service.ts
+++ b/ui/src/app/editor/services/jsplumb-factory.service.ts
@@ -16,12 +16,12 @@
  *
  */
 
-import { JsPlumbInstance } from "@jsplumb/core";
-import { JsplumbBridge } from "./jsplumb-bridge.service";
-import { Injectable } from "@angular/core";
-import { BrowserJsPlumbInstance, ContainmentType, newInstance } from "@jsplumb/browser-ui";
-import { PipelineElementDraggedService } from "./pipeline-element-dragged.service";
-import { JsplumbConfigService } from "./jsplumb-config.service";
+import { JsPlumbInstance } from '@jsplumb/core';
+import { JsplumbBridge } from './jsplumb-bridge.service';
+import { Injectable } from '@angular/core';
+import { BrowserJsPlumbInstance, ContainmentType, newInstance } from '@jsplumb/browser-ui';
+import { PipelineElementDraggedService } from './pipeline-element-dragged.service';
+import { JsplumbConfigService } from './jsplumb-config.service';
 
 @Injectable()
 export class JsplumbFactoryService {
@@ -56,7 +56,7 @@ export class JsplumbFactoryService {
 
     makePipelineEditorInstance(): BrowserJsPlumbInstance {
         return newInstance({
-            container: document.getElementById("assembly"), dragOptions: {
+            container: document.getElementById('assembly'), dragOptions: {
                 containment: ContainmentType.parent,
                 cursor: 'pointer',
                 zIndex: 2000,
@@ -69,7 +69,7 @@ export class JsplumbFactoryService {
 
     makePipelinePreviewInstance(): BrowserJsPlumbInstance {
         return newInstance({
-            container: document.getElementById("assembly-preview"),
+            container: document.getElementById('assembly-preview'),
             elementsDraggable: false
         });
     }
diff --git a/ui/src/app/editor/services/jsplumb.service.ts b/ui/src/app/editor/services/jsplumb.service.ts
index 7ac0e1c..e36d669 100644
--- a/ui/src/app/editor/services/jsplumb.service.ts
+++ b/ui/src/app/editor/services/jsplumb.service.ts
@@ -16,11 +16,11 @@
  *
  */
 
-import { JsplumbConfigService } from "./jsplumb-config.service";
-import { JsplumbBridge } from "./jsplumb-bridge.service";
-import { Injectable } from "@angular/core";
-import { InvocablePipelineElementUnion, PipelineElementConfig, PipelineElementUnion } from "../model/editor.model";
-import { PipelineElementTypeUtils } from "../utils/editor.utils";
+import { JsplumbConfigService } from './jsplumb-config.service';
+import { JsplumbBridge } from './jsplumb-bridge.service';
+import { Injectable } from '@angular/core';
+import { InvocablePipelineElementUnion, PipelineElementConfig, PipelineElementUnion } from '../model/editor.model';
+import { PipelineElementTypeUtils } from '../utils/editor.utils';
 import {
     DataProcessorInvocation,
     DataSinkInvocation,
@@ -28,26 +28,26 @@ import {
     SpDataSet,
     SpDataStream,
     SpDataStreamUnion
-} from "../../core-model/gen/streampipes-model";
-import { JsplumbEndpointService } from "./jsplumb-endpoint.service";
-import { JsplumbFactoryService } from "./jsplumb-factory.service";
+} from '../../core-model/gen/streampipes-model';
+import { JsplumbEndpointService } from './jsplumb-endpoint.service';
+import { JsplumbFactoryService } from './jsplumb-factory.service';
 import { EditorService } from './editor.service';
 
 @Injectable()
 export class JsplumbService {
 
-    idCounter: number = 0;
+    idCounter = 0;
 
-    constructor(private JsplumbConfigService: JsplumbConfigService,
-                private JsplumbFactory: JsplumbFactoryService,
+    constructor(private jsplumbConfigService: JsplumbConfigService,
+                private jsplumbFactory: JsplumbFactoryService,
                 private jsplumbEndpointService: JsplumbEndpointService,
                 private editorService: EditorService) {
     }
 
     isFullyConnected(pipelineElementConfig: PipelineElementConfig,
                      previewConfig: boolean) {
-        let jsplumbBridge = this.JsplumbFactory.getJsplumbBridge(previewConfig);
-        let payload = pipelineElementConfig.payload as InvocablePipelineElementUnion;
+        const jsplumbBridge = this.jsplumbFactory.getJsplumbBridge(previewConfig);
+        const payload = pipelineElementConfig.payload as InvocablePipelineElementUnion;
         return payload.inputStreams == null ||
           jsplumbBridge.getConnections({target: document.getElementById(payload.dom)}).length == payload.inputStreams.length;
     }
@@ -56,9 +56,9 @@ export class JsplumbService {
                     isPreview: boolean) {
         return pipelineModel
           .streams
-          .map(s => this.toConfig(s, "stream", isPreview))
-          .concat(pipelineModel.sepas.map(s => this.toConfig(s, "sepa", isPreview)))
-          .concat(pipelineModel.actions.map(s => this.toConfig(s, "action", isPreview)));
+          .map(s => this.toConfig(s, 'stream', isPreview))
+          .concat(pipelineModel.sepas.map(s => this.toConfig(s, 'sepa', isPreview)))
+          .concat(pipelineModel.actions.map(s => this.toConfig(s, 'action', isPreview)));
     }
 
     toConfig(pe: PipelineElementUnion,
@@ -72,7 +72,7 @@ export class JsplumbService {
                                    pipelineElement: PipelineElementUnion,
                                    x: number,
                                    y: number) {
-        let pipelineElementConfig = this.createNewPipelineElementConfigAtPosition(x, y, pipelineElement, false);
+        const pipelineElementConfig = this.createNewPipelineElementConfigAtPosition(x, y, pipelineElement, false);
         pipelineModel.push(pipelineElementConfig);
 
         if (pipelineElementConfig.payload instanceof SpDataSet) {
@@ -101,9 +101,9 @@ export class JsplumbService {
     createElement(pipelineModel: PipelineElementConfig[],
                   pipelineElement: InvocablePipelineElementUnion,
                   pipelineElementDomId: string) {
-        let pipelineElementDom = $("#" + pipelineElementDomId);
+        const pipelineElementDom = $('#' + pipelineElementDomId);
 
-        let pipelineElementConfig = this.createNewPipelineElementConfigWithFixedCoordinates(pipelineElementDom, pipelineElement, false);
+        const pipelineElementConfig = this.createNewPipelineElementConfigWithFixedCoordinates(pipelineElementDom, pipelineElement, false);
         pipelineModel.push(pipelineElementConfig);
         setTimeout(() => {
             this.createAssemblyElement(pipelineElementConfig.payload.dom,
@@ -131,18 +131,15 @@ export class JsplumbService {
                  $target,
                  previewConfig: boolean) {
         let options;
-        let jsplumbBridge = this.getBridge(previewConfig);
-        if ($parentElement.hasClass("stream")) {
-            // TODO: getJsplumbConfig depends on isPreview. Not implemented yet
-            options = this.jsplumbEndpointService.getJsplumbConfig(true).streamEndpointOptions;
-        } else {
-            // TODO: getJsplumbConfig depends on isPreview. Not implemented yet
-            options = this.jsplumbEndpointService.getJsplumbConfig(true).sepaEndpointOptions;
-        }
+        const jsplumbBridge = this.getBridge(previewConfig);
+        // TODO: getJsplumbConfig depends on isPreview. Not implemented yet
+        const jsplumbConfig = this.jsplumbEndpointService.getJsplumbConfig(true);
+        options = $parentElement.hasClass('stream') ?
+          jsplumbConfig.streamEndpointOptions : jsplumbConfig.sepaEndpointOptions;
         let sourceEndPoint;
         if (jsplumbBridge.selectEndpoints({source: $parentElement}).length > 0) {
             if (!(jsplumbBridge.selectEndpoints({source: $parentElement}).get(0).isFull())) {
-                sourceEndPoint = jsplumbBridge.selectEndpoints({source: $parentElement}).get(0)
+                sourceEndPoint = jsplumbBridge.selectEndpoints({source: $parentElement}).get(0);
             } else {
                 sourceEndPoint = jsplumbBridge.addEndpoint($parentElement, options);
             }
@@ -150,15 +147,15 @@ export class JsplumbService {
             sourceEndPoint = jsplumbBridge.addEndpoint($parentElement, options);
         }
 
-        let targetEndPoint = jsplumbBridge.selectEndpoints({target: $target}).get(0);
+        const targetEndPoint = jsplumbBridge.selectEndpoints({target: $target}).get(0);
 
         jsplumbBridge.connect({source: sourceEndPoint, target: targetEndPoint, detachable: true});
         jsplumbBridge.repaintEverything();
     }
 
     createNewPipelineElementConfigWithFixedCoordinates($parentElement, json, isPreview): PipelineElementConfig {
-        let x = $parentElement.position().left;
-        let y = $parentElement.position().top;
+        const x = $parentElement.position().left;
+        const y = $parentElement.position().top;
         return this.createNewPipelineElementConfigAtPosition(x, y, json, isPreview);
     }
 
@@ -166,7 +163,7 @@ export class JsplumbService {
                                              y: number,
                                              json: any,
                                              isPreview: boolean): PipelineElementConfig {
-        let coord = {'x': x + 200, 'y': y};
+        const coord = {'x': x + 200, 'y': y};
         return this.createNewPipelineElementConfig(json, coord, isPreview, false);
     }
 
@@ -175,25 +172,25 @@ export class JsplumbService {
                                    isPreview: boolean,
                                    isCompleted: boolean,
                                    newElementId?: string): PipelineElementConfig {
-        let displaySettings = isPreview ? 'connectable-preview' : 'connectable-editor';
-        let connectable = "connectable";
-        let pipelineElementConfig = {} as PipelineElementConfig;
+        const displaySettings = isPreview ? 'connectable-preview' : 'connectable-editor';
+        const connectable = 'connectable';
+        const pipelineElementConfig = {} as PipelineElementConfig;
         pipelineElementConfig.type = PipelineElementTypeUtils
-          .toCssShortHand(PipelineElementTypeUtils.fromType(pipelineElement))
+          .toCssShortHand(PipelineElementTypeUtils.fromType(pipelineElement));
         pipelineElementConfig.payload = this.clone(pipelineElement, newElementId);
-        pipelineElementConfig.settings = {connectable: connectable,
+        pipelineElementConfig.settings = {connectable,
             openCustomize: !(pipelineElement as any).configured,
             preview: isPreview,
             completed: (pipelineElement instanceof SpDataStream || pipelineElement instanceof SpDataSet || isPreview || isCompleted),
             disabled: false,
             loadingStatus: false,
-            displaySettings: displaySettings,
+            displaySettings,
             position: {
                 x: coordinates.x,
                 y: coordinates.y
             }};
         if (!pipelineElementConfig.payload.dom) {
-            pipelineElementConfig.payload.dom = "jsplumb_" + this.idCounter + "_" + this.makeId(4);
+            pipelineElementConfig.payload.dom = 'jsplumb_' + this.idCounter + '_' + this.makeId(4);
             this.idCounter++;
         }
 
@@ -206,13 +203,13 @@ export class JsplumbService {
         } else if (pipelineElement instanceof SpDataStream) {
             return SpDataStream.fromData(pipelineElement, new SpDataStream());
         } else if (pipelineElement instanceof DataProcessorInvocation) {
-            let clonedPe = DataProcessorInvocation.fromData(pipelineElement, new DataProcessorInvocation());
+            const clonedPe = DataProcessorInvocation.fromData(pipelineElement, new DataProcessorInvocation());
             if (newElementId) {
-                this.updateElementIds(clonedPe, newElementId)
+                this.updateElementIds(clonedPe, newElementId);
             }
             return clonedPe;
         } else {
-            let clonedPe = DataSinkInvocation.fromData(pipelineElement, new DataSinkInvocation());
+            const clonedPe = DataSinkInvocation.fromData(pipelineElement, new DataSinkInvocation());
             if (newElementId) {
                 this.updateElementIds(clonedPe, newElementId);
             }
@@ -226,11 +223,12 @@ export class JsplumbService {
     }
 
     makeId(count: number) {
-        let text = "";
-        const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        let text = '';
+        const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
-        for (let i = 0; i < count; i++)
+        for (let i = 0; i < count; i++) {
             text += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
 
         return text;
     }
@@ -254,47 +252,47 @@ export class JsplumbService {
                    pipelineElement: SpDataSet,
                    endpoints: boolean,
                    preview: boolean) {
-        let jsplumbBridge = this.getBridge(preview);
+        const jsplumbBridge = this.getBridge(preview);
         if (endpoints) {
-            let endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId);
+            const endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId);
             jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions);
         }
         return pipelineElementDomId;
-    };
+    }
 
 
     dataStreamDropped(pipelineElementDomId: string,
                       pipelineElement: SpDataStreamUnion,
                       endpoints: boolean,
                       preview: boolean) {
-        let jsplumbBridge = this.getBridge(preview);
+        const jsplumbBridge = this.getBridge(preview);
         if (endpoints) {
-            let endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId);
+            const endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId);
             jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions);
         }
         return pipelineElementDomId;
-    };
+    }
 
     dataProcessorDropped(pipelineElementDomId: string,
                          pipelineElement: DataProcessorInvocation,
                          endpoints: boolean,
                          preview: boolean): string {
-        let jsplumbBridge = this.getBridge(preview);
+        const jsplumbBridge = this.getBridge(preview);
         this.dataSinkDropped(pipelineElementDomId, pipelineElement, endpoints, preview);
         if (endpoints) {
             jsplumbBridge.addEndpoint(pipelineElementDomId,
               this.jsplumbEndpointService.getOutputEndpoint(preview, pipelineElementDomId));
         }
         return pipelineElementDomId;
-    };
+    }
 
     dataSinkDropped(pipelineElementDomId: string,
                     pipelineElement: InvocablePipelineElementUnion,
                     endpoints: boolean,
                     preview: boolean): string {
-        let jsplumbBridge = this.getBridge(preview);
+        const jsplumbBridge = this.getBridge(preview);
         if (endpoints) {
-            if (pipelineElement.inputStreams.length < 2) { //1 InputNode
+            if (pipelineElement.inputStreams.length < 2) { // 1 InputNode
                 jsplumbBridge.addEndpoint(pipelineElementDomId,
                   this.jsplumbEndpointService.getInputEndpoint(preview, pipelineElementDomId, 0));
             } else {
@@ -305,9 +303,9 @@ export class JsplumbService {
             }
         }
         return pipelineElementDomId;
-    };
+    }
 
     getBridge(previewConfig: boolean): JsplumbBridge {
-        return this.JsplumbFactory.getJsplumbBridge(previewConfig);
+        return this.jsplumbFactory.getJsplumbBridge(previewConfig);
     }
 }
diff --git a/ui/src/app/editor/services/object-provider.service.ts b/ui/src/app/editor/services/object-provider.service.ts
index e644181..5c6a0cd 100644
--- a/ui/src/app/editor/services/object-provider.service.ts
+++ b/ui/src/app/editor/services/object-provider.service.ts
@@ -16,19 +16,19 @@
  *
  */
 
-import { Injectable } from "@angular/core";
-import { RestApi } from "../../services/rest-api.service";
-import { InvocablePipelineElementUnion, PipelineElementConfig } from "../model/editor.model";
-import { DataSinkInvocation, Pipeline } from "../../core-model/gen/streampipes-model";
-import { EditorService } from "./editor.service";
-import { JsplumbFactoryService } from "./jsplumb-factory.service";
+import { Injectable } from '@angular/core';
+import { RestApi } from '../../services/rest-api.service';
+import { InvocablePipelineElementUnion, PipelineElementConfig } from '../model/editor.model';
+import { DataSinkInvocation, Pipeline } from '../../core-model/gen/streampipes-model';
+import { EditorService } from './editor.service';
+import { JsplumbFactoryService } from './jsplumb-factory.service';
 
 @Injectable()
 export class ObjectProvider {
 
-    constructor(private RestApi: RestApi,
-                private EditorService: EditorService,
-                private JsplumbFactoryService: JsplumbFactoryService) {
+    constructor(private restApi: RestApi,
+                private editorService: EditorService,
+                private jsplumbFactoryService: JsplumbFactoryService) {
     }
 
     prepareElement(pipelineElement: InvocablePipelineElementUnion) {
@@ -37,9 +37,9 @@ export class ObjectProvider {
     }
 
     preparePipeline(): Pipeline {
-        var pipeline = new Pipeline();
-        pipeline.name = "";
-        pipeline.description = "";
+        const pipeline = new Pipeline();
+        pipeline.name = '';
+        pipeline.description = '';
         pipeline.streams = [];
         pipeline.sepas = [];
         pipeline.actions = [];
@@ -52,21 +52,21 @@ export class ObjectProvider {
     }
 
     makePipeline(currentPipelineElements): Pipeline {
-        var pipeline = this.preparePipeline();
+        let pipeline = this.preparePipeline();
         pipeline = this.addElementNew(pipeline, currentPipelineElements);
         return pipeline;
     }
 
     hasConnectedPipelineElement(pipelineElementDomId: string,
                                 rawPipelineModel: PipelineElementConfig[]) {
-        let pipelineElement = this.findElement(pipelineElementDomId, rawPipelineModel);
+        const pipelineElement = this.findElement(pipelineElementDomId, rawPipelineModel);
         if (pipelineElement.payload instanceof DataSinkInvocation) {
             return false;
         } else {
             return rawPipelineModel
                 .filter(pe => !pe.settings.disabled && pe.payload.connectedTo)
                 .find(pe => (pe.payload.connectedTo.indexOf(pipelineElementDomId) > -1))
-                != undefined;
+                !== undefined;
         }
     }
 
@@ -75,13 +75,13 @@ export class ObjectProvider {
     }
 
     addElementNew(pipeline, currentPipelineElements: PipelineElementConfig[]): Pipeline {
-        let JsplumbBridge = this.JsplumbFactoryService.getJsplumbBridge(false);
+        const JsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(false);
         currentPipelineElements.forEach(pe => {
-            if (pe.settings.disabled == undefined || !(pe.settings.disabled)) {
+            if (pe.settings.disabled === undefined || !(pe.settings.disabled)) {
                 if (pe.type === 'sepa' || pe.type === 'action') {
                     let payload = pe.payload;
                     payload = this.prepareElement(payload as InvocablePipelineElementUnion);
-                    let connections = JsplumbBridge.getConnections({
+                    const connections = JsplumbBridge.getConnections({
                         target: document.getElementById(payload.dom)
                     });
                     for (let i = 0; i < connections.length; i++) {
@@ -90,8 +90,7 @@ export class ObjectProvider {
                     if (payload.connectedTo && payload.connectedTo.length > 0) {
                         pe.type === 'action' ? pipeline.actions.push(payload) : pipeline.sepas.push(payload);
                     }
-                }
-                else {
+                } else {
                     pipeline.streams.push(pe.payload);
                 }
             }
@@ -100,6 +99,6 @@ export class ObjectProvider {
     }
 
     updatePipeline(pipeline: Pipeline) {
-        return this.EditorService.updatePartialPipeline(pipeline);
+        return this.editorService.updatePartialPipeline(pipeline);
     }
 }
diff --git a/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts b/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts
index 4eef96e..5be904d 100644
--- a/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts
+++ b/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts
@@ -16,8 +16,8 @@
  *
  */
 
-import {Injectable} from "@angular/core";
-import {Subject} from "rxjs";
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class PipelineCanvasScrollingService {
diff --git a/ui/src/app/editor/services/pipeline-editor.service.ts b/ui/src/app/editor/services/pipeline-editor.service.ts
index fea88eb..1057188 100644
--- a/ui/src/app/editor/services/pipeline-editor.service.ts
+++ b/ui/src/app/editor/services/pipeline-editor.service.ts
@@ -16,7 +16,7 @@
  *
  */
 
-import {Injectable} from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class PipelineEditorService {
@@ -25,9 +25,8 @@ export class PipelineEditorService {
     }
 
     getCoordinates(ui, currentZoomLevel) {
-
-        var newLeft = this.getDropPositionX(ui.helper, currentZoomLevel);
-        var newTop = this.getDropPositionY(ui.helper, currentZoomLevel);
+        const newLeft = this.getDropPositionX(ui.helper, currentZoomLevel);
+        const newTop = this.getDropPositionY(ui.helper, currentZoomLevel);
         return {
             'x': newLeft,
             'y': newTop
@@ -35,19 +34,19 @@ export class PipelineEditorService {
     }
 
     getDropPositionY(helper, currentZoomLevel) {
-        var newTop;
-        var helperPos = helper.offset();
-        var divPos = $('#assembly').offset();
-        newTop = (helperPos.top - divPos.top) + (1 - currentZoomLevel) * ((helperPos.top - divPos.top) * 2);
-        return newTop;
+        const helperPos = helper.offset();
+        const divPos = this.getDivPos();
+        return (helperPos.top - divPos.top) + (1 - currentZoomLevel) * ((helperPos.top - divPos.top) * 2);
     }
 
     getDropPositionX(helper, currentZoomLevel) {
-        var newLeft;
-        var helperPos = helper.offset();
-        var divPos = $('#assembly').offset();
-        newLeft = (helperPos.left - divPos.left) + (1 - currentZoomLevel) * ((helperPos.left - divPos.left) * 2);
-        return newLeft;
+        const helperPos = helper.offset();
+        const divPos = this.getDivPos();
+        return (helperPos.left - divPos.left) + (1 - currentZoomLevel) * ((helperPos.left - divPos.left) * 2);
+    }
+
+    getDivPos() {
+        return $('#assembly').offset();
     }
 
 }
diff --git a/ui/src/app/editor/services/pipeline-element-dragged.service.ts b/ui/src/app/editor/services/pipeline-element-dragged.service.ts
index e209ee4..16ae51e 100644
--- a/ui/src/app/editor/services/pipeline-element-dragged.service.ts
+++ b/ui/src/app/editor/services/pipeline-element-dragged.service.ts
@@ -16,9 +16,9 @@
  *
  */
 
-import {Injectable} from "@angular/core";
-import {Subject} from "rxjs";
-import {PipelineElementPosition} from "../model/editor.model";
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { PipelineElementPosition } from '../model/editor.model';
 
 @Injectable()
 export class PipelineElementDraggedService {
diff --git a/ui/src/app/editor/services/pipeline-element-recommendation.service.ts b/ui/src/app/editor/services/pipeline-element-recommendation.service.ts
index d8df30c..d6e01c9 100644
--- a/ui/src/app/editor/services/pipeline-element-recommendation.service.ts
+++ b/ui/src/app/editor/services/pipeline-element-recommendation.service.ts
@@ -16,39 +16,38 @@
  *
  */
 
-import {Injectable} from "@angular/core";
-import {EditorService} from "./editor.service";
-import {PipelineElementUnion} from "../model/editor.model";
+import { Injectable } from '@angular/core';
+import { PipelineElementUnion } from '../model/editor.model';
 import {
   InvocableStreamPipesEntity,
   PipelineElementRecommendation,
   SpDataStream
-} from "../../core-model/gen/streampipes-model";
+} from '../../core-model/gen/streampipes-model';
 
 @Injectable()
 export class PipelineElementRecommendationService {
 
-    constructor(private EditorService: EditorService) {
+    constructor() {
     }
 
     collectPossibleElements(allElements: PipelineElementUnion[], possibleElements: PipelineElementRecommendation[]) {
-        var possibleElementConfigs = [];
+        const possibleElementConfigs = [];
         possibleElements.forEach(pe => {
             possibleElementConfigs.push(this.getPipelineElementContents(allElements, pe.elementId)[0]);
-        })
+        });
         return possibleElementConfigs;
     }
 
     populateRecommendedList(allElements, recs) {
-        let elementRecommendations: any = [];
-        recs.sort(function (a, b) {
+        const elementRecommendations: any = [];
+        recs.sort((a, b) => {
             return (a.count > b.count) ? -1 : ((b.count > a.count) ? 1 : 0);
         });
-        let maxRecs = recs.length > 7 ? 7 : recs.length;
+        const maxRecs = recs.length > 7 ? 7 : recs.length;
         for (let i = 0; i < maxRecs; i++) {
-            let el = recs[i];
-            let elements = this.getPipelineElementContents(allElements, el.elementId);
-            let element = elements[0];
+            const el = recs[i];
+            const elements = this.getPipelineElementContents(allElements, el.elementId);
+            const element = elements[0];
             (element as any).weight = el.weight;
             elementRecommendations.push(element);
         }
diff --git a/ui/src/app/editor/services/pipeline-positioning.service.ts b/ui/src/app/editor/services/pipeline-positioning.service.ts
index 8e6b682..889fd9d 100644
--- a/ui/src/app/editor/services/pipeline-positioning.service.ts
+++ b/ui/src/app/editor/services/pipeline-positioning.service.ts
@@ -16,30 +16,30 @@
  *
  */
 
-import * as dagre from "dagre";
-import { JsplumbBridge } from "./jsplumb-bridge.service";
-import { JsplumbConfigService } from "./jsplumb-config.service";
-import { JsplumbService } from "./jsplumb.service";
-import { Injectable } from "@angular/core";
-import { PipelineElementConfig } from "../model/editor.model";
+import * as dagre from 'dagre';
+import { JsplumbBridge } from './jsplumb-bridge.service';
+import { JsplumbConfigService } from './jsplumb-config.service';
+import { JsplumbService } from './jsplumb.service';
+import { Injectable } from '@angular/core';
+import { PipelineElementConfig } from '../model/editor.model';
 import {
   DataProcessorInvocation,
   DataSinkInvocation,
   PipelineCanvasMetadata,
   PipelineElementMetadata,
   SpDataStream
-} from "../../core-model/gen/streampipes-model";
-import { JsplumbFactoryService } from "./jsplumb-factory.service";
-import { ObjectProvider } from "./object-provider.service";
-import { Connection } from "@jsplumb/core";
+} from '../../core-model/gen/streampipes-model';
+import { JsplumbFactoryService } from './jsplumb-factory.service';
+import { ObjectProvider } from './object-provider.service';
+import { Connection } from '@jsplumb/core';
 
 @Injectable()
 export class PipelinePositioningService {
 
-  constructor(private JsplumbService: JsplumbService,
-              private JsplumbConfigService: JsplumbConfigService,
-              private JsplumbFactoryService: JsplumbFactoryService,
-              private ObjectProvider: ObjectProvider) {
+  constructor(private jsplumbService: JsplumbService,
+              private jsplumbConfigService: JsplumbConfigService,
+              private jsplumbFactoryService: JsplumbFactoryService,
+              private objectProvider: ObjectProvider) {
   }
 
   collectPipelineElementPositions(pipelineCanvasMetadata: PipelineCanvasMetadata,
@@ -52,10 +52,10 @@ export class PipelinePositioningService {
 
   collectPipelineElementPosition(domId: string,
                                  pipelineCanvasMetadata: PipelineCanvasMetadata) {
-    let elementRef = $(`#${domId}`);
+    const elementRef = $(`#${domId}`);
     if (elementRef && elementRef.position()) {
-      let leftPos = elementRef.position().left;
-      let topPos = elementRef.position().top;
+      const leftPos = elementRef.position().left;
+      const topPos = elementRef.position().top;
       if (!pipelineCanvasMetadata.pipelineElementMetadata) {
         pipelineCanvasMetadata.pipelineElementMetadata = {};
       }
@@ -74,32 +74,32 @@ export class PipelinePositioningService {
                   previewConfig: boolean,
                   autoLayout: boolean,
                   pipelineCanvasMetadata?: PipelineCanvasMetadata) {
-    let jsPlumbBridge = this.JsplumbFactoryService.getJsplumbBridge(previewConfig);
+    const jsPlumbBridge = this.jsplumbFactoryService.getJsplumbBridge(previewConfig);
 
-    let jsplumbConfig = previewConfig ?
-      this.JsplumbConfigService.getPreviewConfig() :
-      this.JsplumbConfigService.getEditorConfig();
+    const jsplumbConfig = previewConfig ?
+      this.jsplumbConfigService.getPreviewConfig() :
+      this.jsplumbConfigService.getEditorConfig();
 
     rawPipelineModel.forEach(currentPe => {
       if (!currentPe.settings.disabled) {
-        if (currentPe.type === "stream" || currentPe.type === "set") {
-          this.JsplumbService.dataStreamDropped(
+        if (currentPe.type === 'stream' || currentPe.type === 'set') {
+          this.jsplumbService.dataStreamDropped(
             currentPe.payload.dom,
             currentPe.payload as SpDataStream,
             true,
             previewConfig
           );
         }
-        if (currentPe.type === "sepa") {
-          this.JsplumbService.dataProcessorDropped(
+        if (currentPe.type === 'sepa') {
+          this.jsplumbService.dataProcessorDropped(
             currentPe.payload.dom,
             currentPe.payload as DataProcessorInvocation,
             true,
             previewConfig
           );
         }
-        if (currentPe.type === "action") {
-          this.JsplumbService.dataSinkDropped(
+        if (currentPe.type === 'action') {
+          this.jsplumbService.dataSinkDropped(
             currentPe.payload.dom,
             currentPe.payload as DataSinkInvocation,
             true,
@@ -113,7 +113,7 @@ export class PipelinePositioningService {
     if (autoLayout) {
       this.layoutGraph(
         targetCanvas,
-        "div[id^='jsplumb']",
+        'div[id^=\'jsplumb\']',
         previewConfig ? 75 : 110,
         previewConfig
       );
@@ -128,37 +128,37 @@ export class PipelinePositioningService {
               dimension: number,
               previewConfig: boolean) {
 
-    let jsPlumbBridge = this.JsplumbFactoryService.getJsplumbBridge(previewConfig);
-    let g = new dagre.graphlib.Graph();
-    g.setGraph({rankdir: "LR", ranksep: previewConfig ? "50" : "100"});
+    const jsPlumbBridge = this.jsplumbFactoryService.getJsplumbBridge(previewConfig);
+    const g = new dagre.graphlib.Graph();
+    g.setGraph({rankdir: 'LR', ranksep: previewConfig ? '50' : '100'});
     g.setDefaultEdgeLabel(function () {
-      return {}
+      return {};
     });
-    let nodes = $(canvasId).find(nodeIdentifier).get();
+    const nodes = $(canvasId).find(nodeIdentifier).get();
     nodes.forEach((n) => {
       g.setNode(n.id, {label: n.id, width: dimension, height: dimension});
     });
 
-    let edges = jsPlumbBridge.getAllConnections() as Connection[];
+    const edges = jsPlumbBridge.getAllConnections() as Connection[];
     edges.forEach(edge => {
       g.setEdge(edge.source.id, edge.target.id);
     });
 
     dagre.layout(g);
     g.nodes().forEach(v => {
-      let elementRef = $(`#${v}`);
-      elementRef.css("left", g.node(v).x + "px");
-      elementRef.css("top", g.node(v).y + "px");
+      const elementRef = $(`#${v}`);
+      elementRef.css('left', g.node(v).x + 'px');
+      elementRef.css('top', g.node(v).y + 'px');
     });
   }
 
   layoutGraphFromCanvasMetadata(pipelineCanvasMetadata: PipelineCanvasMetadata) {
     Object.entries(pipelineCanvasMetadata.pipelineElementMetadata).forEach(
       ([key, value]) => {
-        let elementRef = $(`#${key}`);
+        const elementRef = $(`#${key}`);
         if (elementRef) {
-          elementRef.css("left", value.position.x + "px");
-          elementRef.css("top", value.position.y + "px");
+          elementRef.css('left', value.position.x + 'px');
+          elementRef.css('top', value.position.y + 'px');
         }
       }
     );
@@ -168,30 +168,31 @@ export class PipelinePositioningService {
                           previewConfig: boolean,
                           jsplumbConfig: any,
                           jsPlumbBridge: JsplumbBridge) {
-    let source, target;
+    let source;
+    let target;
     jsPlumbBridge.setSuspendDrawing(true);
     rawPipelineModel.forEach(pe => {
-      if (pe.type == "sepa" || pe.type == "action") {
+      if (pe.type === 'sepa' || pe.type === 'action') {
         if (!(pe.settings.disabled) && pe.payload.connectedTo) {
           pe.payload.connectedTo.forEach((connection, index) => {
             source = connection;
             target = pe.payload.dom;
 
-            let sourceEndpointId = "out-" + connection;
-            let inTargetEndpointId = "in-" + index + "-" + pe.payload.dom;
+            const sourceEndpointId = 'out-' + connection;
+            const inTargetEndpointId = 'in-' + index + '-' + pe.payload.dom;
             jsPlumbBridge.connect(
               {
                 uuids: [sourceEndpointId, inTargetEndpointId],
                 detachable: !previewConfig
               }
             );
-            jsPlumbBridge.activateEndpointWithType(sourceEndpointId, true, "token");
-            jsPlumbBridge.activateEndpointWithType(inTargetEndpointId, true, "token");
+            jsPlumbBridge.activateEndpointWithType(sourceEndpointId, true, 'token');
+            jsPlumbBridge.activateEndpointWithType(inTargetEndpointId, true, 'token');
 
             if (!(pe.payload instanceof DataSinkInvocation) &&
-              !(this.ObjectProvider.hasConnectedPipelineElement(pe.payload.dom, rawPipelineModel))) {
-              let outTargetEndpointId = "out-" + pe.payload.dom;
-              jsPlumbBridge.activateEndpointWithType(outTargetEndpointId, true, "token");
+              !(this.objectProvider.hasConnectedPipelineElement(pe.payload.dom, rawPipelineModel))) {
+              const outTargetEndpointId = 'out-' + pe.payload.dom;
+              jsPlumbBridge.activateEndpointWithType(outTargetEndpointId, true, 'token');
             }
           });
         }
diff --git a/ui/src/app/editor/services/pipeline-validation.service.ts b/ui/src/app/editor/services/pipeline-validation.service.ts
index b3329fe..3233509 100644
--- a/ui/src/app/editor/services/pipeline-validation.service.ts
+++ b/ui/src/app/editor/services/pipeline-validation.service.ts
@@ -23,7 +23,7 @@ import { PipelineElementConfig } from '../model/editor.model';
 import { DataProcessorInvocation, DataSinkInvocation } from '../../core-model/gen/streampipes-model';
 import { JsplumbFactoryService } from './jsplumb-factory.service';
 import { UserErrorMessage } from '../../core-model/base/UserErrorMessage';
-import { Connection } from "@jsplumb/core";
+import { Connection } from '@jsplumb/core';
 
 @Injectable()
 export class PipelineValidationService {
@@ -131,7 +131,7 @@ export class PipelineValidationService {
         const g = this.makeGraph(rawPipelineModel, jsplumbBridge);
         const tarjan = dagre.graphlib.alg.tarjan(g);
 
-        return tarjan.length == 1;
+        return tarjan.length === 1;
     }
 
     isInAssembly(rawPipelineModel: PipelineElementConfig[], type) {
diff --git a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts
index 9125e2f..549c30c 100644
--- a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts
+++ b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts
@@ -16,13 +16,13 @@
  *
  */
 
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
-import {Pipeline} from "../../../core-model/gen/streampipes-model";
-import {PipelineElementConfig, PipelineElementUnion} from "../../../editor/model/editor.model";
-import {PipelinePositioningService} from "../../../editor/services/pipeline-positioning.service";
-import {JsplumbService} from "../../../editor/services/jsplumb.service";
-import {ObjectProvider} from "../../../editor/services/object-provider.service";
-import {JsplumbFactoryService} from "../../../editor/services/jsplumb-factory.service";
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Pipeline } from '../../../core-model/gen/streampipes-model';
+import { PipelineElementConfig, PipelineElementUnion } from '../../../editor/model/editor.model';
+import { PipelinePositioningService } from '../../../editor/services/pipeline-positioning.service';
+import { JsplumbService } from '../../../editor/services/jsplumb.service';
+import { ObjectProvider } from '../../../editor/services/object-provider.service';
+import { JsplumbFactoryService } from '../../../editor/services/jsplumb-factory.service';
 
 @Component({
     selector: 'pipeline-preview',
@@ -42,26 +42,24 @@ export class PipelinePreviewComponent implements OnInit {
     @Output()
     selectedElementEmitter: EventEmitter<PipelineElementUnion> = new EventEmitter<PipelineElementUnion>();
 
-    constructor(private PipelinePositioningService: PipelinePositioningService,
-                private JsplumbService: JsplumbService,
-                private JsplumbFactoryService: JsplumbFactoryService,
-                private ObjectProvider: ObjectProvider) {
-        this.PipelinePositioningService = PipelinePositioningService;
-        this.ObjectProvider = ObjectProvider;
+    constructor(private pipelinePositioningService: PipelinePositioningService,
+                private jsplumbService: JsplumbService,
+                private jsplumbFactoryService: JsplumbFactoryService,
+                private objectProvider: ObjectProvider) {
     }
 
     ngOnInit() {
         setTimeout(() => {
-            var elid = "#" + this.jspcanvas;
-            this.rawPipelineModel = this.JsplumbService.makeRawPipeline(this.pipeline, true);
+            const elid = '#' + this.jspcanvas;
+            this.rawPipelineModel = this.jsplumbService.makeRawPipeline(this.pipeline, true);
             setTimeout(() => {
-                this.PipelinePositioningService.displayPipeline(this.rawPipelineModel, elid, true, true);
-                var existingEndpointIds = [];
+                this.pipelinePositioningService.displayPipeline(this.rawPipelineModel, elid, true, true);
+                const existingEndpointIds = [];
                 setTimeout(() => {
-                    this.JsplumbFactoryService.getJsplumbBridge(true).selectEndpoints().each(endpoint => {
+                    this.jsplumbFactoryService.getJsplumbBridge(true).selectEndpoints().each(endpoint => {
                         if (existingEndpointIds.indexOf(endpoint.element.id) === -1) {
                             $(endpoint.element).click(() => {
-                                let payload = this.ObjectProvider.findElement(endpoint.element.id, this.rawPipelineModel).payload;
+                                const payload = this.objectProvider.findElement(endpoint.element.id, this.rawPipelineModel).payload;
                                 this.selectedElementEmitter.emit(payload);
                             });
                             existingEndpointIds.push(endpoint.element.id);