started some refactorings to prepare for Online Python Tutor 2.0!

Philip Guo · Philip Guo · commit 14f54b7eb750 · 2011-09-22T00:53:45.000-07:00
diff --git a/edu-python.css b/edu-python.css
@@ -274,7 +274,7 @@ table.listTbl td.listElt {
 }
 
 table.tupleTbl {
-  /*background-color: #dddddd;*/ /* must match .frameDataViz background-color */
+  background-color: #dddddd; /* must match .frameDataViz background-color */
   border-spacing: 0px;
   color: black;
 
diff --git a/edu-python.js b/edu-python.js
@@ -232,8 +232,27 @@ function updateOutput() {
   $("#pyStdout").scrollTop($("#pyStdout").attr('scrollHeight'));
 
 
+  // finally, render all the data structures!!!
+  renderDataStructures(curEntry, "#dataViz");
+}
+
+// Renders the current trace entry (curEntry) into the div named by vizDiv
+function renderDataStructures(curEntry, vizDiv) {
+  renderDataStructuresVersion1(curEntry, vizDiv);
+
+  // Version 2.0 forthcoming!
+  //renderDataStructuresVersion2(curEntry, vizDiv);
+}
+
+
+// The ORIGINAL "1.0" version of renderDataStructures, which renders
+// variables and values INLINE within each stack frame without any
+// explicit representation of data structure aliasing.
+//
+// This version was originally created in January 2010
+function renderDataStructuresVersion1(curEntry, vizDiv) {
   // render data structures:
-  $("#dataViz").html(''); // CLEAR IT!
+  $(vizDiv).html(''); // CLEAR IT!
 
 
   // render locals on stack:
@@ -242,7 +261,7 @@ function updateOutput() {
       var funcName = htmlspecialchars(frame[0]); // might contain '<' or '>' for weird names like <genexpr>
       var localVars = frame[1];
 
-      $("#dataViz").append('<div class="vizFrame">Local variables for <span style="font-family: Andale mono, monospace;">' + funcName + '</span>:</div>');
+      $(vizDiv).append('<div class="vizFrame">Local variables for <span style="font-family: Andale mono, monospace;">' + funcName + '</span>:</div>');
 
       // render locals in alphabetical order for tidiness:
       var orderedVarnames = [];
@@ -255,7 +274,7 @@ function updateOutput() {
       orderedVarnames.sort();
 
       if (orderedVarnames.length > 0) {
-        $("#dataViz .vizFrame:last").append('<br/><table class="frameDataViz"></table>');
+        $(vizDiv + " .vizFrame:last").append('<br/><table class="frameDataViz"></table>');
         var tbl = $("#pyOutputPane table:last");
         $.each(orderedVarnames, function(i, varname) {
           var val = localVars[varname];
@@ -274,15 +293,15 @@ function updateOutput() {
         tbl.find("tr:last").find("td.val").css('border-bottom', '0px');
       }
       else {
-        $("#dataViz .vizFrame:last").append(' <i>none</i>');
+        $(vizDiv + " .vizFrame:last").append(' <i>none</i>');
       }
     });
   }
 
 
   // render globals LAST:
 
-  $("#dataViz").append('<div class="vizFrame">Global variables:</div>');
+  $(vizDiv).append('<div class="vizFrame">Global variables:</div>');
 
   var nonEmptyGlobals = false;
   var curGlobalFields = {};
@@ -296,7 +315,7 @@ function updateOutput() {
   }
 
   if (nonEmptyGlobals) {
-    $("#dataViz .vizFrame:last").append('<br/><table class="frameDataViz"></table>');
+    $(vizDiv + " .vizFrame:last").append('<br/><table class="frameDataViz"></table>');
 
     // render all global variables IN THE ORDER they were created by the program,
     // in order to ensure continuity:
@@ -349,11 +368,21 @@ function updateOutput() {
     tbl.find("tr:last").find("td.val").css('border-bottom', '0px');
   }
   else {
-    $("#dataViz .vizFrame:last").append(' <i>none</i>');
+    $(vizDiv + " .vizFrame:last").append(' <i>none</i>');
   }
 
 }
 
+
+// The "2.0" version of renderDataStructures, which renders variables in
+// a stack and values in a separate heap, with data structure aliasing
+// explicitly represented via line connectors.
+//
+// This version was originally created in September 2011
+function renderDataStructuresVersion2(curEntry, vizDiv) {
+
+}
+
 // render the JS data object obj inside of jDomElt,
 // which is a jQuery wrapped DOM object
 // (obj is in a format encoded by cgi-bin/pg_encoder.py)
diff --git a/index.html b/index.html
@@ -49,6 +49,8 @@
   <script type="text/javascript" src="jquery.autogrow.js"></script>
  -->
 
+<!-- jsPlumb library for rendering connectors -->
+<script type="text/javascript" src="jquery.jsPlumb-1.3.3-all-min.js "></script>
 
 <!-- my own code -->
 <script type="text/javascript" src="edu-python.js"></script>
diff --git a/jquery.jsPlumb-1.3.3-all-min.js b/jquery.jsPlumb-1.3.3-all-min.js

Original file line number	Diff line number	Diff line change
`@@ -274,7 +274,7 @@ table.listTbl td.listElt {`
`274`	`274`	`}`
`275`	`275`
`276`	`276`	`table.tupleTbl {`
`277`		`- /background-color: #dddddd;/ /* must match .frameDataViz background-color */`
	`277`	`+ background-color: #dddddd; /* must match .frameDataViz background-color */`
`278`	`278`	`border-spacing: 0px;`
`279`	`279`	`color: black;`
`280`	`280`