Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

VL/HCC 2013 - Visualization of Fine-Grained Code Change History

610 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

VL/HCC 2013 - Visualization of Fine-Grained Code Change History

  1. 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. 2. MOTIVATING EXAMPLE VL/HCC 2013 2
  3. 3. Sketch of the Desired UI VL/HCC 2013 3 GUI Developer
  4. 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. 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. 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. 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. 8. However… • BoxLayout does not support spacing between GUI elements • He wants to restore the GridBagLayout code, but it’s gone! VL/HCC 2013 8
  9. 9. Undo command can’t 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. 10. Undo command can’t 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. 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 <Azurite, Velvet Beauty1>1 Attribution: cobalt, flickr.com – CC BY-SA 2.0
  12. 12. AZURITE: Selective Undo Tool VL/HCC 2013 12
  13. 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. 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. 15. TIMELINE VISUALIZATION The basic UI for interacting with the fine-grained code change history VL/HCC 2013 15
  16. 16. Basic Features: Time VL/HCC 2013 16 horizontal axis: time
  17. 17. Basic Features: Time VL/HCC 2013 17 “Now”
  18. 18. Basic Features: Time • New information is always added to the right VL/HCC 2013 18 And the indicator moves accordingly
  19. 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. 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. 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. 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. 23. Rectangles = Edit Operations • Each rectangle represents a code edit operation (one of Insert, Delete, or Replace) VL/HCC 2013 23
  24. 24. Coalescing Operations • Multiple operations are merged into a single edit – Edit operations can have different durations VL/HCC 2013 24
  25. 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. 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. 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. 28. Zooming / Scrolling VL/HCC 2013 28
  29. 29. Selecting Rectangles • Selection can span across multiple files, and can be disconnected VL/HCC 2013 29 Selected rectangles
  30. 30. EDITOR COMMANDS So, what can we actually do with the selected rectangles? VL/HCC 2013 30
  31. 31. Selective Undo • Undoes only the selected edits without affecting the other edits VL/HCC 2013 31
  32. 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. 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. 34. Jump to the Affected Code VL/HCC 2013 34 Can be considered as automatic bookmarks of the edited locations
  35. 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. 36. HISTORY SEARCH Well, but isn’t that too difficult to select the “correct” rectangles? VL/HCC 2013 36
  37. 37. Selective Undo VL/HCC 2013 37 (1) Make some changes here (2) Make some other changes here
  38. 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. 39. Finding All Changes in Region • AZURITE provides “Select corresponding rectangles” command VL/HCC 2013 39
  40. 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. 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. 42. CODE HISTORY DIFF VIEW It is still difficult to predict the result of selective undo VL/HCC 2013 42
  43. 43. Code History Diff View • Users can select an arbitrary region of code and launch code history diff view VL/HCC 2013 43
  44. 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. 45. Code History Diff View VL/HCC 2013 45 The file name / location of the selected region
  46. 46. Code History Diff View VL/HCC 2013 46
  47. 47. Code History Diff View VL/HCC 2013 47
  48. 48. Multiple Instances VL/HCC 2013 48
  49. 49. Another Use Case VL/HCC 2013 49
  50. 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. 51. PRELIMINARY STUDY RESULTS Are these features really useful for the real developers? VL/HCC 2013 51
  52. 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. 53. Interactive Selective Undo VL/HCC 2013 53
  54. 54. User-defined “Marks” VL/HCC 2013 54
  55. 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. 56. Questions? VL/HCC 2013 56 AZURITE is available at: http://www.cs.cmu.edu/~azurite/ Thanks for funding from:
  57. 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. 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. 59. Conflict Resolution Interface VL/HCC 2013 59

×