SVF : An Interactive Software Visualization Framework for Eclipse By Abul Bashar Supervisor: Prof....

SVF : An Interactive Software Visualization Framework

for Eclipse

ByAbul Bashar

Supervisor:Prof. Dr. Armin B. Cremers

Co-Supervisor:Prof. Dr. Jan Borchers

2SVF: An Interactive Software Visualization and Navigation Framework for Eclipse

Visualization Everywhere!

Software architectures– components– plug-ins

Object-Oriented Programming– variables– methods– classes– interfaces– Packages

Aspect-oriented Programming– aspects– aspect interference


Goals

Framework for visualization of static analyses– User-friendliness– Reusability

Proof-of Concept Implementation– Eclipse Plug-In– Dependency Visualization for Program Transformations


Outline

Motivation Goals Requirements & Challenges Approach: Effective & Interactive Visualization Evaluation Conclusions


Hierarchical software artifacts

A visualizer must support to– Switch Level of Detail (LOD)

– Preserve hierarchical structure while changing Level Of Detail

+method1()+operation1()

Class1

+m2()+m3()

Class3

+service1()+service2()

-

Class4

+m4()

Class2

+operation1()

«interface»Interface1

1 *

«interface»Interface1 Class4 Class2

Class1 Class3

1 *

Package1 Package2


Hierarchical software artifacts

A visualizer must support to– Switch Level of Detail (LOD)

– Preserve hierarchical structure while changing Level Of Detail

– Provide useful additional information

•e.g. cyclic dependencies

Challenges– Providing sufficient interaction

to navigate the hierarchy

+method1()+operation1()

Class1

+m2()+m3()

Class3


-

Class4

+m4()

Class2

+operation1()

«interface»Interface1

1 *


Class1 Class3

1 *

Package1 Package2


Providing additional information (contexts)


Class1 Class3

1 *

Source codeclass Class2{ private Clsss3 service = new Class3(); public void m4(){ //other statements . . . . . . int status = service.m3(“Abul Bashar”); . . . . . . //other statements }}

class Class3{ private Clsss4 logging = new Class4(); public int m3(String who){ //many statements . . . . . . logging.log(“Taxi request from :” + who); // logic to call for a taxi logging.log(“Taxi ready for:” + who); . . . . . . . logging.log(“Taxi handover to:” + who); . . . . . . . }}

PropertiesProperty Type

Call Propagation

Number of call(s)

1

Caller method

Class2#m4

Called method

Class3#m3

Parameter “Abul Bashar”

Parameter propagation

3 times, passed to: Field: logging [Class4]

A diagram alone doesn’t help a lotReason: missing context information


Providing additional information (contexts)

Properties# of dependencies 1

Caller Class Class4

Called Class Class3

Summary: method m3 of Class3 calls m4 of Class4

Context changes with the change of The Level Of Detail

Package1

Package2

+m2()+m3()

Class3


-

Class4


Exploring context information

Various types of contexts– Source code– Property pages– Extracted sub graphs, etc.

Context changes with– The intension of visualization (i.e. what we are

visualizing)•E.g. Software architecture, Aspects, Call graph

– Even in the same visualizer•E.g. When the user changes his focus, or Level of

Detail

Challenges– Switching contexts with selections – Changing with diagram states– Easy interaction to explore different contexts


Large structured/nested graph

Visualized hierarchy, but ..

Excessive information Not understandable, doesn’t tell much Always looks ugly no matter how we layout it


Large structured/nested graph

Challenge: – Reducing complexities– Focusing in a portion for a closer look– providing easy navigation


Reducing complexities by Filtering & Grouping

Better perceived Simple representation, but

tells more!– Dependency hierarchy– A good order

Filtering transitive edges andGrouping multiple edges

together


Filtering & Grouping: Nested case

hide transitives zoom out show transitives zoom in

Bad consequence– Semantically inconsistent diagram

This is just one example, Many such issues are there in manipulating a nested graph

Challenge: – Providing consistent filtering and grouping– Keeping semantically consistent diagram at all time

A

B

C

D

A

B

C

D

Zoom out Zoom inFalse Edge

I didn’t mean to keep transitive edges shown in

this LOD


Summary: Requirements / Challenges

1. Large complex graphs 2. Various relationships spanning arbitrary Levels

of Nesting3. Reducing visual complexities4. Managing Level Of Details (LOD)5. Consistent filtering 6. Consistent grouping of relevant information

together 7. Fast changing focus points in a huge graph8. Providing context information in an easy way9. Continuous source code synchronization10. Easy intuitive navigation


Outline

Motivation Goals Requirements & Challenges Approach: Interactive visualization & Navigation

– Visualization Techniques– Demo

Evaluation Conclusions


Approach: Visualization & Navigation

Multiple synchronized views, and Sufficient techniques to fulfill the requirements

Traditional Visualization Techniques– Graph layouts – Hyperbolic graphs– Treemap– Semantic zooming

Additional Techniques– Semantic Filtering – Semantic Grouping– Managing Level Of Detail– Extracting sub graphs– Graph Transformations– Additional Layout Techniques– View synchronization mechanism

Adopted from other sources

+ developed


Technique: Filtering & Grouping

Better perceived Simple representation, but

tells more!– Dependency hierarchy– A good order

Filtering transitive edges andGrouping multiple edges

together


Filtering & Grouping Types

Pre-defined filtering types– Semantic filtering

•e.g. hide all nodes irrelevant to the selected– Filtering by categories

•e.g. hide all private methods– Hiding something explicitly

•e.g. hide package ‘x’

Pre-defined grouping types– Semantic grouping

•e.g. multiple edges between two nodes– Hierarchical grouping of edges

•e.g. all edges under a certain hierarchy


Technique: Managing Level Of Detail

Collapse/Expand nodes– Hide descendants– Group edges

connected with descendants– Replace the node by a

smaller figure

Semantic Zooming– Different graphs in different zoom levels

Advantage:– Easy changing local & global Level Of Detail

ParentNodeParentNode

B

C

D

A

B C D

I L ME F G J K N

1

2

3

A

B C D

I L ME F G J K N

1

2

3


Technique: Extracting sub graphs

Extract relevant / useful portion of a graphin a different view on the fly

Illustration: Flow of user interactions 1. Select an element (node/edge) in a complex graph2. Possible useful sub-graphs extracted in a separate view3. The user comfortably explores the extracted graphsAll these happens synchronously

Pre-defined criteria of relevance– Neighborhood – Proximity (closeness criterion)– Descendent sub graph of a composite node

Advantages– Reduced navigation complexity– Immediate extraction of important information


Technique: Graph transformations

Converting a graph into another representation

Graph flattening– Showing graph extracted from a single nesting level– E.g. show me all classes only– Advantage

•Reduced nesting complexities

Real-time Graph Decorating / Highlighting– Highlight certain elements of a graph– E.g. highlight all the cycles– Advantage

•Immediate exploration of important information


Summary: Visualization approach

Challenges Techniques

Large complex graph

Reducing visual complexities

Managing Level Of Detail

Providing context/helpful information

Easy institutive navigation

Continuous source code attachment

Semantic filtering

Semantic grouping

Collapse / Expand

Semantic zooming

Extracting subgraph

Graph Transformations

Hyperbolic layout

Multiple synchronized views


DEMOProof of concept application

Condor: Dependency Visualizer for Program Transformation


Summary: Visualization approach

Challenges Techniques

provides a comfortable visualization environment

Large complex graph

Reducing visual complexities

Managing Level Of Detail

Providing context/helpful information

Easy institutive navigation

Continuous source code attachment

Semantic filtering

Semantic grouping

Collapse / Expand

Semantic zooming

Extracting subgraph

Graph Transformations

Hyperbolic layout

Multiple synchronized views


Outline

Motivation Goals Requirements & Challenges State of the art techniques Approach: Effective & Interactive Visualization Evaluation

– Usability evaluation– Quantified results– Findings

Conclusions


Usability Evaluation : Test-setup

Interesting candidate techniques

– Multi-view approach– Managing LOD– Semantic zooming– Filtering & grouping– Hyperbolic graphs– Extracting subgraph

13 Participants– Expert : 4– Intermediate : 6– Novice : 3

Methodology– Think aloud protocol– Phases

• Introduction (1-2 min)• Discovery (10-15 min)• Performing Tasks (20-30

min)• Debriefing (5-10 min)

Test environment– SW lab environment– Pre-installed Eclipse IDE

with condor visualizer– A set of pre-assembled CTs


Usability Evaluation : Tasks

Typical software exploration tasks– E.g. Exploring hierarchical artifacts & relationships– E.g. Analyzing detail of a particular portion – E.g. Exploring and analyzing source code– E.g. Filtering arbitrary elements, etc.

Program Transformation dependency analysis Tasks

– E.g. Finding dependencies among a set of modules– E.g. Finding cyclic dependencies


Usability Evaluation: Results

Adjust nesting levels

Rearrange elements

Use the context view

Distinguish context modes

Hiding/unhiding

Global filtering

Find cycles

Analyze source code


Usability Evaluation: Important findings Context view (extracting subgraph)

– Problems: • Adjusting Level of Detail of the extracted graph

[previous state: 3 fixed modes mapped with tool item]– Resolved by:

• Redesigned, applying semantic zooming metaphor using slider

Analysis view (flattening graph)– Problem:

• Dissimilar responses than structured view• For some users, the animating movement was irritating

– Resolved by: Redesigned

Layout and optimization– Problem: Confusing term: “Optimize”– Resolved by: Renaming as “Reduce edge overlapping”

Adjusting nesting levels– Problem: Naming conflicts: “Un-clutter edge(s)” – Resolved by: Renaming as “Collapse connecting edges”


Usability Evaluation : Summary

Visualization approach is proven to be helpful

Few problems, most of them were due to– Lack of documentation– Lack of experience– Confusing terms

Resolving the problems– Suitable naming Easy– Alternative access paths Easy– Conforming to similar metaphor Time consuming– Redesign the analysis view Time consuming

Already implemented


Outline

Motivation Goals Requirements & Challenges State of the art techniques Approach: Effective & Interactive Visualization Evaluation Conclusions

– Achievements– Future work


Achievements

An effective software visualization approach supporting– Complex structured graphs– Managing Level of Detail– Providing necessary context information– Easy and effective navigation– Semantic filtering and grouping– Fast changing focus points– Continuous attachment of source code

A framework to develop interactive software visualizers Necessary infrastructure and API which supports

– Simple reusability Easy to use by programmers– Simpler code Fast production of custom visualizer

A proof of concept application– Effectively visualizes dependencies among Conditional

Program Transformation modules


Ongoing and Future work

Ongoing works– Prolog x-reference visualizer– LogicAJ dependency visualizer

Extending capabilities by – More usability studies Ravindra Chilaka– Adding more techniques

•E.g. bi-directional navigation (source code diagram)

– Adding more API functionalities•E.g. rule based filtering


Questions?

SVF

Visualiz

ationNavigation

Extensio

n

Model

Date post:	12-Jan-2016
Category:	Documents
Upload:	della-matthews
View:	218 times
Download:	0 times

SVF : An Interactive Software Visualization Framework for Eclipse By Abul Bashar Supervisor: Prof....

Documents