simple heap transition animations

Philip Guo · Philip Guo · commit 032d06426113 · 2012-08-10T15:53:47.000-07:00
diff --git a/PyTutorGAE/css/pytutor.css b/PyTutorGAE/css/pytutor.css
@@ -562,11 +562,10 @@ div#heap {
 }
 
 td.toplevelHeapObject {
-  margin-left: 0px;
-  margin-right: 20px;
-
+  /* to make room for transition animations */
   padding: 8px;
-  border: 2px dotted white; /* to make room for transition animations */
+  border: 2px dotted white;
+  border-color: white; /* needed for d3 to do transitions */
 }
 
 table.heapRow {
diff --git a/PyTutorGAE/js/pytutor.js b/PyTutorGAE/js/pytutor.js
@@ -1156,6 +1156,7 @@ ExecutionVisualizer.prototype.renderDataStructures = function() {
   });
 
 
+
   // use d3 to render the heap by mapping curToplevelLayout into <table class="heapRow">
   // and <td class="toplevelHeapObject"> elements
 
@@ -1166,21 +1167,42 @@ ExecutionVisualizer.prototype.renderDataStructures = function() {
   });
 
 
+  // insert new heap rows
+  heapRows.enter().append('table')
+    //.each(function(objLst, i) {console.log('NEW ROW:', objLst, i);})
+    .attr('class', 'heapRow')
+    .append('tr')
+
+  // delete a heap row
+  heapRows.exit()
+    //.each(function(objLst, i) {console.log('DEL ROW:', objLst, i);})
+    .remove();
+
+
   // update an existing heap row
   var heapColumns = heapRows
-    //.each(function(objLst, i) { console.log('UPDATE ROW:', objLst, i); })
+    .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
+  // insert a new toplevelHeapObject
   heapColumns.enter().append('td')
     .attr('class', 'toplevelHeapObject')
-    .attr('id', function(d, i) {return 'toplevel_heap_object_' + d;});
+    .attr('id', function(d, i) {return 'toplevel_heap_object_' + d;})
+    .style('opacity', '0')
+    .style('border-color', 'red')
     // remember that the enter selection is added to the update
     // selection so that we can process it later ...
+    .transition()
+    .style('opacity', '1') /* fade in */
+    .duration(500)
+    .transition()
+    .style('border-color', 'white')
+    .delay(500)
+    .duration(300);
 
-  // UPDATE
+  // update a toplevelHeapObject
   heapColumns
     .order() // VERY IMPORTANT to put in the order corresponding to data elements
     .each(function(objID, i) {
@@ -1192,46 +1214,11 @@ ExecutionVisualizer.prototype.renderDataStructures = function() {
       renderCompoundObject(objID, $(this), true);
     });
 
-  // EXIT
+  // delete a toplevelHeapObject
   heapColumns.exit()
     .remove();
 
 
-  // insert new heap rows
-  heapRows.enter().append('table')
-    //.each(function(objLst, i) {console.log('NEW ROW:', objLst, i);})
-    .attr('class', 'heapRow')
-    .append('tr')
-    .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);
-    })
-    /*
-    .transition()
-    .style('border-color', 'red')
-    .duration(100)
-    .transition()
-    .style('border-color', 'white')
-    .delay(100)
-    .duration(600)
-    */
-
-
-
-  // remove deleted rows
-  heapRows.exit()
-    //.each(function(objLst, i) {console.log('DEL ROW:', objLst, i);})
-    .remove();
-
-
 
   function renderNestedObject(obj, d3DomElement) {
     if (isPrimitiveType(obj)) {

Original file line number	Diff line number	Diff line change
`@@ -562,11 +562,10 @@ div#heap {`
`562`	`562`	`}`
`563`	`563`
`564`	`564`	`td.toplevelHeapObject {`
`565`		`- margin-left: 0px;`
`566`		`- margin-right: 20px;`
`567`		`-`
	`565`	`+ /* to make room for transition animations */`
`568`	`566`	`padding: 8px;`
`569`		`- border: 2px dotted white; /* to make room for transition animations */`
	`567`	`+ border: 2px dotted white;`
	`568`	`+ border-color: white; /* needed for d3 to do transitions */`
`570`	`569`	`}`
`571`	`570`
`572`	`571`	`table.heapRow {`