UIs for show expression values

[John J Barton]

On the thread "Scopes as objects", Ian Bicking posted a link to a project by toolness:

https://github.com/toolness/slowmo-js

The UI on slowmo-js is interesting, as is the motivating comment about avoiding movie-like information models.  In his demo, toolness stamps out a new copy of the source marked with the current executing expression and its value. Your eyes move through time (across space) rather than having a single copy of the source and requiring your mind to remember past values as the view updates over time.

Unfortunately, while this can work for small examples used for education, more common programs take up large fractions of the screen. In addition, common programs are amazing dense in expressions, resulting in many snapshots.

Like toolness, in my qpp[1] project I have transformations to trace expression values. Like Bret Victor's demo[2], I want to display multiple values for each expression. However my goal is common code: neither of these UIs scale to larger and more dense sources. On the other hand I don't aim to aid beginners learning to program so this lifts some constraints.

I have two different data streams: expression values and reference values. toolness and Victor show expression values traced in a function. By reference values I mean the values of a reference over time, independent of a function. For a given reference, the reference values include all of the expression values plus values from other places in the code that update the reference (that is, reference values are tracepoints from querypoint debugging). 

To start I'm trying a mouse-over sensor. 

  Pros:1) very compact since source is very dense compared to other visualizations. 

          2) I can figure out how to implement it.

  Con: 1) since every token is part of one or more expressions its tricky to find what you want. 

          2) that movie issue toolness points out.

I wonder if readers here will know of other options?

[1]https://github.com/google/qpp

[2]http://worrydream.com/#!/InventingOnPrinciple

jjb

[Kyle Murray]

If you want to take the mouseover idea further, you could try adapting this sort of exploded parse tree UI to program lines/statements: 

...where hovering over either the characters or the nested, rounded rectangles will navigate through the parts of the parsed expression/statement.  Here, the tooltip shows a definition, but you could imagine it showing your list of values over time.  

-Kyle