3D IDE Metaphor Balloons
From VitalWiki
Contents |
Balloon Metaphor
Our proposed tool will use an abstract balloon metaphor to visualize a software project. The balloon metaphor is chosen to be the structure visualization of a software project because of its flexible properties in real-world. Balloons have many different shapes, they can float around in both confined and open spaces. Meanwhile, balloons can contain other balloons recursively, and have attachments (o.e., items can be attached to a balloon through a thread). Balloons can also have properties like color, texture, size, transparency, and animation (e;.g. rotation and movement). These properties can reflect properties of the folder structure in a real-world software project, especially a Java project. In a Java project, each class belongs to a package that is a series of nested folders. And artifacts (i.e. folders and files) in the software project have many different properties, including size, type, time of last modification, number of revisions, list of people who are modifying the file. We use a balloon to represent an artifact (a file or a folder) in a software project. Then we map each property of the balloon to a property of the artifact.
Our tool visualizes a folder as a cube-shaped balloon, with all of its files and sub-folders placed inside it. Each of these sub-folders in turn will contain its sub-folders and the files belong to it. We use a sphere-shaped balloon to visualize each Java file in a project. For any other types of files (non-Java files), we use torus to represent.
The balloon size is used to differentiate files or folders of different levels. Since a folder can be enlarged as developers browse through the code structure, we use balloon colors t o indicate whether a file or folder is enlarged or not. In the normal state, a folder has purple color, and a file has yellow color. When in the enlarged state, folders are colored blue and files are colored orange. We also put the name of a file as floating text above its visualization.
When a developer opens a file in his local workspace, the corresponding visualization of that file will be rotated. The rotation speed will increase if there are more developers opening that file. When a file is changed, and committed to the repository, an icon representing the person woh has checked-in the latest version will be placed inside the balloon visualization of that file. Moreover, the balloon texture will change indicating how many lines of code has been modified in that check-in.
Originally, each visualization object will be somewhat transparent. When a developer clicks on the folder visualization, it will be flattened and its shape changes to an opaque floor (see figures). This flat floor status also allows developers to browse to each of the parent's sub-folders, and clicking on any of the sub-folder will enlarge its size, hence help the developer browse deeper into the source code structure.
One of the features that our visualization tool provides is to high-light any files that a developer is working on. Each file visualization (in the form of a sphere) will be rotated if developers have opened it in the IDE. Through the animation, developers can easily tell the popularity of a file, and then decide whether or not to make changes to that file (since changes may incur conflicts to other developers who have opened that file).
Developers can also manually highlight any file that they are interested in by changing the color of the corresponding sphere representing that file. For instance, in order to highlight files related to a bug, the developers can manually change the color of their corresponding spheres. By doing this, developers can discuss solutions for a bug, and also alert and prevent others from modifying a potential buggy source code until the bug is fixed. In the future, we will provide an integrated bug tracking feature in our system that can automate this highlighting process.
Mapping
| Balloon property | Software project artifact property |
|---|---|
| Balloon shape | The type of an artifact: cube for a folder, shpere for a Java file, torus for a non-Java file |
| Balloon size | The depth of an artifact: files at the same depth will have the same size (unless their parent gets enlarged) |
| Balloon color | The state of whethere an artifact is enlarged or not. If a folder is not enlarged, the folder is in purple, while the files inside it are in yellow; otherwise, the folder is in blue, while the files inside it are in orange |
| Text floating above balloon | The name of an artifact |
| Icon placed inside a balloon | The developer who has checked-in the latest version of that artifact |
| Balloon rotation | A file is being opened in local workspaces by developers. Speed of rotation indicates the number of developers who has opened this file in their local workspace. The higher the speed is, the more developers have opened the file |
| Balloon texture | The texture represents how many lines of code were changed in the latest check-in |
Screenshots & video
Video
Screenshots of a simple structured project
 Figure 1: Example Project: |
Screenshots of visualizing the FreeMind project
 Figure 1: Project FreeMind: |
 Figure 2: Project FreeMind: |
 Figure 3: Project FreeMind: |
 Figure 4: Project FreeMind: |
Screenshots of visualizing the jEdit project
 Figure 1: Project jEdit: |
 Figure 2: Project jEdit: |
Implementation
Finished Tasks
- [Implementation][Interaction] Animated the currently selected files and the currently opened files , if there are more than 1 person viewing the file ==> animate faster
- [MetaphorMapping] list the properties & match
- file Type == shape sphere for Java files, torus for non-Java files, cube for a folder
- file name == object's text
- how many coders are working on == speed of animation
- opening = animated
- [Scenarios] Visualization of a real-world project (e.g. FreeMind, JEdit)
- FreeMind file/folder structure: the /generated/ folder has a lot of files in the same sub-folder (100+ files), freemind/modes/ has 30 files, freemind/modes/actions has 54 files, the rest of the folder has reasonable number of files (< 27).
- jEdit file/folder structure: around 500+ files & folders were successfully visualized in SL.
- [ImplementationIssue] Resolved Issue: current implementation in LSL can not handle more than around 60-70 files in total, should switch to use an external database to store node (file/balloon) information.
- [ImplementationIssue] Resolved implementation of the balloon set a timer to check its location, animation speed, parent's information, if we have too many balloons, hopefully Second Life server won't complain?
- [Senarios] Realworld projects: FreeMind, jEdit, ArgoUML, gaim, Scrab. Picked FreeMind & jEdit.
- selected files: floating ; or grow and shrink continuously; rotation (from very light to very dark color to get attention)color texture rotation texture
- [Implementation][Interaction] backward communication from SL -> eclipse. open/close == clicking on the balloon that corresponds to a file will stop/start its animation
- Add functionalities for: enlarging/shrinking balloons;
- Include the idea of a Heat map (http://en.wikipedia.org/wiki/Heat_map, http://www.mayarealities.com/fedtalk.php)
- [MetaphorMapping] Highlight active artifacts (i.e. the artifacts that are being modified == increasing the size of balloons representing the active artifacts depending on how many developers are working on them. The size of these balloons will be returned to the regular size if developers have finished modifications on these artifacts and checked-in the changes to the repository.<b>Balloon size for a file can be fixed (to a small value), as developers modifying the file, the balloon size can increase up to the size of a folder at the same depth.
Milestones (for the video submission)
| Date range | Tasks |
|---|---|
| 06/17 to 06/23 | |
| 06/24 to 06/30 | Finish |
| 07/01 to 07/07 | Finish |
| 07/08 to 07/14 | Finish |
Milestones (for the CHI paper submission)
| Date range | Tasks |
|---|---|
| 07/29 to 08/04 | Left-over from previous phase |
| 08/05 to 08/11 | Finish [#12] |
| 08/12 to 08/18 | Wrap-up |
| 08/19 to 08/25 | Finish [#16]. Work on [#17], [#18]. |
| 08/26 to 09/01 | Finish [#17], [#18]. |
Sorted To-Do List
0. Document (especially: cases for changeListener & subscriberListener).
1. In side each balloon, there are 2 icons to indicate:
1a. who checked in the file most recently
1b. who checked in the file most often
2. [Implementation] Support multiple developers.
3. [Implementation] Support actions/events related to the repository.
4. [Ignore] size to represent the number of revisions (range)
5. Fix the color formula
6. Use color to represent how recent the file has been checked-in (range: one hour, one day, one week, one month, one quarter, one year, more than one year)
7a. Incorporate MyLyn plug-in (for Eclipse) with our visualization tool.
7b. Alternative to MyLyn, manually mark the visualization of bug-related files from Eclipse (instead of manually changing its color from SL)
8. Find scenarios for the video.
9. Record the video to submit.
10. Active artifacts & active base.
10a. Visualize active artifacts (each balloon in the same size represents each active artifact) in a separate base/floor.
10b. Inside each active artifact, there will be an icon for each developer. Shape of the developer's icon represents who makes the change, the color of the icon represents the type of the change such as locally modify, locally add, locally delete, etc.)
11. Investigate how to hide objects locally in SL viewer (not on the SL server) so that we can use a filter on the visualization to create a 3D personal view (instead of a 2D HUD).
12. backward communication from SL -> eclipse. Have a button in the history information floater and activity information floater to "Open" the file.
13. How can the developer get detail information ( # of changes, time of changes, size of changes, etc.) for a particular file?
13a. When the developer clicks a balloon in the history base, the details of the corresponding artifact (number of revision, the author of the latest version, etc.) will be shown in a pop-up floater.
13b. When the developer clicks a balloon in the active base, the details of local changes for that artifact (who has made the local change, its type, its size, etc) will be shown in a pop-up floater
14. Enlarge the balloon at which the developers are interested (we choose 14b for implementation)
14a. similar to the Time Machine's sidebar: avatar moving around ----> the particular balloon becomes bigger, other balloons disappear or become opaque ==> to see more details of each balloon
14b. When only one balloon matches the criteria defined by the developer using the filter, a floater will pop up in front of the developer showing the detail information of that balloon.
15. Solve the manual import problem: right now only projects with /src/ folder will be visualized. Check the project: if it has /src/, do it the normal way. If not, visualize all the folders + java files, and then remove empty folders.
16. Find a scenario with a real project.
17. Record a video for the scenario.
18. Write the paper for CHI.
Possible improvements
- [MetaphorMapping] list the properties & match
- file size == balloon ratio
- ? = moving on the other directions
- ? = thread
- ? = thread color
- shows roughly how many subfolders/files are inside a particular folder == balloon texture?
- the following should be in the personal view (HUD)
- size of each change == balloon icon partially filled with other color?
- type of each change == balloon icon color/texture (an X stands for a deleted, + for added, ? for conflicts, )
- [Implementation][Interaction] add the thread to the balloon, make it more realistic
