Skip to content
This repository was archived by the owner on Dec 17, 2024. It is now read-only.

Commit 5346700

Browse files
Kerry Changstarpit
Kerry Chang
authored and
starpit
committed
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
1 parent 5c97306 commit 5346700

File tree

11 files changed

+241
-112
lines changed

11 files changed

+241
-112
lines changed

‎app/content/js/ui.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1155,13 +1155,13 @@ const ui = (function() {
11551155
debug('wskflow', fsm)
11561156
const sidecar = document.querySelector('#sidecar')
11571157
const {visualize} = plugins.require('wskflow')
1158-
const h = document.getElementById("sidecar").getBoundingClientRect().height
11591158

11601159
sidecar.classList.add('custom-content')
11611160
const container = document.querySelector('#sidecar > .custom-content')
11621161
removeAllDomChildren(container)
11631162

1164-
visualize(fsm, container, undefined, h)
1163+
let {view, controller} = visualize(fsm)
1164+
container.appendChild(view)
11651165
sidecar.setAttribute('data-active-view', '.custom-content > div')
11661166
}
11671167

@@ -1360,6 +1360,7 @@ const ui = (function() {
13601360
} else if (renderThirdParty(entity)) {
13611361
// then the third party rendering took care of it
13621362
} else {
1363+
// to show the sequence graph
13631364
const extraCss = entity.exec.components.length < 5 ? 'small-node-count-canvas' : ''
13641365
sequence.className = `${sequence.getAttribute('data-base-class')} ${extraCss}`
13651366
// old viz: setTimeout(() => entity.exec.components.map(renderActionBubble(sequence)), 0)
@@ -1375,7 +1376,6 @@ const ui = (function() {
13751376
// form a fake FSM, so we can use the wskflow visualization
13761377
// wskflw now use the IR, so we have to fake a IR instead of a FSM
13771378
const key = idx => `action_${idx}`
1378-
13791379
Promise.all(entity.exec.components.map((actionName,idx,A) => repl.qexec(`wsk action get "${actionName}"`)
13801380
.then(action => {
13811381
const anonymousCode = isAnonymousLet(action)
@@ -1394,6 +1394,7 @@ const ui = (function() {
13941394
})))
13951395
.then(actions => ({ composition: actions }))
13961396
.then(fsm => ui.wskflow(fsm))
1397+
13971398
}
13981399
} else {
13991400
//

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

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -566,22 +566,17 @@ exports.handleError = (err, reject) => {
566566
*
567567
* @return { view, controller } where controller is the API exported by graph2doms
568568
*/
569-
exports.wskflow = (visualize, viewName, { fsm, input, name, packageName }) => {
570-
const view = document.createElement('div')
571-
const h = document.getElementById("sidecar").getBoundingClientRect().height
572-
view.style.flex = 1
573-
view.style.display = 'flex'
574-
575-
// wskflow uses jquery, and assumes that the view is attached to the document;
576-
// we have to fake it out, by attaching to document.body, then removing
577-
document.body.appendChild(view)
578-
const controller = visualize(fsm, view, undefined, h)
579-
document.body.removeChild(view)
569+
exports.wskflow = (visualize, viewName, { fsm, input, name, packageName, reuseContainer}) => {
570+
// wskflow's visualize function now returns the view as DOM and the controllers for mode buttons
571+
// container is only used in the app preview filewatch mode, where sidecar graph is updated by updating an existing wskflow container
572+
// in other cases, container is undefined and wskflow generates a container itself
573+
574+
const { view, controller } = visualize(fsm, reuseContainer);
580575

581576
const onclick = undefined
582577
ui.addNameToSidecarHeader(undefined, name, packageName, onclick, viewName,
583578
'This is a preview of your app, it is not yet deployed')
584-
579+
585580
return { view, controller }
586581
}
587582

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ const viewName = 'preview', // for back button and sidecar header
3939
*/
4040
module.exports = (commandTree, prequire) => {
4141
const render = (input, options) => new Promise((resolve, reject) => {
42-
debug('options', options)
43-
42+
debug('options', options)
4443
let fsmPromise, type, extraModes=[]
4544

4645
if (input.endsWith('.fsm') || input.endsWith('.json')) {
@@ -65,8 +64,9 @@ module.exports = (commandTree, prequire) => {
6564

6665
// create a fake action/entity record
6766
const formatForUser = defaultMode => ({fsm,code}) => {
68-
const {visualize} = prequire('wskflow')
69-
const { view, controller } = wskflow(visualize, viewName, { fsm, input, name })
67+
68+
const {visualize} = prequire('wskflow')
69+
const { view, controller } = wskflow(visualize, viewName, { fsm, input, name, pk: undefined, reuseContainer: options.alreadyWatching})
7070
extraModes = extraModes.concat(zoomToFitButtons(controller))
7171

7272
const entity = {
@@ -98,7 +98,7 @@ module.exports = (commandTree, prequire) => {
9898
entity.show = 'fsm'
9999
entity.type = 'actions'
100100
}
101-
101+
102102
resolve(entity)
103103
}
104104
fsmPromise.then(formatForUser(defaultMode))
@@ -114,6 +114,7 @@ module.exports = (commandTree, prequire) => {
114114
// createFromSource returns error as either an object that's {fsm:errMsg, code:originalCode}, or just the errMsg string
115115
// here we check the error format and send the correct input to formatForUser/handleError
116116
// in sidecar, error message shows in the fsm (JSON) tab. code tab shows the user's js code (if existed).
117+
117118
if(err.fsm)
118119
formatForUser('fsm')(err);
119120
else
@@ -157,6 +158,9 @@ module.exports = (commandTree, prequire) => {
157158
debug('environment', environment)
158159
}
159160

161+
if(execOptions.alreadyWatching)
162+
options.alreadyWatching = execOptions.alreadyWatching;
163+
160164
// render now
161165
render(input, options).then(resolve, reject)
162166

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -635,8 +635,7 @@ const addWskflow = prequire => opts => {
635635

636636
const { getAction, editor, content, eventBus } = opts,
637637
wskflowContainer = document.createElement('div'),
638-
editorDom = content.querySelector('.monaco-editor-wrapper'),
639-
h = document.getElementById("sidecar").getBoundingClientRect().height
638+
editorDom = content.querySelector('.monaco-editor-wrapper')
640639

641640
content.appendChild(wskflowContainer)
642641
wskflowContainer.className = 'wskflow-container'
@@ -669,7 +668,8 @@ const addWskflow = prequire => opts => {
669668
// don't bother redrawing on revert
670669
ui.removeAllDomChildren(wskflowContainer)
671670

672-
visualize(fsm, wskflowContainer, undefined, h, undefined, { xdirection: 'RIGHT' })
671+
let {view, controller} = visualize(fsm)
672+
wskflowContainer.appendChild(view);
673673
}
674674

675675
}

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,6 @@ module.exports = (commandTree, prequire) => {
9090
return repl.qexec(`session get ${sessionId}`)
9191
.then(session => Promise.all([session, fetchTrace(session), fetchTheAction(session)]))
9292
.then(([session, activations, action]) => {
93-
const content = document.createElement('div')
94-
content.style.display = 'none'
95-
document.body.appendChild(content)
9693

9794
let fsm;
9895
if (action.wskflowErr) {
@@ -106,11 +103,8 @@ module.exports = (commandTree, prequire) => {
106103
fsm = action.annotations.find(({key}) => key === 'fsm').value
107104
}
108105

109-
const controller = visualize(fsm, content, undefined, 1, activations)
106+
const {view, controller} = visualize(fsm, undefined, undefined, undefined, activations)
110107

111-
content.style.display = ''
112-
content.style.flex = 1
113-
document.body.removeChild(content)
114108

115109
// set the default mode to session flow
116110
session.modes.find(({defaultMode}) => defaultMode).defaultMode = false
@@ -124,7 +118,7 @@ module.exports = (commandTree, prequire) => {
124118
return Object.assign(session, {
125119
viewName: session.type,
126120
type: 'custom',
127-
content,
121+
content: view,
128122
isEntity: true
129123
})
130124
})

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -459,8 +459,8 @@ function ir2graph(ir, gm, id, prevId){ // ir and graph model
459459
}
460460

461461

462-
function fsm2graph(ir, containerId, acts){
463-
//console.log(ir, containerId, act);
462+
function fsm2graph(ir, containerElement, acts){
463+
//console.log(ir, containerElement, acts);
464464
taskIndex = 0;
465465
activations = acts;
466466
visited = undefined; // see shell issue #602
@@ -551,7 +551,7 @@ function fsm2graph(ir, containerId, acts){
551551

552552
console.log('[wskflow] inserting DOM, calling graph2doms');
553553

554-
return graph2doms(graphData, containerId, activations);
554+
return graph2doms(graphData, containerElement, activations);
555555

556556
}
557557

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

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -77,16 +77,31 @@ const wfColorAct = {
7777
inactiveBorder: "grey"
7878
}
7979

80+
const containerId = 'wskflowDiv';
81+
8082
// need to fix center
81-
function graph2doms(JSONgraph, containerId, activations){
83+
function graph2doms(JSONgraph, ifReuseContainer, activations){
8284

8385
let zoom = d3.behavior.zoom()
8486
.on("zoom", redraw);
8587

86-
$("#wskflowContainer").remove();
87-
$(containerId).append("<div id='wskflowContainer'></div>");
88+
let containerElement,
89+
wskflowContainer = $('<div id="wskflowContainer"></div>');
90+
91+
if(ifReuseContainer && $(`#${containerId}`).length>0){
92+
containerElement = $(`#${containerId}`);
93+
$(containerElement).html('').css('display', 'flex').css('flex', 1);
94+
$("#wskflowSVG").remove();
95+
$("#qtip").remove();
96+
}
97+
else{
98+
containerElement = $(`<div id="${containerId}" style="display: flex; flex: 1; width: 100%; height: 100%;"></div>`);
99+
}
100+
101+
$(containerElement).append(wskflowContainer);
102+
88103

89-
$("#wskflowContainer").css({
104+
$(wskflowContainer).css({
90105
"display": "none",
91106
"flex-direction": "column",
92107
"align-items": "center",
@@ -99,10 +114,10 @@ function graph2doms(JSONgraph, containerId, activations){
99114
"width": '100%',
100115
"height": '100%'
101116
});
102-
$("#wskflowContainer").addClass('grabbable') // we want to use grab/grabbing cursor
117+
$(wskflowContainer).addClass('grabbable') // we want to use grab/grabbing cursor
103118

104119

105-
let ssvg = d3.select("#wskflowContainer")
120+
let ssvg = d3.select($(wskflowContainer)[0])
106121
.append("svg")
107122
.attr("id", "wskflowSVG")
108123
.style('width', '100%') // svg width and height changes with the size of the container
@@ -216,24 +231,24 @@ function graph2doms(JSONgraph, containerId, activations){
216231
.append("svg:path")
217232
.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");
218233

219-
$("#wskflowContainer").append("<div id='qtip'><span id='qtipArrow'>&#9668</span><div id='qtipContent'></div></div>");
234+
$(wskflowContainer).append("<div id='qtip'><span id='qtipArrow'>&#9668</span><div id='qtipContent'></div></div>");
220235

221236

222237
if(activations){
223-
$("#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>");
238+
$(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>");
224239
}
225-
$("#qtip").css({
240+
$(wskflowContainer).find("#qtip").css({
226241
"position": "absolute",
227242
"align-items": "center",
228243
"pointer-events": "none",
229244
});
230-
$("#qtipArrow").css({
245+
$(wskflowContainer).find("#qtipArrow").css({
231246
"position": "relative",
232247
"left": "3px",
233248
"top": "1px",
234249
"color": "#2E4053"
235250
});
236-
$("#qtipContent").css({
251+
$(wskflowContainer).find("#qtipContent").css({
237252
"background-color": wfColor.qtipBackground.normal,
238253
"color": "white",
239254
"font-size": "0.75em",
@@ -348,7 +363,7 @@ function graph2doms(JSONgraph, containerId, activations){
348363

349364
function drawGraph(nodes, links){
350365
console.log("[wskflow] in drawGraph in graph2doms")
351-
366+
352367
// #1 add the nodes' groups
353368
var nodeData = root.selectAll(".node")
354369
.data(nodes, function(d) { return d.id; });
@@ -1127,7 +1142,7 @@ function graph2doms(JSONgraph, containerId, activations){
11271142

11281143
function graphDoneCallback(){
11291144
// show graph
1130-
$("#wskflowContainer").css("display", "flex");
1145+
$(wskflowContainer).css("display", "flex");
11311146
}
11321147

11331148
// 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){
12301245

12311246
// exported API
12321247
return {
1233-
register: callback => handlers.push(callback),
1234-
zoomToFit: () => zoomToFit(true),
1235-
zoom1to1: () => zoomToFit(false)
1248+
view: $(containerElement)[0],
1249+
controller:{
1250+
register: callback => handlers.push(callback),
1251+
zoomToFit: () => zoomToFit(true),
1252+
zoom1to1: () => zoomToFit(false)
1253+
}
12361254
}
12371255
}
12381256

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
composer.if(p=>p.condition, composer.sequence(p=>({path:true})), composer.sequence(p=>({path:false})));

‎tests/lib/composer-viz-util.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,16 @@ const verifyNodeExists = (name, isDeployed=false) => app => {
4343
.then(nodes => nodes.value.length === 1))
4444
.then(() => app)
4545
}
46+
47+
// for session - verify node execution status
48+
const verifyNodeStatusExists = (name, status) => app => {
49+
const selector = `#wskflowSVG .node[data-name="/_/${name}"][data-status="${status}"]`
50+
console.error(`CHECKING NODE ${name} ${selector}`)
51+
return app.client.waitUntil(() => app.client.elements(selector)
52+
.then(nodes => nodes.value.length === 1))
53+
.then(() => app)
54+
}
55+
4656
const verifyNodeExistsById = id => app => {
4757
return app.client.waitUntil(() => app.client.elements(`#wskflowSVG #${id}`)
4858
.then(nodes => nodes.value.length === 1))
@@ -96,6 +106,7 @@ module.exports = {
96106
composerInput,
97107
composerErrorInput,
98108
verifyNodeExists,
109+
verifyNodeStatusExists,
99110
verifyNodeExistsById,
100111
verifyEdgeExists,
101112
verifyOutgoingEdgeExists,

‎tests/tests/passes/07/composer-vis-size.js

Lines changed: 0 additions & 62 deletions
This file was deleted.

0 commit comments

Comments
 (0)