1. Visualization of Fine-Grained Code Change History YoungSeok Yoon Institute for Software Research (ISR) Brad A. Myers Human-Computer Interaction Institute (HCII) Sebon Koo Human-Computer Interaction Institute (HCII) School of Computer Science Carnegie Mellon University Presented at VL/HCC 2013 September 18th, 2013

2. MOTIVATING EXAMPLE VL/HCC 2013 2 3. Sketch of the Desired UI VL/HCC 2013 3 GUI Developer 4. Initial Code private JPanel createButtons() { JPanel buttonPanel = new JPanel(); JButton button1 = new JButton("Button 1"); JButton button2 = new JButton("Button 2"); JButton button3 = new JButton("Button 3"); buttonPanel.add(button1); buttonPanel.add(button2); buttonPanel.add(button3); return buttonPanel; } VL/HCC 2013 4 5. First Attempt: GridBagLayout private JPanel createButtons() { JPanel buttonPanel = new JPanel(); buttonPanel.setLayout(new GridBagLayout()); GridBagConstraints c = new GridBagConstraints(); // c.fill will make all buttons the same width c.fill = GridBagConstraints.HORIZONTAL; c.gridx = 0; c.gridy = 0; JButton button1 = new JButton("Button 1"); JButton button2 = new JButton("Button 2"); JButton button3 = new JButton("Button 3"); buttonPanel.add(button1); buttonPanel.add(button2); buttonPanel.add(button3); return buttonPanel; } VL/HCC 2013 5 The code already looks too complicated for the simple vertical layout! Remove this code with Undo 6. Second Attempt: BoxLayout private JPanel createButtons() { JPanel buttonPanel = new JPanel(); buttonPanel.setLayout(new BoxLayout( buttonPanel, BoxLayout.Y_AXIS)); JButton button1 = new JButton("Button 1"); JButton button2 = new JButton("Button 2"); JButton button3 = new JButton("Button 3"); buttonPanel.add(button1); buttonPanel.add(button2); buttonPanel.add(button3); return buttonPanel; } VL/HCC 2013 6 Looks promising + much simpler code! 7. Additional Changes private JPanel createButtons() { JPanel buttonPanel = new JPanel(); buttonPanel.setLayout(new BoxLayout( buttonPanel, BoxLayout.Y_AXIS)); JButton buttonOrange = new JButton(Orange"); buttonOrange.setBackground(Color.orange); JButton button2 = new JButton("Button 2"); JButton button3 = new JButton("Button 3"); buttonPanel.add(buttonOrange); buttonPanel.add(button2); buttonPanel.add(button3); return buttonPanel; } VL/HCC 2013 7 8. However BoxLayout does not support spacing between GUI elements He wants to restore the GridBagLayout code, but its gone! VL/HCC 2013 8 9. Undo command cant bring this code back private JPanel createButtons() { JPanel buttonPanel = new JPanel(); buttonPanel.setLayout(new GridBagLayout()); GridBagConstraints c = new GridBagConstraints(); // c.fill will make all buttons the same width c.fill = GridBagConstraints.HORIZONTAL; c.gridx = 0; c.gridy = 0; JButton button1 = new JButton("Button 1"); JButton button2 = new JButton("Button 2"); JButton button3 = new JButton("Button 3"); buttonPanel.add(button1); buttonPanel.add(button2); buttonPanel.add(button3); return buttonPanel; } VL/HCC 2013 9 Removed this code with Undo 10. Undo command cant bring this code back private JPanel createButtons() { JPanel buttonPanel = new JPanel(); buttonPanel.setLayout(new BoxLayout( buttonPanel, BoxLayout.Y_AXIS)); JButton buttonOrange = new JButton(Orange"); buttonOrange.setBackground(Color.orange); JButton button2 = new JButton("Button 2"); JButton button3 = new JButton("Button 3"); buttonPanel.add(buttonOrange); buttonPanel.add(button2); buttonPanel.add(button3); return buttonPanel; } VL/HCC 2013 10 11. Our Tool: AZURITE AZURITE Allows selectively undoing fine-grained code changes Developed as an Eclipse plug-in AZURITE Adding Zest to Undoing and Restoring Improves Textual Exploration VL/HCC 2013 11 1 Attribution: cobalt, flickr.com CC BY-SA 2.0 12. AZURITE: Selective Undo Tool VL/HCC 2013 12 13. How can we support this? Automatically record the fine-grained code change history e.g., FLUORITE [Yoon+11], CODINGTRACKER [Negara+12] Provide usable interfaces and commands for interacting with the code change history focus of this talk! VL/HCC 2013 13 14. This talk is about Our new visualizations of fine-grained code change history, new editor commands for developers including selective undo commands executed on the fine-grained history VL/HCC 2013 14 15. TIMELINE VISUALIZATION The basic UI for interacting with the fine-grained code change history VL/HCC 2013 15 16. Basic Features: Time VL/HCC 2013 16 horizontal axis: time 17. Basic Features: Time VL/HCC 2013 17 Now 18. Basic Features: Time New information is always added to the right VL/HCC 2013 18 And the indicator moves accordingly 19. Compact Mode Problem: Horizontal gaps between the rectangles (only 20% of their time editing code [Ko+05]) Compact mode: removes all the horizontal gaps VL/HCC 2013 19 What if we removed these gaps? 20. Multiple Sessions By default, only the history of the current editing session is shown An old history can be brought back VL/HCC 2013 20 21. Multiple Sessions By default, only the history of the current editing session is shown An old history can be brought back VL/HCC 2013 21 22. Multiple Sessions By default, only the history of the current editing session is shown An old history can be brought back VL/HCC 2013 22 A session divider (gray vertical line) 23. Rectangles = Edit Operations Each rectangle represents a code edit operation (one of Insert, Delete, or Replace) VL/HCC 2013 23 24. Coalescing Operations Multiple operations are merged into a single edit Edit operations can have different durations VL/HCC 2013 24 25. Size / Location Width: Duration of the edit Vertical location/height: Relative location and size of the edit within the file Minimum width and height for small edits VL/HCC 2013 25 26. Tooltip Hovering mouse on a rectangle shows a tooltip with more detailed information VL/HCC 2013 26 This change replaced a constant 800 with a variable named width 27. Multiple Files Each row contains the history of a single file The most recently edited file is always brought to top VL/HCC 2013 27 Each row contains the edit history of one file 28. Zooming / Scrolling VL/HCC 2013 28 29. Selecting Rectangles Selection can span across multiple files, and can be disconnected VL/HCC 2013 29 Selected rectangles 30. EDITOR COMMANDS So, what can we actually do with the selected rectangles? VL/HCC 2013 30 31. Selective Undo Undoes only the selected edits without affecting the other edits VL/HCC 2013 31 32. Undo Everything After Selection Undoes all changes made after the current selection A shortcut for undoing multiple operations from the back of the history VL/HCC 2013 32 33. Jump to the Affected Code Enabled when a single rectangle is selected Opens the relevant file in the code editor and moves the cursor to the location where the operation was performed VL/HCC 2013 33 34. Jump to the Affected Code VL/HCC 2013 34 Can be considered as automatic bookmarks of the edited locations 35. Show All Files Edited Together VL/HCC 2013 35 What other files were edited between these two operations? The files edited within the same timeframe are brought to top 36. HISTORY SEARCH Well, but isnt that too difficult to select the correct rectangles? VL/HCC 2013 36 37. Selective Undo VL/HCC 2013 37 (1) Make some changes here (2) Make some other changes here 38. Selective Undo Selectively undoing A requires selecting all the edits performed in region A VL/HCC 2013 38 (3) Later, it turns out A was a mistake, so the user wants to undo A. At the same time, the user does not want to lose the changes made in B. Selective Undo! 39. Finding All Changes in Region AZURITE provides Select corresponding rectangles command VL/HCC 2013 39 40. Finding Code through History AZURITE allows searching for a certain code (or text) through the edit history VL/HCC 2013 40 When did I have that GridBagLayout code? 41. Finding Code through History Highlights all the rectangles within the time interval(s) when the search text existed in the code VL/HCC 2013 41 When did I have that GridBagLayout code? 42. CODE HISTORY DIFF VIEW It is still difficult to predict the result of selective undo VL/HCC 2013 42 43. Code History Diff View Users can select an arbitrary region of code and launch code history diff view VL/HCC 2013 43 44. Code History Diff View VL/HCC 2013 44 Right panel: Shows the current code Left panel: Shows a previous version at which the red marker is pointing 45. Code History Diff View VL/HCC 2013 45 The file name / location of the selected region 46. Code History Diff View VL/HCC 2013 46 47. Code History Diff View VL/HCC 2013 47 48. Multiple Instances VL/HCC 2013 48 49. Another Use Case VL/HCC 2013 49 50. Other Possible Benefits Answering history-related questions [Fritz+10][LaToza+10] When, how was this code changed or inserted? How has it changed over time? Has this code always been this way? Code history diff view can answer these questions at a fine-grain level VL/HCC 2013 50 51. PRELIMINARY STUDY RESULTS Are these features really useful for the real developers? VL/HCC 2013 51 52. Preliminary Study Results Interviewed 2 users who were actively using AZURITE There were situations where AZURITE was useful The timeline is useful for keeping track of which files are being edited Code history diff view previews the undo result, which is better than regular undo command Suggestions for improvement (already implemented) Live preview of selective undo Having a way of marking the current point in time, as a lightweight way of versioning VL/HCC 2013 52 53. Interactive Selective Undo VL/HCC 2013 53 54. User-defined Marks VL/HCC 2013 54 55. Conclusion Visualizing fine-grained code change history and providing editor commands interacting with the history can be useful for developers AZURITE is a publicly available Eclipse plug-in, and we invite your feedback! http://www.cs.cmu.edu/~azurite/ VL/HCC 2013 55 56. Questions? VL/HCC 2013 56 AZURITE is available at: http://www.cs.cmu.edu/~azurite/ Thanks for funding from: 57. Performance Size of the logs Data collected from 19 developers for 17 months 291MB of data / 1059 hours of coding About 281.5 KB/hour Performance of the timeline visualization VL/HCC 2013 57 58. Selective Undo Keeps track of all fine-grained code changes Maintains the correct locations of the previous edits in the current state Deals with regional conflicts VL/HCC 2013 58 Example :myFontSize myRectangleSize myRegionArea R1 R2 What should be the result of selectively undoing only R1? myFontgionArea? myFontSize? Or do nothing and keep it myRegionArea? 59. Conflict Resolution Interface VL/HCC 2013 59