initial commit

add tests

remove console log messages

renamed files

add a new composer source code for tests

update files that use wskflow to work with the new visualize output format

remove console logs

remove console logs

fix bugs and tests

Author: Kerry Chang

app/content/js/ui.js

@@ -1155,13 +1155,13 @@ const ui = (function() {
         debug('wskflow', fsm)
         const sidecar = document.querySelector('#sidecar')
         const {visualize} = plugins.require('wskflow')
-        const h = document.getElementById("sidecar").getBoundingClientRect().height
 
         sidecar.classList.add('custom-content')
         const container = document.querySelector('#sidecar > .custom-content')
         removeAllDomChildren(container)
 
-        visualize(fsm, container, undefined, h)
+        let {view, controller} = visualize(fsm)
+        container.appendChild(view)
         sidecar.setAttribute('data-active-view', '.custom-content > div')
     }
 
@@ -1360,6 +1360,7 @@ const ui = (function() {
                 } else if (renderThirdParty(entity)) {
                     // then the third party rendering took care of it
                 } else {
+                    // to show the sequence graph
                     const extraCss = entity.exec.components.length < 5 ? 'small-node-count-canvas' : ''
                     sequence.className = `${sequence.getAttribute('data-base-class')} ${extraCss}`
                     // old viz: setTimeout(() => entity.exec.components.map(renderActionBubble(sequence)), 0)
@@ -1375,7 +1376,6 @@ const ui = (function() {
                     // form a fake FSM, so we can use the wskflow visualization
                     // wskflw now use the IR, so we have to fake a IR instead of a FSM
                     const key = idx => `action_${idx}`
-
                     Promise.all(entity.exec.components.map((actionName,idx,A) => repl.qexec(`wsk action get "${actionName}"`)
                                                            .then(action => {
                                                                const anonymousCode = isAnonymousLet(action)
@@ -1394,6 +1394,7 @@ const ui = (function() {
                                                            })))
                         .then(actions => ({ composition: actions }))
                         .then(fsm => ui.wskflow(fsm))
+                        
                 }
             } else {
                 //

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

@@ -566,22 +566,17 @@ exports.handleError = (err, reject) => {
  *
  * @return { view, controller } where controller is the API exported by graph2doms
  */
-exports.wskflow = (visualize, viewName, { fsm, input, name, packageName }) => {
-    const view = document.createElement('div')
-    const h = document.getElementById("sidecar").getBoundingClientRect().height
-    view.style.flex = 1
-    view.style.display = 'flex'
-
-    // wskflow uses jquery, and assumes that the view is attached to the document;
-    // we have to fake it out, by attaching to document.body, then removing
-    document.body.appendChild(view)
-    const controller = visualize(fsm, view, undefined, h)
-    document.body.removeChild(view)
+exports.wskflow = (visualize, viewName, { fsm, input, name, packageName, reuseContainer}) => {
+    // wskflow's visualize function now returns the view as DOM and the controllers for mode buttons 
+    // container is only used in the app preview filewatch mode, where sidecar graph is updated by updating an existing wskflow container
+    // in other cases, container is undefined and wskflow generates a container itself
+    
+    const { view, controller } = visualize(fsm, reuseContainer);
 
     const onclick = undefined
     ui.addNameToSidecarHeader(undefined, name, packageName, onclick, viewName,
                               'This is a preview of your app, it is not yet deployed')
-
+    
     return { view, controller }
 }
 

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

@@ -39,8 +39,7 @@ const viewName = 'preview',               // for back button and sidecar header
  */
 module.exports = (commandTree, prequire) => {
     const render = (input, options) => new Promise((resolve, reject) => {
-         debug('options', options)
-
+         debug('options', options)         
          let fsmPromise, type, extraModes=[]
 
          if (input.endsWith('.fsm') || input.endsWith('.json')) {
@@ -65,8 +64,9 @@ module.exports = (commandTree, prequire) => {
 
          // create a fake action/entity record
          const formatForUser = defaultMode => ({fsm,code}) => {
-             const {visualize} = prequire('wskflow')
-             const { view, controller } = wskflow(visualize, viewName, { fsm, input, name })
+           
+             const {visualize} = prequire('wskflow')             
+             const { view, controller } = wskflow(visualize, viewName, { fsm, input, name, pk: undefined, reuseContainer: options.alreadyWatching})
              extraModes = extraModes.concat(zoomToFitButtons(controller))
 
              const entity = {
@@ -98,7 +98,7 @@ module.exports = (commandTree, prequire) => {
                  entity.show = 'fsm'
                  entity.type = 'actions'
              }
-
+             
              resolve(entity)
          }
          fsmPromise.then(formatForUser(defaultMode))
@@ -114,6 +114,7 @@ module.exports = (commandTree, prequire) => {
                      // createFromSource returns error as either an object that's {fsm:errMsg, code:originalCode}, or just the errMsg string
                      // here we check the error format and send the correct input to formatForUser/handleError
                      // in sidecar, error message shows in the fsm (JSON) tab. code tab shows the user's js code (if existed). 
+                     
                      if(err.fsm)
                       formatForUser('fsm')(err);
                      else
@@ -157,6 +158,9 @@ module.exports = (commandTree, prequire) => {
                  debug('environment', environment)
              }
 
+             if(execOptions.alreadyWatching)
+                options.alreadyWatching = execOptions.alreadyWatching;
+
              // render now
              render(input, options).then(resolve, reject)
 

app/plugins/modules/editor/lib/edit.js

@@ -635,8 +635,7 @@ const addWskflow = prequire => opts => {
 
     const { getAction, editor, content, eventBus } = opts,
           wskflowContainer = document.createElement('div'),
-          editorDom = content.querySelector('.monaco-editor-wrapper'),
-          h = document.getElementById("sidecar").getBoundingClientRect().height
+          editorDom = content.querySelector('.monaco-editor-wrapper')
 
     content.appendChild(wskflowContainer)
     wskflowContainer.className = 'wskflow-container'
@@ -669,7 +668,8 @@ const addWskflow = prequire => opts => {
                 // don't bother redrawing on revert
                 ui.removeAllDomChildren(wskflowContainer)
 
-                visualize(fsm, wskflowContainer, undefined, h, undefined, { xdirection: 'RIGHT' })
+                let {view, controller} = visualize(fsm)
+                wskflowContainer.appendChild(view);
             }
 
         }

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

@@ -90,9 +90,6 @@ module.exports = (commandTree, prequire) => {
         return repl.qexec(`session get ${sessionId}`)
             .then(session => Promise.all([session, fetchTrace(session), fetchTheAction(session)]))
             .then(([session, activations, action]) => {
-                const content = document.createElement('div')
-                content.style.display = 'none'
-                document.body.appendChild(content)
 
                 let fsm;
                 if (action.wskflowErr) {
@@ -106,11 +103,8 @@ module.exports = (commandTree, prequire) => {
                     fsm = action.annotations.find(({key}) => key === 'fsm').value
                 }
 
-                const controller = visualize(fsm, content, undefined, 1, activations)
+                const {view, controller} = visualize(fsm, undefined, undefined, undefined, activations)
 
-                content.style.display = ''
-                content.style.flex = 1
-                document.body.removeChild(content)
 
                 // set the default mode to session flow
                 session.modes.find(({defaultMode}) => defaultMode).defaultMode = false
@@ -124,7 +118,7 @@ module.exports = (commandTree, prequire) => {
                 return Object.assign(session, {
                     viewName: session.type,
                     type: 'custom',
-                    content,
+                    content: view,
                     isEntity: true
                 })
             })

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

@@ -459,8 +459,8 @@ function ir2graph(ir, gm, id, prevId){	// ir and graph model
 }
 
 
-function fsm2graph(ir, containerId, acts){
-	//console.log(ir, containerId, act);
+function fsm2graph(ir, containerElement, acts){
+	//console.log(ir, containerElement, acts);
 	taskIndex = 0;
 	activations = acts;
         visited = undefined; // see shell issue #602
@@ -551,7 +551,7 @@ function fsm2graph(ir, containerId, acts){
 
 	console.log('[wskflow] inserting DOM, calling graph2doms');
 
-	return graph2doms(graphData, containerId, activations);
+	return graph2doms(graphData, containerElement, activations);
 
 }
 

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

@@ -77,16 +77,31 @@ const wfColorAct = {
 	inactiveBorder: "grey"
 }
 
+const containerId = 'wskflowDiv';
+
 // need to fix center
-function graph2doms(JSONgraph, containerId, activations){
+function graph2doms(JSONgraph, ifReuseContainer, activations){
 
 	let zoom = d3.behavior.zoom()
 	    .on("zoom", redraw);
 
-	$("#wskflowContainer").remove();
-	$(containerId).append("<div id='wskflowContainer'></div>");	
+	let containerElement,
+		wskflowContainer = $('<div id="wskflowContainer"></div>');
+
+	if(ifReuseContainer && $(`#${containerId}`).length>0){
+		containerElement = $(`#${containerId}`);
+		$(containerElement).html('').css('display', 'flex').css('flex', 1);
+		$("#wskflowSVG").remove();
+		$("#qtip").remove();
+	}
+	else{
+		containerElement = $(`<div id="${containerId}" style="display: flex; flex: 1; width: 100%; height: 100%;"></div>`);
+	}
+
+	$(containerElement).append(wskflowContainer);	
+	
 
-	$("#wskflowContainer").css({
+	$(wskflowContainer).css({
 		"display": "none",
 		"flex-direction": "column",
 		"align-items": "center",
@@ -99,10 +114,10 @@ function graph2doms(JSONgraph, containerId, activations){
 		"width": '100%',
 		"height": '100%'
 	});
-    $("#wskflowContainer").addClass('grabbable') // we want to use grab/grabbing cursor
+    $(wskflowContainer).addClass('grabbable') // we want to use grab/grabbing cursor
 
 
-	let ssvg = d3.select("#wskflowContainer")        
+	let ssvg = d3.select($(wskflowContainer)[0])        
 	    .append("svg")
 	    .attr("id", "wskflowSVG")
 	    .style('width', '100%')	// svg width and height changes with the size of the container 
@@ -216,24 +231,24 @@ function graph2doms(JSONgraph, containerId, activations){
 	     .append("svg:path")
 	      .attr("d", "M852.8,558.8c0,194.5-158.2,352.8-352.8,352.8c-194.5,0-352.8-158.3-352.8-352.8c0-190.8,152.4-346.7,341.8-352.5v117.4l176.4-156.9L489,10v118C256.3,133.8,68.8,324.8,68.8,558.8C68.8,796.6,262.2,990,500,990c237.8,0,431.2-193.4,431.2-431.2H852.8z");
 
-	$("#wskflowContainer").append("<div id='qtip'><span id='qtipArrow'>&#9668</span><div id='qtipContent'></div></div>");
+	$(wskflowContainer).append("<div id='qtip'><span id='qtipArrow'>&#9668</span><div id='qtipContent'></div></div>");
 
 
 	if(activations){
-		$("#wskflowContainer").append("<div id='actList' style='position: absolute; display:none; background-color: rgba(0, 0, 0, 0.8); color: white; font-size: 0.75em; padding: 1ex; width:225px; right: 5px; top: 5px;'></div>");		
+		$(wskflowContainer).append("<div id='actList' style='position: absolute; display:none; background-color: rgba(0, 0, 0, 0.8); color: white; font-size: 0.75em; padding: 1ex; width:225px; right: 5px; top: 5px;'></div>");		
 	}
-	$("#qtip").css({
+	$(wskflowContainer).find("#qtip").css({
 		"position": "absolute",
 		"align-items": "center",
 		"pointer-events": "none",
 	});
-	$("#qtipArrow").css({
+	$(wskflowContainer).find("#qtipArrow").css({
 		"position": "relative",
 		"left": "3px",
 		"top": "1px",
 		"color": "#2E4053"
 	});
-	$("#qtipContent").css({
+	$(wskflowContainer).find("#qtipContent").css({
 		"background-color": wfColor.qtipBackground.normal,
 		"color": "white", 
 		"font-size": "0.75em",		
@@ -348,7 +363,7 @@ function graph2doms(JSONgraph, containerId, activations){
 
 	function drawGraph(nodes, links){
 		console.log("[wskflow] in drawGraph in graph2doms")
-		
+
 		// #1 add the nodes' groups
 		var nodeData = root.selectAll(".node")
 		.data(nodes,  function(d) { return d.id; });
@@ -1127,7 +1142,7 @@ function graph2doms(JSONgraph, containerId, activations){
 
 	function graphDoneCallback(){	
 		// show graph 
-   		$("#wskflowContainer").css("display", "flex");
+   		$(wskflowContainer).css("display", "flex");
  	} 		
 
  	// check if transition is complete. from https://stackoverflow.com/questions/10692100/invoke-a-callback-at-the-end-of-a-transition
@@ -1230,9 +1245,12 @@ function graph2doms(JSONgraph, containerId, activations){
 
     // exported API
     return {
-        register: callback => handlers.push(callback),
-        zoomToFit: () => zoomToFit(true),
-        zoom1to1: () => zoomToFit(false)
+    	view: $(containerElement)[0],
+    	controller:{
+    		register: callback => handlers.push(callback),
+	        zoomToFit: () => zoomToFit(true),
+	        zoom1to1: () => zoomToFit(false)
+    	}        
     }
 }
 

tests/data/composer-source/if-session.js

@@ -0,0 +1 @@
+composer.if(p=>p.condition, composer.sequence(p=>({path:true})), composer.sequence(p=>({path:false})));

tests/lib/composer-viz-util.js

@@ -43,6 +43,16 @@ const verifyNodeExists = (name, isDeployed=false) => app => {
                                 .then(nodes => nodes.value.length === 1))
         .then(() => app)
 }
+
+// for session - verify node execution status
+const verifyNodeStatusExists = (name, status) => app => {
+    const selector = `#wskflowSVG .node[data-name="/_/${name}"][data-status="${status}"]`
+    console.error(`CHECKING NODE ${name} ${selector}`)
+    return app.client.waitUntil(() => app.client.elements(selector)
+                                .then(nodes => nodes.value.length === 1))
+        .then(() => app)
+}
+
 const verifyNodeExistsById = id => app => {
     return app.client.waitUntil(() => app.client.elements(`#wskflowSVG #${id}`)
                                 .then(nodes => nodes.value.length === 1))
@@ -96,6 +106,7 @@ module.exports = {
     composerInput,
     composerErrorInput,
     verifyNodeExists,
+    verifyNodeStatusExists,
     verifyNodeExistsById,
     verifyEdgeExists,
     verifyOutgoingEdgeExists,