Adding event box to examples (#15)

mike-kaufman · Mar 1, 2018 · e6b955e · e6b955e
1 parent 4b91f1b
commit e6b955e
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 78 deletions.
diff --git a/examples/expressMiddleware/slideShow/async-context.html b/examples/expressMiddleware/slideShow/async-context.html
@@ -12,7 +12,14 @@
   <h1>Async Context Visualization - simpleExpress</h1>
   <div class='container'>
     <div id="codeContainer" class="codeContainer">
-      <div id="codeAnchor"></div>
+      <div id="codeContainerInner" class="innerCodeContainer">
+        <H3>Code</H3>
+        <div id="codeAnchor"></div>
+      </div>
+      <div id="eventContainerInner" class="innerCodeContainer">
+        <H3>Events</H3>
+        <div id="eventAnchor"></div>
+      </div>
     </div>
     <div id="graphContainer" class="graphContainer">
       <div id="av">

diff --git a/examples/lazilyInitializedPromise/slideShow/async-context.html b/examples/lazilyInitializedPromise/slideShow/async-context.html
@@ -8,16 +8,23 @@
   <body>
     <h1>Async Context Visualization - lazyInitializedPromise</h1>
     <div class='container'>
-        <div id="codeContainer" class="codeContainer">
+      <div id="codeContainer" class="codeContainer">
+        <div id="codeContainerInner" class="innerCodeContainer">
+          <H3>Code</H3>
           <div id="codeAnchor"></div>
         </div>
-        <div id="graphContainer" class="graphContainer">
-          <div id="av">
-            <div class="jsavcontrols"></div>
-            <span class="jsavcounter"></span>
-            <p class="jsavoutput jsavline"></p>
-          </div>
+        <div id="eventContainerInner" class="innerCodeContainer">
+          <H3>Events</H3>
+          <div id="eventAnchor"></div>
         </div>
+      </div>
+      <div id="graphContainer" class="graphContainer">
+        <div id="av">
+          <div class="jsavcontrols"></div>
+          <span class="jsavcounter"></span>
+          <p class="jsavoutput jsavline"></p>
+        </div>
+      </div>
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

diff --git a/examples/lib/slideShow/asyncContext.css b/examples/lib/slideShow/asyncContext.css
@@ -41,10 +41,16 @@
 }
 
 .codeContainer {
-  width: 30%;
+  width: 40%;
   height: 100%;
 }
 
+.innerCodeContainer {
+  overflow:scroll;
+}
+
 .graphContainer {
   height: 100%;
+  min-width:60%;
+  align-self:right;
 }
diff --git a/examples/lib/slideShow/createGraph.js b/examples/lib/slideShow/createGraph.js
@@ -40,27 +40,51 @@
         const n1 = getNode(v1);
         const n2 = getNode(v2);
         opts = opts || {};
-        opts['arrow-end'] = 'classic-wide-long'; /*classic, block, open, oval, diamond, none,*/;
+        opts['arrow-end'] = 'classic-wide-long'; /*classic, block, open, oval, diamond, none,*/ ;
         return g.addEdge(n1, n2, opts);
     }
 
-    const jsavCode = jsav.code(codeLines, {after: {element: $('#codeAnchor')}});
+    // set up code display
+    const jsavCode = jsav.code(codeLines, {
+        after: {
+            element: $('#codeAnchor')
+        }
+    });
+
+    // set up event display
+    const recordsString = records.reduce((accumlator, curr) => {
+        const obj = { ...curr };
+        if (obj.data) {
+            delete obj.data;
+        }
+        return accumlator += JSON.stringify(obj) + '\n';
+    }, '');
+    const jsavEvents = jsav.code(recordsString, {
+        after: {
+            element: $('#eventAnchor')
+        }
+    })
 
     function processNodes(records, g) {
 
         let currentExecutionID = -1;
-        let currentHighlightLine = undefined;
+        let currentCodeHighlightLine = 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);
+                if (currentCodeHighlightLine > 0) {
+                    jsavCode.unhighlight(currentCodeHighlightLine);
                 }
                 jsavCode.highlight(r.data.highlightLine);
-                currentHighlightLine = r.data.highlightLine;
+                currentCodeHighlightLine = r.data.highlightLine;
+            }
+
+            if (i > 0) {
+                jsavEvents.unhighlight(i);
             }
+            jsavEvents.highlight(i + 1);
 
             switch (r.event) {
                 case 'executeBegin':
@@ -71,9 +95,9 @@
                     }
                     break;
                 case 'executeEnd':
-                    if (currentHighlightLine > 0) {
-                        jsavCode.unhighlight(currentHighlightLine);
-                        currentHighlightLine = -1;
+                    if (currentCodeHighlightLine > 0) {
+                        jsavCode.unhighlight(currentCodeHighlightLine);
+                        currentCodeHighlightLine = -1;
                     }
                     currentExecutionID = -1;
                     getNode(getExecuteNodeID(r.executeID)).removeClass('activeExecutionNode').addClass('completedExecutionNode');
@@ -95,7 +119,10 @@
                     // 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,*/ });
+                    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;

diff --git a/examples/markdown-example-1/slideShow/async-context.html b/examples/markdown-example-1/slideShow/async-context.html
@@ -8,16 +8,23 @@
   <body>
     <h1>Async Context Visualization - simplePromise</h1>
     <div class='container'>
-        <div id="codeContainer" class="codeContainer">
+      <div id="codeContainer" class="codeContainer">
+        <div id="codeContainerInner" class="innerCodeContainer">
+          <H3>Code</H3>
           <div id="codeAnchor"></div>
         </div>
-        <div id="graphContainer" class="graphContainer">
-          <div id="av">
-            <div class="jsavcontrols"></div>
-            <span class="jsavcounter"></span>
-            <p class="jsavoutput jsavline"></p>
-          </div>
+        <div id="eventContainerInner" class="innerCodeContainer">
+          <H3>Events</H3>
+          <div id="eventAnchor"></div>
         </div>
+      </div>
+      <div id="graphContainer" class="graphContainer">
+        <div id="av">
+          <div class="jsavcontrols"></div>
+          <span class="jsavcounter"></span>
+          <p class="jsavoutput jsavline"></p>
+        </div>
+      </div>
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

diff --git a/examples/markdown-example-2/slideShow/async-context.html b/examples/markdown-example-2/slideShow/async-context.html
@@ -8,17 +8,24 @@
   <body>
     <h1>Async Context Visualization - promise example from markdown</h1>
     <div class='container'>
-        <div id="codeContainer" class="codeContainer">
+      <div id="codeContainer" class="codeContainer">
+        <div id="codeContainerInner" class="innerCodeContainer">
+          <H3>Code</H3>
           <div id="codeAnchor"></div>
         </div>
-        <div id="graphContainer" class="graphContainer">
-          <div id="av">
-            <div class="jsavcontrols"></div>
-            <span class="jsavcounter"></span>
-            <p class="jsavoutput jsavline"></p>
-          </div>
+        <div id="eventContainerInner" class="innerCodeContainer">
+          <H3>Events</H3>
+          <div id="eventAnchor"></div>
         </div>
       </div>
+      <div id="graphContainer" class="graphContainer">
+        <div id="av">
+          <div class="jsavcontrols"></div>
+          <span class="jsavcounter"></span>
+          <p class="jsavoutput jsavline"></p>
+        </div>
+      </div>
+    </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script src="../../JSAV/lib/jquery.transit.js"></script>

diff --git a/examples/setInterval/slideShow/async-context.html b/examples/setInterval/slideShow/async-context.html
@@ -8,17 +8,24 @@
   <body>
     <h1>Async Context Visualization - setInterval</h1>
     <div class='container'>
-        <div id="codeContainer" class="codeContainer">
+      <div id="codeContainer" class="codeContainer">
+        <div id="codeContainerInner" class="innerCodeContainer">
+          <H3>Code</H3>
           <div id="codeAnchor"></div>
         </div>
-        <div id="graphContainer" class="graphContainer">
-          <div id="av">
-            <div class="jsavcontrols"></div>
-            <span class="jsavcounter"></span>
-            <p class="jsavoutput jsavline"></p>
-          </div>
+        <div id="eventContainerInner" class="innerCodeContainer">
+          <H3>Events</H3>
+          <div id="eventAnchor"></div>
         </div>
       </div>
+      <div id="graphContainer" class="graphContainer">
+        <div id="av">
+          <div class="jsavcontrols"></div>
+          <span class="jsavcounter"></span>
+          <p class="jsavoutput jsavline"></p>
+        </div>
+      </div>
+    </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script src="../../JSAV/lib/jquery.transit.js"></script>

diff --git a/examples/simpleExpress/slideShow/async-context.html b/examples/simpleExpress/slideShow/async-context.html
@@ -8,17 +8,24 @@
   <body>
     <h1>Async Context Visualization - simpleExpress</h1>
     <div class='container'>
-        <div id="codeContainer" class="codeContainer">
+      <div id="codeContainer" class="codeContainer">
+        <div id="codeContainerInner" class="innerCodeContainer">
+          <H3>Code</H3>
           <div id="codeAnchor"></div>
         </div>
-        <div id="graphContainer" class="graphContainer">
-          <div id="av">
-            <div class="jsavcontrols"></div>
-            <span class="jsavcounter"></span>
-            <p class="jsavoutput jsavline"></p>
-          </div>
+        <div id="eventContainerInner" class="innerCodeContainer">
+          <H3>Events</H3>
+          <div id="eventAnchor"></div>
         </div>
       </div>
+      <div id="graphContainer" class="graphContainer">
+        <div id="av">
+          <div class="jsavcontrols"></div>
+          <span class="jsavcounter"></span>
+          <p class="jsavoutput jsavline"></p>
+        </div>
+      </div>
+    </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script src="../../JSAV/lib/jquery.transit.js"></script>

diff --git a/examples/simplePromise/slideShow/async-context.html b/examples/simplePromise/slideShow/async-context.html
@@ -1,34 +1,45 @@
 <!DOCTYPE html>
 <html>
-  <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" />
-    <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 class='container'>
-        <div id="codeContainer" class="codeContainer">
-          <div id="codeAnchor"></div>
-        </div>
-        <div id="graphContainer" class="graphContainer">
-          <div id="av">
-            <div class="jsavcontrols"></div>
-            <span class="jsavcounter"></span>
-            <p class="jsavoutput jsavline"></p>
-          </div>
-        </div>
+
+<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" />
+  <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 class='container'>
+    <div id="codeContainer" class="codeContainer">
+      <div id="codeContainerInner" class="innerCodeContainer">
+        <H3>Code</H3>
+        <div id="codeAnchor"></div>
       </div>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
-    <script src="../../JSAV/lib/jquery.transit.js"></script>
-    <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>
+      <div id="eventContainerInner" class="innerCodeContainer">
+        <H3>Events</H3>
+        <div id="eventAnchor"></div>
+      </div>
+    </div>
+    <div id="graphContainer" class="graphContainer">
+      <div id="av">
+        <div class="jsavcontrols"></div>
+        <span class="jsavcounter"></span>
+        <p class="jsavoutput jsavline"></p>
+      </div>
+    </div>
+  </div>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
+  <script src="../../JSAV/lib/jquery.transit.js"></script>
+  <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>