Updating slideshow graph with some colors & better styling (#3)

mike-kaufman · Jan 25, 2018 · 3cdbeb0 · 3cdbeb0
1 parent c60ed0a
commit 3cdbeb0
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 166 deletions.
diff --git a/examples/lib/slideShow/asyncContext.css b/examples/lib/slideShow/asyncContext.css
@@ -0,0 +1,37 @@
+#av {
+    width: 98%;
+    position: relative;
+  }
+  .jsavcounter {
+    position: absolute;
+    top: 15px;
+  }
+  .jsavcanvas { height: 300px;}
+  .jsavlabel {
+    font-size: 2em;
+    text-align: center;
+  }
+
+.activeExecutionNode {
+    background-color:#009933;
+    border-color: black;
+    color: white;
+  }
+.completedExecutionNode {
+    background-color: black;
+    border-color: black;
+    color: white;
+  }
+
+.causeNode {
+    border-style: dashed;
+    background-color: 	#FFD700;
+}
+
+.linkNode {
+    background-color:	#F0FFFF;
+}
+
+.outputNode {
+  background-color: #00FFFF;
+}
diff --git a/examples/lib/slideShow/createGraph.js b/examples/lib/slideShow/createGraph.js
@@ -1,157 +1,142 @@
-var jsav = new JSAV("av");
+(function () {
+    var jsav = new JSAV("av");
 
-function getExecuteNodeID(id) {
-    return `Execute ${id}`;
-}
+    function getExecuteNodeID(id) {
+        return `Execute ${id}`;
+    }
 
-function getCauseNodeID(id) {
-    return `Cause ${id}`;
-}
+    function getCauseNodeID(id) {
+        return `Cause ${id}`;
+    }
 
-function getLinkNodeID(id) {
-    return `Link ${id}`;
-}
+    function getLinkNodeID(id) {
+        return `Link ${id}`;
+    }
 
-function getOutputNodeID(id) {
-    return `Output ${id}`;
-}
+    function getOutputNodeID(id) {
+        return `Output ${id}:`;
+    }
 
-var nodes = {};
+    var nodes = {};
 
-function addNode(g, value, extra) {
-    let displayString = value;
-    if (extra) {
-        displayString = `${value} (${extra})`;
+    function addNode(g, value, extra) {
+        let displayString = value;
+        if (extra) {
+            displayString = `${value} (${extra})`;
+        }
+        const n = g.addNode(displayString);
+        nodes[value] = n;
+        return n;
     }
-    const n = g.addNode(displayString);
-    nodes[value] = n;
- }
 
-function getNode(value) {
-    return nodes[value];
-}
+    function getNode(value) {
+        return nodes[value];
+    }
 
-function addEdge(g, v1, v2) {
-    const n1 = getNode(v1);
-    const n2 = getNode(v2);
-    g.addEdge(n1, n2);
-}
+    // see valid opts for Edge:
+    //  -  http://jsav.io/graphicalprimitives/lines/
+    //  -  https://dmitrybaranovskiy.github.io/raphael/reference.html
+    function addEdge(g, v1, v2, opts) {
+        const n1 = getNode(v1);
+        const n2 = getNode(v2);
+        opts = opts || {};
+        opts['arrow-end'] = 'classic-wide-long'; /*classic, block, open, oval, diamond, none,*/;
+        return g.addEdge(n1, n2, opts);
+    }
 
-const jsavCode = jsav.code(codeLines);
+    const jsavCode = jsav.code(codeLines);
 
-function processNodes(records, g) {
+    function processNodes(records, g) {
 
-    let currentExecutionID = -1;
-    let currentHighlightLine = undefined;
-    for (let i = 0; i < records.length; i++) {
-        const r = records[i];
+        let currentExecutionID = -1;
+        let currentHighlightLine = undefined;
+        for (let i = 0; i < records.length; i++) {
+            const r = records[i];
 
-         // handle code highlighting
-         if (r.data && r.data.highlightLine !== undefined) {
-            if (currentHighlightLine > 0) {
-                jsavCode.unhighlight(currentHighlightLine);
-            }
-            jsavCode.highlight(r.data.highlightLine);
-            currentHighlightLine = r.data.highlightLine;
-         }
-
-        switch (r.event) {
-            case 'executeBegin':
-                currentExecutionID = r.executeID;
-                addNode(g, getExecuteNodeID(r.executeID));
-                if (r.executeID != 0) {
-                    addEdge(g, getCauseNodeID(r.causeID), getExecuteNodeID(r.executeID));
-                }
-                break;
-            case 'executeEnd':
-                currentExecutionID = -1;
-                // change state on 'execute' node to "completed"
-                // event:
-                //  { type: 'executeEnd'
-                //      executeID:  
-                //   }
-                break;
-            case 'link':
-{
-                // add link node
-                let extraData;
-                if (r.data && r.data.type) {
-                    extraData = r.data.type;
+            // handle code highlighting
+            if (r.data && r.data.highlightLine !== undefined) {
+                if (currentHighlightLine > 0) {
+                    jsavCode.unhighlight(currentHighlightLine);
                 }
-                addNode(g, getLinkNodeID(r.linkID), extraData);
-                // add edge from current execution node to new link node
-                addEdge(g, getExecuteNodeID(r.executeID), getLinkNodeID(r.linkID));
-
+                jsavCode.highlight(r.data.highlightLine);
+                currentHighlightLine = r.data.highlightLine;
             }
-                break;
-            case 'cause':
-                // create "cause" node
-                addNode(g, getCauseNodeID(r.causeID));
-                // create "edge to current execution edge"
-                addEdge(g, getExecuteNodeID(r.executeID), getCauseNodeID(r.causeID))
-                // create "linked-by" edge
-                addEdge(g, getLinkNodeID(r.linkID), getCauseNodeID(r.causeID));
-                break;
-            case 'output':
-            {
-                let extraData;
-                if (r.data && r.data.output) {
-                    extraData = r.data.output;
-                }
-                addNode(g, getOutputNodeID(currentExecutionID), extraData);
-                // add edge from current execution node to new link node
-                addEdge(g, getExecuteNodeID(currentExecutionID), getOutputNodeID(currentExecutionID));
+
+            switch (r.event) {
+                case 'executeBegin':
+                    currentExecutionID = r.executeID;
+                    addNode(g, getExecuteNodeID(r.executeID)).addClass('activeExecutionNode');
+                    if (r.executeID != 0) {
+                        addEdge(g, getCauseNodeID(r.causeID), getExecuteNodeID(r.executeID));
+                    }
+                    break;
+                case 'executeEnd':
+                    if (currentHighlightLine > 0) {
+                        jsavCode.unhighlight(currentHighlightLine);
+                        currentHighlightLine = -1;
+                    }
+                    currentExecutionID = -1;
+                    getNode(getExecuteNodeID(r.executeID)).removeClass('activeExecutionNode').addClass('completedExecutionNode');
+                    break;
+                case 'link':
+                    {
+                        // add link node
+                        let extraData;
+                        if (r.data && r.data.type) {
+                            extraData = r.data.type;
+                        }
+                        addNode(g, getLinkNodeID(r.linkID), extraData).addClass('linkNode');
+                        // add edge from current execution node to new link node
+                        addEdge(g, getExecuteNodeID(r.executeID), getLinkNodeID(r.linkID));
+
+                    }
+                    break;
+                case 'cause':
+                    // create "cause" node
+                    addNode(g, getCauseNodeID(r.causeID)).addClass('causeNode');
+                    // create "edge to current execution edge"
+                    addEdge(g, getExecuteNodeID(r.executeID), getCauseNodeID(r.causeID), { 'stroke-dasharray': ['- .'], 'arrow-end': 'block'/*, classic, block, open, oval, diamond, none,*/ });
+                    // create "linked-by" edge
+                    addEdge(g, getLinkNodeID(r.linkID), getCauseNodeID(r.causeID));
+                    break;
+                case 'output':
+                    {
+                        let extraData;
+                        if (r.data && r.data.output) {
+                            extraData = r.data.output;
+                        }
+                        addNode(g, getOutputNodeID(currentExecutionID), extraData).addClass('outputNode');
+                        // add edge from current execution node to new link node
+                        addEdge(g, getExecuteNodeID(currentExecutionID), getOutputNodeID(currentExecutionID));
+                    }
+                    break;
+                default:
+                    console.error(`unexpected event value: ${r.event}`);
             }
-                break;
-            default:
-                console.error(`unexpected event value: ${r.event}`);
+            g.layout();
+            jsav.step();
         }
-        g.layout();
-        jsav.step();
     }
-}
-
-function initGraph(opts) {
-    var g = jsav.ds.graph($.extend({
-        width: 500,
-        height: 350
-    }, opts));
-    return g;
-};
-
-function populateGraph(g) {
-    processNodes(records, g);
-}
-
-var l2 = jsav.label("Async Context Visualization");
-var g2 = initGraph({
-    layout: "layered"
-});
-
-jsav.displayInit();
-populateGraph(g2);
-
-//
-// see below for adding css styling to edges/nodes
-//
-// var preVisit = function (node, prev) {
-//     node.addClass("processing");
-//     jsav.umsg("Add node " + node.value() + " to the DFS search tree");
-//     if (prev) {
-//         node.edgeFrom(prev).css("stroke", "red"); // highlight
-//         node.edgeTo(prev).css("stroke", "red"); // highlight
-//     }
-//     jsav.step();
-// };
-// var visit = function (node) {
-//     node.addClass("visited");
-//     jsav.umsg("Call DFS for node " + node.value());
-//     jsav.step();
-// };
-// var postVisit = function (node) {
-//     node.addClass("finished");
-//     jsav.umsg("Done with node " + node.value());
-//     jsav.step();
-// };
-
-jsav.recorded();
+
+    function initGraph(opts) {
+        var g = jsav.ds.graph($.extend({
+            width: 500,
+            height: 350
+        }, opts));
+        return g;
+    };
+
+    function populateGraph(g) {
+        processNodes(records, g);
+    }
+
+    var l2 = jsav.label("Async Context Visualization");
+    var g2 = initGraph({
+        layout: "layered"
+    });
+
+    jsav.displayInit();
+    populateGraph(g2);
+
+    jsav.recorded();
+})();
diff --git a/examples/simplePromise/slideShow/async-context.html b/examples/simplePromise/slideShow/async-context.html
@@ -3,37 +3,11 @@
   <head>
     <title>Async Context Visualization</title>
     <link rel="stylesheet" href="../../JSAV/css/JSAV.css" type="text/css" media="screen" title="no title" charset="utf-8" />
-    <style>
-    #av {
-      width: 98%;
-      position: relative;
-    }
-    .jsavcounter {
-      position: absolute;
-      top: 15px;
-    }
-    .jsavcanvas { height: 300px;}
-    .visited {
-      background-color: #ddd;
-    }
-    .processing {
-      border-color: red;
-    }
-    .finished {
-      background-color: black;
-      color: white;
-    }
-    .jsavlabel {
-      font-size: 2em;
-      text-align: center;
-    }
-    </style>
+    <link rel="stylesheet" href="../../lib/slideShow/asyncContext.css" type="text/css" media="screen" title="no title" charset="utf-8" />
   </head>
   <body>
     <h1>Async Context Visualization - simplePromise</h1>
     <div>
-      <div id="codecontainer">
-      </div>
       <div id="av">
         <div class="jsavcontrols"></div><span class="jsavcounter"></span>
         <p class="jsavoutput jsavline"></p>
@@ -45,7 +19,10 @@ <h1>Async Context Visualization - simplePromise</h1>
     <script src="../../JSAV/lib/raphael.js"></script>
     <script src="../../JSAV/lib/dagre.min.js"></script>
     <script src="../../JSAV/build/JSAV.js"></script>
+
+    <!-- update this lineto plug in the event stream & code sample to visualize -->
     <script src="./eventsIdeal.js"></script>
+    <!-- -->
     <script src="../../lib/slideShow/createGraph.js"></script>
   </body>
 </html>