[sdc] update code of sdc

Change-Id: If9f37c80b659cb67b34d18e6c019defecca58b9a
Signed-off-by: Michael Lando <ml636r@att.com>

33 files changed, 385 insertions, 349 deletions

diff --git a/catalog-ui/package.json b/catalog-ui/package.json
index 075d059753..bc28d90e3b 100644
--- a/catalog-ui/package.json
+++ b/catalog-ui/package.json
@@ -49,7 +49,6 @@
     "karma-ng-html2js-preprocessor": "1.0.0",
     "karma-ng-scenario": "1.0.0",
     "karma-phantomjs-launcher": "0.2.1",
-
     "karma-sourcemap-loader": "^0.3.7",
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
@@ -92,7 +91,6 @@
     "angular-base64": "^2.0.5",
     "angular-base64-upload": "^0.1.19",
     "angular-clipboard": "^1.5.0",
-    "angular-dragdrop": "github:dimkinv/angular-dragdrop",
     "angular-filter": "^0.5.15",
     "angular-resizable": "^1.2.0",
     "angular-resource": "1.5.11",
@@ -116,8 +114,9 @@
     "codelyzer": "^2.0.1",
     "core-js": "^2.4.1",
     "cytoscape": "^2.7.15",
-    "cytoscape-expand-collapse": "github:bardit/cytoscape.js-expand-collapse",
-    "cytoscape-qtip": "github:bardit/cytoscape.js-qtip",
+    "@bardit/cytoscape-expand-collapse": "^2.0.3",
+    "@bardit/cytoscape-qtip": "^2.5.1",
+    "sdc-angular-dragdrop": "^1.0.14",
     "cytoscape.js-undo-redo": "^1.0.1",
     "express": "4.14.0",
     "jquery": "^2.2.4",
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
index 83bf747501..5285f46112 100644
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
@@ -3,7 +3,7 @@ import {CapabilitiesGroup, NodesFactory, ComponentInstance, Component, Compositi
 import {ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects} from "app/utils";
 import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
 import {CommonGraphUtils} from "../../common/common-graph-utils";
-import 'angular-dragdrop';
+import 'sdc-angular-dragdrop';
 import {LeftPaletteComponent} from "../../../../models/components/displayComponent";
 
 export class CompositionGraphPaletteUtils {
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
index 5ad6570013..3a0726f212 100644
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
@@ -1,22 +1,25 @@
-import {Component, Module, NodesFactory, ComponentInstance} from "app/models";
-import {ComponentInstanceFactory} from "app/utils";
-import {DeploymentGraphGeneralUtils} from "./deployment-utils/deployment-graph-general-utils";
-import {CommonGraphUtils} from "../common/common-graph-utils";
-import {ComponentInstanceNodesStyle} from "../common/style/component-instances-nodes-style";
-import {ModulesNodesStyle} from "../common/style/module-node-style";
-import {GRAPH_EVENTS} from "app/utils";
-import {EventListenerService} from "app/services";
-import 'cytoscape-expand-collapse';
+import { Component, Module, NodesFactory, ComponentInstance } from "app/models";
+import { ComponentInstanceFactory } from "app/utils";
+import { DeploymentGraphGeneralUtils } from "./deployment-utils/deployment-graph-general-utils";
+import { CommonGraphUtils } from "../common/common-graph-utils";
+import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style";
+import { ModulesNodesStyle } from "../common/style/module-node-style";
+import { GRAPH_EVENTS } from "app/utils";
+import { EventListenerService } from "app/services";
+import '@bardit/cytoscape-expand-collapse';
 
 interface IDeploymentGraphScope extends ng.IScope {
-    component:Component;
+    component: Component;
 }
 
 export class DeploymentGraph implements ng.IDirective {
-    private _cy:Cy.Instance;
+    private _cy: Cy.Instance;
 
-    constructor(private NodesFactory:NodesFactory, private commonGraphUtils:CommonGraphUtils,
-                private deploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, private ComponentInstanceFactory:ComponentInstanceFactory, private eventListenerService:EventListenerService) {
+    constructor(private NodesFactory: NodesFactory,
+        private commonGraphUtils: CommonGraphUtils,
+        private deploymentGraphGeneralUtils: DeploymentGraphGeneralUtils,
+        private ComponentInstanceFactory: ComponentInstanceFactory,
+        private eventListenerService: EventListenerService) {
     }
 
     restrict = 'E';
@@ -26,7 +29,7 @@ export class DeploymentGraph implements ng.IDirective {
         isViewOnly: '='
     };
 
-    link = (scope:IDeploymentGraphScope, el:JQuery) => {
+    link = (scope: IDeploymentGraphScope, el: JQuery) => {
 
         if (scope.component.isResource()) {
             if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.groups) {
@@ -39,16 +42,15 @@ export class DeploymentGraph implements ng.IDirective {
         }
     };
 
-
-    public initGraphNodes = (cy:Cy.Instance, component:Component):void => {
+    public initGraphNodes = (cy: Cy.Instance, component: Component): void => {
         if (component.groups) { // Init module nodes
-            _.each(component.groups, (groupModule:Module) => {
+            _.each(component.groups, (groupModule: Module) => {
                 let moduleNode = this.NodesFactory.createModuleNode(groupModule);
                 this.commonGraphUtils.addNodeToGraph(cy, moduleNode);
 
             });
         }
-        _.each(component.componentInstances, (instance:ComponentInstance) => { // Init component instance nodes
+        _.each(component.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes
             let componentInstanceNode = this.NodesFactory.createNode(instance);
             componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.groups, instance.uniqueId);
             if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
@@ -58,7 +60,7 @@ export class DeploymentGraph implements ng.IDirective {
 
         // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's
         // so we must add an empty dummy child node
-        _.each(this._cy.nodes('[?isGroup]'), (moduleNode:Cy.CollectionFirstNode) => {
+        _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => {
             if (!moduleNode.isParent()) {
                 let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance();
                 let componentInstanceNode = this.NodesFactory.createNode(dummyInstance);
@@ -80,7 +82,7 @@ export class DeploymentGraph implements ng.IDirective {
         });
     }
 
-    private loadGraph = (scope:IDeploymentGraphScope, el:JQuery) => {
+    private loadGraph = (scope: IDeploymentGraphScope, el: JQuery) => {
 
         let graphEl = el.find('.sdc-deployment-graph-wrapper');
         this._cy = cytoscape({
@@ -112,9 +114,17 @@ export class DeploymentGraph implements ng.IDirective {
         this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations);
         this._cy.collapseAll();
         this.registerGraphEvents();
+
+        scope.$on('$destroy', () => {
+            this._cy.destroy();
+            _.forEach(GRAPH_EVENTS, (event) => {
+                this.eventListenerService.unRegisterObserver(event);
+            });
+        });
+
     };
 
-    public static factory = (NodesFactory:NodesFactory, CommonGraphUtils:CommonGraphUtils, DeploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, ComponentInstanceFactory:ComponentInstanceFactory, EventListenerService:EventListenerService) => {
+    public static factory = (NodesFactory: NodesFactory, CommonGraphUtils: CommonGraphUtils, DeploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, ComponentInstanceFactory: ComponentInstanceFactory, EventListenerService: EventListenerService) => {
         return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService)
     }
 }
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
index 4bfbe5270e..0158a38253 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
@@ -10,7 +10,7 @@ import {
 import {CompositionGraphGeneralUtils} from "../composition-graph/utils/composition-graph-general-utils";
 import {EventListenerService} from "app/services";
 import {ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler} from "app/utils";
-import 'angular-dragdrop';
+import 'sdc-angular-dragdrop';
 import {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service";
 
 interface IPaletteScope {
diff --git a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
index f7117e456c..2178319e0b 100644
--- a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
+++ b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts
@@ -12,6 +12,7 @@ export class DerivedFEProperty extends PropertyBEModel {
     isDeclared: boolean;
     isSelected: boolean;
     isDisabled: boolean;
+    hidden: boolean;
     isChildOfListOrMap: boolean;
     canBeDeclared: boolean;
     mapKey: string;
diff --git a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
index 564611c344..cfbe6d64c7 100644
--- a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
+++ b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts
@@ -78,4 +78,33 @@ export class PropertyFEModel extends PropertyBEModel {
     //     this.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName)
     // }
 
+    /* Updates parent valueObj when a child prop's value has changed */    
+    public childPropUpdated = (childProp: DerivedFEProperty): void => {          
+        let parentNames = this.getParentNamesArray(childProp.propertiesName, []);
+        if (parentNames.length) {
+            _.set(this.valueObj, parentNames.join('.'), childProp.valueObj);
+        }
+    };
+
+    /* Returns array of individual parents for given prop path, with list/map UUIDs replaced with index/mapkey */    
+    private getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
+        if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return
+
+        let parentProp: DerivedFEProperty = this.flattenedChildren.find(prop => prop.propertiesName === parentPropName);
+        let nameToInsert: string = parentProp.name;
+
+        if (parentProp.isChildOfListOrMap) {
+            if (parentProp.derivedDataType == DerivedPropertyType.MAP) {
+                nameToInsert = parentProp.mapKey;
+            } else { //LIST
+                let siblingProps = this.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName);
+                nameToInsert = siblingProps.indexOf(parentProp.propertiesName).toString();
+            }
+        }
+
+        parentNames.splice(0, 0, nameToInsert); //add prop name to array
+        return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing
+    }
+
+
 }
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
index 84ac46c4cf..0c74765944 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
@@ -24,6 +24,7 @@ export class DynamicElementComponent {
     @Input() type: any;
     @Input() name: string;
     @Input() readonly:boolean;
+    @Input() path:string;//optional param. used only for for subnetpoolid type
     value:any;
 
     // Two way binding for value (need to write the "Change" word like this)
@@ -58,7 +59,11 @@ export class DynamicElementComponent {
                 this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
                 break;
             case 'string':
-                if (this.name.toUpperCase().indexOf("SUBNETPOOLID") !== -1) {
+                if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) {
+                    if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
+                        let pathArray = this.path.split("#");
+                        this.name = pathArray[pathArray.length - 2];
+                    }
                     this.createComponent(UiElementPopoverInputComponent);
                 }
                 else {
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
index afed54672c..07f38d3011 100644
--- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
+++ b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
@@ -25,11 +25,10 @@ form{
     cursor: pointer;
     width: 32px;
     height: 34px;
-    display: inline-block;
+    margin-left:5px;
+
     &.open{
         z-index: 1061;
-        position: relative;
-        top: 2px;
         background-color: @main_color_p;
         border: solid 1px @main_color_c;
         border-bottom: none;
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
index 57d51616a8..a9174fd73d 100644
--- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
@@ -14,10 +14,10 @@
 
 .node-data-wrapper {
     cursor: default;
-    height: 30px;
-    line-height: 2.6em;;
+    height: 39px;
+    line-height: 39px;
     position: relative;
-    top: -1.1em;
+    top: -20px;
     background-color: white;
     margin-left: 0.7em;
 }
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
index fb6b04013f..8d3f6d1836 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
@@ -1,5 +1,5 @@
 <div class="properties-table">
-    <loader [display]="isLoading" size="large" [relative]="true"></loader>
+    <loader [display]="isLoading" size="large" [relative]="false"></loader>
     <div class="table-header">
         <div class="table-cell col1">Property Name</div>
         <div class="table-cell col2">Type</div>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
index 93f96470bc..96d4d0a4eb 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
@@ -10,26 +10,26 @@
     height:100%;
     text-align:left;
 
-    dynamic-property {
-        width:100%;
-    }
-
-    /deep/ .dynamic-property-row {
-         border-top:solid #d2d2d2 1px;
-    }
-
-    /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) {
-        border-top: none;
+    .inner-cell-div{
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        height: 20px;
     }
+    
 
     .table-header {
         font-weight:bold;
         border-top: #d2d2d2 solid 1px;
         background-color: #eaeaea;
-
+        color:#191919;
+        
+        .table-cell {
+            font-size: 14px;
+        }
         .valueCol {
             justify-content: flex-start;
-            padding: 5px;
+            padding: 10px;
         }
     }
     .table-header, .table-row {
@@ -57,18 +57,6 @@
         }
     }
 
-    .table-rows-header {
-        font-size:16px;
-        flex:1;
-        border: #d2d2d2 solid 1px;
-        border-top:none;
-        padding: 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        background-color: @tlv_color_v;
-    }
-
     .table-row {
         &:hover {
              background-color:#f8f8f8; cursor:pointer;
@@ -81,17 +69,14 @@
             background-color:#e6f6fb;
         }
     }
-    .cut-inner-long-text{
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
+
      .table-cell {
         font-size:13px;
         flex:1;
         border: #d2d2d2 solid 1px;
         border-right:none;
         border-top:none;
-        padding: 5px;
+        padding: 10px;
         text-overflow: ellipsis;
         white-space: nowrap;
 
@@ -132,6 +117,7 @@
             display: flex;
             justify-content: flex-end;
             padding: 0px;
+            align-items: center;
 
             .value-input {
                 flex: 1;
@@ -163,7 +149,7 @@
         }
 
          &.input-value-col {
-             padding: 5px;
+             padding: 8px;
          }
 
 
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
index 4d90b2853d..4af92eca24 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
@@ -11,72 +11,28 @@ export class LoaderComponent {
 
     @Input() display:boolean;
     @Input() size:string;// small || medium || large
-    @Input() elementSelector:string; // required if is relative true
-    @Input() relative:boolean;
-
-    interval;
+    @Input() relative: boolean;
+    @Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element.
+    
 
     constructor (private el: ElementRef, private renderer: Renderer){
     }
 
     ngOnInit() {
-
-        if (this.elementSelector) {
-            let elemParent = angular.element(this.elementSelector);
-            let positionStyle:string = elemParent.css('position');
-            this.setStyle(positionStyle);
-        }
-
-        if (this.relative === true) {
-            let positionStyle:string = this.el.nativeElement.parentElement.style.position;
-            this.setStyle(positionStyle);
-        }
         if (!this.size) {
             this.size = 'large';
         }
-    }
-
-    ngOnDestroy(){
-        clearInterval(this.interval);
-    }
-
-    calculateSizesForFixPosition = (positionStyle:string):void => {
-        // This is problematic, I do not want to change the parent position.
-        // set the loader on all the screen
-        let parentLeft = this.el.nativeElement.parentElement.offsetLeft;
-        let parentTop = this.el.nativeElement.parentElement.offsetTop;
-        let parentWidth = this.el.nativeElement.parentElement.offsetWidth;
-        let parentHeight = this.el.nativeElement.parentElement.offsetHeight;
-        this.renderer.setElementStyle(this.el.nativeElement, 'position', positionStyle);
-        this.renderer.setElementStyle(this.el.nativeElement, 'top', parentTop);
-        this.renderer.setElementStyle(this.el.nativeElement, 'left', parentLeft);
-        this.renderer.setElementStyle(this.el.nativeElement, 'width', parentWidth);
-        this.renderer.setElementStyle(this.el.nativeElement, 'height', parentHeight);
-    };
-
-    setStyle = (positionStyle:string):void => {
-
-        switch (positionStyle) {
-            case 'absolute':
-            case 'fixed':
-                // The parent size is not set yet, still loading, so need to use interval to update the size.
-                this.interval = window.setInterval(()=> {
-                    this.calculateSizesForFixPosition(positionStyle);
-                }, 2000);
-                break;
-            default:
-                // Can change the parent position to relative without causing style issues.
-                this.renderer.setElementStyle(this.el.nativeElement.parentElement,'position', 'relative');
-                break;
+        if (this.display === true) {
+            this.changeLoaderDisplay(true);
         }
-    };
+    }
 
     ngOnChanges(changes: SimpleChanges) {
         if(changes.display){
-            this.changeLoaderDisplay(false);
-            if ( this.display ) {
-                window.setTimeout(():void => {
-                    this.changeLoaderDisplay(true);
+            if (this.display) {
+                this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to.
+                window.setTimeout((): void => {
+                    this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it.
                 }, 500);
             } else {
                 window.setTimeout(():void => {
@@ -86,7 +42,33 @@ export class LoaderComponent {
         }
     }
 
-    changeLoaderDisplay = (display:boolean):void => {
-        this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none');
+    changeLoaderDisplay = (display: boolean): void => {
+        if (display) {
+            this.calculateLoaderPosition();
+            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
+        } else {
+            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
+        }
+    }
+
+    calculateLoaderPosition = () => {
+        if (this.relative === true) { // Can change the parent position to relative without causing style issues.
+            let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement;
+            this.renderer.setElementStyle(parent, 'position', 'relative');
+            this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element
+            //TODO: DONT force parent to have position relative; set inner div's style instead of outer element
+            // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect();
+            // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height);
+        } else {
+            this.setLoaderPosition(0, 0); //will appear over whole page
+        }
     }
+
+    setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => {
+        this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute');
+        this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0");
+        this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0");
+        this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%");
+        this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%");
+    };
 }
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
index d6ee568c0c..2df17971e2 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -1,12 +1,12 @@
-<div class="dynamic-property-row"
+<div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
     [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName }"
     [class.with-top-border]="property.isChildOfListOrMap"
     (click)="onClickPropertyRow(property, $event)">
     <!-- LEFT CELL -->
     <ng-container *ngIf="!isPropertyFEModel">
         <div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}"> <!-- simple children of complex type -->
-            <checkbox  [label]="property.name" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)"
-            ></checkbox>
+            <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)"></checkbox> 
+            <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
         </div>
         <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
         <div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
@@ -21,24 +21,24 @@
                 [(value)]="property.valueObj"
                 [type]="property.isDeclared ? 'string' : property.type"
                 [name]="property.name"
+                [path]="property.propertiesName"
                 (valueChange)="valueChanged.emit();"
-                             [readonly]="readonly||property.isDeclared"
-                > <!--[disabled]="property.isDisabled || property.isDeclared" -->
-            </dynamic-element>
+                [readonly]="readonly||property.isDeclared||property.isDisabled"
+            ></dynamic-element>
         </div>
     </ng-container>
     <ng-container *ngIf="!isPropertyFEModel && propType != derivedPropertyTypes.SIMPLE && !property.isDeclared"> <!-- right cell for complex elements, or list complex -->
         <div class="table-cell" *ngIf="propType == derivedPropertyTypes.COMPLEX">{{property.type | contentAfterLastDot }}</div>
         <div class="table-cell" *ngIf="propType == derivedPropertyTypes.MAP && !property.schema.property.isSimpleType">{{property.schema.property.type | contentAfterLastDot }}</div>
     </ng-container>
-    <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP)"><!-- empty, full-width table cell - for PropertyFEModel of type list or map -->
+    <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isDeclared"><!-- empty, full-width table cell - for PropertyFEModel of type list or map -->
         <div class="table-cell empty"></div>
     </ng-container>
     <!-- ICONS: add, delete, and expand -->
     <ng-container *ngIf="!property.isDeclared">
-            <span *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon sprite-new add-item-icon" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}"></span>
+            <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}">Add value to list</a>
             <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
-            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || hasChildren())" (click)="expandChildById(propPath)" class="property-icon expand-icon" [class.expanded]="propPath == expandedChildId">V</span>
+            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="propPath == expandedChildId"></span>
     </ng-container>
 
 </div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
index cb7cd39640..4da98ec736 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,48 +1,67 @@
 .flat-children-container {
-    dynamic-property:first-child .dynamic-property-row:not(.with-top-border) {
-        border-top:none;
-    }
     .dynamic-property-row {
-        border-top: solid 1px #CCC;
+        /*create nested left border classes for up to 10 levels of nesting*/
+        .nested-border-loop(@i) when (@i > 0) {
+            @size: (@i - 1) *2;
+            &.nested-level-@{i} .table-cell:first-child {
+                border-left: ~"solid @{size}px #009fdb";
+            }
+            .nested-border-loop(@i - 1)
+        }
+        .nested-border-loop(10);
+    }
+    dynamic-property {
+        &:first-child .dynamic-property-row.with-top-border {
+            border-top:solid 1px #d2d2d2;
+        }
+        &:not(:last-child) .dynamic-property-row {
+            border-bottom:solid 1px #d2d2d2;
+        }
     }
 }
 .dynamic-property-row {
     display:flex;
     flex-direction:row;
-    align-items: center;
-    
+    align-items: stretch;
+
     .table-cell {
         flex: 1;
-        padding:5px;
+        padding:9px;
+        justify-content: center;
+        overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        overflow:hidden;
-        min-height:32px;
 
         &:first-child {
             flex: 0 0 50%;
             border-right:#d2d2d2 solid 1px;
-            
-        
             &:only-of-type {
                 flex: 1 1 100%;
                 border-right:none;
             }
         }
-
+        &.empty {
+            height:40px;
+        }
     }
     .property-icon {
         flex: 0 0 auto;
+        margin-right:10px;
+        align-self:center;
+        cursor:pointer;
     }
-    span.expand-icon {
-        transition: 200ms transform ease-in-out;
-    }
-    span.expand-icon.expanded {
-        transform: rotate(-180deg);
-    }
+
 }
+
 .filtered {
     /deep/ .checkbox-label-content{
         background-color: yellow;
     }
 }
+.inner-cell-div{
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: inline;
+    padding-left: 8px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
index 1c7fbfac7a..3713676040 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -3,12 +3,14 @@ import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyTyp
 import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
 import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils";
 import { DataTypeService } from "../../../services/data-type.service";
+import { trigger, state, style, transition, animate } from '@angular/core';
 
 
 @Component({
     selector: 'dynamic-property',
     templateUrl: './dynamic-property.component.html',
-    styleUrls: ['./dynamic-property.component.less']
+    styleUrls: ['./dynamic-property.component.less'],
+    animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])]
 })
 export class DynamicPropertyComponent {
 
@@ -16,7 +18,7 @@ export class DynamicPropertyComponent {
     propType: DerivedPropertyType;
     propPath: string;
     isPropertyFEModel: boolean;
-    childrenCount: number;
+    nestedLevel: number;
 
     @Input() canBeDeclared: boolean;
     @Input() property: PropertyFEModel | DerivedFEProperty;
@@ -41,6 +43,7 @@ export class DynamicPropertyComponent {
         this.isPropertyFEModel = this.property instanceof PropertyFEModel;
         this.propType = this.property.derivedDataType;
         this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName;
+        this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length;
     }
 
 
@@ -66,7 +69,7 @@ export class DynamicPropertyComponent {
 
     createNewChildProperty = (): void => {
         
-        let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", null);
+        let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined);
         if (this.property instanceof PropertyFEModel) {
             this.addChildProps(newProps, this.property.name);
         } else {
@@ -86,11 +89,8 @@ export class DynamicPropertyComponent {
     childValueChanged = (property: DerivedFEProperty) => { //value of child property changed
 
         if (this.property instanceof PropertyFEModel) { // will always be the case
-            let parentNames = this.getParentNamesArray(property.propertiesName, []);
-            if (parentNames.length) {
-                _.set(this.property.valueObj, parentNames.join('.'), property.valueObj);
-            }
-            console.log(parentNames);
+            this.property.childPropUpdated(property);
+            this.dataTypeService.checkForCustomBehavior(this.property);
             this.valueChanged.emit(this.property.name);
         }
     }    
@@ -127,29 +127,4 @@ export class DynamicPropertyComponent {
         }
     }
 
-
-    getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
-        if (this.property instanceof PropertyFEModel) {
-
-            if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return
-
-            let parentProp: DerivedFEProperty = this.property.flattenedChildren.find(prop => prop.propertiesName === parentPropName);
-            let nameToInsert: string = parentProp.name;
-
-            if (parentProp.isChildOfListOrMap) {
-                if (parentProp.derivedDataType == DerivedPropertyType.MAP) {
-                    nameToInsert = parentProp.mapKey;
-                } else { //LIST
-                    let siblingProps = this.property.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName);
-                    nameToInsert = siblingProps.indexOf(parentProp.propertiesName).toString();
-                }
-            }
-
-            parentNames.splice(0, 0, nameToInsert); //add prop name to array
-            return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing
-            
-        }
-    }
-
-
 }
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
index 426ae3ab23..dc8fe70244 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
@@ -1,5 +1,5 @@
 <div class="properties-table">
-    <loader [display]="isLoading" size="large" [relative]="true"></loader>
+    <loader [display]="isLoading" size="large" [relative]="false"></loader>
     <div class="table-header">
         <div class="table-cell col1">Property Name</div>
         <div class="table-cell col2">Type</div>
@@ -7,10 +7,10 @@
         <div class="table-cell valueCol">Value</div>
     </div>
     <div class="table-body">
-        <div class="no-data" *ngIf="!feInstancesNames">No data to display</div>
+        <div class="no-data" *ngIf="!feInstancesNames || !feInstancesNames.length">No data to display</div>
 
-        <div *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
-            <div class="table-rows-header">{{instanceName | contentAfterLastDot}}</div>
+        <ng-container *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
+            <div class="table-rows-header white-sub-header">{{instanceName | contentAfterLastDot}}</div>
 
             <div class="table-row"
                 *ngFor="let property of fePropertiesMap[instanceName] | searchFilter:'name':searchTerm; trackBy:property?.name"
@@ -26,15 +26,18 @@
                         <span>{{property.name}}</span>
                     </div>
                 </div>
-                <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span>
+                <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}" tooltipDelay="0"></span>
                 </div>
                 <div class="table-cell col2">
                     <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
                         <span>{{property.type | contentAfterLastDot}}</span>
                     </div>
                 </div>
-                <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type
-                    | contentAfterLastDot) : ''}}</div>
+                <div class="table-cell col3">
+                    <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
+                        <span>{{property.schema.property.type | contentAfterLastDot}}</span>
+                    </div>
+                </div>
                 <div class="table-cell valueCol">
                     <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
                     <dynamic-property
@@ -54,7 +57,7 @@
                 </div>
             </div>
 
-        </div>
+        </ng-container>
 
     </div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
index bb019a768b..a525021b04 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
@@ -1,5 +1,5 @@
-
 @import './../../../../assets/styles/variables.less';
+@smaller-screen: ~"only screen and (max-width: 1580px)";
 
 :host /deep/ input { width:100%;}
 
@@ -10,40 +10,31 @@
     height:100%;
     text-align:left;
 
+
     .inner-cell-div{
         max-width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
         height: 20px;
     }
-    
-    .table-header, .table-row {
+
+    .table-header {
         display: flex;
         flex-direction:row;
         flex: 0 0 auto;
-    }
-
-    .table-header {
         font-weight:bold;
         border-top: #d2d2d2 solid 1px;
-        background-color: #eaeaea;
+        background-color: #f2f2f2;
 
-        .valueCol {
-            justify-content: flex-start;
-            padding: 5px;
+        .table-cell {
+            color:#191919;
+            font-size:14px;
         }
     }
 
     .table-rows-header {
-        font-size:16px;
-        flex:1;
         border: #d2d2d2 solid 1px;
         border-top:none;
-        padding: 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        background-color: @tlv_color_v;
     }
 
     .table-body {
@@ -63,35 +54,37 @@
             background-color: #e6f6fb;
             color:  #009fdb;
         }
-    }
+        .table-row {
+            display: flex;
+            flex-direction:row;
+            flex: 0 0 auto;
 
+            &:hover:not(.selected){
+                background-color:#f8f8f8; cursor:pointer;
+            }
 
-    .table-row {
-        &:hover {
-             background-color:#f8f8f8; cursor:pointer;
-        }
+            .selected-row {
+                background-color:#e6f6fb;
+            }
 
-        &:last-child {
-            flex: 1 0 auto;
-        }
-        .selected-row {
-            background-color:#e6f6fb;
+            .table-cell.valueCol {
+                padding:0px;
+
+            }
         }
     }
-    .cut-inner-long-text{
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-     .table-cell {
+    .table-cell {
         font-size:13px;
         flex:1;
         border: #d2d2d2 solid 1px;
         border-right:none;
         border-top:none;
-        padding: 5px;
+        padding:10px;
         text-overflow: ellipsis;
         white-space: nowrap;
+        overflow:hidden;
         display: flex;
+        min-height:40px;
 
         &:last-child {
             border-right:#d2d2d2 solid 1px;
@@ -101,6 +94,7 @@
             max-width:300px;
             display: flex;
             justify-content: space-between;
+            @media @smaller-screen { flex: 0 0 25%;}
 
             .property-name {
                 flex: 1;
@@ -116,25 +110,25 @@
             }
 
             /deep/ .checkbox-container {
-                margin-right: 5px;
+                margin-right: 10px;
             }
         }
         &.col2 {
             flex: 0 0 150px;
             max-width:150px;
+            @media @smaller-screen { flex: 0 0 20%;}
         }
 
         &.col3 {
             flex:0 0 120px;
             max-width:120px;
+            @media @smaller-screen { flex: 0 0 15%;}
         }
 
         &.valueCol {
-            flex: 1;
-            min-width: 350px;
+            flex: 1 0 350px;
             display: flex;
-            justify-content: flex-end;
-            padding: 0px;
+            @media @smaller-screen { flex: 1 0 40%;}
         }
     }
 
@@ -146,6 +140,9 @@
     
     dynamic-property {
         width:100%;
+        &:last-child /deep/ .dynamic-property-row {
+            border-bottom:none;
+        }
     }
 
-}
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
index 58214ca16b..463de4f018 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
@@ -1,5 +1,4 @@
 import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core";
-import { trigger, state, style, transition, animate} from '@angular/core';
 import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models";
 import {PropertiesService} from "../../services/properties.service";
 import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component';
@@ -8,8 +7,7 @@ import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
 @Component({
     selector: 'properties-table',
     templateUrl: './properties-table.component.html',
-    styleUrls: ['./properties-table.component.less'],
-    animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.3s ease-out', style({ opacity: '1' }))]) ])]
+    styleUrls: ['./properties-table.component.less']
 })
 export class PropertiesTableComponent {
 
@@ -65,7 +63,6 @@ export class PropertiesTableComponent {
     propertyChecked = (prop: PropertyFEModel, childPropName?: string) => {
         let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected;
 
-        console.log(isChecked, childPropName, prop);
         if (!isChecked) {
             this.propertiesService.undoDisableRelatedProperties(prop, childPropName);
         } else {
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
index e98b69003e..891aa60860 100644
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
+++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
@@ -14,6 +14,7 @@ export class TooltipComponent {
 
     private tooltip: ComponentRef<TooltipContentComponent>;
     private visible: boolean;
+    private delayInProgress: boolean = false;
 
     // -------------------------------------------------------------------------
     // Constructor
@@ -31,6 +32,7 @@ export class TooltipComponent {
     @Input() tooltipDisabled: boolean;
     @Input() tooltipAnimation: boolean = true;
     @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom";
+    @Input() tooltipDelay: number = 1500;
 
     // -------------------------------------------------------------------------
     // Public Methods
@@ -41,6 +43,11 @@ export class TooltipComponent {
         if(this.tooltipDisabled || this.visible || this.content === "") {
             return;
         }
+        if (this.tooltipDelay && !this.delayInProgress) {
+            this.delayInProgress = true;
+            setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay);
+            return;
+        }
 
         this.visible = true;
         if (typeof this.content === "string") {
@@ -65,6 +72,7 @@ export class TooltipComponent {
 
     @HostListener("mouseleave")
     hide(): void {
+        this.delayInProgress = false;
         if (!this.visible) {
             return;
         }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index 317a1fc827..fa3270ec77 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -28,7 +28,7 @@
                 </tab>
             </tabs>
             <div class="header">
-                <div class="search-filter-container">
+                <div class="search-filter-container" [class.without-filter]="isInpusTabSelected">
                     <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" />
                     <span class="sprite search-icon"></span>
                     <filter-properties-assignment *ngIf="!isInpusTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
@@ -42,7 +42,7 @@
                 <tab tabTitle="Composition">
                     <div class="hierarchy-nav-container">
                         <loader [display]="loadingInstances" size="medium" [relative]="true"></loader>
-                        <div class="hierarchy-header">
+                        <div class="hierarchy-header white-sub-header">
                             <span tooltip="{{component.name}}">{{component.name}}</span>
                         </div>
                         <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isInpusTabSelected">No data to display</div>
@@ -55,8 +55,8 @@
                 </tab>
                 <tab tabTitle="Property Structure">
                     <div class="hierarchy-nav-container">
-                    <div class="hierarchy-header">
-                        <span tooltip="{{!isInpusTabSelected ? (propertyStructureHeader || selectedFlatProperty.name) : ''}}">{{!isInpusTabSelected ? (propertyStructureHeader || selectedFlatProperty.name || "No Property Selected") : "No Property Selected"}}</span>
+                    <div class="hierarchy-header white-sub-header" [class.selected]="selectedFlatProperty.path == propertyStructureHeader">
+                        <span tooltip="{{!isInpusTabSelected ? propertyStructureHeader : ''}}">{{!isInpusTabSelected ? (propertyStructureHeader || "No Property Selected") : "No Property Selected"}}</span>
                     </div>
                     <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0 || isInpusTabSelected">No data to display</div>
                     <hierarchy-navigation class="hierarchy-nav"
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index e56374a2c2..7f9b4e7d58 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -1,4 +1,5 @@
 @import '../../../../assets/styles/variables';
+//@import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @ng2-shadow-gray: #f8f8f8;
 @ng2-light-gray: #eaeaea;
 @ng2-medium-gray: #d2d2d2;
@@ -15,6 +16,7 @@
 
 .properties-assignment-page {
     height: 100%;
+    font-family: 'Open Sans', omnes-regular, sans-serif; 
 
     .main-content {
         display:flex;
@@ -28,20 +30,21 @@
         margin: 0 0 1em 0;
 
         /deep/ .tabs {
-            width:25%;
+            width:33%;
             text-align:center;
-
         }
 
         /deep/ .tab {
-            padding: 10px .5em;
+            padding: 12px;
+            flex: 1;
+            font-weight:bold;
 
             &.active {
                 color:#009fdb;
                 border-color: #d2d2d2;
                 border-top: solid 4px #009fdb;
                 background-color: white;
-                padding-top:7px;
+                padding-top:9px;
             }
         }
 
@@ -49,39 +52,47 @@
             position:absolute;
             top:0;
             right:0;
-            min-width:200px;
         }
 
         .search-filter-container{
-            position: relative;
-            right: 164px;
-        }
+            position: absolute;
+            right: 100px;
+            display:flex;
+            flex-direction:row;
+        
+            .search-box {
+                border: 1px solid @ng2-medium-gray;
+                border-radius: 3px;
+                height: 32px;
+                margin: 0;
+                padding: 2px 20px 4px 10px;
+                outline: none;
+                font-style: italic;
+                color:@ng2-med-dark-gray;
+
+                &::-moz-placeholder { color:@ng2-med-dark-gray;}
+                &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
+            }
+
+            .search-icon {
+                background-position: -48px -3137px;
+                width: 14px;
+                height: 14px;
+                position: absolute;
+                right:42px;
+                top: 8px;
+            }
+
+            &.without-filter {
+                margin-right:10px;
+                .search-icon {
+                    right: 4px;
+                }
+            }
 
-        .search-box {
-            border: 1px solid @ng2-medium-gray;
-            border-radius: 4px;
-            height: 32px;
-            margin: 0;
-            padding: 2px 20px 4px 10px;
-            outline: none;
-            font-style: italic;
-            color:@ng2-med-dark-gray;
-            margin-right:10px;
-
-            &::-moz-placeholder { color:@ng2-med-dark-gray;}
-            &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
-        }
-        .search-icon {
-            background-position: -48px -3137px;
-            width: 14px;
-            height: 14px;
-            position: relative;
-            right: 34px;
-            top: 4px;
         }
         .advance-search{
-            position: relative;
-            right: 22px;
+
         }
         .clear-filter{
             cursor: pointer;
@@ -104,18 +115,19 @@
         display:flex;
         flex:0 0 350px;
         flex-direction:column;
-        margin: 3em 0 1em 1em;
-        padding: 10px;
-        overflow:auto;
+        margin: 45px 0 1em 1em;
+        overflow-x:auto;
 
         /deep/ .tabs {
-            width: 33%;
+            border-bottom: solid 1px #d0d0d0;
         }
 
         /deep/ .tab {
-            padding: 0.5em 1em 0 1em;
-            white-space: nowrap;
-            font-size: 13px;
+            flex: none;
+            padding: 8px 20px 0;
+            font-size: 14px;
+            font-weight:bold;
+            line-height:30px;
         }
     }
 
@@ -127,6 +139,28 @@
         border: 1px solid #ddd;
     }
 
+    /deep/ .white-sub-header {
+        background-color:  #fffefe;
+        box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
+        border-bottom: #d2d2d2 solid 1px;
+        color:#009fdb;
+        font-weight:bold;
+        font-size:14px;
+        text-align:left;
+        flex:0 0 auto;
+        padding: 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &.hierarchy-header {
+            padding-left:20px;
+            &.selected {
+                background-color: #e6f6fb;
+            }
+        }
+
+    }
 
     .hierarchy-nav-container {
         flex:1;
@@ -136,15 +170,7 @@
     }
 
     .hierarchy-header {
-        height:30px;
-        line-height: 2.5em;
-        display: flex;
-        width: 100%;
-        padding-left: 14px;
-        font-weight: bold;
-        text-align: left;
-        background-color: @ng2-light-gray;
-        font-size: 13px;
+
         span{
             text-overflow: ellipsis;
             overflow: hidden;
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 98fdc7391a..22d6f2fe51 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -242,10 +242,8 @@ export class PropertiesAssignmentComponent {
             this.propertiesNavigationData = simpleFlatProperty;
         }
 
-        // Updatet the header in the navigation tree with property name.
-        if(property instanceof DerivedFEProperty) {
-            this.propertyStructureHeader = (property.propertiesName.split('#'))[0];
-        }
+        // Update the header in the navigation tree with property name.
+        this.propertyStructureHeader = (property.propertiesName.split('#'))[0];
 
         // Set selected property in table
         this.selectedFlatProperty = this.hierarchyNavService.createSimpleFlatProperty(property, instanceName);
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
index dfde2a40b2..0eb8534595 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
@@ -43,6 +43,7 @@ export class PropertiesUtils {
                     this.initValueObjectRef(newFEProp); //initialize valueObj.
                     propertyFeArray.push(newFEProp);
                     newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
+                    this.dataTypeService.checkForCustomBehavior(newFEProp);
                 }    
             });
             instanceFePropertiesMap[instanceName] = propertyFeArray;
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
index be2388144f..821c215be5 100644
--- a/catalog-ui/src/app/ng2/services/data-type.service.ts
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -20,35 +20,7 @@ export class DataTypeService {
     public getDataTypeByTypeName(typeName: string): DataTypeModel {
         return this.dataTypes[typeName];
     }
-/*
-    //if the dt derived from simple- return the first parent type, else- return null
-    public getTypeForDataTypeDerivedFromSimple = (dataTypeName:string):string => {
-        /////////temporary hack for tosca primitives///////////////////////
-        if (!this.dataTypes[dataTypeName]) {
-            return PROPERTY_TYPES.STRING;
-        }
-        ///////////////////////////////////////////////////////////////////
-        if (this.dataTypes[dataTypeName].derivedFromName == PROPERTY_DATA.ROOT_DATA_TYPE || this.dataTypes[dataTypeName].properties) {
-            return null;
-        }
-        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.dataTypes[dataTypeName].derivedFromName) > -1) {
-            return this.dataTypes[dataTypeName].derivedFromName
-        }
-        return this.getTypeForDataTypeDerivedFromSimple(this.dataTypes[dataTypeName].derivedFromName);
-    };
 
-    /**
-     * The function returns all properties for the DataType passed in, and recurses through parent dataTypes (derivedFrom) to retrieve their properties as well
-     * @param dataTypeObj
-     *
-    public getDataTypePropertiesRecursively(dataTypeObj: DataTypeModel): Array<PropertyBEModel> {
-        let propertiesArray: Array<PropertyBEModel> = dataTypeObj.properties || [];
-        if (PROPERTY_DATA.ROOT_DATA_TYPE !== dataTypeObj.derivedFromName) {
-            propertiesArray = propertiesArray.concat(this.getDataTypePropertiesRecursively(dataTypeObj.derivedFrom));
-        }
-        return propertiesArray;
-    }
-*/
 
     public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
         //push all child properties to array
@@ -67,5 +39,24 @@ export class DataTypeService {
         }
     }
 
+    /**
+     * Checks for custom behavior for a given data type by checking if a function exists within data-type.service with that name
+     * Additional custom behavior can be added by adding a function with the given dataType name
+     */    
+    public checkForCustomBehavior = (property:PropertyFEModel) => {
+        let shortTypeName:string = property.type.split('.').pop();
+        if (this[shortTypeName]) {
+            this[shortTypeName](property); //execute function for given type, pass property as param
+        }
+    }
+
+    public Naming = (property: PropertyFEModel) => {
+        let generatedNamingVal: boolean = _.get(property.valueObj, 'ecomp_generated_naming', true);
+        property.flattenedChildren.forEach((prop) => {
+            if (prop.name == 'naming_policy') prop.hidden = !generatedNamingVal;
+            if (prop.name == 'instance_name') prop.hidden = generatedNamingVal;
+        });
+    }
+
 }
 
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
index efe830d6e0..872bf90329 100644
--- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
@@ -1,5 +1,5 @@
 <div class="checkbox-container {{checkboxStyle}}">
-    <div class="checkbox-animation" [@checkEffect]="checked"></div>
+    <div class="checkbox-animation"></div><!--[@checkEffect]="checked"-->
     <label class="checkbox-label" >
         <input type="checkbox" class="checkbox-hidden" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled" />
         <div class="checkbox-icon"></div>
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
index 7ed8a22194..3a28c5fb42 100644
--- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
@@ -1,4 +1,6 @@
  @import '../../../../assets/styles/tlv-sprite';
+@import '../../../../assets/styles/sprite';
+
  
 .checkbox-container {
     display:inline-block;
@@ -12,7 +14,7 @@
     }
     
     .checkbox-label {
-        font-weight: normal;
+        font-weight: inherit;
         font-size: inherit;
     }
 
@@ -37,7 +39,8 @@
         height:0;
         display:none;
         &:checked ~ .checkbox-icon::before{
-            background-position: -10px -120px;
+            .sprite-new;
+            .filled-checkbox-icon
         }
         &[disabled] ~ .checkbox-icon::before {
             /* TODO: add disabled styles here */
@@ -52,7 +55,7 @@
         background-color: #009fdb;
         position: absolute;
         left: 2px;
-        top: 5px;
+        top: 4px;
         width:10px;
         height:10px;
         border-radius: 50%;
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
index 5a9954c336..c1bb28b6ff 100644
--- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
+++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
@@ -1,19 +1,19 @@
 import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+//import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
 
 @Component({
     selector: 'checkbox',
     templateUrl: './checkbox.component.html',
     styleUrls: ['./checkbox.component.less'],
-    encapsulation: ViewEncapsulation.None,
-    animations: [
-        trigger('checkEffect', [
-            state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })),
-            state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })),
-            transition('1 => 0', animate('150ms ease-out')),
-            transition('0 => 1', animate('150ms ease-in'))
-        ])
-    ]
+    encapsulation: ViewEncapsulation.None
+    // animations: [
+    //     trigger('checkEffect', [
+    //         state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })),
+    //         state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })),
+    //         transition('1 => 0', animate('150ms ease-out')),
+    //         transition('0 => 1', animate('150ms ease-in'))
+    //     ])
+    // ]
 })
 export class CheckboxComponent  {
     
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
index fa05249ea4..6f9e57aaf2 100644
--- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
+++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
@@ -1,5 +1,9 @@
 @import '../../../../assets/styles/variables';
 
+tab {
+    height: 100%;
+}
+
 .tabs {
     display:flex;
     flex: 0 0 auto;
@@ -14,8 +18,8 @@
 
 .tab-content-container {
     flex: 1;
-    height: 100%;
     width:100%;
+    overflow-y:hidden;
 }
 
 .tab-content {
@@ -33,12 +37,8 @@
         position:relative;
 
         &:first-child {
-            border-top-left-radius: 8px;
             border-left:solid 1px #d2d2d2;
         }
-        &:last-child {
-            border-top-right-radius: 8px;
-        }
 
         &.active {
             background-color:#009fdb;
@@ -77,7 +77,7 @@
         &.active {
             color: @main_color_a;
             &:after {
-                transform: scaleX(1);
+                transform: scaleX(1.2);
             }
         }
     }
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-model.ts
index 7359ac0e91..13e9e8d80a 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-model.ts
+++ b/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-model.ts
@@ -153,7 +153,7 @@ export class ModulePropertyView extends PropertyFormBaseView {
                 switch (this.$scope.property.name) {
 
                     case UNIQUE_GROUP_PROPERTIES_NAME.MIN_VF_MODULE_INSTANCES:
-                        if (!maxPropertyValue || maxPropertyValue === null) {
+                        if (isNaN(maxPropertyValue) || maxPropertyValue == null) {
                             isValid = propertyValue <= initialCountPropertyValue;
                         }
                         else {
@@ -161,7 +161,7 @@ export class ModulePropertyView extends PropertyFormBaseView {
                         }
                         this.$scope.forms.editForm["value"].$setValidity('maxValidation', isValid);
                         if (this.component.isService()) {
-                            if (!parentPropertyValue || parentPropertyValue === null) {
+                            if (isNaN(parentPropertyValue) || parentPropertyValue == null) {
                                 isValid = true;
                             } else {
                                 isValid = propertyValue >= parentPropertyValue;
@@ -170,14 +170,14 @@ export class ModulePropertyView extends PropertyFormBaseView {
                         }
                         break;
                     case UNIQUE_GROUP_PROPERTIES_NAME.MAX_VF_MODULE_INSTANCES:
-                        if (!minPropertyValue || minPropertyValue === null) {
+                        if (isNaN(minPropertyValue) || minPropertyValue == null) {
                             isValid = propertyValue >= initialCountPropertyValue;
                         } else {
                             isValid = !propertyValue || (propertyValue >= minPropertyValue && propertyValue >= initialCountPropertyValue);
                         }
                         this.$scope.forms.editForm["value"].$setValidity('minValidation', isValid);
                         if (this.component.isService()) {
-                            if (!parentPropertyValue || parentPropertyValue === null) {
+                            if (isNaN(parentPropertyValue) || parentPropertyValue == null) {
                                 isValid = true;
                             }
                             else {
@@ -187,11 +187,11 @@ export class ModulePropertyView extends PropertyFormBaseView {
                         }
                         break;
                     case UNIQUE_GROUP_PROPERTIES_NAME.INITIAL_COUNT:
-                        if ((!minPropertyValue || minPropertyValue === null) && (!maxPropertyValue || maxPropertyValue === null)) {
+                        if ((isNaN(minPropertyValue) || minPropertyValue == null) && (isNaN(maxPropertyValue) || maxPropertyValue == null)) {
                             isValid = true;
-                        } else if (!minPropertyValue || minPropertyValue === null) {
+                        } else if (isNaN(minPropertyValue) || minPropertyValue == null) {
                             isValid = propertyValue <= maxPropertyValue;
-                        } else if (!maxPropertyValue || maxPropertyValue === null) {
+                        } else if (isNaN(maxPropertyValue) || maxPropertyValue == null) {
                             isValid = propertyValue >= minPropertyValue;
                         } else {
                             isValid = minPropertyValue <= propertyValue && propertyValue <= maxPropertyValue;
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
index 48a2446e5f..507181c98c 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
@@ -246,7 +246,7 @@ export class WorkspaceViewModel {
                 type: this.$scope.componentType.toLowerCase(),
                 mode: WorkspaceMode.VIEW,
                 components: this.$state.params['components']
-            });
+            },{reload: true});
 
         };
 
diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-global.png b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png
index f684d2de9c..fb9e79894a 100644
--- a/catalog-ui/src/assets/styles/images/sprites/sprite-global.png
+++ b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png
diff --git a/catalog-ui/src/assets/styles/sprite.less b/catalog-ui/src/assets/styles/sprite.less
index e9eed6e0c6..fd2b6c87e0 100644
--- a/catalog-ui/src/assets/styles/sprite.less
+++ b/catalog-ui/src/assets/styles/sprite.less
@@ -226,10 +226,17 @@
 .search-icon{    background-position: -894px -71px;  width: 14px;  height: 14px;}
 .asc{background-position: -924px -71px;  width: 8px;  height: 12px;}
 .desc{background-position: -924px -101px;  width: 8px;  height: 12px;}
-.add-item-icon    {background-position: -50px -960px;  width: 19px;  height: 19px;}
-.add-item-icon:hover    {background-position: -100px -960px;  width: 19px;  height: 19px;}
-.delete-item-icon    {  background-position: -140px -1119px;  width: 11px;  height: 15px;  }
-.filter-icon {background-position: -48px -1040px;  width: 19px;  height: 20px;}
+
+.delete-item-icon       { background-position: -140px -1119px;  width: 11px;  height: 15px; }
+.delete-item-icon:hover { background-position: -167px -1119px;  width: 11px;  height: 15px; }
+.filter-icon            { background-position: -48px -1040px;  width: 19px;  height: 20px;}
+.filter-icon:hover      { background-position: -99px -1040px;  width: 19px;  height: 20px;}
+.filled-checkbox-icon   { background-position: -100px -1079px;  width: 14px;  height: 14px;}
+
+.round-expand-icon             { background-position: -50px -1188px;  width: 15px;  height: 15px; }
+.round-expand-icon:hover       { background-position: -100px -1188px;  width: 15px;  height: 15px; }
+.round-expand-icon.open        { background-position: -50px -1216px;  width: 15px;  height: 15px; }
+.round-expand-icon.open:hover  { background-position: -100px -1216px;  width: 15px;  height: 15px; }
 /*
 .sprite-new.expand-asset-icon {  background-position: -740px -590px;  width: 40px;  height: 40px; }
 .sprite-new.view-info-icon {  background-position: -739px -621px;  width: 40px;  height: 40px; }
diff --git a/catalog-ui/webpack.common.js b/catalog-ui/webpack.common.js
index 818d031776..fc2f5a4387 100644
--- a/catalog-ui/webpack.common.js
+++ b/catalog-ui/webpack.common.js
@@ -33,11 +33,11 @@ const bundledScripts = [
     "script-loader!./node_modules/checklist-model/checklist-model.js",
     "script-loader!./node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js",
     "script-loader!./node_modules/qtip2/dist/jquery.qtip.min.js",
-    "script-loader!./node_modules/cytoscape-qtip/cytoscape-qtip.js",
+    "script-loader!./node_modules/@bardit/cytoscape-qtip/cytoscape-qtip.js",
     "script-loader!./node_modules/js-md5/build/md5.min.js",
     "script-loader!./node_modules/angular-clipboard/angular-clipboard.js",
     "script-loader!./node_modules/angular-resizable/angular-resizable.min.js",
-    "script-loader!./node_modules/angular-dragdrop/src/angular-dragdrop.min.js",
+    "script-loader!./node_modules/sdc-angular-dragdrop/src/angular-dragdrop.min.js",
     "script-loader!./node_modules/angular-tooltips/dist/angular-tooltips.min.js",
     "script-loader!./node_modules/angular-sanitize/angular-sanitize.min.js"
 ];