session flow not-visited node text color invisible

plus highlight the traversed path

Fixes #902

Author: starpit

app/content/css/ui.css

@@ -1510,13 +1510,12 @@ break {
 }
 #wskflowSVG[data-is-session-flow="true"] .edge-label:not(.edge-was-traversed) {
     fill: var(--color-text-02) !important;
-    opacity: 0.6
+    opacity: 0.8
 }
 #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;
+    opacity: 0.8;
 }
 #wskflowSVG .node rect.atom {
     /* wskflow node effect */
@@ -1564,15 +1563,29 @@ break {
 #wskflowSVG .node rect, #wskflowSVG .node rect {
     fill: var(--color-ui-05);
 }
+#wskflowSVG path[data-visited="true"] {
+    /* visited edges */
+    stroke: #2166ac !important;
+    stroke-width: 2;
+    marker-end: url(#edgeTraversedEnd);
+}
+#wskflowSVG path[data-visited="false"] {
+    /* not-visited edges */
+    stroke-dasharray: 1;
+    opacity: 0.8;
+}
 #wskflowSVG .node.leaf[data-status="success"] rect, #wskflowSVG .node.leaf.function[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 {
+    /* 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) {
+    /* visited node text for session flow */
     fill: var(--color-ui-01) !important;
 }
 #wskflowSVG .node.leaf.function[data-status="success"] text,

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

@@ -162,6 +162,7 @@ function graph2doms(JSONgraph, ifReuseContainer, activations){
 
         arrowHead("end", "var(--color-text-02)")
         arrowHead("forwardingEnd", wfColor.Edges.forwarding)
+        arrowHead("edgeTraversedEnd", "#2166ac")
         arrowHead("greenEnd", wfColorAct.active)
         arrowHead("trueEnd", wfColor.reOrCon.trueBranch)
         arrowHead("falseEnd", wfColor.reOrCon.falseBranch)
@@ -955,9 +956,21 @@ function graph2doms(JSONgraph, ifReuseContainer, activations){
 	                if(d.source.indexOf("__origin") >= 0 && d.target.indexOf("__terminus") >= 0){
 				s += " forwardingLink";
 			}
-			//else if(d.)
+
 			return s;
 		})
+                .attr("data-visited", d => {
+                    // edge was visited?
+		    const sourceStatus = $('#' + d.source).attr('data-status'),
+                          sourceWasVisited = sourceStatus && sourceStatus !== 'not-run',
+                          targetStatus = $('#' + d.target).attr('data-status'),
+                          targetWasVisited = targetStatus && targetStatus !== 'not-run'
+                    if (sourceWasVisited && targetWasVisited) {
+                        return true
+                    } else if (activations) {
+                        return false
+                    }
+                })
 		.attr("source", function(d){return d.sourcePort})
 		.style("stroke", function(d){			
 			if(activations){