visualizing the evolution of working sets

Visualizing the Evolution of Working Sets

Roberto Minelli, Andrea Mocci, Michele Lanza

@robertominelli

REVEAL @ University of Lugano, Switzerland

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.”

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”

Integrated Development Environments

developer IDE

developer IDE

nav

igat

e

user

inte

rfac

e

use

r in

pu

t

edit

insp

ect

developer IDE

nav

igat

e

user

inte

rfac

e

use

r in

pu

t

edit

insp

ect

interaction data

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

nav

igat

e

user

inte

rfac

e

use

r in

pu

t

edit

insp

ect

What is a working set?


A group of program entities which a developer has

interacted with during a particular period of time


current

The entities interacted

in the last timeframe

(in terms of number of interactions or in a period of time)




current past


in the last timeframe

(in terms of number of interactions or in a period of time)


in the past

(before the current working set)



program entities

nodes

program entities

class

methodsha

pe

nodes

program entities

1 event

10+ events

editedcolo

r &

st

roke

nodes

class

methodsha

pe

program entities

1 event

10+ events

editedcolo

r &

st

roke

size

most recent

past event

nodes

class

methodsha

pe

interaction flow

edges

interaction flow

edges

colo

r &

w

idth 1 occurrence

10+ occurrences

currentforce-based

current

past

force-based

radial

non edited entities

current

past

force-based

radial

current

past

edited entities

non edited entities

force-based

radial

Algorithm

For all events…

Algorithm

For all events…

view contains entity?

Add new entity node

Update entity nodeYes

No

Algorithm

For all events…


Add new entity node

Update entity node

view contains

edge?

Add new edge

Update edge

Yes

Yes

No

No

Algorithm

Update entity node

Update edge

Algorithm

Update entity node

Update edge

Update color, size, and stroke

1 event

10+ events

edited

colo

r &

st

roke

size

most recent

past event

Algorithm

Update entity node

Update edge


Reset TTL (current/past working set)

1 event

10+ events

edited

colo

r &

st

roke

size

most recent

past event

Algorithm

Update entity node

Update edge



Update charge (80%)

1 event

10+ events

edited

colo

r &

st

roke

size

most recent

past event

Algorithm

Update entity node

Update edge



Update charge (80%)

Update color and width

colo

r &

w

idth 1 occurrence

10+ occurrences

Algorithm

Update entity node

Update edge



Update charge (80%)

Update color and width

Update strength (120%)

colo

r &

w

idth 1 occurrence

10+ occurrences

Algorithm

Update entity node Update edge

Update charge (80%) Update strength (120%)

Algorithm



Less charge: node less repulsive

Algorithm



More strength: more attraction for the edges

Algorithm

For all events…


Add new entity node

Update entity node

view contains

edge?

Add new edge

Update edge

Yes

Yes

No

No

Algorithm

For all events…


Add new entity node

Update entity node

view contains

edge?

Add new edge

Update edge

Apply layout

Yes

Yes

No

No

Algorithm

For all events…


Add new entity node

Update entity node

view contains

edge?

Add new edge

Update edge

Apply layout

Apply aging

Yes

Yes

No

No

Algorithm

Apply layout

Apply aging

Algorithm

Apply layout

Apply force-based layout to current ws

Apply aging

Algorithm

Apply layout


Apply radial layout to past ws

Apply aging

Algorithm

Apply layout



Apply aging

Decrease TTL of nodes in the current ws

Algorithm

Apply layout



Apply aging


Decrease size of nodes in the current ws size

most recent

past event

Algorithm

Apply layout



Apply aging


Decrease size of nodes in the current ws

Disconnect nodes with TTL = 0

size

most recent

past event

Algorithm

For all events…


Add new entity node

Update entity node

view contains

edge?

Add new edge

Update edge

Apply layout

Apply aging

Yes

Yes

No

No

Dataset

development sessions914

developers14

snapshots72,631

Visual Patterns

Visual Patterns

snapshot

Emerge by inspecting a

single snapshot of a

development session

Visual Patterns

evolutionary

Consider multiple

subsequent snapshots

during the evolution of a

development session

snapshot



development session

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



development session

Past: To Edit or Not To Edit

1 event

10+ events

editedcolo

r &

st

roke

U Can’t Touch This

1 event

10+ events

editedcolo

r &

st

roke

The Guiding Star

Stay Focused, Stay Foolish!

Moving in Circles

Visual Patterns

snapshot



development session

Visual Patterns

evolutionary

Consider multiple



development session

Visual Patterns

evolutionary

Consider multiple



development session

The Past Awakens

Multi-Part Session

Thirst for Knowledge

The Working Funnel }

The Past Awakens

The Past Awakens

No past WS

Part 1

The Past Awakens

No past WS

Part 1 Part 2

Past WS increases

The Past Awakens

No past WS Past WS increases “The past awakens”

Part 1 Part 2 Part 3

(Past WS decreases)

Multi-Part Session

Multi-Part Session

Part 1

1st Task

Multi-Part Session

Part 1 Part 2

1st Task Exploration

Multi-Part Session


1st Task Exploration 2nd Task

Multi-Part Session

Part 1 Part 2 Part 3 Part 4

1st Task Exploration 2nd Task Wrapping up


Part 1


Part 1 Part 2

The Working Funnel (1)


Part 1


Part 1 Part 2


Part 1


Part 1 Part 2


Part 1 Part 2 Part 3 Part 4 Part 5

The Artifact

http://tiny.cc/minelli-artifact

The Artifact


86 MB

The Artifact


86 MB

Pharo IDE

The Artifact


86 MB

Pharo IDE

Development

sessions (10)

The Artifact


86 MB

Pharo IDE

Development

sessions (10)

Instructions


$ ./pharo-ui Pharo.image

Open the Shell and execute the

following command to start the IDE:


To run the code, select it (⌘+a) and press ⌘+dYou can also right click and press 'Do It'


Demo


1 : 0macOS Sierra Pharo IDE

Visualizing the Evolution of Working SetsrobertominelliRoberto Minelli, Andrea Mocci, Michele Lanza

Roberto Minelli [email protected] @robertominelli minellir! "#

COMINGSoonON THE JOB MARKET


Summer 2017

ARE YOU

HIRING?



CONTACT

ME!

visualizing the evolution of working sets

Technology