Abstract Syntax Tree Rendering Noah Brickman CMPS 203

Introduction n n Programs are hard to visualize. Class. View and other tools don’t give a high level view Java. Doc and similar tools require comment blocks Goal: Add a code graphing tool directly to a compiler that will render an AST

Related Work n Free Code Graphing Project Not interactive, language specific

Related Work n KScope Shows call graph, but not function bodies Does not show grammar based tree

AST Render Process Select a compiler building tool n Generate a script with drawing instructions n Render script n

Compiler Tool CIL (C Intermediate Language) C analysis tool, Ocaml functions n Flex-Bison Low level, extra programming n Sable. CC Java code, Builds ASTs n

Sable. CC Open source compiler generating tool n Write grammar file n Generates Java code to parse code and build an AST n Add main function with utility classes n

Script Generation Add code to Sable. CC files to write script file n Perform tree traversal and write node data n Script file contains node data and heirarchy information n

AST Rendering OGRE (O-O Graphics Rendering Engine) n Loads script file and reconstruct AST n Renders color coded tree Production rules in red Language terminals in blue Variable associations in green n

Results - Demo!

Future Work Embed AST script code in Sable. CC source n Make 3 D tree more interactive n Implement code execution tracing n

Alternate Tree Rendering n Following slides were made by… Dr. Kai Xu University of Sydney

Indented Layout n n n Places all items along vertically spaced rows Uses indentation to show parent child relationships Example: Windows explorer Problems: u Only showing part of the tree u Bad aspect ratio (not space efficient) But still the most popular one!?

Dendrogram n n n Essentially a layered drawing u with bended orthogonal edges Layering are done according to the leaves: u All the leaves are on the same layer Now commonly used in bioinformatics to represent u The result of hierarchical clustering u Phylogenetic trees u More on this in the “biological networks” lecture

Balloon trees n n n A variation of radial layout children are drawn in a circle centered at their parents. Effective on showing the tree structure u At the cost of node details

Hyperbolic Tree n n Simulate the distortion effect of fisheye lens u Enlarge the focus and shrink the rest u Focus+context u Interaction technique; can be combined with different layout. 3 D hyperbolic tree: u projecting a graph one a sphere produces a similar distortion effect u This example also uses balloon tree drawing.

3 D tree visualization - Cone tree n n Cone trees are a 3 D extension of the 2 D layered tree drawing method. u Parent at the tip of a cone, and its children spaced equally on the bottom circle of the cone u Either horizontal or vertical The extension to 3 D does not necessarily means more information can be displayed u Occlusion problem u Couple with interaction is essential u More on this in the “graph visualization evaluation” lecture

Other 3 D tree visualizations n n 3 D poly-plane tree visualization u Put subtrees on planes u arrange these planes in 3 D to reduce occlusion u In this example, layered drawing is used within each plane 3 D layered tree u Only one cone u Layers are the parallel circles on the surface u Example: color indicate the layer

Space-filling methods - Treemap n n Treemap use containment to show the hierarchy. It partitions the space recursively according to the size of subtrees It is space-efficient compare to node-link diagram It is effective in showing the leaf nodes; on the other size, it is difficult to see the non-leave nodes

Variations of Treemap n n Cushion treemap u Use shading to help identify the levels in a treemap Voronoi treemap u Similar idea but uses voronoi diagram as partition u The space does not have to be rectangle.

Beamtree n n A variation of treemap in 3 D. Using overlap instead of nesting to show the hierarchy 3 D version: representing each node as a beam A bigger example

Space-filling tree layout n n n Try to use as much screen space as possible Layout a tree according to the recursive partition of the screen space u The area allocated to a subtree is proportional to its size. A bigger example: 55000 nodes u Use all the screen space u Not very effective on showing the tree structure

Other space filling methods - Icicle Trees n Edges implied by adjacency and spatial relationship. • icicle tree in the infovis toolkit (jeandaniel fekete)

Information slice and Sunburst Diagrams n n Information slice u also a space-filling visualization method. u Radial version of icicle trees. u Node size is proportional to the angle swept by a node. Sunburst u With extra focus+context u Details are shown outside or inside the

Elastic hierarchies n n hybrid of node-link diagrams and treemaps Using node-link diagram inside a treemap produces lots of crossings

Tree. Viewer n Visualizes trees in a form that closely resembles botanical trees u The root is the tree stem u Non-leave nodes are branches u Leave nodes are “bulbs” at the end of branches u Example: Unix home directory.

Collapsible Cylindrical Trees n Telescope metaphor: A set of nested cylinders u A cylinder is constructed for the children of a node, and it has a smaller radius. u This cylinder is nested and hidden within the cylinder contain the parent u It can be pulled out to the right of theparent cylinder or collapsed as necessary. n n only one path of the hierarchy is visible at once u represented by a number of ever decreasing cylinders All cylinders of level 1 nodes are shown in a horizontal fashion, like being put on a stick.