enhance loading topologyTemplate from source

- fix bug when rename stepName in workflow
- tune directGraph options to fix Elements positioning when loading from source

Issue-ID: CCSDK-1779
Issue-ID: CCSDK-2129
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: Iee0d5b98266bee5b9920c557dea46a69c8434d85

5 files changed, 74 insertions, 23 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index 56b5dcbbc..5adce7ea0 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -53,6 +53,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
   paletteGraph: joint.dia.Graph;
   palettePaper: joint.dia.Paper;
   private ngUnsubscribe = new Subject();
+  private opt = { tx: 100, ty: 100 };
 
   constructor(private designerStore: DesignerStore,
               private functionStore: FunctionsStore,
@@ -91,7 +92,6 @@ export class DesignerComponent implements OnInit, OnDestroy {
      * the code to retrieve from server is commented
      */
     this.functionStore.state$
-      .pipe(x => { console.log('value on way to distinct', x); return x; })
       .pipe(
         distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
         takeUntil(this.ngUnsubscribe))
@@ -114,7 +114,9 @@ export class DesignerComponent implements OnInit, OnDestroy {
       });
 
     this.designerStore.state$
-      .pipe(takeUntil(this.ngUnsubscribe))
+      .pipe(
+        distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
+        takeUntil(this.ngUnsubscribe))
       .subscribe(state => {
         if (state.sourceContent) {
           console.log('inside desinger.component---> ', state);
@@ -123,6 +125,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
           console.log(topologtTemplate);
           delete state.sourceContent;
           this.graphGenerator.populate(topologtTemplate, this.boardGraph);
+
+          console.log('all cells', this.boardGraph.getCells());
           /**
            * auto arrange elements in graph
            * https://resources.jointjs.com/docs/jointjs/v3.1/joint.html#layout.DirectedGraph
@@ -130,12 +134,10 @@ export class DesignerComponent implements OnInit, OnDestroy {
           joint.layout.DirectedGraph.layout( this.boardGraph.getCells(), {
             dagre,
             graphlib,
-            // nodeSep: 50,
-            // setLinkVertices: false,
-            // rankDir: 'LR',
-            marginX: 100,
-            marginY: 100,
-            clusterPadding: { top: 100, left: 10, right: 10, bottom: 100 },
+            setLinkVertices: false,
+            marginX: 10,
+            marginY: 10,
+            clusterPadding: { top: 100, left: 30, right: 10, bottom: 100 },
             rankDir: 'TB'
           });
         }
@@ -174,9 +176,9 @@ export class DesignerComponent implements OnInit, OnDestroy {
           width: 1100,
           gridSize: 10,
           drawGrid: true,
-          background: {
-            color: 'rgba(0, 255, 0, 0.3)'
-          },
+          // background: {
+          //   color: 'rgba(0, 255, 0, 0.3)'
+          // },
           cellViewNamespace: joint.shapes
         });
 
@@ -200,6 +202,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
 
         const parentId = cell.get('parent');
         if (!parentId) {
+          // this is action
           return;
         }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
index c37accdb4..a7f25902c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
@@ -106,7 +106,7 @@ export class DesignerStore extends Store<DesignerDashboardState> {
     addDgGenericNodeTemplate(nodeTemplateName: string) {
         const node = new NodeTemplate('dg-generic');
         node.properties = {
-            'dependency-node-template': []
+            'dependency-node-templates': []
         };
         this.setState({
             ...this.state,
@@ -131,7 +131,7 @@ export class DesignerStore extends Store<DesignerDashboardState> {
                     [dgGenericNodeName]: {
                         ...this.state.template.node_templates[dgGenericNodeName],
                         properties: {
-                            'dependency-node-template': [
+                            'dependency-node-templates': [
                                 ...props['dependency-node-template'],
                                 dependency
                             ]
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
index 17596bd33..8e1d88907 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
@@ -1,7 +1,3 @@
-import { TopologyTemplate } from './model/designer.topologyTemplate.model';
-import { Injectable } from '@angular/core';
-import { GraphUtil } from './graph.util';
-
 /*
 ============LICENSE_START==========================================
 ===================================================================
@@ -22,6 +18,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 */
+import { TopologyTemplate } from './model/designer.topologyTemplate.model';
+import { Injectable } from '@angular/core';
+import { GraphUtil } from './graph.util';
+import { NodeTemplate } from './model/desinger.nodeTemplate.model';
 
 @Injectable({
     providedIn: 'root'
@@ -36,7 +36,41 @@ export class GraphGenerator {
      * create action element
      * from steps --> create function element
      * add function element to action element
+     * example toplogyTemplate
+     *
+     * {
+     * "workflows": {
+     *   "Action1": {
+     *       "steps": {
+     *           "STEP_NAME": {
+     *               "target": "NODE_TEMPLATE_NAME",
+     *                   "description": ""
+     *           }
+     *       }
+     *   }
+     * },
+     * "node_templates": {
+     *    "NODE_TEMPLATE_NAME": {
+     *        "type": "dg-generic",
+     *            "properties": {
+     *            "dependency-node-templates": [
+     *                "component-config-snapshots-executor",
+     *                "component-jython-executor"
+     *            ]
+     *        }
+     *    },
+     *    "component-config-snapshots-executor": {
+     *        "type": "component-config-snapshots-executor",
+     *            "properties": { }
+     *    },
+     *    "component-jython-executor": {
+     *        "type": "component-jython-executor",
+     *            "properties": { }
+     *    }
+     * }
+     * }
      */
+
     public populate(topologyTempalte: TopologyTemplate,
                     boardGraph: joint.dia.Graph) {
 
@@ -51,18 +85,19 @@ export class GraphGenerator {
             const workflow = topologyTempalte.workflows[workFlowName].steps;
             const stepName = Object.keys(workflow)[0];
             if (stepName) {
-                const functionType = workflow[stepName].target;
+                const nodeTemplateName = workflow[stepName].target;
+                const functionType = topologyTempalte.node_templates[nodeTemplateName].type;
                 console.log('draw function with ', stepName, functionType);
 
-                const functionElementForBoard = this.graphUtil.dropFunctionOverActionRelativeToParent(
+                this.graphUtil.dropFunctionOverActionRelativeToParent(
                     actionElement,
                     stepName , functionType, boardGraph);
 
                 // TODO handle dg-generic case (multi-step in the same action)
                 if (functionType === 'dg-generic') {
-                    const props = topologyTempalte.node_templates[stepName].properties;
+                    const props = topologyTempalte.node_templates[nodeTemplateName].properties;
                     console.log('dg props', props);
-                    props['dependency-node-template'].forEach(dependencyStepName => {
+                    props['dependency-node-templates'].forEach(dependencyStepName => {
                         const dependencyType = topologyTempalte.node_templates[dependencyStepName].type;
                         console.log('dependencyType', dependencyType);
                         this.graphUtil.dropFunctionOverActionRelativeToParent(
@@ -75,5 +110,4 @@ export class GraphGenerator {
         });
 
     }
-
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts
index 9ba7271fb..fd4dd35e4 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts
@@ -211,4 +211,18 @@ export class GraphUtil {
         return !parentCell.get('embeds') || parentCell.get('embeds').length < 1;
     }
 
+    getActionSiblings(actionCell: joint.shapes.app.ActionElement,
+                      boardGraph: joint.dia.Graph
+        ): joint.shapes.app.ActionElement[] {
+        const cellId = actionCell.id;
+        const siblings = boardGraph.getCells().filter(elem => {
+            const type = elem.attributes.type;
+            const elemId = elem.id;
+            return (type !== undefined && type === 'app.ActionElement'
+                && elemId !== cellId);
+        }) as joint.shapes.app.ActionElement[];
+        console.log('siblings', siblings);
+        return siblings;
+    }
+
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts
index 9bd56e5d5..8715e44c2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts
@@ -1,7 +1,7 @@
 export class NodeTemplate {
     type: string;
     properties?: {
-        'dependency-node-template'?: string[]
+        'dependency-node-templates'?: string[]
     };
     interfaces?: {};
     artifacts?: {};