As part of their daily work, developers interact with Integrated Development Environments (IDE), generating thousands of events. Together with other aspects of development, this data also captures the modus operandi of the developer, including all the program entities she interacted with during a development session. This "working set" (or context) is leveraged by developers to create and maintain their mental model of the software system at hand. Understanding how developers navigate and interact with source code during a development session is an open question. We present a novel visual approach to understand how working sets evolve during a development session. The visualization incrementally depicts all the program entities involved in a development session, the intensity of the developer activity on them, and the navigation paths that occurred between them. We visualized about a thousand development sessions, and categorized them according to their visual properties.

1. Visualizing the Evolution
of Working Sets
Roberto Minelli, Andrea Mocci, Michele Lanza
@robertominelli
REVEAL @ University of Lugano, Switzerland

2. Footprints: History-rich tools for information foraging
A. Wexelblat, P. Maes
SIGCHI 1999, pp. 270–277
“The information path obtained from navigation in an information
space reveals the user’s mental model of the system.”

3. Program understanding: Challenge for the 1990s
T. A. Corbi
IBM Systems Journal 1989, vol. 28, no. 2, pp. 294–306
“Maintaining the mental model
is an essential part of program comprehension”

4. Integrated
Development
Environments

5. developer IDE

6. developer IDE

7. developer IDE

8. developer IDE
navigate
userinterface
userinput
edit
inspect

9. developer IDE
navigate
userinterface
userinput
edit
inspect
interaction
data

10. developer IDE
I know what you did last summer:
An investigation of how developers spend their time
R. Minelli, A. Mocci, M. Lanza
ICPC 2015, pp. 25–35
DFlow
interaction
data
navigate
userinterface
userinput
edit
inspect

11. What is a working set?

12. What is a working set?
A group of program entities which a developer has
interacted with during a particular period of time

13. What is a working set?
current
The entities interacted
in the last timeframe
(in terms of number of
interactions or in a period of time)
A group of program entities which a developer has
interacted with during a particular period of time

14. What is a working set?
current past
The entities interacted
in the last timeframe
(in terms of number of
interactions or in a period of time)
The entities interacted
in the past
(before the current working set)
A group of program entities which a developer has
interacted with during a particular period of time

16. program
entities
nodes

17. program
entities
class
method
shape
nodes

18. program
entities
1 event
10+ events
edited
color&
stroke
nodes
class
method
shape

19. program
entities
1 event
10+ events
edited
color&
stroke
size
most recent
past event
nodes
class
method
shape

20. interaction
flow
edges

21. interaction
flow
edges
color&
width
1 occurrence
10+ occurrences

23. current
force-based

24. current
past
force-based
radial

25. non edited
entities
current
past
force-based
radial

26. current
past
edited
entities
non edited
entities
force-based
radial

27. Algorithm
For all events…

28. Algorithm
For all events…
view
contains
entity?
Add new entity node
Update entity nodeYes
No

29. Algorithm
For all events…
view
contains
entity?
Add new entity node
Update entity node
view
contains
edge?
Add new edge
Update edge
Yes
Yes
No
No

30. Algorithm
Update entity node
Update edge

31. Algorithm
Update entity node
Update edge
Update color, size, and stroke
1 event
10+ events
edited
color&
stroke
size
most recent
past event

32. Algorithm
Update entity node
Update edge
Update color, size, and stroke
Reset TTL (current/past working set)
1 event
10+ events
edited
color&
stroke
size
most recent
past event

33. Algorithm
Update entity node
Update edge
Update color, size, and stroke
Reset TTL (current/past working set)
Update charge (80%)
1 event
10+ events
edited
color&
stroke
size
most recent
past event

34. Algorithm
Update entity node
Update edge
Update color, size, and stroke
Reset TTL (current/past working set)
Update charge (80%)
Update color and width
color&
width
1 occurrence
10+ occurrences

35. Algorithm
Update entity node
Update edge
Update color, size, and stroke
Reset TTL (current/past working set)
Update charge (80%)
Update color and width
Update strength (120%)
color&
width
1 occurrence
10+ occurrences

36. Algorithm
Update entity node Update edge
Update charge (80%) Update strength (120%)

37. Algorithm
Update entity node Update edge
Update charge (80%) Update strength (120%)

38. Algorithm
Update entity node Update edge
Update charge (80%) Update strength (120%)

39. Algorithm
Update entity node Update edge
Update charge (80%) Update strength (120%)

40. Algorithm
Update entity node Update edge
Update charge (80%) Update strength (120%)

41. Algorithm
Update entity node Update edge
Update charge (80%) Update strength (120%)
Less charge: node less repulsive

42. Algorithm
Update entity node Update edge
Update charge (80%) Update strength (120%)
More strength: more attraction for the edges

43. Algorithm
For all events…
view
contains
entity?
Add new entity node
Update entity node
view
contains
edge?
Add new edge
Update edge
Yes
Yes
No
No

44. Algorithm
For all events…
view
contains
entity?
Add new entity node
Update entity node
view
contains
edge?
Add new edge
Update edge
Apply layout
Yes
Yes
No
No

45. Algorithm
For all events…
view
contains
entity?
Add new entity node
Update entity node
view
contains
edge?
Add new edge
Update edge
Apply layout
Apply aging
Yes
Yes
No
No

46. Algorithm
Apply layout
Apply aging

47. Algorithm
Apply layout
Apply force-based layout to current ws
Apply aging

48. Algorithm
Apply layout
Apply force-based layout to current ws
Apply radial layout to past ws
Apply aging

49. Algorithm
Apply layout
Apply force-based layout to current ws
Apply radial layout to past ws
Apply aging
Decrease TTL of nodes in the current ws

50. Algorithm
Apply layout
Apply force-based layout to current ws
Apply radial layout to past ws
Apply aging
Decrease TTL of nodes in the current ws
Decrease size of nodes in the current ws
size
most recent
past event

51. Algorithm
Apply layout
Apply force-based layout to current ws
Apply radial layout to past ws
Apply aging
Decrease TTL of nodes in the current ws
Decrease size of nodes in the current ws
Disconnect nodes with TTL = 0
size
most recent
past event

52. Algorithm
For all events…
view
contains
entity?
Add new entity node
Update entity node
view
contains
edge?
Add new edge
Update edge
Apply layout
Apply aging
Yes
Yes
No
No

53. Dataset
development sessions914
developers14
snapshots72,631

54. Visual Patterns

55. Visual Patterns
snapshot
Emerge by inspecting a
single snapshot of a
development session

56. Visual Patterns
evolutionary
Consider multiple
subsequent snapshots
during the evolution of a
development session
snapshot
Emerge by inspecting a
single snapshot of a
development session

57. Visual Patterns
Past: To Edit or Not To Edit
U Can’t Touch This
The Guiding Star
Stay Focused, Stay Foolish!
Moving in Circles
{snapshot
Emerge by inspecting a
single snapshot of a
development session

58. Past: To Edit or Not To Edit
1 event
10+ events
edited
color&
stroke

59. Past: To Edit or Not To Edit
1 event
10+ events
edited
color&
stroke

60. Past: To Edit or Not To Edit
1 event
10+ events
edited
color&
stroke

61. Past: To Edit or Not To Edit
1 event
10+ events
edited
color&
stroke

62. U Can’t Touch This
1 event
10+ events
edited
color&
stroke

63. The Guiding Star

64. The Guiding Star

65. Stay Focused, Stay Foolish!

66. Moving in Circles

67. Moving in Circles

68. Visual Patterns
snapshot
Emerge by inspecting a
single snapshot of a
development session

69. Visual Patterns
evolutionary
Consider multiple
subsequent snapshots
during the evolution of a
development session

70. Visual Patterns
evolutionary
Consider multiple
subsequent snapshots
during the evolution of a
development session
The Past Awakens
Multi-Part Session
Thirst for Knowledge
The Working Funnel }

71. The Past Awakens

72. The Past Awakens
No past WS
Part 1

73. The Past Awakens
No past WS
Part 1 Part 2
Past WS increases

74. The Past Awakens
No past WS Past WS increases “The past awakens”
Part 1 Part 2 Part 3
(Past WS decreases)

75. Multi-Part Session

76. Multi-Part Session
Part 1
1st Task

77. Multi-Part Session
Part 1 Part 2
1st Task Exploration

78. Multi-Part Session
Part 1 Part 2 Part 3
1st Task Exploration 2nd Task

79. Multi-Part Session
Part 1 Part 2 Part 3 Part 4
1st Task Exploration 2nd Task Wrapping up

80. Thirst for Knowledge

81. Thirst for Knowledge
Part 1

82. Thirst for Knowledge
Part 1 Part 2

83. Thirst for Knowledge
Part 1 Part 2 Part 3

84. The Working Funnel (1)

85. The Working Funnel (1)
Part 1

86. The Working Funnel (1)
Part 1 Part 2

87. The Working Funnel (1)
Part 1 Part 2 Part 3

88. The Working Funnel (1)
Part 1 Part 2 Part 3 Part 4

89. The Working Funnel (2)

90. The Working Funnel (2)
Part 1

91. The Working Funnel (2)
Part 1 Part 2

92. The Working Funnel (2)
Part 1 Part 2 Part 3

93. The Working Funnel (2)
Part 1 Part 2 Part 3 Part 4

94. The Working Funnel (2)
Part 1 Part 2 Part 3 Part 4 Part 5

95. The Artifact
http://tiny.cc/minelli-artifact

96. The Artifact
http://tiny.cc/minelli-artifact

97. The Artifact
http://tiny.cc/minelli-artifact

98. The Artifact
http://tiny.cc/minelli-artifact
86 MB

99. The Artifact
http://tiny.cc/minelli-artifact
86 MB
Pharo IDE

100. The Artifact
http://tiny.cc/minelli-artifact
86 MB
Pharo IDE
Development
sessions (10)

101. The Artifact
http://tiny.cc/minelli-artifact
86 MB
Pharo IDE
Development
sessions (10)
Instructions

102. http://tiny.cc/minelli-artifact
$ ./pharo-ui Pharo.image
Open the Shell and execute the
following command to start the IDE:

103. http://tiny.cc/minelli-artifact

104. http://tiny.cc/minelli-artifact

105. http://tiny.cc/minelli-artifact
To run the code, select it (⌘+a) and press ⌘+d
You can also right click and press 'Do It'

106. http://tiny.cc/minelli-artifact
Demo

107. http://tiny.cc/minelli-artifact
1 : 0macOS Sierra Pharo IDE

108. Visualizing the Evolution of Working Sets
robertominelliRoberto Minelli, Andrea Mocci, Michele Lanza

109. Visualizing the Evolution of Working Sets
robertominelliRoberto Minelli, Andrea Mocci, Michele Lanza

110. Visualizing the Evolution of Working Sets
robertominelliRoberto Minelli, Andrea Mocci, Michele Lanza

111. Visualizing the Evolution of Working Sets
robertominelliRoberto Minelli, Andrea Mocci, Michele Lanza

112. Visualizing the Evolution of Working Sets
robertominelliRoberto Minelli, Andrea Mocci, Michele Lanza

113. Roberto Minelli
roberto.minelli@usi.ch @robertominelli minellir! "#

114. COMING
SoonON THE JOB MARKET
Roberto Minelli
roberto.minelli@usi.ch @robertominelli minellir! "#
Summer 2017

115. ARE YOU
HIRING?
Roberto Minelli
roberto.minelli@usi.ch @robertominelli minellir! "#

116. Roberto Minelli
roberto.minelli@usi.ch @robertominelli minellir! "#
CONTACT
ME!