// and | elements
var heapRows = myViz.domRootD3.select('#heap')
.selectAll('table.heapRow')
.data(curToplevelLayout, function(objLst) {
return objLst[0]; // return first element, which is the row ID tag
});
// update an existing heap row
var heapColumns = heapRows
//.each(function(objLst, i) { console.log('UPDATE ROW:', objLst, i); })
.selectAll('td')
.data(function(d, i) {return d.slice(1, d.length);}, /* map over each row, skipping row ID tag */
function(objID) {return objID;} /* each object ID is unique for constancy */);
// ENTER
heapColumns.enter().append('td')
.attr('class', 'toplevelHeapObject')
.attr('id', function(d, i) {return 'toplevel_heap_object_' + d;});
// remember that the enter selection is added to the update
// selection so that we can process it later ...
// UPDATE
heapColumns
.order() // VERY IMPORTANT to put in the order corresponding to data elements
.each(function(objID, i) {
//console.log('NEW/UPDATE ELT', objID);
// TODO: add a smoother transition in the future
// Right now, just delete the old element and render a new one in its place
$(this).empty();
renderCompoundObject(objID, $(this), true);
});
// EXIT
heapColumns.exit()
.remove();
// insert new heap rows
heapRows.enter().append('table')
//.each(function(objLst, i) {console.log('NEW ROW:', objLst, i);})
.attr('class', 'heapRow')
.selectAll('td')
.data(function(d, i) {return d.slice(1, d.length);}, /* map over each row, skipping row ID tag */
function(objID) {return objID;} /* each object ID is unique for constancy */)
.enter().append('td')
.attr('class', 'toplevelHeapObject')
.attr('id', function(d, i) {return 'toplevel_heap_object_' + d;})
.each(function(objID, i) {
//console.log('NEW ELT', objID);
// TODO: add a smoother transition in the future
renderCompoundObject(objID, $(this), true);
});
// remove deleted rows
heapRows.exit()
//.each(function(objLst, i) {console.log('DEL ROW:', objLst, i);})
.remove();
function renderNestedObject(obj, d3DomElement) {
if (isPrimitiveType(obj)) {
renderPrimitiveObject(obj, d3DomElement);
}
else {
renderCompoundObject(getRefID(obj), d3DomElement, false);
}
}
function renderPrimitiveObject(obj, d3DomElement) {
var typ = typeof obj;
if (obj == null) {
d3DomElement.append('None');
}
else if (typ == "number") {
d3DomElement.append('' + obj + '');
}
else if (typ == "boolean") {
if (obj) {
d3DomElement.append('True');
}
else {
d3DomElement.append('False');
}
}
else if (typ == "string") {
// escape using htmlspecialchars to prevent HTML/script injection
var literalStr = htmlspecialchars(obj);
// print as a double-quoted string literal
literalStr = literalStr.replace(new RegExp('\"', 'g'), '\\"'); // replace ALL
literalStr = '"' + literalStr + '"';
d3DomElement.append('' + literalStr + '');
}
else {
assert(false);
}
}
function renderCompoundObject(objID, d3DomElement, isTopLevel) {
if (!isTopLevel && renderedObjectIDs.has(objID)) {
// render jsPlumb arrow source since this heap object has already been rendered
// (or will be rendered soon)
// add a stub so that we can connect it with a connector later.
// IE needs this div to be NON-EMPTY in order to properly
// render jsPlumb endpoints, so that's why we add an " "!
var srcDivID = myViz.generateID('heap_pointer_src_' + heap_pointer_src_id);
heap_pointer_src_id++; // just make sure each source has a UNIQUE ID
d3DomElement.append(' ');
var dstDivID = myViz.generateID('heap_object_' + objID);
// TODO: we might be able to further optimize, since we might be re-drawing
// HEAP->HEAP connections when we can just keep the existing ones
assert(!connectionEndpointIDs.has(srcDivID));
connectionEndpointIDs.set(srcDivID, dstDivID);
//console.log('HEAP->HEAP', srcDivID, dstDivID);
assert(!heapConnectionEndpointIDs.has(srcDivID));
heapConnectionEndpointIDs.set(srcDivID, dstDivID);
return; // early return!
}
var heapObjID = myViz.generateID('heap_object_' + objID);
// wrap ALL compound objects in a heapObject div so that jsPlumb
// connectors can point to it:
d3DomElement.append('');
d3DomElement = myViz.domRoot.find('#' + heapObjID);
renderedObjectIDs.set(objID, 1);
var obj = curEntry.heap[objID];
assert($.isArray(obj));
if (obj[0] == 'LIST' || obj[0] == 'TUPLE' || obj[0] == 'SET' || obj[0] == 'DICT') {
var label = obj[0].toLowerCase();
assert(obj.length >= 1);
if (obj.length == 1) {
d3DomElement.append('empty ' + label + ' ');
}
else {
d3DomElement.append('' + label + ' ');
d3DomElement.append('');
var tbl = d3DomElement.children('table');
if (obj[0] == 'LIST' || obj[0] == 'TUPLE') {
tbl.append(' | |
|
');
var headerTr = tbl.find('tr:first');
var contentTr = tbl.find('tr:last');
$.each(obj, function(ind, val) {
if (ind < 1) return; // skip type tag and ID entry
// add a new column and then pass in that newly-added column
// as d3DomElement to the recursive call to child:
headerTr.append('');
headerTr.find('td:last').append(ind - 1);
contentTr.append(' | ');
renderNestedObject(val, contentTr.find('td:last'));
});
}
else if (obj[0] == 'SET') {
// create an R x C matrix:
var numElts = obj.length - 1;
// gives roughly a 3x5 rectangular ratio, square is too, err,
// 'square' and boring
var numRows = Math.round(Math.sqrt(numElts));
if (numRows > 3) {
numRows -= 1;
}
var numCols = Math.round(numElts / numRows);
// round up if not a perfect multiple:
if (numElts % numRows) {
numCols += 1;
}
jQuery.each(obj, function(ind, val) {
if (ind < 1) return; // skip 'SET' tag
if (((ind - 1) % numCols) == 0) {
tbl.append('|
');
}
var curTr = tbl.find('tr:last');
curTr.append(' | ');
renderNestedObject(val, curTr.find('td:last'));
});
}
else if (obj[0] == 'DICT') {
$.each(obj, function(ind, kvPair) {
if (ind < 1) return; // skip 'DICT' tag
tbl.append(' | |
');
var newRow = tbl.find('tr:last');
var keyTd = newRow.find('td:first');
var valTd = newRow.find('td:last');
var key = kvPair[0];
var val = kvPair[1];
renderNestedObject(key, keyTd);
renderNestedObject(val, valTd);
});
}
}
}
else if (obj[0] == 'INSTANCE' || obj[0] == 'CLASS') {
var isInstance = (obj[0] == 'INSTANCE');
var headerLength = isInstance ? 2 : 3;
assert(obj.length >= headerLength);
if (isInstance) {
d3DomElement.append('' + obj[1] + ' instance
');
}
else {
var superclassStr = '';
if (obj[2].length > 0) {
superclassStr += ('[extends ' + obj[2].join(', ') + '] ');
}
d3DomElement.append('' + obj[1] + ' class ' + superclassStr + '
');
}
if (obj.length > headerLength) {
var lab = isInstance ? 'inst' : 'class';
d3DomElement.append('');
var tbl = d3DomElement.children('table');
$.each(obj, function(ind, kvPair) {
if (ind < headerLength) return; // skip header tags
tbl.append(' | |
');
var newRow = tbl.find('tr:last');
var keyTd = newRow.find('td:first');
var valTd = newRow.find('td:last');
// the keys should always be strings, so render them directly (and without quotes):
assert(typeof kvPair[0] == "string");
var attrnameStr = htmlspecialchars(kvPair[0]);
keyTd.append('' + attrnameStr + '');
// values can be arbitrary objects, so recurse:
renderNestedObject(kvPair[1], valTd);
});
}
}
else if (obj[0] == 'FUNCTION') {
assert(obj.length == 3);
var funcName = htmlspecialchars(obj[1]); // for displaying weird names like ''
var parentFrameID = obj[2]; // optional
if (parentFrameID) {
d3DomElement.append('function ' + funcName + ' [parent=f'+ parentFrameID + ']
');
}
else {
d3DomElement.append('function ' + funcName + '
');
}
}
else {
// render custom data type
assert(obj.length == 2);
var typeName = obj[0];
var strRepr = obj[1];
strRepr = htmlspecialchars(strRepr); // escape strings!
d3DomElement.append('' + typeName + '
');
d3DomElement.append('');
}
}
// Render globals and then stack frames using d3:
// render all global variables IN THE ORDER they were created by the program,
// in order to ensure continuity:
// Derive a list where each element contains a pair of
// [varname, value] as long as value is NOT undefined.
// (Sometimes entries in curEntry.ordered_globals are undefined,
// so filter those out.)
var realGlobalsLst = [];
$.each(curEntry.ordered_globals, function(i, varname) {
var val = curEntry.globals[varname];
// (use '!==' to do an EXACT match against undefined)
if (val !== undefined) { // might not be defined at this line, which is OKAY!
realGlobalsLst.push([varname, varname]); /* purposely map varname down both columns */
}
});
var globalsID = myViz.generateID('globals');
var globalTblID = myViz.generateID('global_table');
var globalsD3 = myViz.domRootD3.select('#' + globalTblID)
.selectAll('tr')
.data(realGlobalsLst, function(d) {
return d[0]; // use variable name as key
});
// ENTER
globalsD3.enter()
.append('tr')
.selectAll('td')
.data(function(d, i){return d;}) /* map varname down both columns */
.enter()
.append('td')
.attr('class', function(d, i) {return (i == 0) ? 'stackFrameVar' : 'stackFrameValue';})
.html(function(d, i) {
return (i == 0) ? d : '' /* initialize in each() later */;
})
// remember that the enter selection is added to the update
// selection so that we can process it later ...
// UPDATE
globalsD3
.order() // VERY IMPORTANT to put in the order corresponding to data elements
.selectAll('td')
.data(function(d, i){return d;}) /* map varname down both columns */
.each(function(varname, i) {
if (i == 1) {
var val = curEntry.globals[varname];
// include type in repr to prevent conflating integer 5 with string "5"
var valStringRepr = String(typeof val) + ':' + String(val);
// SUPER HACK - retrieve previous value as a hidden attribute
var prevValStringRepr = $(this).attr('data-curvalue');
// IMPORTANT! only clear the div and render a new element if the
// value has changed
if (valStringRepr != prevValStringRepr) {
// TODO: render a transition
$(this).empty(); // crude but effective for now
if (isPrimitiveType(val)) {
renderPrimitiveObject(val, $(this));
}
else {
// add a stub so that we can connect it with a connector later.
// IE needs this div to be NON-EMPTY in order to properly
// render jsPlumb endpoints, so that's why we add an " "!
// make sure varname doesn't contain any weird
// characters that are illegal for CSS ID's ...
var varDivID = myViz.generateID('global__' + varnameToCssID(varname));
$(this).append('
');
assert(!connectionEndpointIDs.has(varDivID));
var heapObjID = myViz.generateID('heap_object_' + getRefID(val));
connectionEndpointIDs.set(varDivID, heapObjID);
//console.log('STACK->HEAP', varDivID, heapObjID);
}
//console.log('CHANGED', varname, prevValStringRepr, valStringRepr);
}
// SUPER HACK - set current value as a hidden string attribute
$(this).attr('data-curvalue', valStringRepr);
}
});
// EXIT
globalsD3.exit()
.remove();
// for aesthetics, hide globals if there aren't any globals to display
if (curEntry.ordered_globals.length == 0) {
this.domRoot.find('#' + globalsID).hide();
}
else {
this.domRoot.find('#' + globalsID).show();
}
// holy cow, the d3 code for stack rendering is ABSOLUTELY NUTS!
var stackDiv = myViz.domRootD3.select('#stack');
// VERY IMPORTANT for selectAll selector to be SUPER specific here!
var stackFrameDiv = stackDiv.selectAll('div.stackFrame,div.zombieStackFrame')
.data(curEntry.stack_to_render, function(frame) {
// VERY VERY VERY IMPORTANT for properly handling closures and nested functions
// (see the backend code for more details)
return frame.unique_hash;
});
var sfdEnter = stackFrameDiv.enter()
.append('div')
.attr('class', function(d, i) {return d.is_zombie ? 'zombieStackFrame' : 'stackFrame';})
.attr('id', function(d, i) {return d.is_zombie ? myViz.generateID("zombie_stack" + i)
: myViz.generateID("stack" + i);
})
//.each(function(frame, i) {console.log('NEW STACK FRAME', frame.unique_hash);})
sfdEnter
.append('div')
.attr('class', 'stackFrameHeader')
.html(function(frame, i) {
var funcName = htmlspecialchars(frame.func_name); // might contain '<' or '>' for weird names like
var headerLabel = funcName + '()';
var frameID = frame.frame_id; // optional (btw, this isn't a CSS id)
if (frameID) {
headerLabel = 'f' + frameID + ': ' + headerLabel;
}
// optional (btw, this isn't a CSS id)
if (frame.parent_frame_id_list.length > 0) {
var parentFrameID = frame.parent_frame_id_list[0];
headerLabel = headerLabel + ' [parent=f' + parentFrameID + ']';
}
return headerLabel;
})
sfdEnter
.append('table')
.attr('class', 'stackFrameVarTable');
var stackVarTable = stackFrameDiv
.order() // VERY IMPORTANT to put in the order corresponding to data elements
.select('table').selectAll('tr')
.data(function(frame) {
// each list element contains a reference to the entire frame
// object as well as the variable name
// TODO: look into whether we can use d3 parent nodes to avoid
// this hack ... http://bost.ocks.org/mike/nest/
return frame.ordered_varnames.map(function(varname) {return {varname:varname, frame:frame};});
},
function(d) {return d.varname;} // use variable name as key
);
stackVarTable
.enter()
.append('tr')
var stackVarTableCells = stackVarTable
.selectAll('td')
.data(function(d, i) {return [d, d] /* map identical data down both columns */;})
stackVarTableCells.enter()
.append('td')
.attr('class', function(d, i) {return (i == 0) ? 'stackFrameVar' : 'stackFrameValue';})
stackVarTableCells
.order() // VERY IMPORTANT to put in the order corresponding to data elements
.each(function(d, i) {
var varname = d.varname;
var frame = d.frame;
if (i == 0) {
if (varname == '__return__' && !frame.is_zombie)
$(this).html('Return
value');
else
$(this).html(varname);
}
else {
var val = frame.encoded_locals[varname];
// include type in repr to prevent conflating integer 5 with string "5"
var valStringRepr = String(typeof val) + ':' + String(val);
// SUPER HACK - retrieve previous value as a hidden attribute
var prevValStringRepr = $(this).attr('data-curvalue');
// IMPORTANT! only clear the div and render a new element if the
// value has changed
if (valStringRepr != prevValStringRepr) {
// TODO: render a transition
$(this).empty(); // crude but effective for now
if (isPrimitiveType(val)) {
renderPrimitiveObject(val, $(this));
}
else {
// add a stub so that we can connect it with a connector later.
// IE needs this div to be NON-EMPTY in order to properly
// render jsPlumb endpoints, so that's why we add an " "!
// make sure varname and frame.unique_hash don't contain any weird
// characters that are illegal for CSS ID's ...
var varDivID = myViz.generateID(varnameToCssID(frame.unique_hash + '__' + varname));
$(this).append('
');
assert(!connectionEndpointIDs.has(varDivID));
var heapObjID = myViz.generateID('heap_object_' + getRefID(val));
connectionEndpointIDs.set(varDivID, heapObjID);
//console.log('STACK->HEAP', varDivID, heapObjID);
}
//console.log('CHANGED', frame.unique_hash, varname, prevValStringRepr, valStringRepr);
}
// SUPER HACK - set current value as a hidden string attribute
$(this).attr('data-curvalue', valStringRepr);
}
});
stackVarTableCells.exit().remove();
stackVarTable.exit().remove();
stackFrameDiv.exit()
//.each(function(frame, i) {console.log('DEL STACK FRAME', frame.unique_hash, i);})
.remove();
// crap, we need to repaint all of the existing connectors in case their endpoints have shifted
// due to page elements shifting around :(
myViz.jsPlumbInstance.repaintEverything();
// finally add all the NEW connectors that have arisen in this call to renderDataStructures
connectionEndpointIDs.forEach(function(varID, valueID) {
myViz.jsPlumbInstance.connect({source: varID, target: valueID});
});
/*
myViz.jsPlumbInstance.select().each(function(c) {
console.log(c.sourceId, c.targetId);
});
*/
function highlight_frame(frameID) {
myViz.jsPlumbInstance.select().each(function(c) {
// this is VERY VERY fragile code, since it assumes that going up
// FOUR layers of parent() calls will get you from the source end
// of the connector to the enclosing stack frame
var stackFrameDiv = c.source.parent().parent().parent().parent();
// if this connector starts in the selected stack frame ...
if (stackFrameDiv.attr('id') == frameID) {
// then HIGHLIGHT IT!
c.setPaintStyle({lineWidth:1, strokeStyle: darkBlue});
c.endpoints[0].setPaintStyle({fillStyle: darkBlue});
//c.endpoints[1].setVisible(false, true, true); // JUST set right endpoint to be invisible
$(c.canvas).css("z-index", 1000); // ... and move it to the VERY FRONT
}
// for heap->heap connectors
else if (heapConnectionEndpointIDs.has(c.endpoints[0].elementId)) {
// NOP since it's already the color and style we set by default
}
else {
// else unhighlight it
c.setPaintStyle({lineWidth:1, strokeStyle: lightGray});
c.endpoints[0].setPaintStyle({fillStyle: lightGray});
//c.endpoints[1].setVisible(false, true, true); // JUST set right endpoint to be invisible
$(c.canvas).css("z-index", 0);
}
});
// clear everything, then just activate this one ...
myViz.domRoot.find(".stackFrame").removeClass("highlightedStackFrame");
myViz.domRoot.find('#' + frameID).addClass("highlightedStackFrame");
}
// highlight the top-most non-zombie stack frame or, if not available, globals
var frame_already_highlighted = false;
$.each(curEntry.stack_to_render, function(i, e) {
if (e.is_highlighted) {
highlight_frame(myViz.generateID('stack' + i));
frame_already_highlighted = true;
}
});
if (!frame_already_highlighted) {
highlight_frame(myViz.generateID('globals'));
}
}
ExecutionVisualizer.prototype.redrawConnectors = function() {
this.jsPlumbInstance.repaintEverything();
}
// Utilities
/* colors - see pytutor.css */
var lightYellow = '#F5F798';
var lightLineColor = '#FFFFCC';
var errorColor = '#F87D76';
var visitedLineColor = '#3D58A2';
var lightGray = "#cccccc";
var darkBlue = "#3D58A2";
var medBlue = "#41507A";
var medLightBlue = "#6F89D1";
var lightBlue = "#899CD1";
var pinkish = "#F15149";
var lightPink = "#F89D99";
var darkRed = "#9D1E18";
var breakpointColor = pinkish;
var hoverBreakpointColor = medLightBlue;
function assert(cond) {
if (!cond) {
alert("Assertion Failure (see console log for backtrace)");
throw 'Assertion Failure';
}
}
// taken from http://www.toao.net/32-my-htmlspecialchars-function-for-javascript
function htmlspecialchars(str) {
if (typeof(str) == "string") {
str = str.replace(/&/g, "&"); /* must do & first */
// ignore these for now ...
//str = str.replace(/"/g, """);
//str = str.replace(/'/g, "'");
str = str.replace(//g, ">");
// replace spaces:
str = str.replace(/ /g, " ");
}
return str;
}
String.prototype.rtrim = function() {
return this.replace(/\s*$/g, "");
}
// make sure varname doesn't contain any weird
// characters that are illegal for CSS ID's ...
//
// I know for a fact that iterator tmp variables named '_[1]'
// are NOT legal names for CSS ID's.
// I also threw in '{', '}', '(', ')', '<', '>' as illegal characters.
//
// TODO: what other characters are illegal???
var lbRE = new RegExp('\\[|{|\\(|<', 'g');
var rbRE = new RegExp('\\]|}|\\)|>', 'g');
function varnameToCssID(varname) {
return varname.replace(lbRE, 'LeftB_').replace(rbRE, '_RightB');
}
// compare two JSON-encoded compound objects for structural equivalence:
function structurallyEquivalent(obj1, obj2) {
// punt if either isn't a compound type
if (isPrimitiveType(obj1) || isPrimitiveType(obj2)) {
return false;
}
// must be the same compound type
if (obj1[0] != obj2[0]) {
return false;
}
// must have the same number of elements or fields
if (obj1.length != obj2.length) {
return false;
}
// for a list or tuple, same size (e.g., a cons cell is a list/tuple of size 2)
if (obj1[0] == 'LIST' || obj1[0] == 'TUPLE') {
return true;
}
else {
var startingInd = -1;
if (obj1[0] == 'DICT') {
startingInd = 2;
}
else if (obj1[0] == 'INSTANCE') {
startingInd = 3;
}
else {
return false;
}
var obj1fields = d3.map();
// for a dict or object instance, same names of fields (ordering doesn't matter)
for (var i = startingInd; i < obj1.length; i++) {
obj1fields.set(obj1[i][0], 1); // use as a set
}
for (var i = startingInd; i < obj2.length; i++) {
if (!obj1fields.has(obj2[i][0])) {
return false;
}
}
return true;
}
}
function isPrimitiveType(obj) {
var typ = typeof obj;
return ((obj == null) || (typ != "object"));
}
function getRefID(obj) {
assert(obj[0] == 'REF');
return obj[1];
}