Animated Exploring of Huge Software Systems

Transcription

1 Animated Exploring of Huge Software Systems Liqun Wang Thesis submitted to the Faculty of Graduate and Postdoctoral Studies in partial fulfillment of the requirements for the degree of Master of Science System Sciences Program School of Information Technology and Engineering University of Ottawa Ottawa, Ontario, Canada Liqun Wang, 2002

2 ACKNOWLEDGEMENTS I would like to acknowledge the help that I have received during my research. Grateful thanks to: Dr. Timothy Lethbridge, my supervisor, for his support, guidance, patience and intelligent comments. The KBRE group for their help, comments, and the valuable discussions with them. The students who participated in this study My friends for their concerns and encouragement. ii

3 ABSTRACT There are many software visualization tools available today to help software engineers to explore software systems. However, when a system is huge, some of these tools do not satisfy the exploration requirements. The big problem is that the techniques the tools use do not provide an effective display and access mechanism to handle huge information spaces within the limitations imposed by available screen space. To alleviate the problem, this thesis describes methods that help users to explore huge software systems. In particular, we apply dynamic browsing incorporating such details as an extra result box mechanism, plus pattern based searching to help users to handle large query results. Then the thesis introduces the algorithms we apply to generate the layouts. We propose the radial angle model to visualize the internal structures of rooted trees. Also we apply the spring model to visualize the external structures among rooted trees. Next, the thesis describes various animation methods we use to smooth the transitions, track the focus of exploration, clarify unexpected results, and illustrate complex operations. In addition, we modify traditional camera animation, and propose an animation timing scheme slow-in fast-out to exaggerate the reality. Next, the thesis describes a series of experiments we conducted to assess the effectiveness of the browsing, layout algorithm and animation techniques we implemented. Finally the thesis describes how we use the analysis of the experiment results to guide our future research. iii

4 TABLE OF CONTENTS Chapter One: Introduction Current Problems of Visualizing Large Software System Background Visualizing the Software Difficulties in Software Visualization Related Research Browsing Techniques Layout Algorithms Animation Techniques Motivation and Objectives Contributions of the Thesis The Organization of the Thesis... 6 Chapter Two: Browsing Techniques Literature Review Panning and Zooming Multi-viewer Focus and Context Browsing Tree-maps Viewer D Browsing Dynamic Interactive Browsing Searching and Browsing Summary Browsing Approach of TkSee Visualizer Browsing Requirements of TkSee Visualizer Browsing Approach of TkSee Visualizer Features of the Browsing Approach of TkSee Visualizer Interactive Exploration iv

5 2.3.2 Pattern Based Searching Exploration of Multiple Relationships among Multiple Entity Types Limits on the Number of Expanded Nodes on Screen Preserving the User s Mental Map Handling Large Query Results Panning Summary Chapter Three: The Layout Algorithm Literature Review of Related work Background of Graph Drawing The Spring Model Layout Algorithm The Sugiyama Layout Algorithm Radial Layout Incremental Layout Algorithms Layout Approach of TkSee Visualizer Layout Requirements of TkSee System Layout Algorithm of TkSee Visualizer Detailed Discussion of the Layout Algorithms of TkSee Visualizer The Radial Angle Model Modeling Rooted Trees Modeling by Heuristics Be Capable to Adjust the Layout Manually Layout Results Given by TkSee Visualizer Summary Chapter Four: Animation Functionality of Animation: Basic Rules of Animation design Parameters to Animate Animation Control v

6 4.2.3 Animation Path Animation Timing Frame Rate Psychological Factors Applying Principles of Cartoon Animation Animation Techniques Used in the Visualization of Software Camera Animation Layout Animation Shrinking/Growing Animation Problems in the Animation Usage Other Usage of Animation Animation Techniques Implemented in TkSee Visualizer Animation Design Layout Animation and Grow/Shrink Animation Intelligent Camera Animation Zero-result Animation Result-already-exist Animation Updating Animation Root Updating Animation Summary Chapter Five: The Architecture of TkSee Visualizer TkSee Visualizer Process Flow of TkSee Visualizer User Interface of TkSee Visualizer Symbol Indicator Start Exploration Toolbox Explore Toolbox Preferences Toolbox Animation Setup Toolbox Color Design vi

7 5.3.7 Other Interface Techniques Chapter Six: Evaluation Experiments Methodology Test Users Experiment Preparation Experiment Process Analysis of Experiment Results Browsing Techniques Layout Algorithms Animation Techniques User Interface The Default Value of System Parameters General Feedback of the Tool Summary Chapter Seven: Conclusion And Future Work Review of the Research Conclusions Limitations and Future Work References Appendices Appendix A: The Instructions of the Experiment Appendix B: Test Tasks Appendix C: Informed Consent Form vii

8 LIST OF FIGURES Figure 2-1: The extra result box Figure 2-2: The extra result box and pattern based searching: (1) Extra result box is not used; (2) The pattern based searching string is * ; (3) The pattern based searching string is get_d* Figure 3-1: The key concepts in radial angle model Figure 3-2: The angular assignment of child nodes Figure 3-3: Preserve the mental map Figure 3-4: Model unit Figure 3-5: When the neighbor gap angle is larger than the child node angle Figure 3-6: When the neighbor gap angle is smaller than the child node angle Figure 3-7: Root nodes are placed in the cross points of a grid Figure 3-8: The flow chart of whole modeling process Figure 3-9: A layout within a rooted tree Figure 3-10: A layout with multiple rooted trees Figure 4-1: The slow-in fast-out animation timing model Figure 4-2: Layout animation (1) Node find_plane_activity is clicked to expand (2) The child nodes of find_plane_activity are growing from find_plane_activity (3) The child nodes stop moving as they reach their destinations Figure 4-4: Intelligent camera animation (1) Node system_typ is clicked to expand (2) Intelligent camera animation is performed Figure 4-5: Zero-result animation (1) User does an exploration on node prio but there is no query result (2) The node prio grows up Figure 4-6: Result-already-exist animation (1) User does an exploration on node dcd_absent_str but the result has already existed on the screen (2) The node chopin is pushed away Figure 5-1: TkSee Visualizer Figure 5-2: The flowchart of the Tcl/Tk component Figure 5-3: The flow chart of the C++ core program Figure 5-5: The symbol indicator viii

9 Figure 5-6: The start exploration toolbox Figure 5-8: The preference toolbox Figure 5-9: The animation toolbox ix

10 LIST OF TABLES Table 6-1: Default value of system parameters Table 6-2: Users comments on the tool Table 6-3: The summary of the experiment results x

11 Chapter One: Introduction 1.1 Current Problems of Visualizing Large Software System Background In today s software industry, large software systems are everywhere. Some systems, particularly legacy software, may contain millions of lines of code. These large systems are extremely complex, so understanding the design, as well as changing and repairing the code in such systems are inordinately time consuming and costly. How to effectively maintain such large systems has been a big problem Visualizing the Software A good picture is worth ten thousand words, so one way to help software engineers to cope with complexity and to increase programmer productivity is through visualization. Because humans are inherently visual creatures, visual representations can make the process of understanding software easier. Software visualization (SV) is the use of pictures for looking at and understanding software systems. Depending on the nature of the software understanding problem, different aspects of software structure or behavior are visualized. For example, visualizing the structure of classes and relationships among the software entities to help users to understand the program. Visualizing the data structures of a program in an intelligent way can help the programmer to solve memory leaks. Algorithm animation is yet another example of software visualization that has proven to be very useful in teaching computer algorithms. 1

12 Besides the advantages of making programs easy to understand, software visualization also has other merits, such as being graphically appealing and being potentially easier for people to use than textual views, etc Difficulties in Software Visualization The big difficulty in software visualization (SV) is dealing with the huge graph needed to fully represent software versus the limited screen space available. Without effective display and access mechanisms, the information itself is useless. In an SV system, software entities are presented as nodes while the relations among the nodes are represented as arcs. When the number of nodes is or so, browsing the screen with panning and zooming is enough. When the number of nodes is more than that, special browsing techniques must be used. The various structures of software entities and the relations among them are presented to the user of a visualization tool using general layout algorithms. However, general layout algorithms may not 100% satisfy the requirements of some SV areas. Such as the entities in the graph drawing are represented as dots while in SV they are presented as nodes of some size. Some small changes can cause a big problem. 1.2 Related Research There are two key classes of techniques we need to examine to better understand approaches to SV. These are browsing techniques and layout algorithms Browsing Techniques The biggest problem with browsing techniques is dealing with the huge graph versus the small amount of screen space. A lot of research has been done to cope with the problem. There are three main static browsing techniques: 2

13 The multiple-viewer [25][3] offers two viewers. One viewer gives a global view while the other gives a view of local detail. The focus+context viewer [4][5][39] attempts to use distortion to display the whole graph in one viewer. The area near the focus is shown in detail while the area away from the focus is shown only in overview. 3D browsers [22][23][24] are another general approach to browsing. When the nodes number less than 3000, those algorithms work well. But when the system contains millions of nodes, dynamic browsing techniques [20][37] give a better solution. They dynamically generate small parts of the overall graph as the user is exploring on it. However, although dynamic browsing techniques can browse huge software systems, they nevertheless have difficulty handling huge query results (e.g. situations when the user clicks on an entity to show related entities and hundreds of related entities must be displayed) Layout Algorithms In SV, a few general layout algorithms are used to describe various structures and relationships in a program. For example, the Sugiyama layout algorithm [2] can be used to illustrate hierarchical relations among classes; and the spring model [1] can present non-hierarchical relationships among software entities. These graph drawing approaches are selected based on the properties of the graph type. They give readable layouts that obey aesthetic principles. In this thesis, a new layout algorithm, incremental layout, is created to work with a new dynamic browsing technique. These new techniques require a lot of analysis with regard 3

14 to both the browsing technique and the layout algorithm. One problem that must be considered is how to preserve the user s mental map during dynamic exploration Animation Techniques When users change the focus of the view while browsing the diagram, camera animation is activated to smooth the transition. Layout animation is conducted in the incremental layout to preserve mental map. In the incremental layout, animation is applied after every exploration. This gives the user an expectation: they are waiting for change after every click. If there is no change, they might think something is wrong. That is another mental issue we should also consider. 1.3 Motivation and Objectives According to the problems in understanding huge software systems, as well as the achievement of previous research in software visualization, we need to investigate how software visualization techniques can be specifically adapted to meet the requirements of program comprehension through visualization. Also, with our approaches we have to assess how much we can do to improve the performance of software visualization. The aim of my thesis is to find a good method to help users to explore very large software systems. We attempt to build a new software visualization tool that employs advanced methodologies and implements our approaches. The tool will be capable of browsing huge software systems and handling huge query results. It can explore multiple relationships among multiple software entities. The layout given by the tool should be clear and satisfies the aesthetics of graph. Furthermore, the user s mental map should be preserved during the exploration. 4

15 1.4 Contributions of the Thesis We employ dynamic browsing techniques to browse huge software systems. In the browser, a mechanism is proposed to handle large query results. We propose a layout algorithm that matches our dynamic browsing technique and satisfies the requirements of a browsing tool called TkSee Visualizer. We apply multiple animation techniques to smooth the layout transition, aiding the user in tracking objects and clarifying the exploration results. Finally, we design a series of experiments to evaluate our approaches and point out directions for future study. Our major contributions are: 1. We have implemented a prototype tool, TkSee Visualizer, to browse and manipulate huge software systems. 2. In TkSee Visualizer, we employ dynamic browsing techniques. These incorporate with pattern based searching and an extra result box to deal with the difficulties in exploring large query results. 3. We apply incremental layout to match our dynamic browsing techniques. Besides this, we modify the radial graph algorithm to describe the internal structure of rooted trees. Furthermore we use the spring model to provide the layout among the rooted trees. All together, this is our layout algorithm for TkSee Visualizer. 4. In TkSee Visualizer, we adapt animation techniques to preserve the mental map. Also, animation is used to clarify the exploration results even when there are no outcomes. In addition, we propose intelligent camera animation so as not to lose track of focus while using screen space more effectively. Furthermore, we propose a cartoon-style animation timing slow-in fast-out to make exploration more enjoyable and draw attention to it. 5. Several experiments are carried out to evaluate our techniques. 5

16 1.5 The Organization of the Thesis The rest of the thesis is organized as follows: Chapter 2 reviews various popular browsing techniques then describes the browsing technique we used in TkSee Visualizer. Chapter 3 summarizes layout algorithms used in SV tools. After that it explains our radial angle layout model. Chapter 4 introduces diverse animation techniques and animation design rules, then focuses on the animations we implemented in the TkSee Visualizer Chapter 5 describes the implementation of the prototype tool TkSee Visualizer Chapter 6 presents a series of experiment results to assess the effectiveness of our browsing approach, layout model and animation techniques. Chapter 7 sums up our research and points out future study directions. 6

17 Chapter Two: Browsing Techniques In this chapter, first we introduce several browsing techniques, highlighting their advantages and shortcomings. Then we point out the browsing requirements of TkSee Visualizer. Based on these requirements and properties of various browsing techniques, we propose the browsing approach of TkSee Visualizer. At the end we explain our approach in depth. 2.1 Literature Review Two key issues should be satisfied by any browsing technique: We must allow users to 1) browse information spaces, and 2) focus quickly on the items of interest. The key difficulty regarding these issues is to display a large information space on a limited size screen. Many browsing techniques have been proposed and implemented to tackle this difficulty Panning and Zooming One obvious solution is using common interface techniques of panning and zooming. When these are used, the software system is fully visualized into a graphical map. The user scrolls the window across the map to view portions of the map at one time. In addition to panning, the users can also zoom in or zoom out on special parts to view them more clearly. This method is simple and easy to use, but a drawback is that whenever a portion of the map is viewed in detail, large portions of the map are off-screen, and when the map is large, users cannot locate the place they are interested in quickly. 7

18 2.1.2 Multi-viewer Some browsing techniques present two viewers. One gives the global view of the graph, while the other gives the detail of the focus point on the global viewer. Bifocal [25] and Information Mural [1] are the examples of this concept. Information Mural [3] is a 2D information visualization tool. It uses visual attributes such as grayscale shading, intensity, color, and pixel size, along with anti-aliased compression techniques to compress a large information space to fit entirely within a display window. Besides the global viewer, Information Mural also supplies the second viewer to display detailed information of the focus area in the global viewer. The graph in the detail viewer is updated as the focus moves around the global viewer. Multi-viewer has the advantage of presenting both local detail and overall structure. But it requires extra screen space and forces users to mentally integrate the two views. On the local detail viewer, the part adjacent to the enlarged area is not visible at all Focus and Context Browsing Fisheye view [4][5] is a widely used focus and context browsing technique. It presents both local detail and global context in one view without switching among multiple viewers. The places near the focus are shown in detail while remote regions are shown in successively less detail. As the user moves the focus, the graph constantly changes to keep the area near the focus enlarged. The fisheye view is implemented in the software visualization tool Shrimp [32] as one of its browsing techniques. One drawback of fisheye view is that some typical diagrams will change to very weird shapes so as to be unrecognizable after the fisheye view transformation. It also requires 8

19 the diagram of the system to be predefined before viewing. When the system is huge it is therefore impractical. Another well-known focus and context browsing technique is Hyperbolic Browser [39] which attempts to take advantage of the properties of hyperbolic geometry to visualize large hierarchies. It can display up to 10 times as many nodes as conventional tree browsers. But the hyperbolic browser is weak in giving the directionality of links and also the location of a node in the overall space Tree-maps Viewer Johnson and Shneiderman proposed a space filling tree map approach to visualize hierarchical information structures [28]. In tree-maps, a hierarchy is drawn as a set of nested boxes in which each node is presented as a rectangular region composed of the rectangular regions that represent its children. It attempts to organize nodes all over the screen to increase the usage of screen space. Treeviz [47] for the Macintosh is an implementation of the tree-maps concept. Each of the nodes can be colored dependent upon the type of the file, and the lightness can indicate age etc. The user can click on these rectangles to either get more information or to perform options such as delete etc. The main advantage of tree-maps is its ability to visualize large hierarchies. It is claimed that nodes, each with an area of 100 pixels, can be displayed in the screen of 640 by 480 pixels. While a standard 2-D hierarchy browser can typically display around 100 nodes under that circumstance. The other advantage is its ability to emphasize some attribute of the data, for example size of files, by the size of the rectangular regions. However tree-maps tend to obscure the hierarchical structure and result in the user losing the context while focusing on one part of a hierarchy. 9

20 D Browsing Another attempt to maximize the effective use of the available screen space is threedimensional visualization techniques. The best-known examples are The Perspective Wall [22] and Cone Trees [23]. The Perspective Wall visualizes linear information such as time, on a folded wall with a center panel for showing detail and two perspective panels for displaying context. Once a note is selected on a perspective panel, the wall scrolls to bring the panel that has the focus node to the front. The trade-off between detail and context can be adjusted by manipulating the degree of folding, the width of the detail panel, and the angle of the field of view. Cone Trees embed the tree in a three dimensional space. The embedded tree has joints. When a level in the hierarchy is expanded, cones are rotated to bring the selected data items to the front of the display. The expanded new contents are arranged around the bottom of the inverted cone. The use of three dimensions provides more space freedom in graph layout than 2D. Also it gives users a better "feel" for the structure of the information space [40]. But such displays still suffer from a lack of screen space along with the burden of 3D visualization. For Cone Trees, trees with more than approximately 1000 nodes are difficult to manipulate [40] Dynamic Interactive Browsing The browsing techniques that require the predefinition of the overall geometrical representation of the graph before browsing are called static browsing techniques. Panning and zooming, multi-viewer, tree map, etc, and all the browsing techniques we have discussed before are static browsing techniques. Contrary to static browsing 10

21 techniques, dynamic browsing techniques do not predefine the whole graph before users browse through it. They build the visualization incrementally as the user is exploring the graph. OFDAV [37] and NicheWorks [20] are implementations of the dynamic browsing technique. In dynamic browsing, the graph updates after each valid exploration action. The change between consecutive updates should be small enough; otherwise the changes will confuse the user. This problem is called preserving the user s mental map of the diagram [14]. Most dynamic browsing systems apply both the incremental layout algorithm and animation to solve this problem. Another problem is how to save screen space while keeping browsing effective. M. L. Huang et al [37] proposed a deletion policy with two strategies to solve the problem. One of the strategies is called FIFO. They push every expand node into a Queue. The least recently used focus node, the first node in the queue, is deleted when the Queue is full. The other is called Largest K-distance rule. The node that has the largest graphtheoretical distance from the new focus node is deleted when the Queue is full. Static dynamic browsing can effectively deal with graphs of moderately large size (with hundreds or thousands of nodes); they do not handle huge graphs (with millions of nodes). Comparing with static dynamic browsing, dynamic interactive browsing techniques are better techniques for browsing huge software systems since the size of the system does no matter to it. Dynamic browsing is a new approach that still needs a lot of effort to be perfect. They currently are not able to give clear architectural views of a software system Searching and Browsing According to S. E. Sim [33], searching is planned activity with a specific goal, whereas browsing is more of an explorative strategy with no fixed endpoint. Browsing and 11

22 searching complement each other. The shortcomings of browsing are matched by the strengths of the search. An information space can only be fully utilized when both navigation styles, browsing and searching, are available. [33] If a visualization tool combines with searching, it will be a more powerful tool Summary In this section, we described the most popular browsing techniques, panning and zooming, multi-viewer, focus and context browsing, tree-maps, 3D browsing and dynamic interactive browsing. So far, dynamic interactive browsing techniques are the best technique to browse a huge software system. If we combine searching with browsing, we can offer users a more effective browser. 2.2 Browsing Approach of TkSee Visualizer Our browsing approach should meet the browsing requirements of as defined for the TkSee system [7,48] Browsing Requirements of TkSee Visualizer (1) The TkSee system deals with legacy systems that have millions of lines of code. The Visualizer therefore should handle a huge amount of information. (2) The TkSee system can explore multiple relationships among multiple software entities. The Visualizer should also provide this feature. (3) In TkSee, a single query during the course of browsing can result in thousands of items to display. The Visualizer should handle therefore huge exploration results. Although these requirements are given by TkSee, they are limitations also found in other tools. 12

23 2.2.2 Browsing Approach of TkSee Visualizer We adopt the dynamic browsing technique as our browsing technique of TkSee Visualizer to help users to navigate huge software systems. In addition, we propose an extra result box mechanism combining with pattern based searching to handle large query results Handle Huge Information We do not display the whole software system on the screen at a time. Starting from the software entities the user defines, we incrementally update the graph as the user clicks a node to do exploration with selected parameters. Like the OFDAV[37] system, we apply the incremental layout algorithm and animations to preserve mental map. We will discuss the incremental layout algorithm in Chapter three and animation in Chapter four. Again like the OFDAV system, we drop nodes when too many nodes are displayed on the screen to prevent clutter. We use FIFO as our deletion policy. More detailed discussions are given in the next section Explore Multiple Relationships among Multiple Software Entity Types TkSee offers four exploration relationships. They are what nodes are defined by node A, which node defines node A, what nodes are referred to by node A and which nodes refer to node A. Also four software entity types exist in the TkSee. They are files, routines, data and type. Every exploration activity is specified by particular exploration relationship and software entity type that are to be displayed. We apply colors to distinguish different relationships and software entities. More detailed discussions are given in the next section. 13

24 Handle Large Query Results We propose a mechanism called ERBS to deal with huge query results. It is composed of extra result box browsing technique and pattern based searching. If a query gives a large number of results, we show the maximum displayable results and hide the rest in a box. The box can be treated as a special node. The remaining results update those shown nodes when user clicks the box. We give the number range of the query result on the box. The user can append a name pattern upon the query result to get more precise results. More detailed discussions are given in the next section. Next Page (1-10) (Total child number:33) Figure 2-1: The extra result box 2.3 Features of the Browsing Approach of TkSee Visualizer In TkSee Visualizer, exploration is done interactively. Searching can be appended with the exploration to refine the results. Users can explore multiple relationships among multiple entity types. To preserve the space, the expanded node number is limited to less than a certain number. The user s mental map is preserved and users can handle large query results with the help of extra result box and pattern based searching. 14

25 2.3.1 Interactive Exploration In TkSee Visualizer, an exploration is activated when the user clicks on a node; the exploration is specified as a query. The mechanism to create queries is well designed that users can conduct their explorations easily and effectively. The Visualizer offers small sets of buttons to help users to create the query (see Fig 5-7). They are four exploration relation buttons and four result entity type buttons that cover all the explanation relationships and result entity types defined in TkSee. The query language used in TkSee is TA [7]. A TA query can be discomposed into the subject of action, action type and the object of the action. The clicked node is the subject of the exploration action. Four exploration relationships radio buttons define the action type. The entity type radio buttons describe the result of the query. When the user clicks on a node, a query is specified with the clicked node id, the selected exploration relationship and the selected result entity type Pattern Based Searching In TkSee Visualizer, a pattern based searching function supplied by TkSee can be appended to the exploration to refine the query results. In TkSee Visualizer, the first exploration is ready to start after user inputs the name or name pattern of the first nodes. Visualizer offers an edit bar to define the name of the first node. It accepts a grep-like regular expression. The Visualizer also offers a set of radio buttons to help users to define the entity type of the first node. When the user clicks the Start Exploration button beside the edit bar, the search string which contains the name and the entity type is created and is sent to TkSee as a query. A node or a few nodes that satisfy the search string will be shown on the screen. 15

26 Another way to use searching is to refine the query results during the exploration. Once user gets the exploration results, he or she can append a search string on the results as a filter to narrow down the results. This helps the user to handle the large exploration results. We will discuss this in detail in section Exploration of Multiple Relationships among Multiple Entity Types The TkSee Visualizer can explore multiple relationships on a node. The node can be file, routine, data and type. And results given by multiple dependencies can be added together on a node. We use different colors and arrow directions to distinguish diverse exploration relationships and entity types. According to the meaning of the exploration relationships, we separate relationships into two groups: define ( defines and is defined by ) and refer ( refers and is referred by ). We assign one color to each of the group. And we use two arrow directions to distinguish defines from is defined by, and refers from is referred by. Therefore six colors have to be chosen to represent four software entity types and two association relationships. We will discuss the color design in depth in Chapter five Limits on the Number of Expanded Nodes on Screen The size of the screen is limited. While more and more nodes are expanded, the visibility of the diagram decreases and the display speed slows down. We have to make a rule to keep a reasonable number of nodes on the screen so that the user can have enough information to do the exploration work, while still having a clear view of a significant part of the system, and in addition having the display update at high speed. 16

27 We decide to adopt the FIFO deletion policy proposed by [37]. A queue is created to keep track of all the expanded nodes on the screen. Once a node is clicked to expand it, it is added to the queue. Once the node is clicked to close it, it is removed from that queue. When the number of expanded nodes on the screen exceeds the maximum expanded node number, the length of the queue, we drop the oldest node in the queue. In the experiment discussed later in this thesis, we show how we have maintained a reasonable default maximum number of expanded nodes. Before exploration, users can change the number according to their preference Preserving the User s Mental Map Compared to static browsing, dynamic browsing may show a lot of changes during the exploration. Some nodes will disappear while some nodes will appear. Users may have difficulties tracing the changes. This is called mental map problem. In TkSee Visualizer, the incremental layout algorithm and animations are applied to help preserve the user s mental map. The incremental layout algorithm can give continuous frames which contain small changes. Layout animation smoothes the layout transitions that help the user to focus on the most recent node user has interacted with. Camera animation helps the user not to lose the track on the focus node. We will give more detailed discussion on the user s mental map and the incremental layout algorithm in the Chapter three and animations in the Chapter four. 17

28 2.3.6 Handling Large Query Results Problems in Browsing Large Exploration Results Very often, the query returns a large number of query results. If we display all of the results on screen, they may overlap each other so as to be invisible since the screen space is very limited. Also, it will take a long time to display all of them on the screen so users will lose their patience. Actually, the user has no interest in viewing all the results. They are only interested in a few nodes Our Solutions to Browse a Large Number of Exploration Results In TkSee Visualizer, we decide to show only part of the query results if they exceed a certain number, the maximum displayable child number. We design a special box called the extra result box. This looks like a special kind of node. When the query result exceeds the maximum displayable child number, we show the maximum displayable child number of query results along with the extra result box pretending that the remaining query results are hiding inside the box. When a user clicks the box, the current shown query results are replaced with the remaining query results from the box. The user can browse all the query results by keeping clicking the box. On the extra result box, we give the range of the query results (e.g of 50, >100). According to the number, users can know the approximate number of the query results. This helps user to know where they are when they browse the query results. It also helps the user to make the decision whether to refine the specification of the query to decrease the number of exploration results. The Visualizer also offers an exploration search bar to allow user to do search within the query results. Normally the search string is set to * which accepts all query results as 18

29 the search results. When the extra result box is shown after the exploration, the user can specify the search string to filter out the results they are concern with from the complete set of results. An experiment we will discuss later is designed to determine the reasonable default maximum displayable child number on the screen at a time. Also our system allows users to change the number according to their preference before exploration. (1) (2) 19

30 (3) Figure 2-2: The extra result box and pattern based searching: (1) Extra result box is not used; (2) The pattern based searching string is * ; (3) The pattern based searching string is get_d* Panning Panning is also supported in TkSee Visualizer. Users can drag the background around to view the whole diagram. 2.4 Summary After analyzing the diverse browsing techniques, we choose to employ dynamic interactive browsing techniques in TkSee Visualizer to browse huge software systems. The tool supports interactive exploration. It can explore multiple relationships on various software entity types. A FIFO deletion policy is used to limit the expanded node number on the screen. Panning is also supported by TkSee Visualizer. An incremental layout algorithm and animations are applied to preserve the mental map. In particular, with the help of pattern based searching function existing in the TkSee and the extra result box mechanism we proposed, Visualizer can handle large exploration results. 20

31 Chapter Three: The Layout Algorithm In this chapter, first we introduce the layout algorithms that are widely used in software visualization. Then we list the layout requirements of TkSee. Based on these requirements, we choose the best layout algorithm for our system and modify it to serve our system better. At the end of this chapter, we give some layout results created by our layout algorithm. 3.1 Literature Review of Related work The layout algorithm is as important an issue in software visualization as the browsing technique. A lot of layout algorithms for different graph types have been developed successfully. Among these algorithms, the tree layout [41], spring model [1], Sugiyama layout [2], radial drawing [44] and incremental layout [37,19] are widely used in software visualization Background of Graph Drawing The basic graph drawing problem can be described as this: given a set of nodes with a set of relations (edges), calculate the position of the nodes and the curve to be drawn for each edge under certain criteria. In order to understand a layout algorithm well, we have to know some basic graph types and the criteria of the graph drawing Types of Graph Drawing Layout algorithms can be categorized with respect to the type of layout they generate. There are three main approaches to how edges can be drawn: Polyline drawing: each edge of the graph is drawn as a polyline chain. 21

32 Straight-line drawing: each edge of the graph is drawn as a straight-line segment. Orthogonal drawing: each edge of the graph is drawn as polyline chain of alternating horizontal and vertical segments. In addition, some other constraints can be placed on the drawing method: Grid drawing: vertices, crossings, and edge bends have integer coordinates. Planar drawing: no two edges cross. Upward (resp. downward) drawing: for acyclic digraphs, each edge is drawn as a curve monotonically nondecreasing (resp. nonincreasing) in the vertical direction. In this thesis, we are primarily interested in directed graphs (also called digraphs): each edge is directed. A directed graph is acyclic if it has no directed cycles. More specifically, we are interested in rooted trees: Rooted Tree: a tree in which one node is designated as the root. [42] Drawing Criteria There are two aspects to the drawing criteria. First, the drawing should satisfy the constraints imposed by the definition of properties and classification of layouts of the applied graph types. Different type of graphs may require different constraints. For example, the layout of the planar graph should avoid 22

33 edge-crossings, while a grid layout should position nodes at points with integer coordinates. Second, the layouts should be pleasing and readable satisfying general aesthetic rules. For example, nodes and edges must be evenly distributed, edges should have similar lengths, edges should, where possible, be straight lines, isomorphic sub-structures should be displayed in the same manner, edge-crossings should be kept to a minimum, etc. According to Purchase s usability study [44], reducing the crossings is the most important aesthetic The Spring Model Layout Algorithm (1) Basics of The Spring Model: The spring layout [1], also called the force-directed method, is a method for creating straight-line drawings; directionality of the graph is not considered. The spring model treats the data layout system as a mechanical system, in which vertices are replaced with steel rings and edges are replaced with springs. The rings are attracted by the springs if they are far apart or repelled if they are too close. All springs in the system have the same length so the layout is symmetrical to satisfy aesthetics. In the spring model, the linear spring force exerted on a ring in Hookes Law is replaced with a logarithmic force since the traditional force is too strong for the data layout system: C1*log(d/C2) (formula 2-1) Where d is the length of the spring, and C1 and C2 are constants. When d=c2, there is no force exerted on the string. Thus C2 is the recommended distance between two nodes. 23

34 Also an inverse square law force is applied in the spring model. It is exerted on the nonrelated vertices to repel then from each other: C3/sqr(d) (formula 2-2) Where C3 is a constant and d is the distance between the vertices. The spring model is heuristic. The algorithm first places the vertices in random locations. Then it calculates the forces on the vertices and moves them toward their stable positions. This operation is repeated a few times until the whole system reaches its minimal energy state or it reaches its maximum calculation time. (2) Properties of the Spring Model: The spring model can give a good layout for undirected graphs. The software visualization tool Shrimp [32] is one of many tools that use this model as one of its layout algorithms. However, the model can be rather slow. Frick s study [45] shows that the workload of the method is O(N 3 ) where N is the number of the nodes in the graph. Moreover, the spring model is highly unpredictable. The layout of almost identical graphs might be very different. Furthermore, vertices, in the spring model, are abstract dots without width and height. When the spring model is used in software visualization, the dots have to be replaced by area-consuming nodes. The size and other geometry features of the nodes should be considered to avoid overlapping in the modeling The Sugiyama Layout Algorithm Sugiyama et al. [2] presented a comprehensive approach to drawing hierarchies. The basic approach is to first assign a layer number to each node according to the relations among the nodes. Then place nodes of a given layer in a certain order to reduce crossings. It can be described as the following four steps: 24

35 Step1 Assign vertices to the layers according to a given set of directed pairwise relations among elements of a system. Arcs are directed downward and vertices are distributed uniformly. If the hierarchy contains long span edges such that some vertices end up in noncontiguous layers, dummy vertices and edges are added in the skipped layers to conform to a proper hierarchy. Step2 Employ the barycentric method (BC) to handle the crossing problem of each twolayer hierarchy. The basic idea of BC is to assign the x-coordinate of each vertex with the barycenter (average) of the x-coordinates of its neighbors (in the other layer) so that the amount of crossing is reduced. A multiple-layer hierarchy can be also worked out with the scheme. First, one separates the whole hierarchy into a few consecutive two-layer hierarchies. Then employs BC to reduce the crossings within each two-layer hierarchy. Then the whole system is done. Step3 Employ the priority layout method (PR) to assign horizontal positions of vertices to reduce the number of bends. A priority number, the connectivity of a vertex to its neighbors, is assigned to each vertex. The vertex with high priority determines its position first. The highest priority number is given to a dummy vertex; its x-coordinate will use the same x-coordinate as its parents. The normal vertices are positioned with their barycenters. The adjustment should preserve the ordering established in the crossing reduction step. If two vertices have the same barycenter, the algorithm moves the one out of the way that has the lower priority. Step 4: display the layout on the terminal. Unfortunately, the Sugiyama algorithm tends to have very poor stability. A small logical change in the graph results in a large change in relative positions of nodes in the drawing. 25

36 3.1.4 Radial Layout A tree is a connected acyclic graph. Within the tree layout category, a variety of algorithms have been invented. These include tree [41], H-tree [43], radial drawing [44], cone tree [23] and tree-maps [28], etc. A classical tree layout will position children nodes below their common ancestor. Radial drawing is a variation of a layered drawing where the root of the tree is placed at the origin and layers are concentric circles centered at the origin. A subtree is then laid out over a sector of the circle. Each node is allocated a sub-sector within the sector assigned to its parent. The size of the sector is proportional to the angular width of that node s subtree. When all the nodes are the same size, the angular width of a node s subtree is simply proportional to the number of leaf nodes among its descendants. The algorithm ensures that two adjacent sectors do not overlap. The radial layout is predictable. However, it gives a less clear view for indicating where the root of the tree is and thus it is not a good method to visualize a hierarchy Incremental Layout Algorithms In the dynamic browsing system, the system displays only a small portion of the full graph; this portion is called a logical frames. Exploration means to move the logical frame along some trajectory to display other parts of the graph. In other words, nodes are added to the diagram or discarded from the screen during the exploration. Compared to static visualizing of a graph, some specific considerations have to be taken to reposition the changed graph. A particular class of layout algorithms, the incremental layout algorithms, has therefore been developed to deal with the requirements. 26

37 The Criteria of the Incremental Algorithm S. C. North [19] summarized three criteria for incremental updating of graphs. They are as follows, listed by the order of the importance: (1) Consistency: adherence to layout style rules of the graph. For example, a tree should always look like a tree during any period of exploration. (2) Stability: make the fewest changes as possible between successive diagrams to preserve the mental map. (3) Readability: the diagrams should satisfy the usual readability criteria for drawing of graphs. They should be pleasing and easy to read The Mental Map Much research has been done to characterize stability between layouts. Misue et al did a lot of work on how people perceive and remember the structure of diagrams. In his paper [14], he discussed what he called the mental map and gave precise rules to reserve it: (1) Orthogonal ordering: the direction of each pair of nodes should be preserved after a layout adjustment (2) Proximity: nodes that are close together before the adjustment should remain close together after the adjustment. (3) Topology: graphical objects inside a region should stay inside that region after a layout adjustment Previous Work Some incremental layout algorithms have been implemented successfully in SV systems. For different graph types, the trajectory to generate new logical frames might be different. Here are examples: 27

38 (1) DynaDAG [19]: DynaDAG is a heuristic algorithm for incremental layout of hierarchies that satisfies proximity and topological stability. It attempts to split a layout adjustment into a few logical steps that incorporate proximity and topological stability. For example, when inserting a node, DynaDAG first moves the node downward along the same X coordinate to the next layer. Then adjusts its Y coordinate to left or to right by the barycenter value. (2) OFDAV: online force-directed animated visualization [37] OFDAV is a system for assisting web document navigation. It modified the forcedirected graph drawing algorithm to minimize the overlaps among the neighborhoods and puts the focus nodes in a straight line to indicate the direction of the exploration. In addition, OFDAV produces a continuous sequence of layouts that satisfy the usual readability drawing criteria. It uses these sequences as in betweening animation frames to smooth the transition between key frames in order to preserve the mental map. 3.2 Layout Approach of TkSee Visualizer In this section, first we summarize the requirements of TkSee Visualizer. Based on these requirements, we choose a general layout algorithm as the basic layout algorithm of TkSee Visualizer. If it is necessary, we modify it a little to make it work better for our system. This is explained below Layout Requirements of TkSee System We summarize the layout requirements for TkSee Visualizer in six points: 28