some attempts to clean up wskflow

Fixes #443
Fixes #112

Author: starpit

app/content/css/themes/ibm.css

@@ -26,6 +26,7 @@ body {
     --color-brand-01: #3d70b2;
     --color-brand-01-10: hsla(214, 49%, 47%, 0.1); /* 10% opacity */
     --color-brand-02: #5596e6;
+    --color-brand-03: #00b4a0;
     --color-ui-01: #fff;
     --color-ui-02: #f5f7fa;
     --color-ui-03: #f0f3f6;
@@ -255,23 +256,6 @@ body.subwindow sidecar {
     font-family: var(--font-sans-serif);
 }
 
-#wskflowSVG .node.leaf rect {
-    stroke: var(--color-text-01) !important;
-}
-#wskflowSVG .node.leaf rect {
-    stroke: var(--color-text-01) !important;
-}
-#wskflowSVG .action[data-deployed="deployed"] rect, #wskflowSVG .function:not([data-status]) rect {
-    fill: hsla(210, 94%, 67%, 1) !important;
-}
-#wskflowSVG .action[data-deployed="deployed"] rect:hover, #wskflowSVG .function:not([data-status]) rect:hover {
-    fill: hsla(210, 94%, 57%, 1) !important;
-}
-#wskflowSVG .action[data-deployed="not-deployed"] rect {
-    fill: var(--color-ui-04) !important;
-}
-
-
 /* sans 300 */
 @font-face {
     font-family: ibm-plex-sans;

app/content/css/ui.css

@@ -1458,33 +1458,211 @@ body.oops-total-catastrophe #restart-needed-warning {
     display: flex;
     align-items: center;
     opacity: 0;
+    z-index: 10;
+    position: absolute;
+    pointer-events: none;
+}
+#qtipArrow {
+    position: relative;
+    left: 3px;
+    top: 1px;
+    color: #2E4053
+}
+#qtipContent {
+    background-color: #2E4053;
+    color: white; 
+    font-size: 0.75em;
+    padding: 1ex;
+    /*display: flex;
+    flex-wrap: wrap;*/
+    margin: 0px;
+    margin-right: 1ex; /* don't get all squished up against the right-end edge of the window */
+    max-width: 40ex;
+    word-wrap: break-word;
 }
 #qtip.visible {
-    opacity: 1;
+    opacity: 0.975;
+}
+#qtip.qtip-pre #qtipContent {
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+    display: initial !important; /* override display: flex */
 }
 break {
     flex-basis: 100%;
 }
+#wskflowSVG .edge-label {
+    font-size: 5px;
+    font-weight: 300;
+}
+#wskflowSVG .node.clickable[data-deployed="not-deployed"]:hover,
+#wskflowSVG .node.clickable:hover .edge-label,
+#wskflowSVG .node.clickable[data-deployed="not-deployed"]:hover rect {
+    /* no hover effects for not-deployed actions */
+    text-decoration: none;
+    cursor: inherit !important;
+}
+#wskflowSVG[data-is-session-flow="true"] .node.leaf[data-status="not-run"] rect {
+    /* not-run nodes in a session flow */
+    mask: url(#mask-stripe);
+}
+#wskflowSVG[data-is-session-flow="true"] .edge-label:not(.edge-was-traversed) {
+    fill: var(--color-text-02) !important;
+    opacity: 0.6
+}
+#wskflowSVG[data-is-session-flow="true"] .node.leaf[data-status="not-run"] rect,
+#wskflowSVG[data-is-session-flow="true"] .node.leaf[data-status="not-run"] text {
+    /* deemphasize not-visited nodes in session flow */
+    fill: var(--color-ui-04) !important;
+    opacity: 0.6;
+}
 #wskflowSVG .node rect.atom {
     /* wskflow node effect */
     transition: all 150ms ease-in-out;
+    vector-effect: non-scaling-stroke;
 }
 #wskflowSVG path {
     /* path effects */
     transition: all 150ms ease-in-out;
+    vector-effect: non-scaling-stroke;
+    stroke-width: 1.5;
+    stroke: var(--color-text-02) !important;
 }
-#wskflowSVG path.hover {
+#wskflowSVG #retryIconNormal path {
+    /* the retry loop doesn't need a stroke */
+    stroke: none !important;
+}
+#wskflowSVG path.forwardingLink {
+    stroke: rgb(52, 152, 219) !important;
     stroke-width: 2;
+    pointer-events: all;
+}
+#wskflowSVG path.hover, #wskflowSVG path:hover {
+    stroke-width: 3.5;
 }
 #wskflowSVG path.true-branch.hover {
+    stroke: orange !important;
     marker-end: url(#trueEnd);
 }
 #wskflowSVG path.false-branch.hover {
+    stroke: #DC7633 !important;
     marker-end: url(#falseEnd);
 }
 #wskflowSVG path.forwarding-edge.hover {
     marker-end: url(#forwardingEnd);
 }
+#wskflowSVG .node.leaf.Entry rect, #wskflowSVG .node.leaf.Exit rect {
+    fill: var(--color-text-01);
+}
+#wskflowSVG .node.leaf.Entry text, #wskflowSVG .node.leaf.Exit text {
+    fill: var(--color-ui-02) !important;
+    font-weight: 300;
+    font-variant: small-caps;
+}
+#wskflowSVG .node rect, #wskflowSVG .node rect {
+    fill: var(--color-ui-05);
+}
+#wskflowSVG .node.leaf[data-status="success"] rect, #wskflowSVG .node.leaf.function[data-status="success"] rect {
+    fill: #2166ac !important;
+    stroke: var(--color-text-01) !important;
+}
+#wskflowSVG .node.leaf[data-status="failed"] rect, #wskflowSVG .node.leaf.function[data-status="failed"] rect {
+    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) {
+    fill: var(--color-ui-01) !important;
+}
+#wskflowSVG .node.leaf.function[data-status="success"] text,
+#wskflowSVG .node.leaf.function[data-status="failed"] text {
+    -webkit-font-smoothing: antialiased;
+}
+#wskflowSVG .node.leaf rect {
+    stroke: var(--color-text-01) !important;
+    stroke-width: 2;
+}
+#wskflowSVG .node.leaf rect {
+    stroke: var(--color-text-01) !important;
+}
+#wskflowSVG .action[data-deployed="deployed"] rect {
+    fill: var(--color-ui-02) !important;
+}
+#wskflowSVG .action[data-deployed="deployed"] text:not(.edge-label) {
+    fill: var(--color-text-01) !important;
+}
+#wskflowSVG .action[data-deployed="deployed"] rect:hover {
+    fill: var(--color-support-04) !important;
+}
+#wskflowSVG .action[data-deployed="not-deployed"] rect {
+    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;
+}
+#qtip .qtip-prefix.red-text {
+    filter: brightness(1.5);          /* make it more legible against the qtip background */
+    padding-right: 5px;
+}
+#qtip .qtip-prefix.action {
+    color: var(--color-support-04); /* match hover color of action nodes */
+}
+#qtip .qtip-prefix.function {
+    color: var(--color-support-03);
+}
+#qtip .qtip-prefix.let, #qtip .qtip-prefix.literal {
+    color: var(--color-brand-02);
+    filter: brightness(2); /* too dim against the qtip background */
+}
+#wskflowSVG .node.leaf.let rect, #wskflowSVG .node.leaf.literal rect {
+    /*fill: var(--color-brand-03);
+    stroke: var(--color-text-01) !important;*/
+    fill: transparent;
+    stroke: transparent !important;
+}
+#wskflowSVG .node.leaf.let text, #wskflowSVG .node.leaf.literal text {
+    /*fill: var(--color-ui-01) !important;*/
+    fill: var(--color-brand-03) !important;
+    font-size: 12px;
+    font-weight: bold;
+    letter-spacing: 2px;
+}
+#wskflowSVG .node.leaf.function text:not(.edge-label) {
+    /* function nodes; use code font */
+    fill: var(--color-text-01) !important;
+    font-family: var(--font-monospace);
+    font-size: 0.275em;
+}
+#wskflowSVG .node.compound:not(.root) rect {
+    stroke-dasharray: 1;
+    stroke: var(--color-brand-01) !important;
+    fill: var(--color-ui-02) !important;
+}
+#wskflowSVG .node.try rect, #wskflowSVG .node.handler rect {
+}
+#wskflowSVG .node.compound text {
+    /* e.g. Try and Catch labels */
+    font-weight: bold;
+}
+#wskflowSVG .node.compound.try_catch.no-parents rect {
+    stroke: none !important;
+}
+#wskflowSVG .node.compound.try_catch rect {
+    stroke: var(--color-ui-05) !important;
+    fill: transparent !important;
+}
+#wskflowSVG .node.compound.try_catch text {
+    display: none;
+}
 
 /* help widget */
 .help-widget {

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

@@ -566,9 +566,9 @@ exports.handleError = (err, reject) => {
  *
  * @return { view, controller } where controller is the API exported by graph2doms
  */
-exports.wskflow = (visualize, viewName, { fsm, input, name, packageName}) => {
+exports.wskflow = (visualize, viewName, { fsm, input, name, packageName, viewOptions }) => {
 
-    const { view, controller } = visualize(fsm);
+    const { view, controller } = visualize(fsm, undefined, undefined, undefined, undefined, viewOptions);
 
     const onclick = undefined
     ui.addNameToSidecarHeader(undefined, name, packageName, onclick, viewName,
@@ -617,13 +617,39 @@ exports.zoomToFitButtons = controller => {
     }
 }
 
+/**
+ * Turn an options struct into a cli string
+ *
+ * @param options is the command line options struct given by the
+ * user.
+ *
+ */
+const optionsToString = options => {
+    let str = ''
+    for (let key in options) {
+        // underscore comes from minimist
+        if (key !== '_' && options[key] !== undefined && key !== 'name' && key !== 'theme') {
+            const dash = key.length === 1 ? '-' : '--',
+                  prefix = options[key] === false ? 'no-' : '', // e.g. --no-help
+                  value = options[key] === true || options[key] === false ? '' : ` ${options[key]}`
+
+            if (! (dash === '-' && options[key] === false)) {
+                // avoid -no-q, i.e. single dash
+                str = `${str} ${dash}${prefix}${key}${value}`
+            }
+        }
+    }
+
+    return str
+}
+
 /**
  * Entity view modes
  *
  */
-exports.vizAndfsmViewModes = (visualize, commandPrefix, defaultMode='visualization') => [
+exports.vizAndfsmViewModes = (visualize, commandPrefix, defaultMode='visualization', options) => [
     { mode: 'visualization', defaultMode: defaultMode==='visualization', direct: entity => {
-        return repl.qexec(`${commandPrefix} "${entity.input}"`)
+        return repl.qexec(`${commandPrefix} "${entity.input}" ${optionsToString(options)}`)
     } },
     { mode: 'fsm', label: 'JSON', defaultMode: defaultMode==='fsm', direct: entity => {
         entity.type = 'actions'
@@ -661,7 +687,7 @@ exports.hasUnknownOptions = (options, expected) => {
  * like an app
  *
  */
-exports.decorateAsApp = ({action, viewName='app', commandPrefix='app get', doVisualize}) => {
+exports.decorateAsApp = ({action, viewName='app', commandPrefix='app get', doVisualize, options}) => {
     action.prettyType = appBadge
     action.fsm = action.annotations.find(({key}) => key === 'fsm').value
 
@@ -670,11 +696,18 @@ exports.decorateAsApp = ({action, viewName='app', commandPrefix='app get', doVis
     }
 
     if (doVisualize) {
+        // pass through cli options for the wskflow renderer
+        const viewOptions = { }
+        if (options.functions) {
+            // note we must be careful not to pass false; only undefined
+            viewOptions.renderFunctionsInView = options.functions // render all inline functions directly in the view?
+        }
+
         const visualize = require(path.join(__dirname, '../../wskflow/lib/visualize'))
-        const { view, controller } = exports.wskflow(visualize, viewName, action)
+        const { view, controller } = exports.wskflow(visualize, viewName, Object.assign({}, action, { viewOptions }))
 
         action.modes = (action.modes||[]).filter(_ => _.mode !== 'code')
-            .concat(exports.vizAndfsmViewModes(visualize, commandPrefix))
+            .concat(exports.vizAndfsmViewModes(visualize, commandPrefix, undefined, options))
             .concat(exports.zoomToFitButtons(controller))
 
         return view

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

@@ -37,7 +37,7 @@ module.exports = (commandTree, prequire) => {
               appName = args[idx + 1]
 
         return repl.qexec(`wsk action get "${appName}"`, undefined, undefined,
-                          Object.assign({}, execOptions, { override: true }))
+                          Object.assign({}, execOptions, { override: true, originalOptions: options }))
     }
 
     const cmd = commandTree.listen(`/wsk/app/get`, doGet('get'), { usage: usage('get'),
@@ -63,7 +63,8 @@ module.exports = (commandTree, prequire) => {
 
                     if (action && action.annotations && action.annotations.find(({key}) => key === 'fsm')) {
                         const doVisualize = execOptions.override || !execOptions.nested,
-                              content = decorateAsApp({ action, doVisualize }),
+                              options = execOptions.originalOptions || {},
+                              content = decorateAsApp({ action, doVisualize, options }),
                               input = `/${response.namespace}/${response.name}`
 
                         if (doVisualize) {

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

@@ -102,7 +102,9 @@ exports.app_get = command => ({
     header: 'Displays the details of a given composition',
     example: `app ${command} <appName>`,
     required: [{ name: 'appName', docs: 'the name of your composition', entity: 'action' }],
-    optional: [{ name: '--cli', boolean: true, docs: 'display the results textually (headless mode only)' }],
+    optional: [{ name: '--cli', boolean: true, docs: 'display the results textually (headless mode only)' },
+               { name: '--functions', alias: '-f', boolean: true, docs: 'show all functions directly in the view' }
+              ],
     parents: ['composer', { command: 'composer app' }],
     related: ['app create', 'app invoke', 'app list']
 })
@@ -161,6 +163,7 @@ exports.preview = command => ({
     oneof: [{ name: 'src.js', docs: 'generate a preview of a Composer source file', file: true },
             { name: 'src.json', docs: 'ibid, but for a pre-compiled composition', file: true }],
     optional: [{ name: '--fsm', boolean: true, docs: 'validate and show raw FSM' },
+               { name: '--functions', alias: '-f', boolean: true, docs: 'show all functions directly in the view' },
                { name: '--env', alias: '-e', docs: 'Assign a value to an environment variable', narg: 2 }],
     sampleInputs: sampleInputs(command),
     parents: ['composer', { command: 'composer app' }],

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

@@ -64,9 +64,16 @@ 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 })
+
+             // pass through cli options for the wskflow renderer
+             const viewOptions = { }
+             if (options.functions) {
+                 // note we must be careful not to pass false; only undefined
+                 viewOptions.renderFunctionsInView = options.functions // render all inline functions directly in the view?
+             }
+
+             const {visualize} = prequire('wskflow')
+             const { view, controller } = wskflow(visualize, viewName, { fsm, input, name, viewOptions })
              extraModes = extraModes.concat(zoomToFitButtons(controller))
 
              const entity = {
@@ -81,7 +88,7 @@ module.exports = (commandTree, prequire) => {
                  exec: {
                      kind: 'source'
                  },
-                 modes: vizAndfsmViewModes(visualize, viewName, defaultMode).concat(extraModes),
+                 modes: vizAndfsmViewModes(visualize, viewName, defaultMode, options).concat(extraModes),
                  annotations: [
                      { key: 'wskng.combinators',
                        value: [{ role: 'replacement', type: 'composition', badge: type } ]