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
3SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Goals
Framework for visualization of static analyses– User-friendliness– Reusability
Proof-of Concept Implementation– Eclipse Plug-In– Dependency Visualization for Program Transformations
4SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Outline
Motivation Goals Requirements & Challenges Approach: Effective & Interactive Visualization Evaluation Conclusions
5SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
6SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
+service1()+service2()
-
Class4
+m4()
Class2
+operation1()
«interface»Interface1
1 *
«interface»Interface1 Class4 Class2
Class1 Class3
1 *
Package1 Package2
7SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Providing additional information (contexts)
«interface»Interface1 Class4 Class2
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
8SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
+service1()+service2()
-
Class4
9SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
10SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Large structured/nested graph
Visualized hierarchy, but ..
Excessive information Not understandable, doesn’t tell much Always looks ugly no matter how we layout it
11SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Large structured/nested graph
Challenge: – Reducing complexities– Focusing in a portion for a closer look– providing easy navigation
12SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Reducing complexities by Filtering & Grouping
Better perceived Simple representation, but
tells more!– Dependency hierarchy– A good order
Filtering transitive edges andGrouping multiple edges
together
13SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
14SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
15SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Outline
Motivation Goals Requirements & Challenges Approach: Interactive visualization & Navigation
– Visualization Techniques– Demo
Evaluation Conclusions
16SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
17SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Technique: Filtering & Grouping
Better perceived Simple representation, but
tells more!– Dependency hierarchy– A good order
Filtering transitive edges andGrouping multiple edges
together
18SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
19SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
20SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
21SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
22SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
23SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
DEMOProof of concept application
Condor: Dependency Visualizer for Program Transformation
24SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
35SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Outline
Motivation Goals Requirements & Challenges State of the art techniques Approach: Effective & Interactive Visualization Evaluation
– Usability evaluation– Quantified results– Findings
Conclusions
36SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
37SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
38SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Usability Evaluation: Results
Adjust nesting levels
Rearrange elements
Use the context view
Distinguish context modes
Hiding/unhiding
Global filtering
Find cycles
Analyze source code
40SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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”
41SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
42SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Outline
Motivation Goals Requirements & Challenges State of the art techniques Approach: Effective & Interactive Visualization Evaluation Conclusions
– Achievements– Future work
43SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
44SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
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
45SVF: An Interactive Software Visualization and Navigation Framework for Eclipse
Questions?
SVF
Visualiz
ationNavigation
Extensio
n
Model