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 2020/02/17 09:32:27 UTC

[incubator-streampipes] branch dev updated (2d62a2d -> bbe92c3)

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

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


    from 2d62a2d  STREAMPIPES-58: Add area chart to widget library
     new fb5e6bb  Add some code improvements to avoid ts compiler warnings
     new 0eac65b  STREAMPIPES-53: Upgrade Angular version to 8
     new bbe92c3  STREAMPIPES-53: Update UI to Angular 9, clean up build system and refactor old AngularJS code to support build optimization

The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 ui/.angular-cli.json                               | 23 ------
 ui/Dockerfile                                      | 31 ++++----
 ui/angular.json                                    | 86 ++++++++++++++++++++++
 ui/browserslist                                    | 12 +++
 ui/deployment/app.module.mst                       | 72 +++---------------
 ui/deployment/appng5.module.mst                    |  4 +-
 ui/deployment/dev/config.yml                       |  2 +-
 ui/deployment/state.config.mst                     |  3 +-
 ui/deployment/toolbar.controller.mst               |  4 +-
 ui/karma.conf.js                                   | 10 +--
 ui/package.json                                    | 66 +++++++++--------
 .../app/CustomMaterial/custom-material.module.ts   | 38 +++++-----
 .../app-asset-monitoring.module.ts                 |  4 +-
 .../create-asset/create-asset.component.ts         |  2 +-
 .../add-pipeline/add-pipeline-dialog.component.ts  |  2 +-
 .../save-dashboard-dialog.component.ts             |  2 +-
 ui/src/app/app-container/app-container.module.ts   |  2 +-
 ui/src/app/app-container/view/view.component.ts    |  6 +-
 ui/src/app/app-overview/app-overview.module.ts     |  4 +-
 .../app-transport-monitoring.module.ts             |  4 +-
 .../transport-selection.component.ts               |  5 +-
 .../app/configuration/configuration.component.ts   |  3 +-
 ui/src/app/configuration/configuration.module.ts   | 14 ++--
 .../consul-configs-boolean.component.ts            |  2 +-
 .../consul-configs-number.component.ts             |  2 +-
 .../consul-configs-password.component.ts           |  6 +-
 .../consul-configs-text.component.ts               |  2 +-
 .../messaging-configuration.component.ts           |  4 +-
 .../pipeline-element-configuration.component.ts    |  5 +-
 ui/src/app/connect/connect.module.ts               |  8 +-
 .../adapter-description.component.ts               |  2 +-
 .../adapter-export-dialog.component.ts             |  4 +-
 .../adapter-upload-dialog.component.ts             |  4 +-
 .../data-marketplace/data-marketplace.component.ts |  2 +-
 .../file-management/file-management.component.ts   |  2 +-
 .../connect/format-component/format.component.ts   |  3 +-
 .../component/adapter-started-dialog.component.ts  |  4 +-
 .../connect/new-adapter/new-adapter.component.ts   |  8 +-
 .../event-property-list.component.ts               |  2 +-
 .../event-property-primitive.component.ts          |  7 +-
 .../event-property-row.component.ts                |  4 +-
 .../event-property/event-property.component.ts     |  4 +-
 .../event-schema/event-schema.component.css        | 30 ++++----
 .../event-schema/event-schema.component.html       |  2 +-
 .../event-schema/event-schema.component.ts         |  8 +-
 .../schema-editor/model/EventPropertyList.ts       |  3 +-
 .../static-collection.component.ts                 |  2 +-
 .../static-color-picker.component.ts               |  8 +-
 .../static-file-input.component.ts                 | 15 ++--
 .../static-free-input.component.ts                 | 10 +--
 .../static-mapping-nary.component.ts               |  4 +-
 .../static-mapping-unary.component.ts              |  4 +-
 .../static-number-input.component.ts               | 10 +--
 .../static-properties/static-property.component.ts |  4 +-
 .../static-secret-input.component.ts               |  8 +-
 .../static-text-input.component.ts                 | 11 +--
 .../static-url-input/static-url-input.component.ts |  7 +-
 ui/src/app/core-ui/core-ui.module.ts               | 13 ++--
 ui/src/app/core-ui/table/table.component.ts        |  2 +-
 ui/src/app/core/http-provider.config.ts            |  4 +-
 ui/src/app/core/icon-provider.config.ts            |  3 +-
 ui/src/app/core/md-theming-provider.config.ts      | 70 ++++++++++++++++++
 ui/src/app/core/root-scope-delegate.decorator.ts   | 28 +++++++
 ui/src/app/dashboard-v2/dashboard.module.ts        |  2 +-
 .../add-visualization-dialog.component.ts          |  2 +-
 .../edit-dashboard-dialog.component.ts             |  2 +-
 .../app/data-explorer/data-explorer.component.ts   |  2 +-
 ui/src/app/data-explorer/data-explorer.module.ts   |  7 +-
 .../datadownloadDialog/dataDownload.dialog.ts      |  5 +-
 .../data-explorer/explorer/explorer.component.html |  2 +-
 .../data-explorer/explorer/explorer.component.ts   |  5 +-
 .../components/freetext/freetext.controller.ts     |  3 +
 .../customize.controller.ts                        | 11 +--
 ui/src/app/editor/editor.module.ts                 |  3 +-
 ui/src/app/home/home.module.ts                     |  3 +-
 ui/src/app/info/info.component.ts                  |  2 +-
 ui/src/app/info/info.module.ts                     | 16 ++--
 ui/src/app/layout/app.controller.ts                |  3 +
 ui/src/app/login/login.controller.ts               |  6 +-
 ui/src/app/login/startup/startup.controller.ts     |  5 +-
 .../dialog/pipeline-status-dialog.controller.ts    |  6 +-
 .../dialog/pipeline-status-dialog.tmpl.html        |  2 +-
 ui/src/app/pipelines/pipelines.module.ts           |  5 +-
 ui/src/app/services/auth.service.ts                |  5 +-
 ui/src/app/services/jsplumb.service.ts             | 13 ++--
 ui/src/app/services/object-provider.service.ts     |  2 +-
 ui/src/app/services/pipeline-editor.service.ts     |  2 +-
 .../app/services/pipeline-positioning.service.ts   |  6 +-
 ui/src/app/services/rest-api.service.ts            |  2 +-
 .../route-transition-interceptor.service.ts        |  5 +-
 ui/src/app/services/tour/shepherd.service.ts       |  5 +-
 ui/src/app/services/tour/tour-provider.service.ts  |  7 +-
 ui/src/app/services/transition.service.ts          |  3 +-
 ui/src/index.html                                  |  2 +
 ui/src/polyfills.ts                                | 68 ++++++-----------
 ui/src/scss/sp/main.scss                           |  4 +
 ui/src/tsconfig.app.json                           | 14 ++--
 ui/src/tsconfig.spec.json                          |  3 +-
 ui/tsconfig.json                                   | 14 +++-
 ui/tslint.json                                     | 10 +--
 ui/webpack.config.base.js                          | 26 ++++---
 ui/webpack.config.prod.js                          |  6 +-
 ui/webpack.partial.base.js                         | 32 ++++++++
 ...ebpack.config.dev.js => webpack.partial.dev.js} | 28 ++++---
 ui/{webpack.config.js => webpack.partial.js}       | 40 +++++-----
 ui/webpack.partial.prod.js                         | 26 +++++++
 106 files changed, 675 insertions(+), 460 deletions(-)
 delete mode 100644 ui/.angular-cli.json
 create mode 100644 ui/angular.json
 create mode 100644 ui/browserslist
 create mode 100644 ui/src/app/core/md-theming-provider.config.ts
 create mode 100644 ui/src/app/core/root-scope-delegate.decorator.ts
 create mode 100644 ui/webpack.partial.base.js
 copy ui/{webpack.config.dev.js => webpack.partial.dev.js} (57%)
 copy ui/{webpack.config.js => webpack.partial.js} (92%)
 create mode 100644 ui/webpack.partial.prod.js


[incubator-streampipes] 02/03: STREAMPIPES-53: Upgrade Angular version to 8

Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit 0eac65b841ea4755400295bfd783ea679cc7e033
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Feb 15 22:24:07 2020 +0100

    STREAMPIPES-53: Upgrade Angular version to 8
---
 ui/package.json                                    | 32 +++++++++++-----------
 ui/src/app/app-container/view/view.component.ts    |  2 +-
 .../transport-selection.component.ts               |  2 +-
 .../pipeline-element-configuration.component.ts    |  2 +-
 .../connect/new-adapter/new-adapter.component.ts   |  4 +--
 .../event-schema/event-schema.component.css        | 30 ++++++++++----------
 .../event-schema/event-schema.component.ts         |  2 +-
 .../datadownloadDialog/dataDownload.dialog.ts      |  2 +-
 ui/tsconfig.json                                   |  4 ++-
 ui/tslint.json                                     |  8 +++---
 10 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index eb5088f..8eb1a20 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -15,18 +15,18 @@
     "lint": "tslint -c tslint.json 'src/**/*.ts*"
   },
   "dependencies": {
-    "@angular/animations": "7.2.9",
+    "@angular/animations": "8.2.14",
     "@angular/cdk": "7.3.7",
-    "@angular/common": "7.2.9",
-    "@angular/compiler": "7.2.9",
-    "@angular/core": "7.2.9",
+    "@angular/common": "8.2.14",
+    "@angular/compiler": "8.2.14",
+    "@angular/core": "8.2.14",
     "@angular/flex-layout": "7.0.0-beta.23",
-    "@angular/forms": "7.2.9",
+    "@angular/forms": "8.2.14",
     "@angular/material": "7.3.7",
-    "@angular/platform-browser": "7.2.9",
-    "@angular/platform-browser-dynamic": "7.2.9",
-    "@angular/router": "7.2.9",
-    "@angular/upgrade": "7.2.9",
+    "@angular/platform-browser": "8.2.14",
+    "@angular/platform-browser-dynamic": "8.2.14",
+    "@angular/router": "8.2.14",
+    "@angular/upgrade": "8.2.14",
     "@ngui/datetime-picker": "0.16.2",
     "@stomp/ng2-stompjs": "^7.2.0",
     "@swimlane/ngx-charts": "^13.0.2",
@@ -86,18 +86,18 @@
     "rxjs-compat": "^6.3.3",
     "shepherd.js": "2.4.0",
     "slick-carousel": "1.6.0",
-    "zone.js": "^0.8.29"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular/cli": "7.3.6",
-    "@angular/compiler-cli": "7.2.9",
-    "@ngtools/webpack": "7.3.6",
+    "@angular/cli": "8.3.25",
+    "@angular/compiler-cli": "8.2.14",
+    "@ngtools/webpack": "8.3.25",
     "@types/angular": "^1.6.43",
     "@types/jasmine": "~2.8.3",
     "@types/jqueryui": "^1.12.7",
     "@types/node": "11.11.3",
     "@types/rx": "^4.1.1",
-    "codelyzer": "^4.1.0",
+    "codelyzer": "^5.0.1",
     "copy-webpack-plugin": "^5.0.2",
     "compression-webpack-plugin": "^3.0.0",
     "css-loader": "^0.28.11",
@@ -123,7 +123,7 @@
     "to-string-loader": "^1.1.5",
     "tslint": "^5.15.0",
     "tslint-config-prettier": "^1.15.0",
-    "typescript": "3.2.4",
+    "typescript": "3.5.3",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.2.3",
@@ -131,4 +131,4 @@
     "webpack-bundle-analyzer": "^3.4.1",
     "webpack-merge": "^4.2.1"
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/app/app-container/view/view.component.ts b/ui/src/app/app-container/view/view.component.ts
index 2976a79..ae3ccfb 100644
--- a/ui/src/app/app-container/view/view.component.ts
+++ b/ui/src/app/app-container/view/view.component.ts
@@ -95,7 +95,7 @@ SystemJS.set('ngx-color-picker', SystemJS.newModule(ngxColorPicker));
 export class ViewComponent implements AfterViewInit {
 
     @Input() installedApp: InstalledApp;
-    @ViewChild('pluginHost', { read: ViewContainerRef }) content: ViewContainerRef;
+    @ViewChild('pluginHost', { read: ViewContainerRef, static: true }) content: ViewContainerRef;
 
     constructor(private compiler: Compiler, private injector: Injector) {
     }
diff --git a/ui/src/app/app-transport-monitoring/components/transport-selection/transport-selection.component.ts b/ui/src/app/app-transport-monitoring/components/transport-selection/transport-selection.component.ts
index e04945b..109eb38 100644
--- a/ui/src/app/app-transport-monitoring/components/transport-selection/transport-selection.component.ts
+++ b/ui/src/app/app-transport-monitoring/components/transport-selection/transport-selection.component.ts
@@ -32,7 +32,7 @@ export class TransportSelectionComponent {
     transportProcesses: TransportProcessEventModel[] = [];
 
     displayedColumns: string[] = ['position', 'startTime', 'endTime', 'action'];
-    @ViewChild(MatPaginator, {}) paginator: MatPaginator;
+    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
     dataSource = new MatTableDataSource<TransportProcessEventModel>();
 
     @Output() selectedProcess = new EventEmitter<TransportProcessEventModel>();
diff --git a/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.ts b/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.ts
index 63c19b1..9c297d1 100644
--- a/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.ts
+++ b/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.ts
@@ -40,7 +40,7 @@ export class PipelineElementConfigurationComponent {
     consulServices: StreampipesPeContainer[];
 
     displayedColumns: string[] = ['status', 'name', 'action'];
-    @ViewChild(MatPaginator, {}) paginator: MatPaginator;
+    @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
     dataSource = new MatTableDataSource<StreampipesPeContainer>();
 
     expandedElement: any;
diff --git a/ui/src/app/connect/new-adapter/new-adapter.component.ts b/ui/src/app/connect/new-adapter/new-adapter.component.ts
index 2233cbf..af95b93 100644
--- a/ui/src/app/connect/new-adapter/new-adapter.component.ts
+++ b/ui/src/app/connect/new-adapter/new-adapter.component.ts
@@ -79,7 +79,7 @@ export class NewAdapterComponent implements OnInit {
     @Output()
     updateAdapterEmitter: EventEmitter<void> = new EventEmitter<void>();
 
-    @ViewChild('stepper') myStepper: MatStepper;
+    @ViewChild('stepper', { static: true }) myStepper: MatStepper;
 
     allFormats: FormatDescription[] = [];
 
@@ -111,7 +111,7 @@ export class NewAdapterComponent implements OnInit {
     // deactivates all edit functions when user starts a template
     isEditable: Boolean = true;
 
-    @ViewChild(EventSchemaComponent)
+    @ViewChild(EventSchemaComponent, { static: true })
     private eventSchemaComponent: EventSchemaComponent;
 
     isSetAdapter: Boolean = false;
diff --git a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.css b/ui/src/app/connect/schema-editor/event-schema/event-schema.component.css
index 5b0d9cf..f5b67dd 100644
--- a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.css
+++ b/ui/src/app/connect/schema-editor/event-schema/event-schema.component.css
@@ -55,7 +55,7 @@ ul {
   padding: 10px;
   width: 95%;
 }
-:host /deep/ .tree-node {
+:host ::ng-deep .tree-node {
   color: #000;
   border-left: none;
   border-right: none;
@@ -65,19 +65,19 @@ ul {
   background: transparent;
   margin: 0;
 }
-:host /deep/ tree-node-expander {
+:host ::ng-deep tree-node-expander {
   display: none;
 }
-:host /deep/ .node-content-wrapper {
+:host ::ng-deep .node-content-wrapper {
   flex: 1;
 }
-:host /deep/ .node-content-wrapper:hover {
+:host ::ng-deep .node-content-wrapper:hover {
   background-color: darkgrey;
 }
-:host /deep/ .node-content-wrapper-active, .node-content-wrapper-focused {
+:host ::ng-deep .node-content-wrapper-active, .node-content-wrapper-focused {
   background: transparent;
 }
-:host /deep/ .node-drop-slot {
+:host ::ng-deep .node-drop-slot {
   position: relative;
   /*background: red;*/
   /* padding: 8px 0;*/
@@ -85,22 +85,22 @@ ul {
   margin: -7px 0;
   z-index: 1000;
 }
-:host /deep/ .node-drop-slot.is-dragging-over {
+:host ::ng-deep .node-drop-slot.is-dragging-over {
   background-color: rgb(27, 20, 100);
   border: none;
 }
-:host /deep/ .tree-node-expanded {
+:host ::ng-deep .tree-node-expanded {
   border-left: 2px dashed black;
 }
-:host /deep/ tree-viewport {
+:host ::ng-deep tree-viewport {
   overflow: hidden;
 }
 
-:host /deep/ .tree-node-level-1 {
+:host ::ng-deep .tree-node-level-1 {
   border: none;
 }
 
-:host /deep/ .node-content-wrapper-focused, .node-content-wrapper:hover, .node-content-wrapper-active, .node-content-wrapper.node-content-wrapper-active:hover, .node-content-wrapper-active.node-content-wrapper-focused {
+:host ::ng-deep .node-content-wrapper-focused, .node-content-wrapper:hover, .node-content-wrapper-active, .node-content-wrapper.node-content-wrapper-active:hover, .node-content-wrapper-active.node-content-wrapper-focused {
   background: none !important;
 }
 
@@ -109,19 +109,19 @@ ul {
   margin-right: 3px;
 }
 
-:host /deep/ .node-content-wrapper .dimension-star {
+:host ::ng-deep .node-content-wrapper .dimension-star {
   opacity: 0.2;
 }
 
-:host /deep/ .node-content-wrapper:hover .dimension-star {
+:host ::ng-deep .node-content-wrapper:hover .dimension-star {
   opacity: 1;
 }
 
-:host /deep/ .node-content-wrapper mat-checkbox {
+:host ::ng-deep .node-content-wrapper mat-checkbox {
   opacity: 0.2;
 }
 
-:host /deep/ .node-content-wrapper:hover mat-checkbox {
+:host ::ng-deep .node-content-wrapper:hover mat-checkbox {
   opacity: 1;
 }
 
diff --git a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts b/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts
index 7c2f9bd..2480156 100644
--- a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts
+++ b/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts
@@ -52,7 +52,7 @@ export class EventSchemaComponent implements OnChanges {
   @Output() eventSchemaChange = new EventEmitter<EventSchema>();
   @Output() oldEventSchemaChange = new EventEmitter<EventSchema>();
 
-  @ViewChild(TreeComponent) tree: TreeComponent;
+  @ViewChild(TreeComponent, { static: true }) tree: TreeComponent;
 
   schemaGuess: GuessSchema = new GuessSchema();
   countSelected: number = 0;
diff --git a/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts b/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts
index 808081b..73eedf1 100644
--- a/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts
+++ b/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts
@@ -34,7 +34,7 @@ export class DataDownloadDialog {
     downloadFinish: boolean = false;
     downloadedMBs: number = undefined;
 
-    @ViewChild('stepper') stepper: MatStepper;
+    @ViewChild('stepper', { static: true }) stepper: MatStepper;
 
     downloadHttpRequestSubscribtion;
 
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index fc7e3a8..10b43f6 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -1,13 +1,15 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "downlevelIteration": true,
+    "module": "esnext",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],
diff --git a/ui/tslint.json b/ui/tslint.json
index fd03a59..38f302b 100644
--- a/ui/tslint.json
+++ b/ui/tslint.json
@@ -88,12 +88,12 @@
     "directive-selector": [true, "attribute", "sp", "camelCase"],
     "component-selector": [true, "element", "sp", "kebab-case"],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true


[incubator-streampipes] 03/03: STREAMPIPES-53: Update UI to Angular 9, clean up build system and refactor old AngularJS code to support build optimization

Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit bbe92c33f06eb6dd1b0bdbcae457576ba3edd714
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Feb 17 10:31:17 2020 +0100

    STREAMPIPES-53: Update UI to Angular 9, clean up build system and refactor old AngularJS code to support build optimization
---
 ui/.angular-cli.json                               | 23 ------
 ui/Dockerfile                                      | 31 ++++----
 ui/angular.json                                    | 86 ++++++++++++++++++++++
 ui/browserslist                                    | 12 +++
 ui/deployment/app.module.mst                       | 72 +++---------------
 ui/deployment/appng5.module.mst                    |  4 +-
 ui/deployment/dev/config.yml                       |  2 +-
 ui/deployment/state.config.mst                     |  3 +-
 ui/deployment/toolbar.controller.mst               |  4 +-
 ui/karma.conf.js                                   | 10 +--
 ui/package.json                                    | 64 +++++++++-------
 .../app/CustomMaterial/custom-material.module.ts   | 38 +++++-----
 .../app-asset-monitoring.module.ts                 |  4 +-
 .../create-asset/create-asset.component.ts         |  2 +-
 .../add-pipeline/add-pipeline-dialog.component.ts  |  2 +-
 .../save-dashboard-dialog.component.ts             |  2 +-
 ui/src/app/app-container/app-container.module.ts   |  2 +-
 ui/src/app/app-container/view/view.component.ts    |  4 +-
 ui/src/app/app-overview/app-overview.module.ts     |  4 +-
 .../app-transport-monitoring.module.ts             |  4 +-
 .../transport-selection.component.ts               |  3 +-
 .../app/configuration/configuration.component.ts   |  3 +-
 ui/src/app/configuration/configuration.module.ts   | 14 ++--
 .../pipeline-element-configuration.component.ts    |  3 +-
 ui/src/app/connect/connect.module.ts               |  8 +-
 .../adapter-description.component.ts               |  2 +-
 .../adapter-export-dialog.component.ts             |  2 +-
 .../adapter-upload-dialog.component.ts             |  2 +-
 .../data-marketplace/data-marketplace.component.ts |  2 +-
 .../file-management/file-management.component.ts   |  2 +-
 .../component/adapter-started-dialog.component.ts  |  2 +-
 .../connect/new-adapter/new-adapter.component.ts   |  4 +-
 .../event-property-row.component.ts                |  4 +-
 .../event-schema/event-schema.component.html       |  2 +-
 ui/src/app/core-ui/core-ui.module.ts               | 13 ++--
 ui/src/app/core-ui/table/table.component.ts        |  2 +-
 ui/src/app/core/http-provider.config.ts            |  4 +-
 ui/src/app/core/icon-provider.config.ts            |  3 +-
 ui/src/app/core/md-theming-provider.config.ts      | 70 ++++++++++++++++++
 ui/src/app/core/root-scope-delegate.decorator.ts   | 28 +++++++
 ui/src/app/dashboard-v2/dashboard.module.ts        |  2 +-
 .../add-visualization-dialog.component.ts          |  2 +-
 .../edit-dashboard-dialog.component.ts             |  2 +-
 .../app/data-explorer/data-explorer.component.ts   |  2 +-
 ui/src/app/data-explorer/data-explorer.module.ts   |  7 +-
 .../datadownloadDialog/dataDownload.dialog.ts      |  3 +-
 .../data-explorer/explorer/explorer.component.ts   |  5 +-
 .../components/freetext/freetext.controller.ts     |  3 +
 .../customize.controller.ts                        | 11 +--
 ui/src/app/editor/editor.module.ts                 |  3 +-
 ui/src/app/home/home.module.ts                     |  3 +-
 ui/src/app/info/info.component.ts                  |  2 +-
 ui/src/app/info/info.module.ts                     | 16 ++--
 ui/src/app/layout/app.controller.ts                |  3 +
 ui/src/app/login/login.controller.ts               |  6 +-
 ui/src/app/login/startup/startup.controller.ts     |  5 +-
 .../dialog/pipeline-status-dialog.controller.ts    |  6 +-
 .../dialog/pipeline-status-dialog.tmpl.html        |  2 +-
 ui/src/app/pipelines/pipelines.module.ts           |  5 +-
 ui/src/app/services/auth.service.ts                |  5 +-
 ui/src/app/services/jsplumb.service.ts             | 13 ++--
 ui/src/app/services/object-provider.service.ts     |  2 +-
 ui/src/app/services/pipeline-editor.service.ts     |  2 +-
 .../app/services/pipeline-positioning.service.ts   |  6 +-
 ui/src/app/services/rest-api.service.ts            |  2 +-
 .../route-transition-interceptor.service.ts        |  5 +-
 ui/src/app/services/tour/shepherd.service.ts       |  5 +-
 ui/src/app/services/tour/tour-provider.service.ts  |  7 +-
 ui/src/app/services/transition.service.ts          |  3 +-
 ui/src/index.html                                  |  2 +
 ui/src/polyfills.ts                                | 68 ++++++-----------
 ui/src/scss/sp/main.scss                           |  4 +
 ui/src/tsconfig.app.json                           | 14 ++--
 ui/src/tsconfig.spec.json                          |  3 +-
 ui/tsconfig.json                                   | 10 ++-
 ui/tslint.json                                     |  2 +-
 ui/webpack.config.base.js                          | 26 ++++---
 ui/webpack.config.prod.js                          |  6 +-
 ui/webpack.partial.base.js                         | 32 ++++++++
 ui/webpack.partial.dev.js                          | 58 +++++++++++++++
 .../http-provider.config.ts => webpack.partial.js} |  8 +-
 ui/webpack.partial.prod.js                         | 26 +++++++
 82 files changed, 608 insertions(+), 335 deletions(-)

diff --git a/ui/.angular-cli.json b/ui/.angular-cli.json
deleted file mode 100644
index b2e5873..0000000
--- a/ui/.angular-cli.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "",
-      "assets": [
-        "assets"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "sp",
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": []
-    }
-  ]
-}
diff --git a/ui/Dockerfile b/ui/Dockerfile
index 13bd1a4..173aea2 100644
--- a/ui/Dockerfile
+++ b/ui/Dockerfile
@@ -16,21 +16,22 @@
 ARG BASE_IMAGE=nginx
 FROM $BASE_IMAGE
 
-COPY dist/assets/img/ /usr/share/nginx/html/assets/img/
-COPY dist/assets/css/ /usr/share/nginx/html/assets/css/
-COPY dist/assets/lib/ /usr/share/nginx/html/assets/lib/
-COPY dist/assets/templates/ /usr/share/nginx/html/assets/templates/
-COPY dist/assets/fonts/ /usr/share/nginx/html/assets/fonts/
-COPY dist/index.html /usr/share/nginx/html/
-COPY dist/main.bundle.js /usr/share/nginx/html/
-COPY dist/main.bundle.js.gz /usr/share/nginx/html/
-COPY dist/polyfills.bundle.js /usr/share/nginx/html/
-COPY dist/polyfills.bundle.js.gz /usr/share/nginx/html/
-#COPY dist/runtime.bundle.js /usr/share/nginx/html/
-COPY dist/style.bundle.js /usr/share/nginx/html/
-COPY dist/style.bundle.js.gz /usr/share/nginx/html/
-COPY dist/style.css /usr/share/nginx/html/
-COPY dist/style.css.gz /usr/share/nginx/html/
+COPY dist/ /usr/share/nginx/html/
+#COPY dist/assets/img/ /usr/share/nginx/html/assets/img/
+#COPY dist/assets/css/ /usr/share/nginx/html/assets/css/
+#COPY dist/assets/lib/ /usr/share/nginx/html/assets/lib/
+#COPY dist/assets/templates/ /usr/share/nginx/html/assets/templates/
+#COPY dist/assets/fonts/ /usr/share/nginx/html/assets/fonts/
+#COPY dist/index.html /usr/share/nginx/html/
+#COPY dist/main.bundle.js /usr/share/nginx/html/
+#COPY dist/main.bundle.js.gz /usr/share/nginx/html/
+#COPY dist/polyfills.bundle.js /usr/share/nginx/html/
+#COPY dist/polyfills.bundle.js.gz /usr/share/nginx/html/
+##COPY dist/runtime.bundle.js /usr/share/nginx/html/
+#COPY dist/style.bundle.js /usr/share/nginx/html/
+#COPY dist/style.bundle.js.gz /usr/share/nginx/html/
+#COPY dist/style.css /usr/share/nginx/html/
+#COPY dist/style.css.gz /usr/share/nginx/html/
 
 #COPY javadoc/ /usr/share/nginx/html/javadoc
 
diff --git a/ui/angular.json b/ui/angular.json
new file mode 100644
index 0000000..aff1003
--- /dev/null
+++ b/ui/angular.json
@@ -0,0 +1,86 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "app": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "aot": true,
+            "outputPath": "dist/",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/scss/main.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "customWebpackConfig": {
+                "path": "./webpack.partial.prod.js"
+              }
+            },
+            "development": {
+              "customWebpackConfig": {
+                "path": "./webpack.partial.dev.js"
+              }
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "options": {
+            "browserTarget": "app:build:development"
+          },
+          "configurations": {
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "app:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "app-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application"
+    }
+  },
+  "defaultProject": "app"
+}
\ No newline at end of file
diff --git a/ui/browserslist b/ui/browserslist
new file mode 100644
index 0000000..8084853
--- /dev/null
+++ b/ui/browserslist
@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
diff --git a/ui/deployment/app.module.mst b/ui/deployment/app.module.mst
index cd4c173..88977eb 100644
--- a/ui/deployment/app.module.mst
+++ b/ui/deployment/app.module.mst
@@ -34,6 +34,9 @@ import spNotifications from './notifications/notifications.module';
 import spAppLinks from './applinks/applinks.module';
 import spPipelineDetails from './pipeline-details/pipeline-details.module';
 import { SpButtonDirective } from "./core/button/button.directive";
+import mdThemingProviderConfig from "./core/md-theming-provider.config";
+import rootScopeDelegate from "./core/root-scope-delegate.decorator";
+
 {{#modulesActive}}
 {{^ng5}}
 import {{module}} from '{{{path}}}';
@@ -60,74 +63,17 @@ export const Ng1AppModule = angular
         {{/ng5}}
         {{/modulesActive}}
     ])
- .decorator('$rootScope', $delegate => {
-    const originalDigest = $delegate.$digest;
-    $delegate.$digest = () => {
-      if (!$delegate.$$phase) {
-        originalDigest.call($delegate);
-      }
-    };
-    return $delegate;
-  })
+    .decorator('$rootScope', rootScopeDelegate)
     .config(['$urlServiceProvider', ($urlService) => $urlService.deferIntercept()])
-    .run(["$rootScope", "$transitions", "ObjectProvider", "TransitionService", "RouteTransitionInterceptorService",
-        function ($rootScope, $transitions, ObjectProvider, TransitionService, RouteTransitionInterceptorService) {
+    .run(["$rootScope", "$transitions", "TransitionService", "RouteTransitionInterceptorService",
+        function ($rootScope, $transitions, TransitionService, RouteTransitionInterceptorService) {
             $transitions.onBefore({}, transition => {
               return RouteTransitionInterceptorService.onTransitionStarted(transition);
             });
             $transitions.onStart({}, transition => {
                 return TransitionService.onTransitionStarted(transition);
             });
-            $rootScope.state = new ObjectProvider.State();
             window['loading_screen'].finish();
-    }]).config(function($mdThemingProvider) {
-
-        $mdThemingProvider.definePalette('streamPipesPrimary', {
-            '50': '304269',
-            '100': '304269',
-            '200': '304269',
-            '300': '304269',
-            '400': '304269',
-            '500': '304269',
-            '600': '304269',
-            '700': '003B3D',
-            '800': '39b54a',
-            '900': '39b54a',
-            'A100': '39b54a',
-            'A200': '39b54a',
-            'A400': '39b54a',
-            'A700': '39b54a',
-            'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
-                                                // on this palette should be dark or light
-
-            'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
-                '200', '300', '400', 'A100'],
-        });
-
-        $mdThemingProvider.definePalette('streamPipesAccent', {
-            '50': 'DF5A49',
-            '100': 'DF5A49',
-            '200': '007F54',
-            '300': '007F54',
-            '400': '39B54A',
-            '500': '45DA59',
-            '600': '45DA59',
-            '700': '45DA59',
-            '800': '45DA59',
-            '900': '1B1464',
-            'A100': '1B1464',
-            'A200': '1B1464',
-            'A400': '1B1464',
-            'A700': '1B1464',
-            'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
-                                                // on this palette should be dark or light
-
-            'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
-                '200', '300', '400', 'A100'],
-        });
-
-        $mdThemingProvider.theme('default')
-            .primaryPalette('streamPipesPrimary')
-            .accentPalette('streamPipesAccent')
-
-    }).directive("spButton", ['$mdButtonInkRipple', '$mdTheming', '$mdAria', '$mdInteraction', ($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction) => new SpButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction)]);
\ No newline at end of file
+    }])
+    .config(mdThemingProviderConfig)
+    .directive("spButton", ['$mdButtonInkRipple', '$mdTheming', '$mdAria', '$mdInteraction', ($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction) => new SpButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction)]);
\ No newline at end of file
diff --git a/ui/deployment/appng5.module.mst b/ui/deployment/appng5.module.mst
index c50e241..54be583 100644
--- a/ui/deployment/appng5.module.mst
+++ b/ui/deployment/appng5.module.mst
@@ -24,7 +24,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';
 import { HttpClientModule } from '@angular/common/http';
-import { MatIconModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';
 
@@ -82,6 +82,6 @@ export class AppModule {
     }
 
     ngDoBootstrap() {
-        this.upgrade.bootstrap(document.body, ['streamPipesApp']);
+        this.upgrade.bootstrap(document.body, ['streamPipesApp'], {strictDi: true});
     }
 }
\ No newline at end of file
diff --git a/ui/deployment/dev/config.yml b/ui/deployment/dev/config.yml
index cf79df7..0424e05 100644
--- a/ui/deployment/dev/config.yml
+++ b/ui/deployment/dev/config.yml
@@ -21,7 +21,7 @@ modules:
   - spEditor
   - spPipelines
   - spConnect
-  - spDashboard
+#  - spDashboard
   - spAppOverview
   - spAdd
   - spMyElements
diff --git a/ui/deployment/state.config.mst b/ui/deployment/state.config.mst
index 3ebd9ed..8b3c086 100644
--- a/ui/deployment/state.config.mst
+++ b/ui/deployment/state.config.mst
@@ -16,7 +16,6 @@
  *
  */
 
-//stateConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
 declare const require: any;
 {{#modulesActive}}
 {{#ng5}}
@@ -169,3 +168,5 @@ export default function stateConfig($stateProvider, $urlRouterProvider) {
         {{/ng5}}
         {{/modulesActive}};
 };
+
+stateConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
\ No newline at end of file
diff --git a/ui/deployment/toolbar.controller.mst b/ui/deployment/toolbar.controller.mst
index f5905c7..88430c4 100644
--- a/ui/deployment/toolbar.controller.mst
+++ b/ui/deployment/toolbar.controller.mst
@@ -250,4 +250,6 @@ export class ToolbarController {
         this.feedbackOpen = false;
     }
 
-};
\ No newline at end of file
+};
+
+ToolbarController.$inject = ['$mdSidenav', '$mdUtil', 'RestApi', '$state', '$window', '$location', 'AuthStatusService', '$scope'];
\ No newline at end of file
diff --git a/ui/karma.conf.js b/ui/karma.conf.js
index 6af4774..4cb07db 100644
--- a/ui/karma.conf.js
+++ b/ui/karma.conf.js
@@ -22,7 +22,7 @@
 module.exports = function (config) {
     config.set({
         basePath: '',
-        frameworks: ['jasmine', '@angular/cli'],
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
         plugins: [
             require('karma-jasmine'),
             require('karma-chrome-launcher'),
@@ -30,18 +30,16 @@ module.exports = function (config) {
             require('karma-jasmine-html-reporter'),
             require('karma-verbose-reporter'),
             require('karma-coverage-istanbul-reporter'),
-            require('@angular/cli/plugins/karma')
+            require('@angular-devkit/build-angular/plugins/karma')
         ],
         client: {
             clearContext: false // leave Jasmine Spec Runner output visible in browser
         },
         coverageIstanbulReporter: {
-            reports: ['html', 'lcovonly'],
+            dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'lcovonly'],
             fixWebpackSourcePaths: true
         },
-        angularCli: {
-            environment: 'dev'
-        },
+        
         customLaunchers: {
             ChromeHeadless: {
                 base: 'Chrome',
diff --git a/ui/package.json b/ui/package.json
index 8eb1a20..4f22097 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "apache-streampipes",
-  "version": "0.0.1",
+  "version": "0.65.1-SNAPSHOT",
   "description": "Apache StreamPipes (incubating) user interface",
   "homepage": "http://streampipes.apache.org",
   "repository": {
@@ -8,43 +8,49 @@
     "url": "https://github.com/apache/incubator-streampipes"
   },
   "scripts": {
-    "start": "node ./deployment/prebuild.js && webpack-dev-server -d --env=dev",
+    "start": "node ./deployment/prebuild.js && ng serve",
+    "start-webpack": "node ./deployment/prebuild.js && webpack-dev-server -d --env=dev",
     "watchtest": "node ./deployment/prebuild.js && karma start ./karma.conf.js --no-auto-watch --single-run",
     "test": "node ./deployment/prebuild.js && karma start ./karma.conf.js",
-    "build": "node ./deployment/prebuild.js && webpack --display-modules --progress --env=prod",
+    "build": "node ./deployment/prebuild.js && set NODE_OPTIONS=--max-old-space-size=10192 && ng build --prod --stats-json",
+    "build-webpack": "node ./deployment/prebuild.js && webpack --display-modules --progress --env=prod",
     "lint": "tslint -c tslint.json 'src/**/*.ts*"
   },
   "dependencies": {
-    "@angular/animations": "8.2.14",
-    "@angular/cdk": "7.3.7",
-    "@angular/common": "8.2.14",
-    "@angular/compiler": "8.2.14",
-    "@angular/core": "8.2.14",
-    "@angular/flex-layout": "7.0.0-beta.23",
-    "@angular/forms": "8.2.14",
-    "@angular/material": "7.3.7",
-    "@angular/platform-browser": "8.2.14",
-    "@angular/platform-browser-dynamic": "8.2.14",
-    "@angular/router": "8.2.14",
-    "@angular/upgrade": "8.2.14",
+    "@angular/animations": "9.0.1",
+    "@angular/cdk": "9.0.0",
+    "@angular/common": "9.0.1",
+    "@angular/compiler": "9.0.1",
+    "@angular/core": "9.0.1",
+    "@angular/flex-layout": "9.0.0-beta.29",
+    "@angular/forms": "9.0.1",
+    "@angular/material": "9.0.0",
+    "@angular/platform-browser": "9.0.1",
+    "@angular/platform-browser-dynamic": "9.0.1",
+    "@angular/router": "9.0.1",
+    "@angular/upgrade": "9.0.1",
     "@ngui/datetime-picker": "0.16.2",
     "@stomp/ng2-stompjs": "^7.2.0",
     "@swimlane/ngx-charts": "^13.0.2",
-    "@uirouter/angular-hybrid": "7.0.0",
+    "@uirouter/angular-hybrid": "10.0.1",
+    "@uirouter/core": "6.0.4",
+    "@uirouter/angular": "^6.0.1",
+    "@uirouter/angularjs":  "^1.0.25",
+    "@uirouter/rx": "^0.6.5",
     "angular": "1.7.7",
     "angular-animate": "1.7.7",
     "angular-aria": "1.7.7",
     "angular-clipboard": "1.4.2",
     "angular-cookies": "1.7.7",
     "angular-datatables": "0.6.2",
-    "angular-gridster2": "7.2.0",
+    "angular-gridster2": "8.3.0",
     "angular-loading-bar": "0.8.0",
     "angular-markdown-directive": "0.3.1",
     "angular-material": "1.1.18",
     "angular-material-icons": "0.4.0",
     "angular-messages": "1.7.7",
     "angular-notification-icons": "0.4.4",
-    "angular-plotly.js": "1.3.2",
+    "angular-plotly.js": "1.5.0",
     "angular-resource": "1.7.7",
     "angular-route": "1.7.7",
     "angular-rt-popup": "1.0.6",
@@ -72,7 +78,7 @@
     "lodash": "3.10.1",
     "ng-dynamic-component": "4.0.3",
     "ng-file-upload": "9.0.13",
-    "ng-pick-datetime": "7.0.0",
+    "@danielmoncada/angular-datetime-picker": "^9.2.0",
     "ng-prettyjson": "0.1.8",
     "ng-showdown": "^1.1.0",
     "ng-simple-slideshow": "^1.2.9",
@@ -80,24 +86,26 @@
     "ng2-dragula": "^1.5.0",
     "ngmap": "1.18.0",
     "ngx-color-picker": "^7.5.0",
-    "plotly.js": "1.49.3",
     "prismjs": "^1.16.0",
     "rxjs": "^6.3.3",
     "rxjs-compat": "^6.3.3",
     "shepherd.js": "2.4.0",
     "slick-carousel": "1.6.0",
-    "zone.js": "~0.9.1"
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular/cli": "8.3.25",
-    "@angular/compiler-cli": "8.2.14",
-    "@ngtools/webpack": "8.3.25",
+    "@angular-builders/custom-webpack": "^8.4.1",
+    "@angular-devkit/build-angular": "~0.900.2",
+    "@angular/cli": "9.0.2",
+    "@angular/compiler-cli": "9.0.1",
+    "@ngtools/webpack": "9.0.2",
     "@types/angular": "^1.6.43",
     "@types/jasmine": "~2.8.3",
     "@types/jqueryui": "^1.12.7",
-    "@types/node": "11.11.3",
+    "@types/node": "^12.11.1",
     "@types/rx": "^4.1.1",
-    "codelyzer": "^5.0.1",
+    "codelyzer": "^5.1.2",
     "copy-webpack-plugin": "^5.0.2",
     "compression-webpack-plugin": "^3.0.0",
     "css-loader": "^0.28.11",
@@ -113,7 +121,7 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-verbose-reporter": "0.0.6",
-    "mini-css-extract-plugin": "^0.5.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "mustache": "^2.3.0",
     "node-sass": "^4.8.3",
     "prettier": "1.14.2",
@@ -123,7 +131,7 @@
     "to-string-loader": "^1.1.5",
     "tslint": "^5.15.0",
     "tslint-config-prettier": "^1.15.0",
-    "typescript": "3.5.3",
+    "typescript": "3.7.5",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.2.3",
diff --git a/ui/src/app/CustomMaterial/custom-material.module.ts b/ui/src/app/CustomMaterial/custom-material.module.ts
index cc6eaec..a52f651 100644
--- a/ui/src/app/CustomMaterial/custom-material.module.ts
+++ b/ui/src/app/CustomMaterial/custom-material.module.ts
@@ -18,26 +18,24 @@
 
 import {NgModule} from '@angular/core';
 
-import {
-    MatButtonModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatExpansionModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatSelectModule,
-    MatSidenavModule,
-    MatSlideToggleModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatDividerModule,
-    MatProgressBarModule, MatButtonToggleModule,
-
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import {MatStepperModule} from '@angular/material/stepper';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatTableModule} from '@angular/material/table';
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
index 822cdc7..21c309b 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
@@ -29,7 +29,9 @@ import {CreateAssetComponent} from "./components/create-asset/create-asset.compo
 import {WebsocketService} from "./services/websocket.service";
 import {AddPipelineDialogComponent} from "./dialog/add-pipeline/add-pipeline-dialog.component";
 import {RestService} from './services/rest.service';
-import {MatFormFieldModule, MatGridListModule, MatInputModule} from "@angular/material";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatGridListModule } from "@angular/material/grid-list";
+import { MatInputModule } from "@angular/material/input";
 import {ElementIconText} from "../services/get-element-icon-text.service";
 import {FormsModule} from "@angular/forms";
 import {ColorPickerModule} from "ngx-color-picker";
diff --git a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts
index e23e6ae..29bd5f4 100644
--- a/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts
+++ b/ui/src/app/app-asset-monitoring/components/create-asset/create-asset.component.ts
@@ -19,7 +19,7 @@
 import {Component, HostListener} from "@angular/core";
 import Konva from "konva";
 import {AddPipelineDialogComponent} from "../../dialog/add-pipeline/add-pipeline-dialog.component";
-import {MatDialog} from "@angular/material";
+import { MatDialog } from "@angular/material/dialog";
 import {ShapeService} from "../../services/shape.service";
 import {SelectedVisualizationData} from "../../model/selected-visualization-data.model";
 import {SaveDashboardDialogComponent} from "../../dialog/save-dashboard/save-dashboard-dialog.component";
diff --git a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts
index c795d76..993cb27 100644
--- a/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts
+++ b/ui/src/app/app-asset-monitoring/dialog/add-pipeline/add-pipeline-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, Inject} from "@angular/core";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import {RestApi} from "../../../services/rest-api.service";
 import {RestService} from "../../services/rest.service";
 import {ElementIconText} from "../../../services/get-element-icon-text.service";
diff --git a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts
index adac641..e260140 100644
--- a/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts
+++ b/ui/src/app/app-asset-monitoring/dialog/save-dashboard/save-dashboard-dialog.component.ts
@@ -18,7 +18,7 @@
 
 import {Component, Inject} from "@angular/core";
 import {RestService} from "../../services/rest.service";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import {CanvasConfiguration} from "../../model/canvas-configuration.model";
 import {DashboardConfiguration} from "../../model/dashboard-configuration.model";
 import {ImageInfo} from "../../model/image-info.model";
diff --git a/ui/src/app/app-container/app-container.module.ts b/ui/src/app/app-container/app-container.module.ts
index ede095a..2c1dce9 100644
--- a/ui/src/app/app-container/app-container.module.ts
+++ b/ui/src/app/app-container/app-container.module.ts
@@ -25,7 +25,7 @@ import { AppContainerService } from './shared/app-container.service';
 import { ViewComponent } from './view/view.component';
 
 import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
-import { MatDialogModule } from '@angular/material';
+import { MatDialogModule } from '@angular/material/dialog';
 import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 
 @NgModule({
diff --git a/ui/src/app/app-container/view/view.component.ts b/ui/src/app/app-container/view/view.component.ts
index ae3ccfb..3a2af81 100644
--- a/ui/src/app/app-container/view/view.component.ts
+++ b/ui/src/app/app-container/view/view.component.ts
@@ -42,7 +42,7 @@ import * as angularPlatformBrowserAnimations from '@angular/platform-browser/ani
 import * as angularCdk from '@angular/cdk';
 import * as angularCdkObservers from '@angular/cdk/observers';
 import * as angularCommonHttp from '@angular/common/http';
-import * as angularMaterial from '@angular/material';
+//import * as angularMaterial from '@angular/material';
 import * as angularFlexLayout from '@angular/flex-layout';
 import * as angularForms from '@angular/forms';
 import * as angularMaterialDialog from '@angular/material/dialog';
@@ -74,7 +74,7 @@ SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(angularP
 SystemJS.set('@angular/cdk', SystemJS.newModule(angularCdk));
 SystemJS.set('@angular/cdk/observers', SystemJS.newModule(angularCdkObservers));
 SystemJS.set('@angular/common/http', SystemJS.newModule(angularCommonHttp));
-SystemJS.set('@angular/material', SystemJS.newModule(angularMaterial));
+//SystemJS.set('@angular/material', SystemJS.newModule(angularMaterial));
 SystemJS.set('@angular/flex-layout', SystemJS.newModule(angularFlexLayout));
 SystemJS.set('@angular/forms', SystemJS.newModule(angularForms));
 SystemJS.set('@angular/material/dialog', SystemJS.newModule(angularMaterialDialog));
diff --git a/ui/src/app/app-overview/app-overview.module.ts b/ui/src/app/app-overview/app-overview.module.ts
index f1246ca..7aa2185 100644
--- a/ui/src/app/app-overview/app-overview.module.ts
+++ b/ui/src/app/app-overview/app-overview.module.ts
@@ -21,7 +21,9 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { CommonModule } from '@angular/common';
 import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 
-import {MatFormFieldModule, MatGridListModule, MatInputModule} from "@angular/material";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatGridListModule } from "@angular/material/grid-list";
+import { MatInputModule } from "@angular/material/input";
 import {FormsModule} from "@angular/forms";
 import {AppOverviewComponent} from "./app-overview.component";
 import {AppAssetMonitoringModule} from "../app-asset-monitoring/app-asset-monitoring.module";
diff --git a/ui/src/app/app-transport-monitoring/app-transport-monitoring.module.ts b/ui/src/app/app-transport-monitoring/app-transport-monitoring.module.ts
index 607199e..618acf1 100644
--- a/ui/src/app/app-transport-monitoring/app-transport-monitoring.module.ts
+++ b/ui/src/app/app-transport-monitoring/app-transport-monitoring.module.ts
@@ -21,7 +21,9 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { CommonModule } from '@angular/common';
 import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 
-import {MatFormFieldModule, MatGridListModule, MatInputModule} from "@angular/material";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatGridListModule } from "@angular/material/grid-list";
+import { MatInputModule } from "@angular/material/input";
 import {FormsModule} from "@angular/forms";
 import {AppTransportMonitoringComponent} from "./app-transport-monitoring.component";
 import {IncomingViewComponent} from "./components/incoming/incoming-view.component";
diff --git a/ui/src/app/app-transport-monitoring/components/transport-selection/transport-selection.component.ts b/ui/src/app/app-transport-monitoring/components/transport-selection/transport-selection.component.ts
index 109eb38..4966cf1 100644
--- a/ui/src/app/app-transport-monitoring/components/transport-selection/transport-selection.component.ts
+++ b/ui/src/app/app-transport-monitoring/components/transport-selection/transport-selection.component.ts
@@ -20,7 +20,8 @@ import {Component, EventEmitter, Output, ViewChild} from '@angular/core';
 import {AppTransportMonitoringRestService} from "../../services/app-transport-monitoring-rest.service";
 import {TransportProcessEventModel} from "../../model/transport-process-event.model";
 import {TimestampConverterService} from "../../services/timestamp-converter.service";
-import {MatPaginator, MatTableDataSource} from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
     selector: 'transport-selection',
diff --git a/ui/src/app/configuration/configuration.component.ts b/ui/src/app/configuration/configuration.component.ts
index 133cccb..6d2822c 100644
--- a/ui/src/app/configuration/configuration.component.ts
+++ b/ui/src/app/configuration/configuration.component.ts
@@ -21,7 +21,8 @@ import {Component, ViewChild} from '@angular/core';
 import { ConfigurationService } from './shared/configuration.service';
 import { StreampipesPeContainer } from "./shared/streampipes-pe-container.model";
 import { StreampipesPeContainerConifgs } from "./shared/streampipes-pe-container-configs";
-import {MatPaginator, MatTableDataSource} from "@angular/material";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
 import {animate, state, style, transition, trigger} from '@angular/animations';
 
 @Component({
diff --git a/ui/src/app/configuration/configuration.module.ts b/ui/src/app/configuration/configuration.module.ts
index d581f27..58c352c 100644
--- a/ui/src/app/configuration/configuration.module.ts
+++ b/ui/src/app/configuration/configuration.module.ts
@@ -17,14 +17,12 @@
  */
 
 import {NgModule} from '@angular/core';
-import {
-    MatButtonModule,
-    MatCheckboxModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatTooltipModule,
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
diff --git a/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.ts b/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.ts
index 9c297d1..9bf994c 100644
--- a/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.ts
+++ b/ui/src/app/configuration/pipeline-element-configuration/pipeline-element-configuration.component.ts
@@ -21,7 +21,8 @@ import {animate, state, style, transition, trigger} from "@angular/animations";
 import {ConfigurationService} from "../shared/configuration.service";
 import {StreampipesPeContainer} from "../shared/streampipes-pe-container.model";
 import {StreampipesPeContainerConifgs} from "../shared/streampipes-pe-container-configs";
-import {MatPaginator, MatTableDataSource} from "@angular/material";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
 
 @Component({
     selector: 'pipeline-element-configuration',
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 22030c3..43dabb9 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -20,10 +20,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import {
-    MatFormFieldModule,
-    MatGridListModule,
-} from '@angular/material';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { BrowserModule } from '@angular/platform-browser';
 
@@ -43,7 +41,7 @@ import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 
 import { RestService } from './rest.service';
 
-import { MatInputModule } from '@angular/material';
+import { MatInputModule } from '@angular/material/input';
 import { DragulaModule } from 'ng2-dragula';
 import { AdapterStartedDialog } from './new-adapter/component/adapter-started-dialog.component';
 import { DataTypesService } from './schema-editor/data-type.service';
diff --git a/ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.ts b/ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.ts
index 151e3d7..f85d264 100644
--- a/ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.ts
+++ b/ui/src/app/connect/data-marketplace/adapter-description/adapter-description.component.ts
@@ -21,7 +21,7 @@ import { AdapterDescription } from '../../model/connect/AdapterDescription';
 import { ConnectService } from '../../connect.service';
 import {DataMarketplaceService} from "../data-marketplace.service";
 import {AdapterExportDialog} from '../adapter-export/adapter-export-dialog.component';
-import {MatDialog} from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'sp-adapter-description',
diff --git a/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts b/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts
index 0cec183..a5d0c25 100644
--- a/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts
+++ b/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import {ShepherdService} from '../../../services/tour/shepherd.service';
 import {RestService} from "../../rest.service";
 import {TsonLdSerializerService} from '../../../platform-services/tsonld-serializer.service';
diff --git a/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts b/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts
index 061d5bf..bb9edb2 100644
--- a/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts
+++ b/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import {RestService} from "../../rest.service";
 import {TsonLdSerializerService} from '../../../platform-services/tsonld-serializer.service';
 import {AdapterDescriptionList} from '../../model/connect/AdapterDescriptionList';
diff --git a/ui/src/app/connect/data-marketplace/data-marketplace.component.ts b/ui/src/app/connect/data-marketplace/data-marketplace.component.ts
index 8cb584b..a24f398 100644
--- a/ui/src/app/connect/data-marketplace/data-marketplace.component.ts
+++ b/ui/src/app/connect/data-marketplace/data-marketplace.component.ts
@@ -23,7 +23,7 @@ import { ShepherdService } from "../../services/tour/shepherd.service";
 import { ConnectService } from '../connect.service';
 import { FilterPipe } from './filter.pipe';
 import {AdapterUploadDialog} from './adapter-upload/adapter-upload-dialog.component';
-import {MatDialog} from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import {AdapterDescriptionList} from '../model/connect/AdapterDescriptionList';
 import {TsonLdSerializerService} from '../../platform-services/tsonld-serializer.service';
 
diff --git a/ui/src/app/connect/file-management/file-management.component.ts b/ui/src/app/connect/file-management/file-management.component.ts
index b8b2589..6513cd1 100644
--- a/ui/src/app/connect/file-management/file-management.component.ts
+++ b/ui/src/app/connect/file-management/file-management.component.ts
@@ -18,7 +18,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { FileRestService}  from './service/filerest.service';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'sp-file-management',
diff --git a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts b/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
index 8c6b392..537e880 100644
--- a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
+++ b/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import {ShepherdService} from '../../../services/tour/shepherd.service';
 import {RestService} from "../../rest.service";
 import {StatusMessage} from "../../model/message/StatusMessage";
diff --git a/ui/src/app/connect/new-adapter/new-adapter.component.ts b/ui/src/app/connect/new-adapter/new-adapter.component.ts
index af95b93..b285de3 100644
--- a/ui/src/app/connect/new-adapter/new-adapter.component.ts
+++ b/ui/src/app/connect/new-adapter/new-adapter.component.ts
@@ -22,8 +22,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { RestService } from '../rest.service';
 import { FormatDescription } from '../model/connect/grounding/FormatDescription';
 import { AdapterDescription } from '../model/connect/AdapterDescription';
-import { MatDialog } from '@angular/material';
-import { MatStepper } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatStepper } from '@angular/material/stepper';
 import { AdapterStartedDialog } from './component/adapter-started-dialog.component';
 import { Logger } from '../../shared/logger/default-log.service';
 import { GenericAdapterSetDescription } from '../model/connect/GenericAdapterSetDescription';
diff --git a/ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.ts b/ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.ts
index db8fd91..747d3db 100644
--- a/ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.ts
+++ b/ui/src/app/connect/schema-editor/event-property-row/event-property-row.component.ts
@@ -28,7 +28,7 @@ import {EventPropertyComponent} from "../event-property/event-property.component
 import {DomainPropertyProbabilityList} from "../model/DomainPropertyProbabilityList";
 import {TreeNode} from "angular-tree-component";
 import {DataTypesService} from "../data-type.service";
-import {MatDialog} from "@angular/material";
+import { MatDialog } from "@angular/material/dialog";
 
 @Component({
     selector: 'event-property-row',
@@ -43,7 +43,7 @@ export class EventPropertyRowComponent implements OnChanges {
     @Input() eventSchema: EventSchema = new EventSchema();
     @Input() countSelected: number;
 
-    @Output() nodeChange = new EventEmitter<TreeNode>();
+    //@Output() nodeChange = new EventEmitter<TreeNode>();
     @Output() isEditableChange = new EventEmitter<boolean>();
     @Output() eventSchemaChange = new EventEmitter<EventSchema>();
     @Output() refreshTreeEmitter = new EventEmitter<void>();
diff --git a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.html b/ui/src/app/connect/schema-editor/event-schema/event-schema.component.html
index 7f07267..cf0fe17 100644
--- a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.html
+++ b/ui/src/app/connect/schema-editor/event-schema/event-schema.component.html
@@ -87,7 +87,7 @@
             <div fxLayout="column" fxLayoutAlign="space-evenly stretched" class="drag-drop-tree">
                 <tree-root #tree [nodes]="nodes" [options]="options" (updateData)="onUpdateData(tree)">
                     <ng-template #treeNodeTemplate let-node let-index="index">
-                        <event-property-row [(node)]="node"  [(isEditable)]="isEditable"
+                        <event-property-row [node]="node"  [(isEditable)]="isEditable"
                                             [(eventSchema)]="eventSchema"
                                             (refreshTreeEmitter)="refreshTree()" [(countSelected)]="countSelected"></event-property-row>
                     </ng-template>
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 275bf4f..9c4f049 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -23,13 +23,16 @@ import {CommonModule} from '@angular/common';
 import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CdkTableModule} from '@angular/cdk/table';
-import {MatDatepickerModule, MatNativeDateModule, MatProgressSpinnerModule, MatSnackBarModule} from '@angular/material';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import {TableComponent} from './table/table.component';
 import {LineChartComponent} from './linechart/lineChart.component';
 
-import * as PlotlyJS from 'plotly.js/dist/plotly.js';
-import { PlotlyModule } from 'angular-plotly.js';
-PlotlyModule.plotlyjs = PlotlyJS;
+//import * as PlotlyJS from 'plotly.js/dist/plotly.js';
+import { PlotlyViaCDNModule } from 'angular-plotly.js';
+//PlotlyViaCDNModule.plotlyjs = PlotlyJS;
 
 @NgModule({
     imports: [
@@ -43,7 +46,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
         MatProgressSpinnerModule,
         MatDatepickerModule,
         MatNativeDateModule,
-        PlotlyModule,
+        PlotlyViaCDNModule,
     ],
     declarations: [
         TableComponent,
diff --git a/ui/src/app/core-ui/table/table.component.ts b/ui/src/app/core-ui/table/table.component.ts
index 7ee5ad1..1493eb3 100644
--- a/ui/src/app/core-ui/table/table.component.ts
+++ b/ui/src/app/core-ui/table/table.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatTableDataSource} from '@angular/material';
+import { MatTableDataSource } from '@angular/material/table';
 import {BaseChartComponent} from '../chart/baseChart.component';
 import {DataResult} from '../../core-model/datalake/DataResult';
 import {GroupedDataResult} from '../../core-model/datalake/GroupedDataResult';
diff --git a/ui/src/app/core/http-provider.config.ts b/ui/src/app/core/http-provider.config.ts
index 7449f22..03018c4 100644
--- a/ui/src/app/core/http-provider.config.ts
+++ b/ui/src/app/core/http-provider.config.ts
@@ -16,8 +16,10 @@
  *
  */
 
-//httpProviderConfig.$inject = ['$httpProvider'];
+
 export default function httpProviderConfig($httpProvider) {
 	$httpProvider.defaults.withCredentials = true;
 	//$httpProvider.interceptors.push('httpInterceptor');
 };
+
+httpProviderConfig.$inject = ['$httpProvider'];
diff --git a/ui/src/app/core/icon-provider.config.ts b/ui/src/app/core/icon-provider.config.ts
index 2963701..1fa632b 100644
--- a/ui/src/app/core/icon-provider.config.ts
+++ b/ui/src/app/core/icon-provider.config.ts
@@ -16,7 +16,6 @@
  *
  */
 
-//iconProviderConfig.$inject = ['$mdIconProvider'];
 export default function iconProviderConfig($mdIconProvider, apiConstants) {
 	const getServerUrl = () => {
 		return apiConstants.contextPath + apiConstants.api;
@@ -42,3 +41,5 @@ export default function iconProviderConfig($mdIconProvider, apiConstants) {
 		.iconSet('avatars', 'assets/img/svg/avatar-icons.svg', 24)
 		.defaultIconSet('assets/img/svg/svg-sprite-action.svg', 24);
 };
+
+iconProviderConfig.$inject = ['$mdIconProvider', 'apiConstants'];
diff --git a/ui/src/app/core/md-theming-provider.config.ts b/ui/src/app/core/md-theming-provider.config.ts
new file mode 100644
index 0000000..0127197
--- /dev/null
+++ b/ui/src/app/core/md-theming-provider.config.ts
@@ -0,0 +1,70 @@
+/*
+ *   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.
+ */
+
+export default function mdThemingProviderConfig($mdThemingProvider) {
+
+    $mdThemingProvider.definePalette('streamPipesPrimary', {
+        '50': '304269',
+        '100': '304269',
+        '200': '304269',
+        '300': '304269',
+        '400': '304269',
+        '500': '304269',
+        '600': '304269',
+        '700': '003B3D',
+        '800': '39b54a',
+        '900': '39b54a',
+        'A100': '39b54a',
+        'A200': '39b54a',
+        'A400': '39b54a',
+        'A700': '39b54a',
+        'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
+                                            // on this palette should be dark or light
+
+        'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
+            '200', '300', '400', 'A100'],
+    });
+
+    $mdThemingProvider.definePalette('streamPipesAccent', {
+        '50': 'DF5A49',
+        '100': 'DF5A49',
+        '200': '007F54',
+        '300': '007F54',
+        '400': '39B54A',
+        '500': '45DA59',
+        '600': '45DA59',
+        '700': '45DA59',
+        '800': '45DA59',
+        '900': '1B1464',
+        'A100': '1B1464',
+        'A200': '1B1464',
+        'A400': '1B1464',
+        'A700': '1B1464',
+        'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
+                                            // on this palette should be dark or light
+
+        'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
+            '200', '300', '400', 'A100'],
+    });
+
+    $mdThemingProvider.theme('default')
+        .primaryPalette('streamPipesPrimary')
+        .accentPalette('streamPipesAccent')
+
+}
+
+mdThemingProviderConfig.$inject = ['$mdThemingProvider'];
\ No newline at end of file
diff --git a/ui/src/app/core/root-scope-delegate.decorator.ts b/ui/src/app/core/root-scope-delegate.decorator.ts
new file mode 100644
index 0000000..b9ef018
--- /dev/null
+++ b/ui/src/app/core/root-scope-delegate.decorator.ts
@@ -0,0 +1,28 @@
+/*
+ *   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.
+ */
+
+export default function rootScopeDelegate($delegate) {
+    const originalDigest = $delegate.$digest;
+    $delegate.$digest = () => {
+        if (!$delegate.$$phase) {
+            originalDigest.call($delegate);
+        }
+    };
+    return $delegate;
+}
+
+rootScopeDelegate.$inject = ['$delegate'];
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/dashboard.module.ts b/ui/src/app/dashboard-v2/dashboard.module.ts
index 9a48afd..9d66167 100644
--- a/ui/src/app/dashboard-v2/dashboard.module.ts
+++ b/ui/src/app/dashboard-v2/dashboard.module.ts
@@ -6,7 +6,7 @@ import { GridsterModule } from 'angular-gridster2';
 import { DashboardComponent } from './dashboard.component';
 import { DynamicModule } from 'ng-dynamic-component';
 import { DashboardPanelComponent } from "./components/panel/dashboard-panel.component";
-import {MatTabsModule} from "@angular/material";
+import { MatTabsModule } from "@angular/material/tabs";
 import {DashboardWidgetComponent} from "./components/widget/dashboard-widget.component";
 import {CustomMaterialModule} from "../CustomMaterial/custom-material.module";
 import {FormsModule} from "@angular/forms";
diff --git a/ui/src/app/dashboard-v2/dialogs/add-widget/add-visualization-dialog.component.ts b/ui/src/app/dashboard-v2/dialogs/add-widget/add-visualization-dialog.component.ts
index b55d71c..aba7102 100644
--- a/ui/src/app/dashboard-v2/dialogs/add-widget/add-visualization-dialog.component.ts
+++ b/ui/src/app/dashboard-v2/dialogs/add-widget/add-visualization-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component} from "@angular/core";
-import {MatDialogRef} from "@angular/material";
+import { MatDialogRef } from "@angular/material/dialog";
 import {DashboardService} from "../../services/dashboard.service";
 import {ElementIconText} from "../../../services/get-element-icon-text.service";
 import {WidgetRegistry} from "../../registry/widget-registry";
diff --git a/ui/src/app/dashboard-v2/dialogs/edit-dashboard/edit-dashboard-dialog.component.ts b/ui/src/app/dashboard-v2/dialogs/edit-dashboard/edit-dashboard-dialog.component.ts
index 5319491..72d9433 100644
--- a/ui/src/app/dashboard-v2/dialogs/edit-dashboard/edit-dashboard-dialog.component.ts
+++ b/ui/src/app/dashboard-v2/dialogs/edit-dashboard/edit-dashboard-dialog.component.ts
@@ -17,7 +17,7 @@
  */
 
 import {Component, Inject} from "@angular/core";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import {DashboardService} from "../../services/dashboard.service";
 import {DashboardWidgetSettings} from "../../../core-model/dashboard/DashboardWidgetSettings";
 import {VisualizablePipeline} from "../../../core-model/dashboard/VisualizablePipeline";
diff --git a/ui/src/app/data-explorer/data-explorer.component.ts b/ui/src/app/data-explorer/data-explorer.component.ts
index 82ddc4a..0474b03 100644
--- a/ui/src/app/data-explorer/data-explorer.component.ts
+++ b/ui/src/app/data-explorer/data-explorer.component.ts
@@ -22,7 +22,7 @@ import {InfoResult} from '../core-model/datalake/InfoResult';
 import {Observable} from 'rxjs/Observable';
 import {FormControl} from '@angular/forms';
 import {map, startWith} from 'rxjs/operators';
-import {MatSnackBar} from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
     selector: 'sp-data-explorer',
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 2d07e9a..c21ce7d 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -23,16 +23,16 @@ import {CommonModule} from '@angular/common';
 import {DataExplorerComponent} from './data-explorer.component';
 
 import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
-import {NguiDatetimePickerModule} from '@ngui/datetime-picker';
 import {DatalakeRestService} from '../core-services/datalake/datalake-rest.service';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CdkTableModule} from '@angular/cdk/table';
-import {MatProgressSpinnerModule, MatSnackBarModule} from '@angular/material';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import {CoreUiModule} from '../core-ui/core-ui.module';
 import {ExplorerComponent} from './explorer/explorer.component';
 import {DataDownloadDialog} from './explorer/datadownloadDialog/dataDownload.dialog';
 
-import {OWL_DATE_TIME_FORMATS, OwlDateTimeModule, OwlNativeDateTimeModule} from 'ng-pick-datetime';
+import {OWL_DATE_TIME_FORMATS, OwlDateTimeModule, OwlNativeDateTimeModule} from '@danielmoncada/angular-datetime-picker';
 
 export const MY_NATIVE_FORMATS = {
     fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false},
@@ -48,7 +48,6 @@ export const MY_NATIVE_FORMATS = {
         CommonModule,
         FlexLayoutModule,
         CustomMaterialModule,
-        NguiDatetimePickerModule,
         ReactiveFormsModule,
         FormsModule,
         CdkTableModule,
diff --git a/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts b/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts
index 73eedf1..f768202 100644
--- a/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts
+++ b/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts
@@ -17,7 +17,8 @@
  */
 
 import {Component, Inject, ViewChild} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef, MatStepper} from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatStepper } from '@angular/material/stepper';
 import {HttpEventType} from '@angular/common/http';
 import {DatalakeRestService} from '../../../core-services/datalake/datalake-rest.service';
 
diff --git a/ui/src/app/data-explorer/explorer/explorer.component.ts b/ui/src/app/data-explorer/explorer/explorer.component.ts
index ae9baec..86174d0 100644
--- a/ui/src/app/data-explorer/explorer/explorer.component.ts
+++ b/ui/src/app/data-explorer/explorer/explorer.component.ts
@@ -22,7 +22,8 @@ import {InfoResult} from '../../core-model/datalake/InfoResult';
 import {Observable} from 'rxjs/Observable';
 import {FormControl, FormGroup} from '@angular/forms';
 import {map, startWith} from 'rxjs/operators';
-import {MatDialog, MatSnackBar} from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import {DataDownloadDialog} from './datadownloadDialog/dataDownload.dialog';
 import {timer} from 'rxjs/internal/observable/timer';
 import {DataResult} from '../../core-model/datalake/DataResult';
@@ -128,7 +129,7 @@ export class ExplorerComponent implements OnInit {
      this.loadData(false);
     }
 
-    loadData(silentLoading) {
+    loadData(silentLoading?) {
         this.isLoadingData = true;
         this.noDateFoundinTimeRange = false;
         this.noIndexSelection = false;
diff --git a/ui/src/app/editor/components/freetext/freetext.controller.ts b/ui/src/app/editor/components/freetext/freetext.controller.ts
index 599d49d..e4c7279 100644
--- a/ui/src/app/editor/components/freetext/freetext.controller.ts
+++ b/ui/src/app/editor/components/freetext/freetext.controller.ts
@@ -17,6 +17,7 @@
  */
 
 import * as angular from 'angular';
+import {AnyRemoteController} from "../any-remote/any-remote.controller";
 
 export class FreeTextController {
 
@@ -92,3 +93,5 @@ export class FreeTextController {
     }
 
 }
+
+FreeTextController.$inject = ['$scope', '$rootScope'];
diff --git a/ui/src/app/editor/dialog/customize-pipeline-element/customize.controller.ts b/ui/src/app/editor/dialog/customize-pipeline-element/customize.controller.ts
index 6ef80b4..b0b340c 100644
--- a/ui/src/app/editor/dialog/customize-pipeline-element/customize.controller.ts
+++ b/ui/src/app/editor/dialog/customize-pipeline-element/customize.controller.ts
@@ -57,7 +57,7 @@ export class CustomizeController {
 
     $onInit() {
         if (this.ShepherdService.isTourActive()) {
-            this.ShepherdService.trigger("customize-" +this.sepa.type);
+            this.ShepherdService.trigger("customize-" +this.selectedElement.type);
         }
     }
 
@@ -90,14 +90,14 @@ export class CustomizeController {
     saveProperties() {
         if (this.validate()) {
             this.selectedElement.uncompleted = false;
-            this.$rootScope.$broadcast("SepaElementConfigured", this.sepa.DOM);
+            this.$rootScope.$broadcast("SepaElementConfigured", this.selectedElement.DOM);
             this.selectedElement.configured = true;
             this.hide();
             if (this.sourceEndpoint) {
                 this.sourceEndpoint.setType("token");
             }
             if (this.ShepherdService.isTourActive()) {
-                this.ShepherdService.trigger("save-" +this.sepa.type);
+                this.ShepherdService.trigger("save-" +this.selectedElement.type);
             }
         }
         else this.invalid = true;
@@ -143,11 +143,6 @@ export class CustomizeController {
 
         return valid;
     }
-
-
-
-
-
 }
 
 CustomizeController.$inject = ['$rootScope', '$mdDialog', 'elementData', 'sourceEndpoint', 'sepa', 'ShepherdService'];
\ No newline at end of file
diff --git a/ui/src/app/editor/editor.module.ts b/ui/src/app/editor/editor.module.ts
index 327a65a..86a3a74 100644
--- a/ui/src/app/editor/editor.module.ts
+++ b/ui/src/app/editor/editor.module.ts
@@ -29,6 +29,7 @@ import 'jquery.panzoom';
 import 'npm/bootstrap';
 import 'npm/angular-trix';
 import 'npm/angular-datatables';
+import 'npm/angular-sanitize';
 import 'npm/ng-showdown';
 
 import {EditorCtrl} from './editor.controller';
@@ -76,7 +77,7 @@ import {FileUploadComponent} from "./components/fileupload/fileupload.component"
 import {AnyRemoteComponent} from "./components/any-remote/any-remote.component";
 
 
-export default angular.module('sp.editor', [spServices, 'angularTrix', 'ngAnimate', 'datatables', 'ng-showdown'])
+export default angular.module('sp.editor', [spServices, 'ngSanitize', 'angularTrix', 'ngAnimate', 'datatables', 'ng-showdown'])
     .controller('EditorCtrl', EditorCtrl)
     .directive('myDataBind', myDataBind)
     .directive('imageBind', imageBind)
diff --git a/ui/src/app/home/home.module.ts b/ui/src/app/home/home.module.ts
index 8624675..6eb4492 100644
--- a/ui/src/app/home/home.module.ts
+++ b/ui/src/app/home/home.module.ts
@@ -19,7 +19,8 @@
 import { NgModule } from '@angular/core';
 import { HomeComponent } from './home.component';
 import { HomeService } from './home.service';
-import { MatGridListModule, MatIconModule } from '@angular/material';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { CommonModule } from '@angular/common';
 import { StatusComponent } from "./components/status.component";
diff --git a/ui/src/app/info/info.component.ts b/ui/src/app/info/info.component.ts
index be7e471..c0f5d3c 100644
--- a/ui/src/app/info/info.component.ts
+++ b/ui/src/app/info/info.component.ts
@@ -17,7 +17,7 @@
  */
 
 import { Component } from '@angular/core';
-import {MatTabChangeEvent} from "@angular/material";
+import { MatTabChangeEvent } from "@angular/material/tabs";
 
 @Component({
     templateUrl: './info.component.html',
diff --git a/ui/src/app/info/info.module.ts b/ui/src/app/info/info.module.ts
index 96be602..9dbeb75 100644
--- a/ui/src/app/info/info.module.ts
+++ b/ui/src/app/info/info.module.ts
@@ -17,15 +17,13 @@
  */
 
 import { NgModule } from '@angular/core';
-import {
-    MatButtonModule,
-    MatCheckboxModule,
-    MatDividerModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatTooltipModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { CommonModule } from '@angular/common';
diff --git a/ui/src/app/layout/app.controller.ts b/ui/src/app/layout/app.controller.ts
index 75ed7fd..67713fd 100644
--- a/ui/src/app/layout/app.controller.ts
+++ b/ui/src/app/layout/app.controller.ts
@@ -17,6 +17,7 @@
  */
 
 import 'legacy/stomp';
+import {AuthService} from "../services/auth.service";
 
 declare const Stomp: any;
 
@@ -38,4 +39,6 @@ export class AppCtrl {
     }
 };
 
+AppCtrl.$inject = ['$state'];
+
 
diff --git a/ui/src/app/login/login.controller.ts b/ui/src/app/login/login.controller.ts
index c714c84..69ec220 100644
--- a/ui/src/app/login/login.controller.ts
+++ b/ui/src/app/login/login.controller.ts
@@ -17,6 +17,8 @@
  *
  */
 
+import {ShepherdService} from "../services/tour/shepherd.service";
+
 export class LoginCtrl {
 
     $timeout: any;
@@ -30,7 +32,7 @@ export class LoginCtrl {
     loading: any;
     authenticationFailed: any;
     credentials: any;
-    ShepherdService: any;
+    ShepherdService: ShepherdService;
 
     constructor($timeout, $log, $location, $state, $stateParams, RestApi, $window, AuthStatusService, ShepherdService) {
         this.$timeout = $timeout;
@@ -84,4 +86,4 @@ export class LoginCtrl {
     }
 };
 
-//LoginCtrl.$inject = ['$timeout', '$log', '$location', '$state', '$stateParams', 'RestApi', '$window', 'AuthStatusService'];
+LoginCtrl.$inject = ['$timeout', '$log', '$location', '$state', '$stateParams', 'RestApi', '$window', 'AuthStatusService', 'ShepherdService'];
diff --git a/ui/src/app/login/startup/startup.controller.ts b/ui/src/app/login/startup/startup.controller.ts
index 0942b77..5faee23 100644
--- a/ui/src/app/login/startup/startup.controller.ts
+++ b/ui/src/app/login/startup/startup.controller.ts
@@ -18,6 +18,7 @@
 
 import {AuthService} from "../../services/auth.service";
 import {AuthStatusService} from "../../services/auth-status.service";
+import {LoginCtrl} from "../login.controller";
 
 export class StartupCtrl {
 
@@ -56,4 +57,6 @@ export class StartupCtrl {
         });
     }
 
-}
\ No newline at end of file
+}
+
+StartupCtrl.$inject = ['AuthService', 'AuthStatusService', '$state', '$timeout'];
\ No newline at end of file
diff --git a/ui/src/app/pipelines/dialog/pipeline-status-dialog.controller.ts b/ui/src/app/pipelines/dialog/pipeline-status-dialog.controller.ts
index 2a14438..c0e5fee 100644
--- a/ui/src/app/pipelines/dialog/pipeline-status-dialog.controller.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-status-dialog.controller.ts
@@ -20,10 +20,12 @@ export class PipelineStatusDialogController {
 
     $mdDialog: any;
     statusDetailsVisible: any;
+    data: any;
 
-    constructor($mdDialog) {
+    constructor($mdDialog, data) {
         this.$mdDialog = $mdDialog;
         this.statusDetailsVisible = false;
+        this.data = data;
     }
 
     hide() {
@@ -39,4 +41,4 @@ export class PipelineStatusDialogController {
     }
 }
 
-PipelineStatusDialogController.$inject = ['$mdDialog'];
\ No newline at end of file
+PipelineStatusDialogController.$inject = ['$mdDialog', 'data'];
\ No newline at end of file
diff --git a/ui/src/app/pipelines/dialog/pipeline-status-dialog.tmpl.html b/ui/src/app/pipelines/dialog/pipeline-status-dialog.tmpl.html
index 38164ed..973709d 100644
--- a/ui/src/app/pipelines/dialog/pipeline-status-dialog.tmpl.html
+++ b/ui/src/app/pipelines/dialog/pipeline-status-dialog.tmpl.html
@@ -56,7 +56,7 @@
                                     <b>More Details:</b>
                                     <div class="md-padding">
                                         <pre class="language" nag-prism source="{{msg.optionalMessage}}"
-                                             style="margin-top:0px;border-radius:0px;"></pre>
+                                             style="margin-top:0px;border-radius:0px;max-width:100%;"></pre>
                                     </div>
                                 </div>
                             </div>
diff --git a/ui/src/app/pipelines/pipelines.module.ts b/ui/src/app/pipelines/pipelines.module.ts
index b4e5fe5..9805231 100644
--- a/ui/src/app/pipelines/pipelines.module.ts
+++ b/ui/src/app/pipelines/pipelines.module.ts
@@ -18,6 +18,9 @@
 
 import * as angular from 'angular';
 
+import 'npm/angular-datatables';
+import 'npm/angular-sanitize';
+
 import spServices from '../services/services.module';
 
 import { PipelineCtrl } from './pipelines.controller';
@@ -28,7 +31,7 @@ import { PipelineOperationsService } from "./services/pipeline-operations.servic
 
 import ngFileUpload from 'ng-file-upload';
 
-export default angular.module('sp.pipeline', [spServices, ngFileUpload])
+export default angular.module('sp.pipeline', [spServices, ngFileUpload, 'ngSanitize', 'datatables'])
 	.controller('PipelineCtrl', PipelineCtrl)
 	.component('pipelineDetails', PipelineDetailsComponent)
 	.filter('pipelineCategoryFilter', PipelineCategoryFilter)
diff --git a/ui/src/app/services/auth.service.ts b/ui/src/app/services/auth.service.ts
index fef0784..90c2aea 100644
--- a/ui/src/app/services/auth.service.ts
+++ b/ui/src/app/services/auth.service.ts
@@ -18,6 +18,7 @@
 
 import {RestApi} from "./rest-api.service";
 import {AuthStatusService} from "./auth-status.service";
+import {TransitionService} from "./transition.service";
 
 export class AuthService {
 
@@ -64,4 +65,6 @@ export class AuthService {
             }
         })
     }
-}
\ No newline at end of file
+}
+
+AuthService.$inject = ['$rootScope', '$location', '$state', 'RestApi', 'AuthStatusService'];
\ No newline at end of file
diff --git a/ui/src/app/services/jsplumb.service.ts b/ui/src/app/services/jsplumb.service.ts
index 36502b6..0dfa60d 100644
--- a/ui/src/app/services/jsplumb.service.ts
+++ b/ui/src/app/services/jsplumb.service.ts
@@ -17,13 +17,16 @@
  */
 
 import * as angular from 'angular';
+import {ObjectProvider} from "./object-provider.service";
+import {JsplumbConfigService} from "./jsplumb-config.service";
+import {JsplumbBridge} from "./jsplumb-bridge.service";
 
 export class JsplumbService {
 
-    objectProvider: any;
+    objectProvider: ObjectProvider;
     apiConstants: any;
-    JsplumbConfigService: any;
-    JsplumbBridge: any;
+    JsplumbConfigService: JsplumbConfigService;
+    JsplumbBridge: JsplumbBridge;
     $timeout: any;
     idCounter: any;
     RestApi: any;
@@ -218,7 +221,7 @@ export class JsplumbService {
         return pipelineElementDomId;
     };
 
-    getJsplumbConfig(preview) {
+    getJsplumbConfig(preview): any {
         return preview ? this.JsplumbConfigService.getPreviewConfig() : this.JsplumbConfigService.getEditorConfig();
     }
 
@@ -253,4 +256,4 @@ export class JsplumbService {
     }
 }
 
-//JsplumbService.$inject = ['ObjectProvider', 'JsplumbConfigService', 'JsplumbBridge', '$timeout'];
+JsplumbService.$inject = ['ObjectProvider', 'JsplumbConfigService', 'JsplumbBridge', '$timeout', 'RestApi'];
diff --git a/ui/src/app/services/object-provider.service.ts b/ui/src/app/services/object-provider.service.ts
index 781fa98..18d84ad 100644
--- a/ui/src/app/services/object-provider.service.ts
+++ b/ui/src/app/services/object-provider.service.ts
@@ -121,4 +121,4 @@ export class ObjectProvider {
 
 }
 
-//ObjectProvider.$inject = ['RestApi', 'JsplumbBridge'];
+ObjectProvider.$inject = ['RestApi', 'JsplumbBridge'];
diff --git a/ui/src/app/services/pipeline-editor.service.ts b/ui/src/app/services/pipeline-editor.service.ts
index e97d100..3a2ed21 100644
--- a/ui/src/app/services/pipeline-editor.service.ts
+++ b/ui/src/app/services/pipeline-editor.service.ts
@@ -64,4 +64,4 @@ export class PipelineEditorService {
 
 }
 
-//PipelineEditorService.$inject = ['JsplumbBridge'];
\ No newline at end of file
+PipelineEditorService.$inject = ['JsplumbBridge'];
\ No newline at end of file
diff --git a/ui/src/app/services/pipeline-positioning.service.ts b/ui/src/app/services/pipeline-positioning.service.ts
index c1c2366..8123f50 100644
--- a/ui/src/app/services/pipeline-positioning.service.ts
+++ b/ui/src/app/services/pipeline-positioning.service.ts
@@ -18,7 +18,6 @@
 
 //import * from 'lodash';
 import * as dagre from "dagre";
-import {PipelineValidationService} from "../editor/services/pipeline-validation.service";
 import {JsplumbBridge} from "./jsplumb-bridge.service";
 import {JsplumbConfigService} from "./jsplumb-config.service";
 import {JsplumbService} from "./jsplumb.service";
@@ -30,9 +29,8 @@ export class PipelinePositioningService {
     JsplumbService: JsplumbService;
     JsplumbConfigService: JsplumbConfigService;
     JsplumbBridge: JsplumbBridge;
-    PipelineValidationService: PipelineValidationService;
 
-    constructor(JsplumbService, JsplumbConfigService, JsplumbBridge, PipelineValidationService) {
+    constructor(JsplumbService, JsplumbConfigService, JsplumbBridge) {
         this.JsplumbService = JsplumbService;
         this.JsplumbConfigService = JsplumbConfigService;
         this.JsplumbBridge = JsplumbBridge;
@@ -134,4 +132,4 @@ export class PipelinePositioningService {
 
 }
 
-//PipelinePositioningService.$inject = ['JsplumbService', 'JsplumbConfigService', 'JsplumbBridge'];
\ No newline at end of file
+PipelinePositioningService.$inject = ['JsplumbService', 'JsplumbConfigService', 'JsplumbBridge'];
\ No newline at end of file
diff --git a/ui/src/app/services/rest-api.service.ts b/ui/src/app/services/rest-api.service.ts
index 122aeff..de46178 100644
--- a/ui/src/app/services/rest-api.service.ts
+++ b/ui/src/app/services/rest-api.service.ts
@@ -579,4 +579,4 @@ export class RestApi {
     }
 }
 
-//RestApi.$inject = ['$http', 'apiConstants', 'AuthStatusService'];
+RestApi.$inject = ['$http', 'apiConstants', 'AuthStatusService'];
diff --git a/ui/src/app/services/route-transition-interceptor.service.ts b/ui/src/app/services/route-transition-interceptor.service.ts
index f1298ca..1a1dbe2 100644
--- a/ui/src/app/services/route-transition-interceptor.service.ts
+++ b/ui/src/app/services/route-transition-interceptor.service.ts
@@ -18,6 +18,7 @@
 
 import {AuthService} from "./auth.service";
 import {AuthStatusService} from "./auth-status.service";
+import {RestApi} from "./rest-api.service";
 
 export class RouteTransitionInterceptorService {
 
@@ -75,5 +76,5 @@ export class RouteTransitionInterceptorService {
     isProtectedPage(target) {
         return !(this.publicPages.some(p => p === target));
     }
-
-}
\ No newline at end of file
+}
+RouteTransitionInterceptorService.$inject = ['AuthService', 'AuthStatusService', '$q'];
\ No newline at end of file
diff --git a/ui/src/app/services/tour/shepherd.service.ts b/ui/src/app/services/tour/shepherd.service.ts
index 7f118c1..ba085f6 100644
--- a/ui/src/app/services/tour/shepherd.service.ts
+++ b/ui/src/app/services/tour/shepherd.service.ts
@@ -19,6 +19,7 @@
 import Shepherd from 'shepherd.js';
 //import "shepherd.js/dist/css/shepherd-theme-arrows.css";
 import {Inject, Injectable} from "@angular/core";
+import {LoginCtrl} from "../../login/login.controller";
 
 @Injectable()
 export class ShepherdService {
@@ -182,4 +183,6 @@ export class ShepherdService {
     getTimeWaitMillies() {
        return this.TourProviderService.getTime();
     }
-}
\ No newline at end of file
+}
+
+ShepherdService.$inject = ['$timeout', '$state', 'TourProviderService'];
\ No newline at end of file
diff --git a/ui/src/app/services/tour/tour-provider.service.ts b/ui/src/app/services/tour/tour-provider.service.ts
index 843aa52..4508a65 100644
--- a/ui/src/app/services/tour/tour-provider.service.ts
+++ b/ui/src/app/services/tour/tour-provider.service.ts
@@ -17,6 +17,8 @@
  *
  */
 
+import {AppCtrl} from "../../layout/app.controller";
+
 export class TourProviderService {
 
     guidedTours: any;
@@ -52,4 +54,7 @@ export class TourProviderService {
     getTime() {
         return this.time;
     }
-}
\ No newline at end of file
+}
+
+TourProviderService.$inject = ['createPipelineTourConstants', 'dashboardTourConstants',
+    'adapterTourConstants', 'adapterTour2Constants', 'adapterTour3Constants'];
\ No newline at end of file
diff --git a/ui/src/app/services/transition.service.ts b/ui/src/app/services/transition.service.ts
index b8f9991..3415db6 100644
--- a/ui/src/app/services/transition.service.ts
+++ b/ui/src/app/services/transition.service.ts
@@ -54,4 +54,5 @@ export class TransitionService {
             .cancel('Cancel');
         return this.$mdDialog.show(confirm);
     }
-}
\ No newline at end of file
+}
+TransitionService.$inject = ['AuthService', '$mdDialog'];
\ No newline at end of file
diff --git a/ui/src/index.html b/ui/src/index.html
index 289a024..24a0cf6 100644
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -70,6 +70,8 @@
     <meta name="msapplication-wide310x150logo" content="assets/img/favicon/mstile-310x150.png?v=2"/>
     <meta name="msapplication-square310x310logo" content="assets/img/favicon/mstile-310x310.png?v=2"/>
 
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
     <script type="text/javascript">
         var domain = "";
         var standardUrl = window.location.protocol + "//" + window.location.host + "/semantic-epa-backend/api/";
diff --git a/ui/src/polyfills.ts b/ui/src/polyfills.ts
index 2f2510a..38e6322 100644
--- a/ui/src/polyfills.ts
+++ b/ui/src/polyfills.ts
@@ -1,3 +1,22 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+* BROWSER POLYFILLS
+*/
 /*
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
@@ -19,53 +38,6 @@
 let __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mouseenter', 'mouseleave', 'mousemove', 'mouseover', 'mouseout', 'mousewheel', 'pointermove', 'keypress', 'keyup'];
 let __Zone_disable_PromiseRejectionEvent = true;
 
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-import 'core-js/es6/string';
-// import 'core-js/es6/date';
-import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-
-/** Evergreen browsers require these. **/
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
-
 
 /**
  * Required to support Web Animations `@angular/platform-browser/animations`.
@@ -85,3 +57,5 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
+import 'reflect-metadata';
+(window as any).global = window;
\ No newline at end of file
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index c5d7f76..69409e8 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -55,6 +55,10 @@ body {
   background-attachment: fixed;
 }
 
+code[class*="language-"], pre[class*="language-"] {
+  white-space:pre-wrap;
+}
+
 .editor-error-notifications {
   position: absolute;
   left: -226px;
diff --git a/ui/src/tsconfig.app.json b/ui/src/tsconfig.app.json
index 08692bc..7928203 100644
--- a/ui/src/tsconfig.app.json
+++ b/ui/src/tsconfig.app.json
@@ -3,11 +3,13 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
-    "module": "es2015",
     "types": []
-  },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
-  ]
+  },
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
 }
\ No newline at end of file
diff --git a/ui/src/tsconfig.spec.json b/ui/src/tsconfig.spec.json
index 5353377..5bbe9f1 100644
--- a/ui/src/tsconfig.spec.json
+++ b/ui/src/tsconfig.spec.json
@@ -10,7 +10,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index 10b43f6..1c1aaca 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -2,6 +2,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "downlevelIteration": true,
+    "importHelpers": true,
     "module": "esnext",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
@@ -13,10 +14,13 @@
     "typeRoots": [
       "node_modules/@types"
     ],
-    "types": ["node"],
+    "types": [
+      "node"
+    ],
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "baseUrl": "./"
   }
-}
+}
\ No newline at end of file
diff --git a/ui/tslint.json b/ui/tslint.json
index 38f302b..0110a9b 100644
--- a/ui/tslint.json
+++ b/ui/tslint.json
@@ -11,7 +11,7 @@
     },
     "eofline": true,
     "forin": true,
-    "import-blacklist": [true, "rxjs", "rxjs/Rx"],
+    "import-blacklist": [true, "rxjs/Rx"],
     "import-spacing": true,
     "indent": [true, "spaces"],
     "interface-over-type-literal": true,
diff --git a/ui/webpack.config.base.js b/ui/webpack.config.base.js
index b0aeee3..503e71c 100644
--- a/ui/webpack.config.base.js
+++ b/ui/webpack.config.base.js
@@ -54,15 +54,23 @@ module.exports = {
                 loader: 'file-loader?name=assets/[name].[hash].[ext]',
             },
             {
-                test: /\.(sass|scss)$/,
+                test: /\.(scss|sass)$/,
                 use: [
-                    "to-string-loader",
-                    "style-loader",
-                    MiniCssExtractPlugin.loader,
-                    "css-loader",
-                    "sass-loader"
-                ]
+                    { loader: 'style-loader' },
+                    { loader: 'css-loader', options: { sourceMap: true } },
+                    { loader: 'sass-loader', options: { sourceMap: true } }
+                ],
+                include: path.join(__dirname, 'src',  'scss')
             },
+            {
+                test: /\.(scss|sass)$/,
+                use: [
+                    'to-string-loader',
+                    { loader: 'css-loader', options: { sourceMap: true } },
+                    { loader: 'sass-loader', options: { sourceMap: true } }
+                ],
+                include: path.join(__dirname, 'src', 'app')
+            }
         ],
     },
     resolve: {
@@ -83,9 +91,9 @@ module.exports = {
         new AngularCompilerPlugin({
             mainPath: 'main.ts',
             platform: 0,
-            sourceMap: true,
+            sourceMap: false,
             tsConfigPath: path.join(__dirname, 'src', 'tsconfig.app.json'),
-            skipCodeGeneration: true,
+            skipCodeGeneration: false,
             compilerOptions: {},
         }),
         new CopyWebpackPlugin(
diff --git a/ui/webpack.config.prod.js b/ui/webpack.config.prod.js
index f4ad750..46cf734 100644
--- a/ui/webpack.config.prod.js
+++ b/ui/webpack.config.prod.js
@@ -58,14 +58,14 @@ module.exports = merge(baseConfig, {
                     warnings: false,
                     parse: {},
                     compress: {},
-                    mangle: false, // Note `mangle.properties` is `false` by default.
+                    mangle: true, // Note `mangle.properties` is `false` by default.
                     module: false,
                     output: null,
                     toplevel: false,
                     nameCache: null,
                     ie8: false,
-                    keep_classnames: true,
-                    keep_fnames: true,
+                    keep_classnames: false,
+                    keep_fnames: false,
                     safari10: false,
                 },
             }),
diff --git a/ui/webpack.partial.base.js b/ui/webpack.partial.base.js
new file mode 100644
index 0000000..ec5ad0a
--- /dev/null
+++ b/ui/webpack.partial.base.js
@@ -0,0 +1,32 @@
+/*
+ *   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.
+ */
+
+const path = require('path');
+
+module.exports = {
+    module: {
+        rules: [
+            { test: /\.html$/, loader: 'raw-loader' }
+        ],
+    },
+    resolve: {
+        alias: {
+            npm: path.join(__dirname, 'node_modules'),
+            legacy: path.join(__dirname, 'src', 'assets', 'lib'),
+        }
+    }
+};
\ No newline at end of file
diff --git a/ui/webpack.partial.dev.js b/ui/webpack.partial.dev.js
new file mode 100644
index 0000000..149748d
--- /dev/null
+++ b/ui/webpack.partial.dev.js
@@ -0,0 +1,58 @@
+/*
+ *   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.
+ */
+
+const merge = require('webpack-merge');
+const baseConfig = require('./webpack.partial.base.js');
+
+module.exports = merge(baseConfig, {
+    devServer: {
+        compress: true,
+        port: 8082,
+        proxy: {
+            '/streampipes-connect': {
+                target: 'http://localhost:8099',
+                pathRewrite: { '^/streampipes-connect': '' },
+                secure: false,
+            },
+            '/streampipes-backend': {
+                target: 'http://localhost:8030',
+                secure: false,
+            },
+            '/visualizablepipeline': {
+                target: 'http://localhost:5984',
+                secure: false,
+            },
+            '/dashboard': {
+                target: 'http://localhost:5984',
+                secure: false,
+            },
+            '/widget': {
+                target: 'http://localhost:5984',
+                secure: false,
+            },
+            '/pipeline': {
+                target: 'http://localhost:5984',
+                secure: false,
+            },
+            '/streampipes/ws': {
+                target: 'ws://localhost:61614',
+                ws: true,
+                secure: false,
+            },
+        },
+    },
+});
\ No newline at end of file
diff --git a/ui/src/app/core/http-provider.config.ts b/ui/webpack.partial.js
similarity index 78%
copy from ui/src/app/core/http-provider.config.ts
copy to ui/webpack.partial.js
index 7449f22..9243d5f 100644
--- a/ui/src/app/core/http-provider.config.ts
+++ b/ui/webpack.partial.js
@@ -16,8 +16,6 @@
  *
  */
 
-//httpProviderConfig.$inject = ['$httpProvider'];
-export default function httpProviderConfig($httpProvider) {
-	$httpProvider.defaults.withCredentials = true;
-	//$httpProvider.interceptors.push('httpInterceptor');
-};
+module.exports = (env) => {
+    return require(`./webpack.partial.${env}.js`)
+}
\ No newline at end of file
diff --git a/ui/webpack.partial.prod.js b/ui/webpack.partial.prod.js
new file mode 100644
index 0000000..d4446e9
--- /dev/null
+++ b/ui/webpack.partial.prod.js
@@ -0,0 +1,26 @@
+/*
+ *   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.
+ */
+
+const CompressionPlugin = require('compression-webpack-plugin');
+const merge = require('webpack-merge');
+const baseConfig = require('./webpack.partial.base.js');
+
+module.exports = merge(baseConfig, {
+    plugins: [
+        new CompressionPlugin
+    ],
+});
\ No newline at end of file


[incubator-streampipes] 01/03: Add some code improvements to avoid ts compiler warnings

Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit fb5e6bb72e853f5475a3e30c60ead089f12308c3
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Feb 15 21:48:09 2020 +0100

    Add some code improvements to avoid ts compiler warnings
---
 .../consul-configs-boolean.component.ts                   |  2 +-
 .../consul-configs-number.component.ts                    |  2 +-
 .../consul-configs-password.component.ts                  |  6 +++---
 .../consul-configs-text/consul-configs-text.component.ts  |  2 +-
 .../messaging-configuration.component.ts                  |  4 ++--
 .../adapter-export/adapter-export-dialog.component.ts     |  2 +-
 .../adapter-upload/adapter-upload-dialog.component.ts     |  2 +-
 ui/src/app/connect/format-component/format.component.ts   |  3 +--
 .../component/adapter-started-dialog.component.ts         |  2 +-
 .../event-property-list/event-property-list.component.ts  |  2 +-
 .../event-property-primitive.component.ts                 |  7 +++----
 .../event-property/event-property.component.ts            |  4 ++--
 .../schema-editor/event-schema/event-schema.component.ts  |  6 +++---
 .../app/connect/schema-editor/model/EventPropertyList.ts  |  3 ++-
 .../static-collection/static-collection.component.ts      |  2 +-
 .../static-color-picker/static-color-picker.component.ts  |  8 ++++----
 .../static-file-input/static-file-input.component.ts      | 15 +++++++--------
 .../static-free-input/static-free-input.component.ts      | 10 +++++-----
 .../static-mapping-nary/static-mapping-nary.component.ts  |  4 +---
 .../static-mapping-unary.component.ts                     |  4 ++--
 .../static-number-input/static-number-input.component.ts  | 10 +++++-----
 .../static-properties/static-property.component.ts        |  4 ++--
 .../static-secret-input/static-secret-input.component.ts  |  8 ++++----
 .../static-text-input/static-text-input.component.ts      | 11 ++++++-----
 .../static-url-input/static-url-input.component.ts        |  7 ++++---
 ui/src/app/data-explorer/explorer/explorer.component.html |  2 +-
 26 files changed, 65 insertions(+), 67 deletions(-)

diff --git a/ui/src/app/configuration/consul-configs-boolean/consul-configs-boolean.component.ts b/ui/src/app/configuration/consul-configs-boolean/consul-configs-boolean.component.ts
index 2065fa4..e32d3d3 100644
--- a/ui/src/app/configuration/consul-configs-boolean/consul-configs-boolean.component.ts
+++ b/ui/src/app/configuration/consul-configs-boolean/consul-configs-boolean.component.ts
@@ -28,7 +28,7 @@ import {ConfigurationService} from '../shared/configuration.service'
 })
 export class ConsulConfigsBooleanComponent {
     @Input() configuration: StreampipesPeContainerConifgs
-    constructor(private configService:ConfigurationService) {    
+    constructor(public configService:ConfigurationService) {
     }
 
 }
\ No newline at end of file
diff --git a/ui/src/app/configuration/consul-configs-number/consul-configs-number.component.ts b/ui/src/app/configuration/consul-configs-number/consul-configs-number.component.ts
index bb2bdbd..be26790 100644
--- a/ui/src/app/configuration/consul-configs-number/consul-configs-number.component.ts
+++ b/ui/src/app/configuration/consul-configs-number/consul-configs-number.component.ts
@@ -27,7 +27,7 @@ import {ConfigurationService} from '../shared/configuration.service';
 })
 export class ConsulConfigsNumberComponent {
     @Input() configuration: StreampipesPeContainerConifgs
-    constructor(private configService:ConfigurationService) {    
+    constructor(public configService:ConfigurationService) {
     }
 
 }
\ No newline at end of file
diff --git a/ui/src/app/configuration/consul-configs-password/consul-configs-password.component.ts b/ui/src/app/configuration/consul-configs-password/consul-configs-password.component.ts
index eb690b2..cb90c3b 100644
--- a/ui/src/app/configuration/consul-configs-password/consul-configs-password.component.ts
+++ b/ui/src/app/configuration/consul-configs-password/consul-configs-password.component.ts
@@ -34,11 +34,11 @@ export class ConsulConfigsPasswordComponent {
     @Input() configuration: StreampipesPeContainerConifgs;
 
     password: string; 
-    private show: Boolean;
-    private className: String;
+    show: Boolean;
+    className: String;
     private hide: Boolean;
     
-    constructor(private configService: ConfigurationService) { 
+    constructor(public configService: ConfigurationService) {
         this.password = hiddenPasswordString; 
         this.show = false;
         this.className  = "hideText";
diff --git a/ui/src/app/configuration/consul-configs-text/consul-configs-text.component.ts b/ui/src/app/configuration/consul-configs-text/consul-configs-text.component.ts
index 00da789..59e5f20 100644
--- a/ui/src/app/configuration/consul-configs-text/consul-configs-text.component.ts
+++ b/ui/src/app/configuration/consul-configs-text/consul-configs-text.component.ts
@@ -28,7 +28,7 @@ import {ConfigurationService} from '../shared/configuration.service'
 })
 export class ConsulConfigsTextComponent {
     @Input() configuration: StreampipesPeContainerConifgs
-    constructor(private configService: ConfigurationService) {    
+    constructor(public configService: ConfigurationService) {
     }
     
 }
\ No newline at end of file
diff --git a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.ts b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.ts
index 81f8581..d19825e 100644
--- a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.ts
+++ b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.ts
@@ -28,8 +28,8 @@ import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 })
 export class MessagingConfigurationComponent {
 
-    private messagingSettings: MessagingSettings;
-    private loadingCompleted: boolean = false;
+    messagingSettings: MessagingSettings;
+    loadingCompleted: boolean = false;
 
     constructor(private configurationService: ConfigurationService) {
 
diff --git a/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts b/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts
index 4abd07d..0cec183 100644
--- a/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts
+++ b/ui/src/app/connect/data-marketplace/adapter-export/adapter-export-dialog.component.ts
@@ -29,7 +29,7 @@ import {TsonLdSerializerService} from '../../../platform-services/tsonld-seriali
 })
 export class AdapterExportDialog {
 
-    private adapterJsonLd;
+    adapterJsonLd;
 
     constructor(
         public dialogRef: MatDialogRef<AdapterExportDialog>,
diff --git a/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts b/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts
index 84ff608..061d5bf 100644
--- a/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts
+++ b/ui/src/app/connect/data-marketplace/adapter-upload/adapter-upload-dialog.component.ts
@@ -31,7 +31,7 @@ import {AdapterDescription} from '../../model/connect/AdapterDescription';
 export class AdapterUploadDialog {
 
     private selectedUploadFile: File;
-    private uploaded: boolean;
+    uploaded: boolean;
 
     constructor(
         public dialogRef: MatDialogRef<AdapterUploadDialog>,
diff --git a/ui/src/app/connect/format-component/format.component.ts b/ui/src/app/connect/format-component/format.component.ts
index ab4b9da..3141a37 100644
--- a/ui/src/app/connect/format-component/format.component.ts
+++ b/ui/src/app/connect/format-component/format.component.ts
@@ -36,9 +36,8 @@ export class FormatComponent {
   editableEmitter = new EventEmitter();
   @Output()
   selectedFormatEmitter = new EventEmitter();
-  private hasConfig: Boolean;
-
 
+  hasConfig: Boolean;
 
   constructor(private ShepherdService: ShepherdService) {
     this.hasConfig = true;
diff --git a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts b/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
index 7d174da..8c6b392 100644
--- a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
+++ b/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
@@ -35,7 +35,7 @@ import {MappingPropertyUnary} from '../../model/MappingPropertyUnary';
 })
 export class AdapterStartedDialog {
 
-    private adapterInstalled: boolean = false;
+    adapterInstalled: boolean = false;
     private adapterStatus: StatusMessage;
     private streamDescription: any;
     private pollingActive: boolean = false;
diff --git a/ui/src/app/connect/schema-editor/event-property-list/event-property-list.component.ts b/ui/src/app/connect/schema-editor/event-property-list/event-property-list.component.ts
index eee281c..19742ed 100644
--- a/ui/src/app/connect/schema-editor/event-property-list/event-property-list.component.ts
+++ b/ui/src/app/connect/schema-editor/event-property-list/event-property-list.component.ts
@@ -35,7 +35,7 @@ export class EventPropertyListComponent implements OnInit {
   @Input() property: EventPropertyList;
   @Input() index: number;
 
-  private runtimeDataTypes;
+  runtimeDataTypes;
 
   @Input() isEditable: boolean;
 
diff --git a/ui/src/app/connect/schema-editor/event-property-primitive/event-property-primitive.component.ts b/ui/src/app/connect/schema-editor/event-property-primitive/event-property-primitive.component.ts
index 43729cd..4562307 100644
--- a/ui/src/app/connect/schema-editor/event-property-primitive/event-property-primitive.component.ts
+++ b/ui/src/app/connect/schema-editor/event-property-primitive/event-property-primitive.component.ts
@@ -40,16 +40,15 @@ export class EventPropertyPrimitiveComponent implements OnInit, DoCheck {
   @Input() index: number;
 
   @Input() domainPropertyGuess: DomainPropertyProbabilityList;
-
   @Input() isEditable: boolean;
 
-
-  private propertyPrimitivForm: FormGroup;
-  private runtimeDataTypes;
   @Output() delete: EventEmitter<EventProperty> = new EventEmitter<EventProperty>();
   @Output() addPrimitive: EventEmitter<EventProperty> = new EventEmitter<EventProperty>();
   @Output() addNested: EventEmitter<any> = new EventEmitter<any>();
 
+  private propertyPrimitivForm: FormGroup;
+  runtimeDataTypes;
+
   private transformUnitEnable = false;
   private possibleUnitTransformations: UnitDescription[] = [];
   private selectUnit: UnitDescription;
diff --git a/ui/src/app/connect/schema-editor/event-property/event-property.component.ts b/ui/src/app/connect/schema-editor/event-property/event-property.component.ts
index 0c65950..24e1b0f 100644
--- a/ui/src/app/connect/schema-editor/event-property/event-property.component.ts
+++ b/ui/src/app/connect/schema-editor/event-property/event-property.component.ts
@@ -70,7 +70,7 @@ export class EventPropertyComponent implements OnInit {
         });
     }
 
-    private isEventPropertyPrimitive(instance: EventProperty): boolean {
+    isEventPropertyPrimitive(instance: EventProperty): boolean {
         return instance instanceof EventPropertyPrimitive;
     }
 
@@ -78,7 +78,7 @@ export class EventPropertyComponent implements OnInit {
         return instance instanceof EventPropertyNested;
     }
 
-    private isEventPropertyList(instance: EventProperty): boolean {
+    isEventPropertyList(instance: EventProperty): boolean {
         return instance instanceof EventPropertyList;
     }
 
diff --git a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts b/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts
index a191fef..7c2f9bd 100644
--- a/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts
+++ b/ui/src/app/connect/schema-editor/event-schema/event-schema.component.ts
@@ -74,7 +74,7 @@ export class EventSchemaComponent implements OnChanges {
   };
 
 
-  private onUpdateData(treeComponent: TreeComponent): void {
+  public onUpdateData(treeComponent: TreeComponent): void {
     treeComponent.treeModel.expandAll();
   }
 
@@ -110,7 +110,7 @@ export class EventSchemaComponent implements OnChanges {
     this.tree.treeModel.update();
   }
 
-  public addNestedProperty(eventProperty): void {
+  public addNestedProperty(eventProperty?: EventPropertyNested): void {
     const uuid: string = UUID.UUID();
     if (eventProperty === undefined) {
       this.eventSchema.eventProperties.push(new EventPropertyNested(uuid, undefined));
@@ -121,7 +121,7 @@ export class EventSchemaComponent implements OnChanges {
   }
 
 
-  public removeSelectedProperties(eventProperties: any): void {
+  public removeSelectedProperties(eventProperties?: any): void {
     eventProperties = eventProperties || this.eventSchema.eventProperties;
     for (let i = eventProperties.length - 1; i >= 0; --i) {
       if (eventProperties[i].eventProperties) {
diff --git a/ui/src/app/connect/schema-editor/model/EventPropertyList.ts b/ui/src/app/connect/schema-editor/model/EventPropertyList.ts
index cd6a051..6fc4f09 100644
--- a/ui/src/app/connect/schema-editor/model/EventPropertyList.ts
+++ b/ui/src/app/connect/schema-editor/model/EventPropertyList.ts
@@ -19,13 +19,14 @@
 import {EventProperty} from './EventProperty';
 import {RdfsClass} from '../../../platform-services/tsonld/RdfsClass';
 import {RdfProperty} from '../../../platform-services/tsonld/RdfsProperty';
+import {EventPropertyPrimitive} from "./EventPropertyPrimitive";
 //  extends EventProperty
 
 @RdfsClass('sp:EventPropertyList')
 export class EventPropertyList extends EventProperty {
 
     @RdfProperty('sp:hasEventProperty')
-    eventProperty: EventProperty;
+    eventProperty: EventPropertyPrimitive;
 
     constructor(propertyID: string, parent: EventProperty) {
         super(propertyID, parent);
diff --git a/ui/src/app/connect/static-properties/static-collection/static-collection.component.ts b/ui/src/app/connect/static-properties/static-collection/static-collection.component.ts
index a447352..7334a53 100644
--- a/ui/src/app/connect/static-properties/static-collection/static-collection.component.ts
+++ b/ui/src/app/connect/static-properties/static-collection/static-collection.component.ts
@@ -31,7 +31,7 @@ import {StaticPropertyUtilService} from '../static-property-util.service';
 })
 export class StaticCollectionComponent {
 
-    @Input() staticProperty: StaticProperty;
+    @Input() staticProperty: CollectionStaticProperty;
     @Input() adapterId: string;
     @Input() eventSchema: EventSchema;
 
diff --git a/ui/src/app/connect/static-properties/static-color-picker/static-color-picker.component.ts b/ui/src/app/connect/static-properties/static-color-picker/static-color-picker.component.ts
index 597774d..7d6d726 100644
--- a/ui/src/app/connect/static-properties/static-color-picker/static-color-picker.component.ts
+++ b/ui/src/app/connect/static-properties/static-color-picker/static-color-picker.component.ts
@@ -11,7 +11,7 @@ import {FormControl, FormGroup, Validators} from "@angular/forms";
 })
 export class StaticColorPickerComponent implements OnInit {
 
-    constructor(private staticPropertyUtil: StaticPropertyUtilService){
+    constructor(public staticPropertyUtil: StaticPropertyUtilService){
 
     }
 
@@ -20,9 +20,9 @@ export class StaticColorPickerComponent implements OnInit {
     @Input() staticProperty: StaticProperty;
     @Output() inputEmitter: EventEmitter<any> = new EventEmitter<any>();
 
-    private inputValue: String;
-    private hasInput: Boolean;
-    private colorPickerForm: FormGroup;
+    inputValue: String;
+    hasInput: Boolean;
+    colorPickerForm: FormGroup;
 
     ngOnInit() {
         this.colorPickerForm = new FormGroup({
diff --git a/ui/src/app/connect/static-properties/static-file-input/static-file-input.component.ts b/ui/src/app/connect/static-properties/static-file-input/static-file-input.component.ts
index 807025a..d5ebb64 100644
--- a/ui/src/app/connect/static-properties/static-file-input/static-file-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-file-input/static-file-input.component.ts
@@ -37,18 +37,17 @@ export class StaticFileInputComponent implements OnInit {
     @Input() adapterId: String;
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
 
-    private inputValue: String;
-    private fileName: String;
+    inputValue: String;
+    fileName: String;
 
+    selectedUploadFile: File;
 
-    private selectedUploadFile: File;
+    hasInput: Boolean;
+    errorMessage = "Please enter a value";
 
-    private hasInput: Boolean;
-    private errorMessage = "Please enter a value";
+    uploadStatus = 0;
 
-    private uploadStatus = 0;
-
-    constructor(private staticPropertyUtil: StaticPropertyUtilService, private staticFileRestService: StaticFileRestService){
+    constructor(public staticPropertyUtil: StaticPropertyUtilService, private staticFileRestService: StaticFileRestService){
 
     }
 
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
index 9553848..74b2eba 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
@@ -35,12 +35,12 @@ export class StaticFreeInputComponent implements OnInit {
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
     @Output() updateEmitter: EventEmitter<ConfigurationInfo> = new EventEmitter();
     
-    private freeTextForm: FormGroup;
-    private inputValue: String;
-    private hasInput: Boolean;
-    private errorMessage = "Please enter a value";
+    freeTextForm: FormGroup;
+    inputValue: String;
+    hasInput: Boolean;
+    errorMessage = "Please enter a value";
 
-    constructor(private staticPropertyUtil: StaticPropertyUtilService){
+    constructor(public staticPropertyUtil: StaticPropertyUtilService){
 
     }
 
diff --git a/ui/src/app/connect/static-properties/static-mapping-nary/static-mapping-nary.component.ts b/ui/src/app/connect/static-properties/static-mapping-nary/static-mapping-nary.component.ts
index 6817b43..0329f43 100644
--- a/ui/src/app/connect/static-properties/static-mapping-nary/static-mapping-nary.component.ts
+++ b/ui/src/app/connect/static-properties/static-mapping-nary/static-mapping-nary.component.ts
@@ -40,7 +40,7 @@ export class StaticMappingNaryComponent extends StaticMappingComponent implement
 
     private inputValue: String;
     private hasInput: Boolean;
-    private availableProperties: Array<EventProperty>;
+    availableProperties: Array<EventProperty>;
 
     constructor(staticPropertyUtil: StaticPropertyUtilService,
                 PropertySelectorService: PropertySelectorService){
@@ -53,8 +53,6 @@ export class StaticMappingNaryComponent extends StaticMappingComponent implement
         if (!this.staticProperty.selectedProperties) {
             this.staticProperty.selectedProperties = [];
         }
-        console.log(this.eventSchema);
-        console.log(this.staticProperty);
     }
 
     selectOption(property: EventProperty, $event) {
diff --git a/ui/src/app/connect/static-properties/static-mapping-unary/static-mapping-unary.component.ts b/ui/src/app/connect/static-properties/static-mapping-unary/static-mapping-unary.component.ts
index 6b10140..7704ed0 100644
--- a/ui/src/app/connect/static-properties/static-mapping-unary/static-mapping-unary.component.ts
+++ b/ui/src/app/connect/static-properties/static-mapping-unary/static-mapping-unary.component.ts
@@ -39,11 +39,11 @@ export class StaticMappingUnaryComponent extends StaticMappingComponent implemen
     @Input() staticProperty: MappingPropertyUnary;
     @Input() eventSchema: EventSchema;
 
-    private unaryTextForm: FormGroup;
+    unaryTextForm: FormGroup;
     private inputValue: String;
     private hasInput: Boolean;
     private errorMessage = "Please enter a value";
-    private availableProperties: Array<EventProperty>;
+    availableProperties: Array<EventProperty>;
 
     constructor(staticPropertyUtil: StaticPropertyUtilService,
                 PropertySelectorService: PropertySelectorService){
diff --git a/ui/src/app/connect/static-properties/static-number-input/static-number-input.component.ts b/ui/src/app/connect/static-properties/static-number-input/static-number-input.component.ts
index f7002d7..04bd6d4 100644
--- a/ui/src/app/connect/static-properties/static-number-input/static-number-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-number-input/static-number-input.component.ts
@@ -40,13 +40,13 @@ export class StaticNumberInputComponent implements OnInit {
 
 
 
-    private freeTextForm: FormGroup;
-    private inputValue: String;
-    private errorMessage = "Please enter a valid Number";
-    private hasInput: Boolean;
+    freeTextForm: FormGroup;
+    inputValue: String;
+    errorMessage = "Please enter a valid Number";
+    hasInput: Boolean;
 
 
-    constructor(private staticPropertyUtil: StaticPropertyUtilService){
+    constructor(public staticPropertyUtil: StaticPropertyUtilService){
 
     }
 
diff --git a/ui/src/app/connect/static-properties/static-property.component.ts b/ui/src/app/connect/static-properties/static-property.component.ts
index a8e9bd8..6839536 100644
--- a/ui/src/app/connect/static-properties/static-property.component.ts
+++ b/ui/src/app/connect/static-properties/static-property.component.ts
@@ -71,8 +71,8 @@ export class StaticPropertyComponent implements OnInit {
 
   constructor(
     private logger: Logger,
-    private xsService: xsService,
-    private staticPropertyUtil: StaticPropertyUtilService
+    public xsService: xsService,
+    public staticPropertyUtil: StaticPropertyUtilService
   ) {
     logger.log(this.staticProperty);
   }
diff --git a/ui/src/app/connect/static-properties/static-secret-input/static-secret-input.component.ts b/ui/src/app/connect/static-properties/static-secret-input/static-secret-input.component.ts
index b405916..dcaa31c 100644
--- a/ui/src/app/connect/static-properties/static-secret-input/static-secret-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-secret-input/static-secret-input.component.ts
@@ -30,7 +30,7 @@ import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
 })
 export class StaticSecretInputComponent implements OnInit {
 
-    constructor(private staticPropertyUtil: StaticPropertyUtilService){
+    constructor(public staticPropertyUtil: StaticPropertyUtilService){
 
     }
 
@@ -39,9 +39,9 @@ export class StaticSecretInputComponent implements OnInit {
     @Input() staticProperty: StaticProperty;
     @Output() inputEmitter: EventEmitter<any> = new EventEmitter<any>();
 
-    private inputValue: String;
-    private hasInput: Boolean;
-    private secretForm: FormGroup;
+    inputValue: String;
+    hasInput: Boolean;
+    secretForm: FormGroup;
     private errorMessage = "Please enter a valid Text";
 
     ngOnInit() {
diff --git a/ui/src/app/connect/static-properties/static-text-input/static-text-input.component.ts b/ui/src/app/connect/static-properties/static-text-input/static-text-input.component.ts
index 7b44cba..4bc4770 100644
--- a/ui/src/app/connect/static-properties/static-text-input/static-text-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-text-input/static-text-input.component.ts
@@ -30,7 +30,7 @@ import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
 })
 export class StaticTextInputComponent implements OnInit {
 
-    constructor(private staticPropertyUtil: StaticPropertyUtilService){
+    constructor(public staticPropertyUtil: StaticPropertyUtilService){
 
     }
 
@@ -39,10 +39,11 @@ export class StaticTextInputComponent implements OnInit {
     @Input() staticProperty: StaticProperty;
     @Output() inputEmitter: EventEmitter<any> = new EventEmitter<any>();
 
-    private freeTextForm: FormGroup;
-    private inputValue: String;
-    private hasInput: Boolean;
-    private errorMessage = "Please enter a valid Text";
+    freeTextForm: FormGroup;
+    inputValue: String;
+    hasInput: Boolean;
+    errorMessage = "Please enter a valid Text";
+
     ngOnInit() {
         this.freeTextForm = new FormGroup({
             'freeStaticTextString': new FormControl(this.inputValue, [
diff --git a/ui/src/app/connect/static-properties/static-url-input/static-url-input.component.ts b/ui/src/app/connect/static-properties/static-url-input/static-url-input.component.ts
index f4aa529..6ae4ae6 100644
--- a/ui/src/app/connect/static-properties/static-url-input/static-url-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-url-input/static-url-input.component.ts
@@ -33,16 +33,17 @@ import {StaticPropertyUtilService} from '../static-property-util.service';
     styleUrls: ['./static-url-input.component.css']
 })
 export class StaticUrlInputComponent implements OnInit {
-    constructor(private staticPropertyUtil: StaticPropertyUtilService){
+
+    constructor(public staticPropertyUtil: StaticPropertyUtilService){
 
     }
 
     @Input() staticProperty: StaticProperty;
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
     
-    private freeTextForm: FormGroup;
+    freeTextForm: FormGroup;
     private inputValue: String;
-    private hasInput: Boolean;
+    hasInput: Boolean;
     private errorMessage = "Please enter a valid Url";
     ngOnInit() {
         this.freeTextForm = new FormGroup({
diff --git a/ui/src/app/data-explorer/explorer/explorer.component.html b/ui/src/app/data-explorer/explorer/explorer.component.html
index be20403..fef5927 100644
--- a/ui/src/app/data-explorer/explorer/explorer.component.html
+++ b/ui/src/app/data-explorer/explorer/explorer.component.html
@@ -31,7 +31,7 @@
                     </mat-autocomplete>
                 </mat-form-field>
             </div>
-            <div fxLayout="column" style="margin-top: 10px; margin-left: 5px" *ngIf="selectedInfoResult !== Undefined">
+            <div fxLayout="column" style="margin-top: 10px; margin-left: 5px" *ngIf="selectedInfoResult !== undefined">
                 <div fxLayout="row" fxLayoutAlign="start stretch">
                     <mat-form-field style="margin-right: 1px;top: -3px;height: 1px; width: 100px" appearance="outline"
                         *ngIf="dimensionProperties.length > 0">