update wskflow to work with composer v4

update tests to work with composer v4

update helper functions in composer to work with v4

fixes wskflow to allow custom objects generated by composer v4

edited rules for hiding inline functinos to work wtih composer v4

changes for composer 0.4.0-test.2

update package.json to point to the latest composer on npm

removed console logs

Author: Kerry Chang

app/content/css/ui.css

@@ -1599,17 +1599,28 @@ break {
     stroke-dasharray: 1;
     opacity: 0.8;
 }
-#wskflowSVG .node.leaf[data-status="success"] rect, #wskflowSVG .node.leaf.function[data-status="success"] rect {
+
+#wskflowSVG .node.leaf.function rect {
+    /* function nodes are yellow in app graph*/
+    fill: var(--color-support-03) !important;    
+    stroke: var(--color-ui-05) !important;
+}
+
+#wskflowSVG .node.leaf.function rect, #wskflowSVG .node.leaf.Dummy rect, #wskflowSVG .node.leaf.retain rect {
+    /* these are represented as smaller boxes, so use a lighter stroke */
+    stroke-width: 1.25;
+}
+
+#wskflowSVG .node.leaf[data-status="success"] rect {
     /* visited nodes with success outcome */
     fill: #2166ac !important;
     stroke: var(--color-text-01) !important;
 }
-#wskflowSVG .node.leaf[data-status="failed"] rect, #wskflowSVG .node.leaf.function[data-status="failed"] rect {
+#wskflowSVG .node.leaf[data-status="failed"] rect {
     /* visited nodes with failure outcome */
     fill: var(--color-support-01) !important;
 }
-#wskflowSVG .node.leaf[data-status="success"] text:not(.edge-label), #wskflowSVG .node.leaf.function[data-status="success"] text:not(.edge-label),
-#wskflowSVG .node.leaf[data-status="failed"] text:not(.edge-label), #wskflowSVG .node.leaf.function[data-status="failed"] text:not(.edge-label) {
+#wskflowSVG .node.leaf[data-status="success"] text:not(.edge-label), #wskflowSVG .node.leaf[data-status="failed"] text:not(.edge-label) {
     /* visited node text for session flow */
     fill: var(--color-ui-01) !important;
 }
@@ -1637,14 +1648,8 @@ break {
     mask: url(#mask-stripe);
     /*fill: var(--color-support-03);*/
 }
-#wskflowSVG .node.leaf.function rect {
-    /* these are represented as smaller boxes, so use a lighter stroke */
-    stroke-width: 1.25;
-}
-#wskflowSVG .node.leaf.function rect {
-    fill: var(--color-support-03) !important;
-    stroke: var(--color-ui-05) !important;
-}
+
+
 #qtip .qtip-prefix {
     font-weight: bold;
 }

app/content/js/ui.js

@@ -1397,7 +1397,7 @@ const ui = (function() {
                                                                     displayLabel: name                                                                    
                                                                 }
                                                            })))
-                        .then(actions => ({ composition: actions }))
+                        .then(actions => ({ type: "sequence", components: actions }))
                         .then(fsm => ui.wskflow(fsm))
 
                 }

app/plugins/modules/composer/lib/composer.js

@@ -464,7 +464,7 @@ exports.create = ({name, fsm, type, annotations=[], parameters=[], wsk, commandT
                        ])
         .then(([currentAction]) => {
             // now we merge together the parameters and annotations
-            const fsmAction = fsm.encode(fqnAppName).actions[0].action
+            const fsmAction = openwhiskComposer.encode(openwhiskComposer.composition(fqnAppName, fsm), "0.4.0").actions[0].action
             fsmAction.parameters = currentAction.parameters.concat(parameters).concat(fsmAction.parameters || []),
             fsmAction.annotations = mergeAnnotations(currentAction.annotations,
                                                      mergeAnnotations(annotations||[], fsmAction.annotations||[]),
@@ -757,25 +757,28 @@ exports.decorateAsApp = ({action, viewName='app', commandPrefix='app get', doVis
  * Extract the Action Tasks from a given FSM
  *
  */
-exports.extractActionsFromFSM = ({composition=[]}={}) => {
+exports.extractActionsFromFSM = (composition) => {
     const actions = []
 
     /** recursively add actions from the given root sequence */
-    const iter = root => root.forEach(node => {
-        if (node.type === 'action') {
-            actions.push(node.name)
-        } else {
-            for (let key in node) {
-                if (util.isArray(node[key])) {
-                    iter(node[key])
-                }
-            }
+    const iter = root => {
+        if(root.type === 'action'){
+            actions.push(root.name);
         }
-    })
+        else{
+            Object.keys(root).forEach(key => {        
+                if(Array.isArray(root[key])){
+                    root[key].forEach(obj => iter(obj));                    
+                }
+                else if(typeof root[key] === 'object' && root[key] !== null){
+                    iter(root[key])
+                }
+            })
+        }        
+    }
 
-    // start from the root
+    // start from the root    
     iter(composition)
-
     return actions
 }
 

app/plugins/modules/composer/package.json

@@ -12,7 +12,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@ibm-functions/composer": "^0.3.0",
+    "@ibm-functions/composer": "^0.4.0",
     "chokidar": "^2.0.3"
   }
 }

app/plugins/modules/wskflow/lib/fsm2graph.js

@@ -50,7 +50,10 @@ function addDummy(sources, targets, obj, options, directionS, directionT){
 
 }
 
+let id2log = id => id.replace(/\-components/g, '').replace(/__origin/g, '').replace(/__terminus/g, '')
+
 function drawNodeNew(id, label, type, properties, options){
+	//console.log(id)
 	let o = {
 		id: id,
 		label: label,
@@ -73,12 +76,26 @@ function drawNodeNew(id, label, type, properties, options){
 			}
 			o.visited = visited[id];
 		}
-		else if(visited[id]){
-			if(type === 'action'){
-				visited[id].forEach((v, i) => {visited[id][i]++}); // for actions, increase all index by one to point to the next activation in the array.
+		else{
+			let iid = id2log(id)			
+			if(visited[iid]){
+				if(type === 'action'){
+					visited[iid].forEach((v, i) => {visited[iid][i]++}); // for actions, increase all index by one to point to the next activation in the array.
+				}
+
+				if(type === 'retain'){
+					if((visited[iid].length >= 1 && id.endsWith('__origin')) || (visited[iid].length === 2 && id.endsWith('__terminus'))){
+						o.visited = visited[iid];
+					}
+				}
+				else{
+					o.visited = visited[iid];
+				}
+				
 			}
-			o.visited = visited[id];
+			//console.log("iid:", id, iid, visited[iid], o.visited)
 		}
+		
 	}
 
 	if(visited && (visited[id] || id === 'Entry'))
@@ -175,16 +192,19 @@ function drawNodeNew(id, label, type, properties, options){
 			ports: [],
 			properties: {},
 			children: [],
-			edges: []
+			edges: [],
+			visited: visited ? visited[id2log(`${id}-body`)] : undefined
 		}, {
 			id: `${id}-handler`,
 			label: 'error handler',
 			type: 'handler', 
 			ports: [],
 			properties: {},
 			children: [],
-			edges: []
+			edges: [],
+			visited: visited ? visited[id2log(`${id}-handler`)] : undefined
 		}];
+
 		o.edges = [drawEdgeNew(`${id}-body`, `${id}-handler`, o, undefined, 'RIGHT')];				
 	}
 	else if(o.type === 'Entry' || o.type === 'Exit'){
@@ -200,7 +220,8 @@ function drawNodeNew(id, label, type, properties, options){
 		o.height = 4;
 		// Dummy node's `properties` is `sources`, used to determine if the dummy is visited 
 		if(visited && Array.isArray(properties)){
-			properties.forEach(s => {	// a source id			 
+			properties.forEach(s => {	// a source id			
+				s = id2log(s); 
 				if(visited[s]){			// if the source is visited
 					visited[s].forEach(a => {	// find out if any of its activation was success
 					        if(activations[a].response.success){	// if so, dummy is visited
@@ -291,16 +312,21 @@ function drawEdgeNew(sourceId, targetId, layer, type, direction, sourcePort, tar
 		sourcePort: sourcePort,
 		target: targetId,
 		targetPort: targetPort,
-		visited: (visited && visited[sourceId] && visited[targetId]) 
+		//visited: (visited && visited[sourceId] && visited[targetId]) 
 	};
 }
 
 function ir2graph(ir, gm, id, prevId, options={}){	// ir and graph model
-	if(Array.isArray(ir)){
+	if(ir.type === 'sequence' || Array.isArray(ir)){
 		// for an array of things, prevId is the previous element
 		// console.log(ir, gm, id, prevId);
-		let count = 0, prev;
-		ir.forEach(obj => {
+		let count = 0, prev, array;
+		if(ir.type === 'sequence')
+			array = ir.components
+		else
+			array = ir
+
+		array.forEach(obj => {
 			if(obj.options && obj.options.helper){
 				// do nothing
 			}			
@@ -314,6 +340,7 @@ function ir2graph(ir, gm, id, prevId, options={}){	// ir and graph model
 		return prev;	
 	}
 	else{
+		//id = `${id}-${ir.type}`
 		if(ir.type === 'action'){
 			let name = ir.name;
 			if(ir.displayLabel)
@@ -324,7 +351,7 @@ function ir2graph(ir, gm, id, prevId, options={}){	// ir and graph model
 			return [id];		
 		}
 		else if(ir.type === 'function'){
-			gm.children.push(drawNodeNew(id, ir.exec.code, ir.type, undefined, options))
+			gm.children.push(drawNodeNew(id, ir.function.exec.code, ir.type, undefined, options))
 
 			if(prevId)
 				prevId.forEach(pid => gm.edges.push(drawEdgeNew(pid, id, gm)));
@@ -372,15 +399,15 @@ function ir2graph(ir, gm, id, prevId, options={}){	// ir and graph model
                               tryPart = tryCatchPart.children[0],
                               catchPart = tryCatchPart.children[1]
 
-		        ir2graph(ir.body, tryPart, tryPart.id, undefined, options);
-			ir2graph(ir.handler, catchPart, catchPart.id, undefined, options);
+		        ir2graph(ir.body, tryPart, tryPart.id+'-components', undefined, options);
+			ir2graph(ir.handler, catchPart, catchPart.id+'-components', undefined, options);
 
 			return [gm.children[gm.children.length-1].id];
 		}
-		else if(ir.type === 'while' || ir.type === 'dowhile'){	
+		else if(ir.type === 'while' || ir.type === 'dowhile' || ir.type === 'while_nosave' || ir.type === 'dowhile_nosave'){	
 			let firstTestId, firstBodyId, lastTestId, lastBodyId;
 
-			if(ir.type === 'while'){
+			if(ir.type === 'while' || ir.type === 'while_nosave'){
 				firstTestId = gm.children.length;
 				lastTestId = ir2graph(ir.test, gm, `${id}-test`, undefined, options);
 				if(prevId)	// connect prevId to the first node in test
@@ -427,7 +454,7 @@ function ir2graph(ir, gm, id, prevId, options={}){	// ir and graph model
 			if(prevId){
 				prevId.forEach(pid => gm.edges.push(drawEdgeNew(pid, `${id}__origin`, gm)));
 			}
-			let lastNodes = ir2graph(ir.body, gm, `${id}-body`, [`${id}__origin`], options);
+			let lastNodes = ir2graph(ir.components, gm, id, [`${id}__origin`], options);
 			gm.children.push(drawNodeNew(`${id}__terminus`, '', ir.type, undefined, options));
 			if(lastNodes){
 				lastNodes.forEach(pid => gm.edges.push(drawEdgeNew(pid, `${id}__terminus`, gm)));
@@ -440,41 +467,26 @@ function ir2graph(ir, gm, id, prevId, options={}){	// ir and graph model
 
 			return [`${id}__terminus`];
 		}
-		else if(ir.type === 'let'){
-			if(ir.body && ir.body.length>0 && ir.body[0].options && ir.body[0].options.helper === 'retry_1'){
-				// retry, insert a compound node				
-				gm.children.push(drawNodeNew(id, ir.declarations.count, 'retry', undefined, options));
-				if(prevId){
-					prevId.forEach(pid => gm.edges.push(drawEdgeNew(pid, id, gm)));
-				}
-				// body is in ir.body[1].body[0].finalizer[0].body[0].body
-				ir2graph(ir.body[1].body[0].finalizer[0].body[0].body, gm.children[gm.children.length-1], `${id}-body-1-body-0-finalizer-0-body-0-body`, undefined, options);
-				
-				return [gm.children[gm.children.length-1].id];
-
-			}
-			else if(ir.body && ir.body.length>0 && ir.body[0].test && ir.body[0].test.length>0 && ir.body[0].test[0].options && ir.body[0].test[0].options.helper === 'repeat_1'){
-				// repeat, insert a compound node				
-				gm.children.push(drawNodeNew(id, ir.declarations.count, 'repeat', undefined, options));
-				if(prevId){
-					prevId.forEach(pid => gm.edges.push(drawEdgeNew(pid, id, gm)));
-				}
-				// body is in ir.body[0].body
-				ir2graph(ir.body[0].body, gm.children[gm.children.length-1], `${id}-body-0-body`, undefined, options);
-				
-				return [gm.children[gm.children.length-1].id];
+		else if(ir.type === 'retry' || ir.type === 'repeat'){
+			gm.children.push(drawNodeNew(id, ir.count, ir.type, undefined, options));
+			if(prevId){
+				prevId.forEach(pid => gm.edges.push(drawEdgeNew(pid, id, gm)));
 			}
-			else{
-				// regular let
-			        let s = JSON.stringify(ir.declarations, undefined, 4);
-                                gm.children.push(drawNodeNew(id, s, ir.type, undefined, options))
-				if(prevId)
-					prevId.forEach(pid => gm.edges.push(drawEdgeNew(pid, id, gm)));
+			// body is in ir.components
+			ir2graph(ir.components, gm.children[gm.children.length-1], `${id}-components`, undefined, options);
+			
+			return [gm.children[gm.children.length-1].id];
+		}
+		else if(ir.type === 'let'){
+			// regular let
+		        let s = JSON.stringify(ir.declarations, undefined, 4);
+                            gm.children.push(drawNodeNew(id, s, ir.type, undefined, options))
+			if(prevId)
+				prevId.forEach(pid => gm.edges.push(drawEdgeNew(pid, id, gm)));
 
-				return ir2graph(ir.body, gm, `${id}-body`, [id], options);
-			}
+			return ir2graph(ir.components, gm, `${id}-components`, [id], options);
 		}
-		else if(ir.type === 'literal'){			
+		else if(ir.type === 'literal' || ir.type === 'value'){			
   		        const s = JSON.stringify(ir.value, undefined, 4);
 			gm.children.push(drawNodeNew(id, s, ir.type, undefined, options))
 			if(prevId)
@@ -486,7 +498,7 @@ function ir2graph(ir, gm, id, prevId, options={}){	// ir and graph model
 			let lastBodyNode = ir2graph(ir.body, gm, `${id}-body`, prevId, undefined, options);
 			return ir2graph(ir.finalizer, gm, `${id}-finalizer`, lastBodyNode, undefined, options);
 		}
-	        else if(typeof ir.body === 'object'){
+	        else if(typeof ir.components === 'object'){
                     // generic handler for any subgraph-via-body node
                     const label = capitalize(ir.type),
                           type = ir.type,
@@ -499,13 +511,13 @@ function ir2graph(ir, gm, id, prevId, options={}){	// ir and graph model
                     if(prevId)
 		        prevId.forEach(pid => gm.edges.push(drawEdgeNew(pid, id, gm)));
 
-		    ir2graph(ir.body, body, `${id}-body`, undefined, options)
+		    ir2graph(ir.components, body, `${id}-components`, undefined, options)
 
                     return [id]
 
 		} else {
                     console.error('wskflow warning! unsupported node type', ir)
-                }
+        }
 	}
 }
 
@@ -533,7 +545,7 @@ function fsm2graph(ir, containerElement, acts, options){
 		activations.forEach((a, index) => {
 			if(a.logs){	// states recorded in logs
 				a.logs.forEach(log => {
-					if(log.indexOf('stdout: Entering state ') !== -1){
+					if(log.indexOf('stdout: Entering composition') !== -1){
 						// a conductor path log 
 						let path = log.substring(log.lastIndexOf(' ')+1);
 						// replace all [,],.in path to - to use as a id, as css selector cannot have those characters
@@ -564,7 +576,7 @@ function fsm2graph(ir, containerElement, acts, options){
               viewOptions = Object.assign( { renderFunctionsInView }, options)
 
         graphData.children.push(drawNodeNew('Entry', 'start', 'Entry'));	// insert Entry node
-        let lastNodes = ir2graph(ir.composition, graphData, 'fsm', ['Entry'],   // build the graph model, link the start of the graph to Entry
+        let lastNodes = ir2graph(ir, graphData, 'composition', ['Entry'],   // build the graph model, link the start of the graph to Entry
                                  viewOptions);                                  // <-- options to the rendering
 	if(lastNodes == undefined)
 		lastNodes = ['Entry'];
@@ -665,8 +677,8 @@ function fsm2graph(ir, containerElement, acts, options){
  *
  */
 const isSimpleComposition = ir => {
-    const isShort = ir.composition.length <= 2,
-          numNonFuncs = numNonFunctions(ir.composition),
+    const isShort = ir.components ? ir.components.length <= 2 : true,
+          numNonFuncs = numNonFunctions(ir),
           atMostOneNonFunction = numNonFuncs <= 3
 
     debug('isSimpleComposition', isShort, numNonFuncs)
@@ -678,6 +690,7 @@ const isSimpleComposition = ir => {
  *
  */
 const numNonFunctions = composition => {
+	if(composition === undefined) return 0
     if (composition.type === 'function') {
         return 0
     } else if (composition.type) {