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/06/09 17:50:38 UTC

[incubator-streampipes] branch STREAMPIPES-145 updated: [STREAMPIPES-145] Refactor static property rendering

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

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


The following commit(s) were added to refs/heads/STREAMPIPES-145 by this push:
     new c1b477a  [STREAMPIPES-145] Refactor static property rendering
c1b477a is described below

commit c1b477a3c38b376cf778b3fd9f7170d4e82ad06e
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue Jun 9 19:50:19 2020 +0200

    [STREAMPIPES-145] Refactor static property rendering
---
 .../model/runtime/RuntimeOptionsRequest.java       |  5 +-
 .../model/runtime/RuntimeOptionsResponse.java      |  5 +-
 ui/src/app/connect/rest.service.ts                 |  2 +-
 .../base/abstract-static-property.ts}              | 35 +++++-----
 .../static-alternatives.component.html             |  2 +-
 .../static-alternatives.component.ts               | 15 ++--
 .../static-any-input/static-any-input.component.ts |  7 +-
 .../static-collection.component.ts                 | 14 ++--
 .../static-color-picker.component.ts               |  9 +--
 .../static-file-input.component.ts                 | 16 ++---
 .../static-free-input.component.ts                 |  9 +--
 .../static-group/static-group.component.ts         | 14 ++--
 .../static-mapping-nary.component.ts               | 23 ++-----
 .../static-mapping-unary.component.ts              | 26 ++-----
 .../static-mapping/static-mapping.ts               | 21 +++++-
 .../static-number-input.component.ts               | 11 +--
 .../static-one-of-input.component.ts               | 11 +--
 .../static-property-util.service.ts                | 79 +++++++++++-----------
 .../static-property.component.html                 | 21 +++---
 .../static-properties/static-property.component.ts | 41 +++++------
 ...tic-runtime-resolvable-oneof-input.component.ts | 23 +++----
 .../static-secret-input.component.ts               | 10 +--
 .../static-text-input.component.ts                 |  9 +--
 .../static-url-input/static-url-input.component.ts |  8 ++-
 ui/src/app/core-model/gen/streampipes-model.ts     | 45 ++++++++++--
 .../components/pipeline/pipeline.component.ts      |  2 +-
 .../dialog/customize/customize.component.css       |  1 +
 .../dialog/customize/customize.component.html      | 16 +++--
 .../dialog/customize/customize.component.ts        | 26 +++++--
 ui/src/app/editor-v2/dialog/panel/dialog-ref.ts    | 15 ++--
 .../dialog/panel/panel-dialog.component.html       |  4 +-
 .../dialog/panel/panel-dialog.component.scss       | 17 ++---
 .../dialog/panel/panel-dialog.component.ts         | 38 ++++++++++-
 .../editor-v2/dialog/panel/panel-dialog.service.ts | 21 +++---
 34 files changed, 334 insertions(+), 267 deletions(-)

diff --git a/streampipes-model/src/main/java/org/apache/streampipes/model/runtime/RuntimeOptionsRequest.java b/streampipes-model/src/main/java/org/apache/streampipes/model/runtime/RuntimeOptionsRequest.java
index ebb7509..4f9033a 100644
--- a/streampipes-model/src/main/java/org/apache/streampipes/model/runtime/RuntimeOptionsRequest.java
+++ b/streampipes-model/src/main/java/org/apache/streampipes/model/runtime/RuntimeOptionsRequest.java
@@ -21,18 +21,19 @@ import io.fogsy.empire.annotations.RdfProperty;
 import io.fogsy.empire.annotations.RdfsClass;
 import org.apache.streampipes.model.SpDataStream;
 import org.apache.streampipes.model.base.UnnamedStreamPipesEntity;
+import org.apache.streampipes.model.shared.annotation.TsModel;
 import org.apache.streampipes.model.staticproperty.StaticProperty;
 import org.apache.streampipes.vocabulary.StreamPipes;
 
-import java.util.List;
-
 import javax.persistence.CascadeType;
 import javax.persistence.Entity;
 import javax.persistence.FetchType;
 import javax.persistence.OneToMany;
+import java.util.List;
 
 @RdfsClass(StreamPipes.RUNTIME_OPTIONS_REQUEST)
 @Entity
+@TsModel
 public class RuntimeOptionsRequest extends UnnamedStreamPipesEntity {
 
   @RdfProperty(StreamPipes.HAS_REQUEST_ID)
diff --git a/streampipes-model/src/main/java/org/apache/streampipes/model/runtime/RuntimeOptionsResponse.java b/streampipes-model/src/main/java/org/apache/streampipes/model/runtime/RuntimeOptionsResponse.java
index 1eab795..1a5cd18 100644
--- a/streampipes-model/src/main/java/org/apache/streampipes/model/runtime/RuntimeOptionsResponse.java
+++ b/streampipes-model/src/main/java/org/apache/streampipes/model/runtime/RuntimeOptionsResponse.java
@@ -19,18 +19,19 @@ package org.apache.streampipes.model.runtime;
 
 import io.fogsy.empire.annotations.RdfProperty;
 import io.fogsy.empire.annotations.RdfsClass;
+import org.apache.streampipes.model.shared.annotation.TsModel;
 import org.apache.streampipes.model.staticproperty.Option;
 import org.apache.streampipes.vocabulary.StreamPipes;
 
-import java.util.List;
-
 import javax.persistence.CascadeType;
 import javax.persistence.Entity;
 import javax.persistence.FetchType;
 import javax.persistence.OneToMany;
+import java.util.List;
 
 @RdfsClass(StreamPipes.RUNTIME_OPTIONS_RESPONSE)
 @Entity
+@TsModel
 public class RuntimeOptionsResponse extends RuntimeOptionsRequest {
 
   @OneToMany(fetch = FetchType.EAGER,
diff --git a/ui/src/app/connect/rest.service.ts b/ui/src/app/connect/rest.service.ts
index bb05cb2..32d7214 100644
--- a/ui/src/app/connect/rest.service.ts
+++ b/ui/src/app/connect/rest.service.ts
@@ -34,7 +34,7 @@ import {AuthStatusService} from '../services/auth-status.service';
 import {StatusMessage} from "./model/message/StatusMessage";
 import {UnitDescription} from './model/UnitDescription';
 import {TsonLdSerializerService} from '../platform-services/tsonld-serializer.service';
-import {RuntimeOptionsResponse} from "./model/connect/runtime/RuntimeOptionsResponse";
+import {RuntimeOptionsResponse} from "../core-model/gen/streampipes-model";
 
 @Injectable()
 export class RestService {
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.css b/ui/src/app/connect/static-properties/base/abstract-static-property.ts
similarity index 66%
copy from ui/src/app/editor-v2/dialog/customize/customize.component.css
copy to ui/src/app/connect/static-properties/base/abstract-static-property.ts
index 916c3d1..2f8258d 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.css
+++ b/ui/src/app/connect/static-properties/base/abstract-static-property.ts
@@ -16,24 +16,25 @@
  *
  */
 
-.dialog-container {
-    display: flex;
-    flex-flow: column;
-    align-items: stretch;
-    flex: 1 1 100%;
-    height:100%;
-}
+import {
+  EventSchema,
+  StaticProperty,
+  StaticPropertyUnion
+} from "../../../core-model/gen/streampipes-model";
+import {Input} from "@angular/core";
 
-.mat-dialog-content {
-    margin: 0px;
-    flex: 1 1 auto;
-}
+export abstract class AbstractStaticPropertyRenderer<T extends StaticProperty> {
 
-.mat-dialog-actions {
-    padding: 10px;
-}
+  @Input()
+  staticProperty: T;
+
+  @Input()
+  staticProperties: Array<StaticPropertyUnion>;
+
+  @Input()
+  eventSchemas: EventSchema[];
+
+  @Input()
+  adapterId: string;
 
-.customize-section {
-    display:flex;
-    flex: 1 1 auto;
 }
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-alternatives/static-alternatives.component.html b/ui/src/app/connect/static-properties/static-alternatives/static-alternatives.component.html
index 088738c..66d019a 100644
--- a/ui/src/app/connect/static-properties/static-alternatives/static-alternatives.component.html
+++ b/ui/src/app/connect/static-properties/static-alternatives/static-alternatives.component.html
@@ -50,7 +50,7 @@
 
                 <div class="sp-blue-border" style="padding-top: 0px; padding-bottom: 0px;
                                                    padding-left: 10px; padding-right: 10px">
-                    <app-static-property [adapterId]="adapterId" [eventSchema]="eventSchema"
+                    <app-static-property [adapterId]="adapterId" [eventSchemas]="eventSchemas"
                                          [staticProperty]="alternative.staticProperty" (validateEmitter)="valueChange($event)"
                                          class="test fullWidth">
                     </app-static-property>
diff --git a/ui/src/app/connect/static-properties/static-alternatives/static-alternatives.component.ts b/ui/src/app/connect/static-properties/static-alternatives/static-alternatives.component.ts
index 3a44f79..df60b36 100644
--- a/ui/src/app/connect/static-properties/static-alternatives/static-alternatives.component.ts
+++ b/ui/src/app/connect/static-properties/static-alternatives/static-alternatives.component.ts
@@ -17,27 +17,20 @@
  */
 
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {AlternativesStaticProperty} from '../../model/AlternativesStaticProperty';
 import {EventSchema} from '../../schema-editor/model/EventSchema';
 import {GroupStaticProperty} from '../../model/GroupStaticProperty';
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {StaticPropertyAlternatives} from "../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-static-alternatives',
     templateUrl: './static-alternatives.component.html',
     styleUrls: ['./static-alternatives.component.css']
 })
-export class StaticAlternativesComponent implements OnInit {
+export class StaticAlternativesComponent
+    extends AbstractStaticPropertyRenderer<StaticPropertyAlternatives> implements OnInit {
 
 
-    @Input()
-    staticProperty: AlternativesStaticProperty;
-
-    @Input()
-    adapterId: string;
-
-    @Input()
-    eventSchema: EventSchema;
-
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
 
     private hasInput: Boolean;
diff --git a/ui/src/app/connect/static-properties/static-any-input/static-any-input.component.ts b/ui/src/app/connect/static-properties/static-any-input/static-any-input.component.ts
index 573c16d..c7adfe4 100644
--- a/ui/src/app/connect/static-properties/static-any-input/static-any-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-any-input/static-any-input.component.ts
@@ -17,16 +17,15 @@
  */
 
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {AnyStaticProperty} from '../../model/AnyStaticProperty';
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {AnyStaticProperty} from "../../../core-model/gen/streampipes-model";
 
 @Component({
   selector: 'app-static-any-input',
   templateUrl: './static-any-input.component.html',
   styleUrls: ['./static-any-input.component.css'],
 })
-export class StaticAnyInput implements OnInit {
-  @Input()
-  staticProperty: AnyStaticProperty;
+export class StaticAnyInput extends AbstractStaticPropertyRenderer<AnyStaticProperty> implements OnInit {
 
   @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
 
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 4f7410e..d87db50 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
@@ -18,9 +18,9 @@
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {ConfigurationInfo} from '../../model/message/ConfigurationInfo';
-import {CollectionStaticProperty} from '../../model/CollectionStaticProperty';
-import {EventSchema} from '../../schema-editor/model/EventSchema';
 import {StaticPropertyUtilService} from '../static-property-util.service';
+import {CollectionStaticProperty} from "../../../core-model/gen/streampipes-model";
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
 
 
 @Component({
@@ -28,21 +28,17 @@ import {StaticPropertyUtilService} from '../static-property-util.service';
     templateUrl: './static-collection.component.html',
     styleUrls: ['./static-collection.component.css']
 })
-export class StaticCollectionComponent {
+export class StaticCollectionComponent
+    extends AbstractStaticPropertyRenderer<CollectionStaticProperty> {
 
-    @Input() staticProperty: CollectionStaticProperty;
-    @Input() adapterId: string;
-    @Input() eventSchema: EventSchema;
 
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
     @Output() updateEmitter: EventEmitter<ConfigurationInfo> = new EventEmitter();
 
-
-
     private hasInput: Boolean;
 
     constructor(private staticPropertyUtil: StaticPropertyUtilService) {
-
+        super();
     }
 
 
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 159c256..c7a22df 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
@@ -18,24 +18,25 @@
 
 import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
 import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
-import {StaticProperty} from "../../model/StaticProperty";
 import {StaticPropertyUtilService} from "../static-property-util.service";
 import {FormControl, FormGroup, Validators} from "@angular/forms";
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {ColorPickerStaticProperty} from "../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-static-color-picker',
     templateUrl: './static-color-picker.component.html',
     styleUrls: ['./static-color-picker.component.css']
 })
-export class StaticColorPickerComponent implements OnInit {
+export class StaticColorPickerComponent
+    extends AbstractStaticPropertyRenderer<ColorPickerStaticProperty> implements OnInit {
 
     constructor(public staticPropertyUtil: StaticPropertyUtilService){
-
+        super();
     }
 
     @Output() updateEmitter: EventEmitter<ConfigurationInfo> = new EventEmitter();
 
-    @Input() staticProperty: StaticProperty;
     @Output() inputEmitter: EventEmitter<any> = new EventEmitter<any>();
 
     inputValue: String;
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 9572f8d..d8ccbf3 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
@@ -16,12 +16,12 @@
  *
  */
 
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {StaticProperty} from '../../model/StaticProperty';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import {StaticPropertyUtilService} from '../static-property-util.service';
 import {StaticFileRestService} from './static-file-rest.service';
-import {FileStaticProperty} from '../../model/FileStaticProperty';
 import {HttpEventType, HttpResponse} from '@angular/common/http';
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {FileStaticProperty} from "../../../core-model/gen/streampipes-model";
 
 
 @Component({
@@ -29,11 +29,8 @@ import {HttpEventType, HttpResponse} from '@angular/common/http';
     templateUrl: './static-file-input.component.html',
     styleUrls: ['./static-file-input.component.css']
 })
-export class StaticFileInputComponent implements OnInit {
+export class StaticFileInputComponent extends AbstractStaticPropertyRenderer<FileStaticProperty> implements OnInit {
 
-
-    @Input() staticProperty: StaticProperty;
-    @Input() adapterId: String;
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
 
     inputValue: String;
@@ -46,8 +43,9 @@ export class StaticFileInputComponent implements OnInit {
 
     uploadStatus = 0;
 
-    constructor(public staticPropertyUtil: StaticPropertyUtilService, private staticFileRestService: StaticFileRestService){
-
+    constructor(public staticPropertyUtil: StaticPropertyUtilService,
+                private staticFileRestService: StaticFileRestService){
+        super();
     }
 
     ngOnInit() {
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 70279f0..d9acdcc 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
@@ -21,6 +21,8 @@ import {StaticProperty} from '../../model/StaticProperty';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {StaticPropertyUtilService} from '../static-property-util.service';
 import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {FreeTextStaticProperty} from "../../../core-model/gen/streampipes-model";
 
 
 @Component({
@@ -28,10 +30,9 @@ import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
     templateUrl: './static-free-input.component.html',
     styleUrls: ['./static-free-input.component.css']
 })
-export class StaticFreeInputComponent implements OnInit {
+export class StaticFreeInputComponent
+    extends AbstractStaticPropertyRenderer<FreeTextStaticProperty> implements OnInit {
 
-
-    @Input() staticProperty: StaticProperty;
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
     @Output() updateEmitter: EventEmitter<ConfigurationInfo> = new EventEmitter();
     
@@ -41,7 +42,7 @@ export class StaticFreeInputComponent implements OnInit {
     errorMessage = "Please enter a value";
 
     constructor(public staticPropertyUtil: StaticPropertyUtilService){
-
+        super();
     }
 
 
diff --git a/ui/src/app/connect/static-properties/static-group/static-group.component.ts b/ui/src/app/connect/static-properties/static-group/static-group.component.ts
index e4ab9dc..433546c 100644
--- a/ui/src/app/connect/static-properties/static-group/static-group.component.ts
+++ b/ui/src/app/connect/static-properties/static-group/static-group.component.ts
@@ -19,22 +19,16 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {GroupStaticProperty} from '../../model/GroupStaticProperty';
 import {EventSchema} from '../../schema-editor/model/EventSchema';
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {StaticPropertyGroup} from "../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-static-group',
     templateUrl: './static-group.component.html',
     styleUrls: ['./static-group.component.css']
 })
-export class StaticGroupComponent {
-
-    @Input()
-    staticProperty: GroupStaticProperty;
-
-    @Input()
-    adapterId: string;
-
-    @Input()
-    eventSchema: EventSchema;
+export class StaticGroupComponent
+    extends AbstractStaticPropertyRenderer<StaticPropertyGroup> {
 
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
 
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 5294e8b..49784ad 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
@@ -18,11 +18,9 @@
 
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {StaticPropertyUtilService} from '../static-property-util.service';
-import {MappingPropertyNary} from "../../model/MappingPropertyNary";
 import {StaticMappingComponent} from "../static-mapping/static-mapping";
 import {PropertySelectorService} from "../../../services/property-selector.service";
-import {EventProperty} from "../../schema-editor/model/EventProperty";
-import {EventSchema} from "../../schema-editor/model/EventSchema";
+import {EventProperty, MappingPropertyNary} from "../../../core-model/gen/streampipes-model";
 
 
 @Component({
@@ -30,16 +28,13 @@ import {EventSchema} from "../../schema-editor/model/EventSchema";
     templateUrl: './static-mapping-nary.component.html',
     styleUrls: ['./static-mapping-nary.component.scss']
 })
-export class StaticMappingNaryComponent extends StaticMappingComponent implements OnInit {
+export class StaticMappingNaryComponent extends StaticMappingComponent<MappingPropertyNary> implements OnInit {
 
-
-    @Input() staticProperty: MappingPropertyNary;
-    @Input() eventSchema: EventSchema;
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
 
     private inputValue: String;
     private hasInput: Boolean;
-    availableProperties: Array<EventProperty>;
+    availableProperties: Array<any>;
 
     constructor(staticPropertyUtil: StaticPropertyUtilService,
                 PropertySelectorService: PropertySelectorService){
@@ -61,7 +56,7 @@ export class StaticMappingNaryComponent extends StaticMappingComponent implement
         this.inputEmitter.emit(true);
     }
 
-    selectOption(property: EventProperty, $event) {
+    selectOption(property: any, $event) {
         if (property["checked"]) {
             this.addProperty(property);
         } else {
@@ -70,7 +65,7 @@ export class StaticMappingNaryComponent extends StaticMappingComponent implement
         }
     }
 
-    addProperty(property: EventProperty) {
+    addProperty(property: any) {
         if (this.staticProperty.selectedProperties.indexOf(property.propertySelector) < 0) {
             this.staticProperty.selectedProperties.push(this.makeSelector(property));
         }
@@ -92,14 +87,6 @@ export class StaticMappingNaryComponent extends StaticMappingComponent implement
         this.inputEmitter.emit(this.hasInput);
     }
 
-    extractPossibleSelections(): Array<EventProperty> {
-        return this.eventSchema.eventProperties.filter(ep => this.isInSelection(ep));
-    }
-
-    isInSelection(ep: EventProperty): boolean {
-        return this.staticProperty.mapsFromOptions.some(maps => maps === this.firstStreamPropertySelector + ep.runtimeName);
-    }
-
     selectAll() {
         this.selectNone();
         this.availableProperties.forEach(ep => {
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 6a201b0..7bad4f0 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
@@ -19,11 +19,9 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {StaticPropertyUtilService} from '../static-property-util.service';
-import {EventSchema} from '../../schema-editor/model/EventSchema';
 import {PropertySelectorService} from "../../../services/property-selector.service";
-import {MappingPropertyUnary} from "../../model/MappingPropertyUnary";
-import {EventProperty} from "../../schema-editor/model/EventProperty";
 import {StaticMappingComponent} from "../static-mapping/static-mapping";
+import {EventProperty, MappingPropertyUnary} from "../../../core-model/gen/streampipes-model";
 
 
 @Component({
@@ -31,39 +29,25 @@ import {StaticMappingComponent} from "../static-mapping/static-mapping";
     templateUrl: './static-mapping-unary.component.html',
     styleUrls: ['./static-mapping-unary.component.css']
 })
-export class StaticMappingUnaryComponent extends StaticMappingComponent implements OnInit {
+export class StaticMappingUnaryComponent extends StaticMappingComponent<MappingPropertyUnary> implements OnInit {
 
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
-    @Input() staticProperty: MappingPropertyUnary;
-    @Input() eventSchema: EventSchema;
 
     unaryTextForm: FormGroup;
     private inputValue: String;
     private hasInput: Boolean;
     private errorMessage = "Please enter a value";
-    availableProperties: Array<EventProperty>;
+    availableProperties: Array<any>;
 
     constructor(staticPropertyUtil: StaticPropertyUtilService,
                 PropertySelectorService: PropertySelectorService){
         super(staticPropertyUtil, PropertySelectorService);
     }
 
-    extractPossibleSelections(): Array<EventProperty> {
-        return this.eventSchema.eventProperties.filter(ep => this.isInSelection(ep));
-    }
-
-    isInSelection(ep: EventProperty): boolean {
-        // TODO this quick-fixes a deserialization bug in Tson-LD
-        if (!Array.isArray(this.staticProperty.mapsFromOptions)) {
-            let value: string = this.staticProperty.mapsFromOptions as any;
-            this.staticProperty.mapsFromOptions = [value];
-        }
-        return this.staticProperty.mapsFromOptions.some(maps => maps === this.firstStreamPropertySelector + ep.runtimeName);
-    }
-
     ngOnInit() {
         this.availableProperties = this.extractPossibleSelections();
-        this.availableProperties.forEach(ep => ep.propertySelector = this.firstStreamPropertySelector + ep.runtimeName);
+        this.availableProperties
+            .forEach(ep => ep.propertySelector = this.firstStreamPropertySelector + ep.runtimeName);
         if (!this.staticProperty.selectedProperty) {
             this.staticProperty.selectedProperty = this.availableProperties[0].propertySelector;
         }
diff --git a/ui/src/app/connect/static-properties/static-mapping/static-mapping.ts b/ui/src/app/connect/static-properties/static-mapping/static-mapping.ts
index be92070..ef5699d 100644
--- a/ui/src/app/connect/static-properties/static-mapping/static-mapping.ts
+++ b/ui/src/app/connect/static-properties/static-mapping/static-mapping.ts
@@ -18,15 +18,19 @@
 
 import {StaticPropertyUtilService} from "../static-property-util.service";
 import {PropertySelectorService} from "../../../services/property-selector.service";
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {EventProperty, MappingProperty} from "../../../core-model/gen/streampipes-model";
 
 
-export abstract class StaticMappingComponent {
+export abstract class StaticMappingComponent<T extends MappingProperty>
+    extends AbstractStaticPropertyRenderer<T> {
 
     protected firstStreamPropertySelector: string = "s0::";
+    protected secondStreamPropertySelector: string = "s1::";
 
     constructor(private staticPropertyUtil: StaticPropertyUtilService,
                 private PropertySelectorService: PropertySelectorService){
-
+        super();
     }
 
     getName(eventProperty) {
@@ -35,4 +39,17 @@ export abstract class StaticMappingComponent {
             : eventProperty.runTimeName;
     }
 
+    extractPossibleSelections(): Array<EventProperty> {
+        let properties: Array<EventProperty> = [];
+        this.eventSchemas.forEach(schema => {
+            properties = properties.concat(schema.eventProperties.filter(ep => this.isInSelection(ep)));
+        });
+        return properties;
+    }
+
+    isInSelection(ep: EventProperty): boolean {
+        return this.staticProperty.mapsFromOptions
+            .some(maps => (maps === this.firstStreamPropertySelector + ep.runtimeName)
+                || maps === this.secondStreamPropertySelector + ep.runtimeName);
+    }
 }
\ No newline at end of file
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 5263613..f52bdba 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
@@ -22,19 +22,20 @@ import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {ValidateNumber} from '../../select-protocol-component/input.validator';
 import {StaticPropertyUtilService} from '../static-property-util.service';
 import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {FreeTextStaticProperty} from "../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-static-number-input',
     templateUrl: './static-number-input.component.html',
     styleUrls: ['./static-number-input.component.css']
 })
-export class StaticNumberInputComponent implements OnInit {
-    @Input() staticProperty: StaticProperty;
+export class StaticNumberInputComponent
+    extends AbstractStaticPropertyRenderer<FreeTextStaticProperty> implements OnInit {
+
     @Output() inputEmitter: EventEmitter<any> = new EventEmitter<any>();
     @Output() updateEmitter: EventEmitter<ConfigurationInfo> = new EventEmitter();
 
-
-
     freeTextForm: FormGroup;
     inputValue: String;
     errorMessage = "Please enter a valid Number";
@@ -42,7 +43,7 @@ export class StaticNumberInputComponent implements OnInit {
 
 
     constructor(public staticPropertyUtil: StaticPropertyUtilService){
-
+        super();
     }
 
     ngOnInit() {
diff --git a/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.ts b/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.ts
index 3596cd1..9f9649a 100644
--- a/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.ts
@@ -17,23 +17,24 @@
  */
 
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {OneOfStaticProperty} from '../../model/OneOfStaticProperty';
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {OneOfStaticProperty} from "../../../core-model/gen/streampipes-model";
 
 @Component({
   selector: 'app-static-one-of-input',
   templateUrl: './static-one-of-input.component.html',
   styleUrls: ['./static-one-of-input.component.css']
 })
-export class StaticOneOfInputComponent implements OnInit {
+export class StaticOneOfInputComponent extends AbstractStaticPropertyRenderer<OneOfStaticProperty> implements OnInit {
 
-  @Input()
-  staticProperty: OneOfStaticProperty;
 
   @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
 
   selectedOption: string;
 
-  constructor() { }
+  constructor() {
+    super();
+  }
 
   ngOnInit() {
       if (this.noneSelected()) {
diff --git a/ui/src/app/connect/static-properties/static-property-util.service.ts b/ui/src/app/connect/static-properties/static-property-util.service.ts
index b85fbd9..c16d6b1 100644
--- a/ui/src/app/connect/static-properties/static-property-util.service.ts
+++ b/ui/src/app/connect/static-properties/static-property-util.service.ts
@@ -17,24 +17,19 @@
  */
 
 import {Injectable} from '@angular/core';
-import {StaticProperty} from '../model/StaticProperty';
-import {FreeTextStaticProperty} from '../model/FreeTextStaticProperty';
-import {SecretStaticProperty} from "../model/SecretStaticProperty";
-import {CollectionStaticProperty} from '../model/CollectionStaticProperty';
-import {FileStaticProperty} from "../model/FileStaticProperty";
-import {AnyStaticProperty} from "../model/AnyStaticProperty";
-import {MappingPropertyUnary} from "../model/MappingPropertyUnary";
-import {OneOfStaticProperty} from "../model/OneOfStaticProperty";
-import {MappingPropertyNary} from "../model/MappingPropertyNary";
-import {RuntimeResolvableOneOfStaticProperty} from "../model/RuntimeResolvableOneOfStaticProperty";
-import {RuntimeResolvableAnyStaticProperty} from "../model/RuntimeResolvableAnyStaticProperty";
-import {GroupStaticProperty} from "../model/GroupStaticProperty";
-import {AlternativesStaticProperty} from "../model/AlternativesStaticProperty";
-import {AlternativeStaticProperty} from "../model/AlternativeStaticProperty";
-import {Option} from "../model/Option";
+import {
+    AnyStaticProperty,
+    CollectionStaticProperty,
+    ColorPickerStaticProperty,
+    FileStaticProperty,
+    FreeTextStaticProperty,
+    MappingPropertyNary,
+    MappingPropertyUnary, OneOfStaticProperty, Option,
+    RuntimeResolvableAnyStaticProperty, RuntimeResolvableOneOfStaticProperty,
+    SecretStaticProperty,
+    StaticProperty, StaticPropertyAlternative, StaticPropertyAlternatives, StaticPropertyGroup
+} from "../../core-model/gen/streampipes-model";
 import {URI} from "../model/URI";
-import {ColorPickerStaticProperty} from "../model/ColorPickerStaticProperty";
-
 
 @Injectable()
 export class StaticPropertyUtilService{
@@ -45,18 +40,19 @@ export class StaticPropertyUtilService{
 
         if (val instanceof FreeTextStaticProperty) {
             clone = new FreeTextStaticProperty();
-            clone.id = id;
+            clone.elementId = id;
             clone.value = val.value;
             clone.requiredDomainProperty = val.requiredDomainProperty;
         }
         else if (val instanceof FileStaticProperty) {
-            clone = new FileStaticProperty(id);
+            clone = new FileStaticProperty();
+            clone.elementId = id;
             clone.endpointUrl = val.endpointUrl;
             clone.locationPath = val.locationPath;
         }
         else if (val instanceof MappingPropertyUnary) {
             clone = new MappingPropertyUnary();
-            clone.id = id;
+            clone.elementId = id;
             clone.requirementSelector = val.requirementSelector;
             clone.mapsFromOptions = val.mapsFromOptions;
             clone.propertyScope = val.propertyScope;
@@ -64,39 +60,44 @@ export class StaticPropertyUtilService{
         }
         else if (val instanceof MappingPropertyNary) {
             clone = new MappingPropertyNary();
-            clone.id = id;
+            clone.elementId = id;
             clone.requirementSelector = val.requirementSelector;
             clone.mapsFromOptions = val.mapsFromOptions;
             clone.propertyScope = val.propertyScope;
             clone.selectedProperties = val.selectedProperties;
         }
         else if (val instanceof SecretStaticProperty) {
-            clone = new SecretStaticProperty(id);
+            clone = new SecretStaticProperty();
+            clone.elementId = id;
             clone.value = val.value;
-            clone.isEncrypted = val.isEncrypted;
+            clone.encrypted = val.encrypted;
         }
         else if (val instanceof ColorPickerStaticProperty) {
             clone = new ColorPickerStaticProperty();
             clone.id = id;
             clone.selectedProperty = val.selectedColor;
         }
-        else if (val instanceof GroupStaticProperty) {
-            clone = new GroupStaticProperty(id);
+        else if (val instanceof StaticPropertyGroup) {
+            clone = new StaticPropertyGroup();
+            clone.elementId = id;
             clone.staticProperties = val.staticProperties.map(elem => this.clone(elem));
             clone.showLabel = val.showLabel;
             clone.horizontalRendering = val.horizontalRendering;
           }
-        else if (val instanceof AlternativesStaticProperty) {
-            clone = new AlternativesStaticProperty(id);
+        else if (val instanceof StaticPropertyAlternatives) {
+            clone = new StaticPropertyAlternatives();
+            clone.elementId = id;
             clone.alternatives = val.alternatives.map(elem => this.clone(elem));
         }
-        else if (val instanceof AlternativeStaticProperty) {
-            clone = new AlternativeStaticProperty(id);
+        else if (val instanceof StaticPropertyAlternative) {
+            clone = new StaticPropertyAlternative();
+            clone.elementId = id;
             clone.selected = val.selected;
             clone.staticProperty = this.clone(val.staticProperty);
         }
         else if (val instanceof CollectionStaticProperty) {
-            clone = new CollectionStaticProperty(id);
+            clone = new CollectionStaticProperty();
+            clone.elementId = id;
             clone.staticPropertyTemplate = this.clone(val.staticPropertyTemplate);
             clone.members = val.members.map(elem => this.clone(elem));
             clone.memberType = val.memberType;
@@ -110,19 +111,19 @@ export class StaticPropertyUtilService{
             val instanceof RuntimeResolvableAnyStaticProperty ? clone = new RuntimeResolvableAnyStaticProperty() :
               clone = new RuntimeResolvableOneOfStaticProperty();
 
-            clone.id = id;
+            clone.elementId = id;
             clone.dependsOn = val.dependsOn;
-            clone.value = val.value;
-            clone.requiredDomainProperty = val.requiredDomainProperty;
+            //clone.value = val.value;
+            //clone.requiredDomainProperty = val.requiredDomainProperty;
             clone.options = val.options.map(option => this.cloneOption(option));
             clone.horizontalRendering = val.horizontalRendering;
         }
         else if (val instanceof AnyStaticProperty || val instanceof OneOfStaticProperty){
             val instanceof AnyStaticProperty ? clone = new AnyStaticProperty() : clone = new OneOfStaticProperty();
 
-            clone.id = id;
-            clone.value = val.value;
-            clone.requiredDomainProperty = val.requiredDomainProperty;
+            clone.elementId = id;
+            //clone.value = val.value;
+            //clone.requiredDomainProperty = val.requiredDomainProperty;
             clone.options = val.options.map(option => this.cloneOption(option));
             clone.horizontalRendering = val.horizontalRendering;
         }
@@ -132,7 +133,7 @@ export class StaticPropertyUtilService{
 
     private copyStaticPropertyProperty(src: StaticProperty, dst: StaticProperty): StaticProperty {
         dst.label = src.label;
-        dst.elementName = src.elementName;
+        //dst.elementName = src.elementName;
         dst.description = src.description;
         dst.internalName = src.internalName;
         dst.index = src.index;
@@ -141,8 +142,8 @@ export class StaticPropertyUtilService{
 
     private cloneOption(val: Option) {
         let clone = new Option();
-        clone.id = 'urn:streampipes.org:spi::' + this.generateID(6);
-        clone.elementName = val.elementName;
+        clone.elementId = 'urn:streampipes.org:spi::' + this.generateID(6);
+        //clone.elementName = val.elementName;
         clone.name = val.name;
         clone.internalName = val.internalName;
         clone.selected = val.selected;
diff --git a/ui/src/app/connect/static-properties/static-property.component.html b/ui/src/app/connect/static-properties/static-property.component.html
index 0092d2b..036eb91 100644
--- a/ui/src/app/connect/static-properties/static-property.component.html
+++ b/ui/src/app/connect/static-properties/static-property.component.html
@@ -17,23 +17,23 @@
   -->
 
 <!--<mat-form-field class="example-full-width">-->
-<app-static-url-input *ngIf="isFreeTextStaticProperty(staticProperty) && staticPropertyUtil.asFreeTextStaticProperty(staticProperty).render && staticPropertyUtil.asFreeTextStaticProperty(staticProperty).requiredDomainProperty == xsService.SO_URL "
+<app-static-url-input *ngIf="isFreeTextStaticProperty(staticProperty) && staticPropertyUtil.asFreeTextStaticProperty(staticProperty).requiredDomainProperty == xsService.SO_URL "
     (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
 </app-static-url-input>
 
-<app-static-number-input *ngIf="isFreeTextStaticProperty(staticProperty) && staticPropertyUtil.asFreeTextStaticProperty(staticProperty).render && staticPropertyUtil.asFreeTextStaticProperty(staticProperty).requiredDomainProperty == xsService.XS_NUMBER"
+<app-static-number-input *ngIf="isFreeTextStaticProperty(staticProperty) && staticPropertyUtil.asFreeTextStaticProperty(staticProperty).requiredDomainProperty == xsService.XS_NUMBER"
                          (updateEmitter)="emitUpdate($event)" (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
 </app-static-number-input>
 
-<app-static-text-input *ngIf="isFreeTextStaticProperty(staticProperty) && staticPropertyUtil.asFreeTextStaticProperty(staticProperty).render && staticPropertyUtil.asFreeTextStaticProperty (staticProperty).requiredDomainProperty == xsService.XS_STRING1"
+<app-static-text-input *ngIf="isFreeTextStaticProperty(staticProperty) && staticPropertyUtil.asFreeTextStaticProperty (staticProperty).requiredDomainProperty == xsService.XS_STRING1"
     (updateEmitter)="emitUpdate($event)" (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
 </app-static-text-input>
 
-<app-static-secret-input *ngIf="isSecretStaticProperty(staticProperty) && staticPropertyUtil.asFreeTextStaticProperty(staticProperty).render"
+<app-static-secret-input *ngIf="isSecretStaticProperty(staticProperty)"
                        (updateEmitter)="emitUpdate($event)" (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
 </app-static-secret-input>
 
-<app-static-free-input *ngIf="isFreeTextStaticProperty(staticProperty) && staticPropertyUtil.asFreeTextStaticProperty(staticProperty).render && (staticPropertyUtil.asFreeTextStaticProperty (staticProperty).requiredDomainProperty == '' || !staticPropertyUtil.asFreeTextStaticProperty (staticProperty).requiredDomainProperty) "
+<app-static-free-input *ngIf="isFreeTextStaticProperty(staticProperty) && (staticPropertyUtil.asFreeTextStaticProperty (staticProperty).requiredDomainProperty == '' || !staticPropertyUtil.asFreeTextStaticProperty (staticProperty).requiredDomainProperty) "
     (inputEmitter)="valueChange($event)" (updateEmitter)="emitUpdate($event)" [staticProperty]="staticProperty">
 </app-static-free-input>
 
@@ -59,29 +59,30 @@
 </app-static-one-of-input>
 
 <app-static-mapping-unary *ngIf="isMappingPropertyUnary(staticProperty)"
-                         [eventSchema]="eventSchema" (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
+                         [eventSchemas]="eventSchemas" (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
 </app-static-mapping-unary>
 
-<app-static-mapping-nary *ngIf="isMappingNaryProperty(staticProperty)" [eventSchema]="eventSchema"
+<app-static-mapping-nary *ngIf="isMappingNaryProperty(staticProperty)" [eventSchemas]="eventSchemas"
                          (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
 </app-static-mapping-nary>
 
 <app-static-alternatives *ngIf="isAlternativesStaticProperty(staticProperty)"
-                         [adapterId]="adapterId" [eventSchema]="eventSchema"
+                         [adapterId]="adapterId" [eventSchemas]="eventSchemas"
                          [staticProperty]="staticProperty" class="test fullWidth"
                          (inputEmitter)="valueChange($event)">
 </app-static-alternatives>
 
 <app-static-group *ngIf="isGroupStaticProperty(staticProperty)"
-                  [adapterId]="adapterId" [eventSchema]="eventSchema"
+                  [adapterId]="adapterId" [eventSchemas]="eventSchemas"
                   [staticProperty]="staticProperty" class="test fullWidth"
                   (inputEmitter)="valueChange($event)">
 </app-static-group>
 
 <app-static-collection *ngIf="isCollectionStaticProperty(staticProperty)"
-                       [adapterId]="adapterId" [eventSchema]="eventSchema"
+                       [adapterId]="adapterId" [eventSchemas]="eventSchemas"
                        [staticProperty]="staticProperty" class="test fullWidth"
                        (inputEmitter)="valueChange($event)" (updateEmitter)="emitUpdate($event)">
 </app-static-collection>
+<mat-divider></mat-divider>
 
 
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 decaf7e..73331a2 100644
--- a/ui/src/app/connect/static-properties/static-property.component.ts
+++ b/ui/src/app/connect/static-properties/static-property.component.ts
@@ -17,26 +17,23 @@
  */
 
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {FreeTextStaticProperty} from '../model/FreeTextStaticProperty';
-import {StaticProperty} from '../model/StaticProperty';
-import {MappingPropertyUnary} from '../model/MappingPropertyUnary';
-import {OneOfStaticProperty} from '../model/OneOfStaticProperty';
 import {Logger} from '../../shared/logger/default-log.service';
 
 import {xsService} from '../../NS/XS.service';
 import {StaticPropertyUtilService} from './static-property-util.service';
-import {AnyStaticProperty} from '../model/AnyStaticProperty';
-import {FileStaticProperty} from '../model/FileStaticProperty';
-import {MappingPropertyNary} from '../model/MappingPropertyNary';
-import {EventSchema} from '../schema-editor/model/EventSchema';
-import {RuntimeResolvableOneOfStaticProperty} from "../model/RuntimeResolvableOneOfStaticProperty";
-import {RuntimeResolvableAnyStaticProperty} from "../model/RuntimeResolvableAnyStaticProperty";
 import {ConfigurationInfo} from "../model/message/ConfigurationInfo";
-import {SecretStaticProperty} from "../model/SecretStaticProperty";
-import {AlternativesStaticProperty} from '../model/AlternativesStaticProperty';
-import {GroupStaticProperty} from '../model/GroupStaticProperty';
-import {CollectionStaticProperty} from "../model/CollectionStaticProperty";
-import {ColorPickerStaticProperty} from "../model/ColorPickerStaticProperty";
+import {
+  AnyStaticProperty, CollectionStaticProperty, ColorPickerStaticProperty,
+  EventSchema,
+  FileStaticProperty,
+  FreeTextStaticProperty,
+  MappingPropertyNary,
+  MappingPropertyUnary,
+  OneOfStaticProperty, RuntimeResolvableAnyStaticProperty,
+  RuntimeResolvableOneOfStaticProperty,
+  SecretStaticProperty,
+  StaticProperty, StaticPropertyAlternatives, StaticPropertyGroup
+} from "../../core-model/gen/streampipes-model";
 
 @Component({
   selector: 'app-static-property',
@@ -45,6 +42,7 @@ import {ColorPickerStaticProperty} from "../model/ColorPickerStaticProperty";
   providers: [xsService],
 })
 export class StaticPropertyComponent implements OnInit {
+
   @Input()
   staticProperty: StaticProperty;
 
@@ -60,11 +58,8 @@ export class StaticPropertyComponent implements OnInit {
   @Output()
   updateEmitter: EventEmitter<ConfigurationInfo> = new EventEmitter();
 
-
   @Input()
-  eventSchema: EventSchema;
-
-  private frTxt: FreeTextStaticProperty;
+  eventSchemas: EventSchema[];
 
   @Input()
   completedStaticProperty: ConfigurationInfo;
@@ -92,8 +87,6 @@ export class StaticPropertyComponent implements OnInit {
     //     this.frTxt = <FreeTextStaticProperty> property;
     //     this.frTxt.requiredDomainProperty = "";
     // }
-    this.frTxt = <FreeTextStaticProperty>this.staticProperty;
-    this.frTxt.requiredDomainProperty = '';
   }
 
   isFreeTextStaticProperty(val) {
@@ -138,11 +131,11 @@ export class StaticPropertyComponent implements OnInit {
   }
 
   isGroupStaticProperty(val) {
-      return val instanceof GroupStaticProperty;
+      return val instanceof StaticPropertyGroup;
   }
 
   isAlternativesStaticProperty(val) {
-      return val instanceof AlternativesStaticProperty;
+      return val instanceof StaticPropertyAlternatives;
   }
 
   isCollectionStaticProperty(val) {
@@ -150,7 +143,7 @@ export class StaticPropertyComponent implements OnInit {
   }
 
   valueChange(hasInput) {
-    this.staticProperty.isValid = hasInput;
+    //this.staticProperty.isValid = hasInput;
     this.validateEmitter.emit();
   }
 
diff --git a/ui/src/app/connect/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts b/ui/src/app/connect/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
index 62c630d..7e68c34 100644
--- a/ui/src/app/connect/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.ts
@@ -17,27 +17,21 @@
  */
 
 import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
-import {RuntimeResolvableOneOfStaticProperty} from "../../model/RuntimeResolvableOneOfStaticProperty";
-import {StaticProperty} from "../../model/StaticProperty";
 import {RestService} from "../../rest.service";
-import {RuntimeOptionsRequest} from "../../model/connect/runtime/RuntimeOptionsRequest";
 import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {
+    RuntimeOptionsRequest,
+    RuntimeResolvableOneOfStaticProperty
+} from "../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-static-runtime-resolvable-oneof-input',
     templateUrl: './static-runtime-resolvable-oneof-input.component.html',
     styleUrls: ['./static-runtime-resolvable-oneof-input.component.css']
 })
-export class StaticRuntimeResolvableOneOfInputComponent implements OnInit, OnChanges {
-
-    @Input()
-    staticProperty: RuntimeResolvableOneOfStaticProperty;
-
-    @Input()
-    staticProperties: StaticProperty[];
-
-    @Input()
-    adapterId: string;
+export class StaticRuntimeResolvableOneOfInputComponent
+    extends AbstractStaticPropertyRenderer<RuntimeResolvableOneOfStaticProperty> implements OnInit, OnChanges {
 
     @Input()
     completedStaticProperty: ConfigurationInfo;
@@ -49,6 +43,7 @@ export class StaticRuntimeResolvableOneOfInputComponent implements OnInit, OnCha
     dependentStaticProperties: any = new Map();
 
     constructor(private RestService: RestService) {
+        super();
     }
 
     ngOnInit() {
@@ -88,7 +83,7 @@ export class StaticRuntimeResolvableOneOfInputComponent implements OnInit, OnCha
         for (let option of this.staticProperty.options) {
             option.selected = false;
         }
-        this.staticProperty.options.find(option => option.id === id).selected = true;
+        this.staticProperty.options.find(option => option.elementId === id).selected = true;
         this.inputEmitter.emit(true)
     }
 
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 2e1c74c..0c2d2e7 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
@@ -21,21 +21,23 @@ import {StaticProperty} from '../../model/StaticProperty';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {StaticPropertyUtilService} from '../static-property-util.service';
 import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
+import {SecretStaticProperty} from "../../../core-model/gen/streampipes-model";
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
 
 @Component({
     selector: 'app-static-secret-input',
     templateUrl: './static-secret-input.component.html',
     styleUrls: ['./static-secret-input.component.css']
 })
-export class StaticSecretInputComponent implements OnInit {
+export class StaticSecretInputComponent
+    extends AbstractStaticPropertyRenderer<SecretStaticProperty> implements OnInit {
 
     constructor(public staticPropertyUtil: StaticPropertyUtilService){
-
+        super();
     }
 
     @Output() updateEmitter: EventEmitter<ConfigurationInfo> = new EventEmitter();
 
-    @Input() staticProperty: StaticProperty;
     @Output() inputEmitter: EventEmitter<any> = new EventEmitter<any>();
 
     inputValue: String;
@@ -53,7 +55,7 @@ export class StaticSecretInputComponent implements OnInit {
 
     valueChange(inputValue) {
         this.inputValue = inputValue;
-        this.staticPropertyUtil.asSecretStaticProperty(this.staticProperty).isEncrypted = false;
+        this.staticPropertyUtil.asSecretStaticProperty(this.staticProperty).encrypted = false;
 
         if (inputValue == "" || !inputValue) {
             this.hasInput = false;
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 3b1ec67..2c39025 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
@@ -22,21 +22,22 @@ import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {ValidateString} from '../../select-protocol-component/input.validator';
 import {StaticPropertyUtilService} from '../static-property-util.service';
 import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {FreeTextStaticProperty} from "../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-static-text-input',
     templateUrl: './static-text-input.component.html',
     styleUrls: ['./static-text-input.component.css']
 })
-export class StaticTextInputComponent implements OnInit {
+export class StaticTextInputComponent
+    extends AbstractStaticPropertyRenderer<FreeTextStaticProperty> implements OnInit {
 
     constructor(public staticPropertyUtil: StaticPropertyUtilService){
-
+        super();
     }
 
     @Output() updateEmitter: EventEmitter<ConfigurationInfo> = new EventEmitter();
-
-    @Input() staticProperty: StaticProperty;
     @Output() inputEmitter: EventEmitter<any> = new EventEmitter<any>();
 
     freeTextForm: FormGroup;
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 7811393..200960f 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
@@ -21,19 +21,21 @@ import {StaticProperty} from '../../model/StaticProperty';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {ValidateUrl} from '../../select-protocol-component/input.validator';
 import {StaticPropertyUtilService} from '../static-property-util.service';
+import {AbstractStaticPropertyRenderer} from "../base/abstract-static-property";
+import {FreeTextStaticProperty} from "../../../core-model/gen/streampipes-model";
 
 @Component({
     selector: 'app-static-url-input',
     templateUrl: './static-url-input.component.html',
     styleUrls: ['./static-url-input.component.css']
 })
-export class StaticUrlInputComponent implements OnInit {
+export class StaticUrlInputComponent
+    extends AbstractStaticPropertyRenderer<FreeTextStaticProperty> implements OnInit {
 
     constructor(public staticPropertyUtil: StaticPropertyUtilService){
-
+        super();
     }
 
-    @Input() staticProperty: StaticProperty;
     @Output() inputEmitter: EventEmitter<Boolean> = new EventEmitter<Boolean>();
     
     freeTextForm: FormGroup;
diff --git a/ui/src/app/core-model/gen/streampipes-model.ts b/ui/src/app/core-model/gen/streampipes-model.ts
index 5bdaca4..4feb04c 100644
--- a/ui/src/app/core-model/gen/streampipes-model.ts
+++ b/ui/src/app/core-model/gen/streampipes-model.ts
@@ -16,14 +16,13 @@
  *
  */
 
-
 /* tslint:disable */
 /* eslint-disable */
 // @ts-nocheck
-// Generated using typescript-generator version 2.23.603 on 2020-06-07 14:53:44.
+// Generated using typescript-generator version 2.23.603 on 2020-06-08 22:33:51.
 
 export class AbstractStreamPipesEntity {
-    "@class": "org.apache.streampipes.model.base.NamedStreamPipesEntity" | "org.apache.streampipes.model.graph.DataSourceDescription" | "org.apache.streampipes.model.SpDataStream" | "org.apache.streampipes.model.SpDataSet" | "org.apache.streampipes.model.base.InvocableStreamPipesEntity" | "org.apache.streampipes.model.graph.DataProcessorInvocation" | "org.apache.streampipes.model.graph.DataSinkInvocation" | "org.apache.streampipes.model.base.UnnamedStreamPipesEntity" | "org.apache.stream [...]
+    "@class": "org.apache.streampipes.model.base.NamedStreamPipesEntity" | "org.apache.streampipes.model.graph.DataSourceDescription" | "org.apache.streampipes.model.SpDataStream" | "org.apache.streampipes.model.SpDataSet" | "org.apache.streampipes.model.base.InvocableStreamPipesEntity" | "org.apache.streampipes.model.graph.DataProcessorInvocation" | "org.apache.streampipes.model.graph.DataSinkInvocation" | "org.apache.streampipes.model.base.UnnamedStreamPipesEntity" | "org.apache.stream [...]
 
     static fromData(data: AbstractStreamPipesEntity, target?: AbstractStreamPipesEntity): AbstractStreamPipesEntity {
         if (!data) {
@@ -36,7 +35,7 @@ export class AbstractStreamPipesEntity {
 }
 
 export class UnnamedStreamPipesEntity extends AbstractStreamPipesEntity {
-    "@class": "org.apache.streampipes.model.base.UnnamedStreamPipesEntity" | "org.apache.streampipes.model.staticproperty.StaticProperty" | "org.apache.streampipes.model.staticproperty.CodeInputStaticProperty" | "org.apache.streampipes.model.staticproperty.CollectionStaticProperty" | "org.apache.streampipes.model.staticproperty.ColorPickerStaticProperty" | "org.apache.streampipes.model.staticproperty.DomainStaticProperty" | "org.apache.streampipes.model.staticproperty.FileStaticProperty" [...]
+    "@class": "org.apache.streampipes.model.base.UnnamedStreamPipesEntity" | "org.apache.streampipes.model.runtime.RuntimeOptionsRequest" | "org.apache.streampipes.model.runtime.RuntimeOptionsResponse" | "org.apache.streampipes.model.staticproperty.StaticProperty" | "org.apache.streampipes.model.staticproperty.CodeInputStaticProperty" | "org.apache.streampipes.model.staticproperty.CollectionStaticProperty" | "org.apache.streampipes.model.staticproperty.ColorPickerStaticProperty" | "org.a [...]
     elementId: string;
 
     static fromData(data: UnnamedStreamPipesEntity, target?: UnnamedStreamPipesEntity): UnnamedStreamPipesEntity {
@@ -446,8 +445,8 @@ export class NamedStreamPipesEntity extends AbstractStreamPipesEntity {
         instance.includedLocales = __getCopyArrayFn(__identity<string>())(data.includedLocales);
         instance.applicationLinks = __getCopyArrayFn(ApplicationLink.fromData)(data.applicationLinks);
         instance.connectedTo = __getCopyArrayFn(__identity<string>())(data.connectedTo);
-        instance.uri = data.uri;
         instance.dom = data.dom;
+        instance.uri = data.uri;
         return instance;
     }
 }
@@ -1468,6 +1467,42 @@ export class Resolution extends EventPropertyQualityDefinition {
     }
 }
 
+export class RuntimeOptionsRequest extends UnnamedStreamPipesEntity {
+    "@class": "org.apache.streampipes.model.runtime.RuntimeOptionsRequest" | "org.apache.streampipes.model.runtime.RuntimeOptionsResponse";
+    appId: string;
+    inputStreams: SpDataStreamUnion[];
+    requestId: string;
+    staticProperties: StaticPropertyUnion[];
+
+    static fromData(data: RuntimeOptionsRequest, target?: RuntimeOptionsRequest): RuntimeOptionsRequest {
+        if (!data) {
+            return data;
+        }
+        const instance = target || new RuntimeOptionsRequest();
+        super.fromData(data, instance);
+        instance.requestId = data.requestId;
+        instance.appId = data.appId;
+        instance.staticProperties = __getCopyArrayFn(StaticProperty.fromDataUnion)(data.staticProperties);
+        instance.inputStreams = __getCopyArrayFn(SpDataStream.fromDataUnion)(data.inputStreams);
+        return instance;
+    }
+}
+
+export class RuntimeOptionsResponse extends RuntimeOptionsRequest {
+    "@class": "org.apache.streampipes.model.runtime.RuntimeOptionsResponse";
+    options: Option[];
+
+    static fromData(data: RuntimeOptionsResponse, target?: RuntimeOptionsResponse): RuntimeOptionsResponse {
+        if (!data) {
+            return data;
+        }
+        const instance = target || new RuntimeOptionsResponse();
+        super.fromData(data, instance);
+        instance.options = __getCopyArrayFn(Option.fromData)(data.options);
+        return instance;
+    }
+}
+
 export class RuntimeResolvableAnyStaticProperty extends AnyStaticProperty {
     "@class": "org.apache.streampipes.model.staticproperty.RuntimeResolvableAnyStaticProperty";
     dependsOn: string[];
diff --git a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
index a795921..44698e5 100644
--- a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
@@ -361,7 +361,7 @@ export class PipelineComponent implements OnInit {
     }, inputMap);
 
     dialogRef.afterClosed().subscribe(c => {
-
+      console.log("after close");
     });
 
     // this.EditorDialogManager.showCustomizeDialog($("#" +pe.payload.dom), sourceEndpoint, pe.payload, false)
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.css b/ui/src/app/editor-v2/dialog/customize/customize.component.css
index 916c3d1..6abbbdd 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.css
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.css
@@ -36,4 +36,5 @@
 .customize-section {
     display:flex;
     flex: 1 1 auto;
+    padding: 20px;
 }
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.html b/ui/src/app/editor-v2/dialog/customize/customize.component.html
index 0fa3757..63726f1 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.html
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.html
@@ -19,7 +19,7 @@
 <div class="dialog-container">
     <div class="mat-dialog-content">
         <div fxFlex="100" fxLayout="column">
-            <div style="height:100px;border-bottom:1px solid #ccc;padding-left:10px;padding-right:10px;background-color:#f6f6f6">
+            <div style="border-bottom:1px solid #ccc;padding:10px;background-color:#f6f6f6">
                 <div fxFlex="100" fxLayout="row" fxLayoutAlign="end end">
                     <mat-slide-toggle [(ngModel)]="showDocumentation" aria-label="Switch 1"
                                       [disabled]="!pipelineElement.payload.includesAssets">
@@ -30,9 +30,8 @@
                     </mat-slide-toggle>
                 </div>
             </div>
-            <div fxFlex="100" fxLayout="row">
-                <form name="customizeForm" flex="100">
-                    <div fxFlex="100" fxLayout="column" *ngIf="restrictedEditMode">
+            <div fxFlex="100" fxLayout="row" *ngIf="restrictedEditMode">
+                    <div fxFlex="100" fxLayout="column">
                         <div fxLayout="column" class="customize-item-main-help" style="border: 2px solid #ffc400">
                             <div class="customize-item-title-help" style="background: #ffc400;" fxFlex="100"
                                  fxLayout="row">
@@ -42,10 +41,15 @@
                             </div>
                         </div>
                     </div>
-                </form>
             </div>
             <div fxFlex="100" fxLayout="column" class="customize-section">
-
+                <form name="customizeForm" flex="100">
+                <app-static-property *ngFor="let config of cachedPipelineElement.staticProperties" [staticProperty]="config"
+                                     [staticProperties]="cachedPipelineElement.staticProperties"
+                                     [eventSchemas]="eventSchemas"
+                                     (validateEmitter)="validConfiguration($event)">
+                </app-static-property>
+                </form>
             </div>
         </div>
     </div>
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.ts b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
index 1254a53..42d2909 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.ts
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
@@ -17,8 +17,14 @@
  */
 
 import {Component, Input, OnInit} from "@angular/core";
-import {PipelineElementConfig} from "../../model/editor.model";
+import {
+  InvocablePipelineElementUnion,
+  PipelineElementConfig,
+  PipelineElementUnion
+} from "../../model/editor.model";
 import {DialogRef} from "../panel/dialog-ref";
+import {JsplumbService} from "../../services/jsplumb.service";
+import {EventSchema} from "../../../core-model/gen/streampipes-model";
 
 @Component({
   selector: 'customize-pipeline-element',
@@ -30,6 +36,9 @@ export class CustomizeComponent implements OnInit {
   @Input()
   pipelineElement: PipelineElementConfig;
 
+  cachedPipelineElement: InvocablePipelineElementUnion;
+  eventSchemas: EventSchema[] = [];
+
   displayRecommended: boolean;
   showDocumentation: boolean = false;
   customizeForm: any;
@@ -52,19 +61,28 @@ export class CustomizeComponent implements OnInit {
 
 
 
-  constructor(private dialogRef: DialogRef<CustomizeComponent>) {
+  constructor(private dialogRef: DialogRef<CustomizeComponent>,
+              private JsPlumbService: JsplumbService) {
 
   }
 
   ngOnInit(): void {
-
+    this.cachedPipelineElement = this.JsPlumbService.clone(this.pipelineElement.payload) as InvocablePipelineElementUnion;
+    this.cachedPipelineElement.inputStreams.forEach(is => {
+      this.eventSchemas = this.eventSchemas.concat(is.eventSchema);
+    });
   }
 
   close() {
-
+    this.dialogRef.close();
   }
 
   save() {
+    this.pipelineElement.payload = this.cachedPipelineElement;
+    this.dialogRef.close(this.pipelineElement);
+  }
+
+  validConfiguration(event: any) {
 
   }
 
diff --git a/ui/src/app/editor-v2/dialog/panel/dialog-ref.ts b/ui/src/app/editor-v2/dialog/panel/dialog-ref.ts
index 9cf9e6a..fd560bd 100644
--- a/ui/src/app/editor-v2/dialog/panel/dialog-ref.ts
+++ b/ui/src/app/editor-v2/dialog/panel/dialog-ref.ts
@@ -19,12 +19,14 @@
 import {ComponentRef} from "@angular/core";
 import {OverlayRef} from "@angular/cdk/overlay";
 import {Observable, Subject} from "rxjs";
+import {PanelDialogComponent} from "./panel-dialog.component";
 
 export class DialogRef<T> {
   private _componentInstance: ComponentRef<T>;
-  private subject: Subject<any> = new Subject<any>();
+  private _afterClosed: Subject<any> = new Subject<any>();
 
-  constructor(private overlayRef: OverlayRef) {
+  constructor(private overlayRef: OverlayRef,
+              private dialogContainerRef: ComponentRef<PanelDialogComponent<unknown>>) {
   }
 
   get componentInstance() {
@@ -36,12 +38,15 @@ export class DialogRef<T> {
   }
 
   public close(data?: any) {
-    this.overlayRef.dispose();
-    this.subject.next(data);
+    this.dialogContainerRef.instance.closeDialog();
+    this._afterClosed.next(data);
+    this._afterClosed.complete();
   }
 
   public afterClosed(): Observable<any> {
-    return this.subject;
+    return this._afterClosed.asObservable();
   }
 
+
+
 }
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
index 90f2613..5a1edd0 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
+++ b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
@@ -19,8 +19,8 @@
 <div fxFlex="100" fxLayout="column">
     <div class="dialog-panel-header">
         <span class="dialog-title">{{ dialogTitle }}</span>
-        <button mat-button mat-icon-button (click)="closeDialog()">
-            <i class="material-icons" style="font-size:30px;">clear</i>
+        <button mat-button mat-icon-button (click)="close()">
+            <i class="material-icons" style="font-size:25px;color:white;">clear</i>
         </button>
     </div>
     <div class="dialog-panel-content">
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
index c7bfe60..c2016a1 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
+++ b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
@@ -20,15 +20,18 @@
 
 app-dialog-container {
   width: 100%;
-  background-color: #fff
+  background-color: #fff;
+  box-shadow: -7px 0px 5px -5px #5d5d5d;
 }
 
 .dialog-panel-header {
   display: flex;
   justify-content: space-between;
+  height: 50px;
+  min-height: 50px;
   width: 100%;
-  background: #f6f6f6;
-  padding: 10px 0.5rem 0.5rem;
+  background: $sp-color-accent;
+  align-items: center;
 }
 
 .dialog-panel-content {
@@ -36,11 +39,9 @@ app-dialog-container {
 }
 
 .dialog-title {
-  font-weight: bold;
-  border-left: 10px solid $sp-color-primary;
-  padding: 5px;
-  font-size:30px;
-  color: $sp-color-accent;
+  padding: 5px 5px 5px 15px;
+  font-size:25px;
+  color: white;
 }
 
 #portal {
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts
index 2ba2715..fa2fc6e 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts
+++ b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts
@@ -19,22 +19,47 @@
 import {CdkPortalOutlet, ComponentPortal, Portal} from "@angular/cdk/portal";
 import {
   Component,
-  EventEmitter,
+  EventEmitter, HostBinding, HostListener,
   Input,
   OnInit,
   Output,
   ViewChild,
   ViewEncapsulation
 } from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {DialogRef} from "./dialog-ref";
 
 @Component({
   selector: "app-dialog-container",
   templateUrl: './panel-dialog.component.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./panel-dialog.component.scss']
+  styleUrls: ['./panel-dialog.component.scss'],
+  animations: [trigger('flyInOut', [
+    state('void', style({
+      transform: 'translateX(80vw)',
+    })),
+    state('in', style({
+      transform: 'translateX(0)',
+    })),
+    state('out', style({
+      transform: 'translateX(80vw)'
+    })),
+    transition('* => *', animate(300))
+  ])]
 })
 export class PanelDialogComponent<T> implements OnInit {
 
+  @HostBinding('@flyInOut') slideDown = 'in';
+
+  @HostListener('@flyInOut.done', ['$event']) startDrawerHandler(event: any): void {
+    if (event.toState === "out") {
+      this.containerEvent.emit({key: "CLOSE"});
+    }
+  }
+
+  @Output()
+  animationStateChanged = new EventEmitter<AnimationEvent>();
+
   @Input()
   dialogTitle = "";
 
@@ -50,6 +75,9 @@ export class PanelDialogComponent<T> implements OnInit {
   @Input()
   selectedPortal: Portal<T>;
 
+  @Input()
+  dialogRef: DialogRef<T>;
+
   constructor() {
   }
 
@@ -62,6 +90,10 @@ export class PanelDialogComponent<T> implements OnInit {
   }
 
   closeDialog() {
-    this.containerEvent.emit({key: "CLOSE"});
+    this.slideDown = "out";
+  }
+
+  close() {
+    this.dialogRef.close();
   }
 }
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.service.ts b/ui/src/app/editor-v2/dialog/panel/panel-dialog.service.ts
index 69947ac..b024d4d 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.service.ts
+++ b/ui/src/app/editor-v2/dialog/panel/panel-dialog.service.ts
@@ -49,33 +49,34 @@ export class PanelDialogService {
       panelClass: "dialog-container",
       width: config.width,
       maxWidth: "90vw",
-      height: "100vh"
+      height: "100vh",
     });
 
-    const dialogPreview = new ComponentPortal(PanelDialogComponent);
-    const dialogContainerRef = overlay.attach(dialogPreview);
-    dialogContainerRef.instance.dialogTitle = config.title;
-    const dialogRef = new DialogRef<T>(overlay);
+    const panelDialogContainer = new ComponentPortal(PanelDialogComponent);
+    const panelDialogContainerRef = overlay.attach(panelDialogContainer);
+    panelDialogContainerRef.instance.dialogTitle = config.title;
+    const dialogRef = new DialogRef<T>(overlay, panelDialogContainerRef);
 
     const injector = this.createInjector(dialogRef);
-    dialogContainerRef.instance.selectedPortal = new ComponentPortal(component,
+    panelDialogContainerRef.instance.selectedPortal = new ComponentPortal(component,
         null, injector);
-    dialogRef.componentInstance = dialogContainerRef.instance.attach();
+    panelDialogContainerRef.instance.dialogRef = dialogRef;
+    dialogRef.componentInstance = panelDialogContainerRef.instance.attach();
 
     Object.keys(inputMap).forEach(key => {
       dialogRef.componentInstance[key] = inputMap[key];
     })
 
-    this.applyDialogProperties(dialogContainerRef, overlay, config);
+    this.applyDialogProperties(panelDialogContainerRef, overlay, config);
 
     return dialogRef;
   }
 
-  private applyDialogProperties(componentRef: ComponentRef<any>,
+  private applyDialogProperties(panelDialogComponentRef: ComponentRef<any>,
                                 overlayRef: OverlayRef,
                                 config: DialogConfig
   ) {
-    componentRef.instance.containerEvent.subscribe(e => {
+    panelDialogComponentRef.instance.containerEvent.subscribe(e => {
       if (e.key === "CLOSE") {
         overlayRef.dispose();
       }