Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger ( a ) Benjamin Wasty ( b ) umper ( a ) ollner ( a ) Jonas Tr¨ J¨ urgen D¨ ( a ) Hasso-Plattner-Institut , University of Potsdam, Germany ( b ) Software Diagnostics GmbH, Potsdam, Germany
Agenda Concept & Design 3D Software Maps Data Provisioning Rendering Details 2 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
CONCEPT & DESIGN
Software Visualization in Software-Engineering Processes Software Visualization The visualization of artifacts related to software and its development process (a wide definition). 1 Providing pictures of abstract objects, their attributes and relations, within a context. 1 Diehl, S. 2007. Software Visualization 4 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Motivation of Software Visualization Problem: Increasing size of software-projects results in management overhead. Companies struggle with essential information gaps between management and development. Source Design Server Code Decay Collaboration Platforms Code ... Report Decision Making & Target Design Code Transformation Software visualization can reduce those information gaps. 5 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Motivation of Software Visualization Problem: Increasing size of software-projects results in management overhead. Companies struggle with essential information gaps between management and development. Source Design Server Code Decay Assessment Collaboration Platforms Code ... Report Software Maps Metrics Verification Decision Making & Target Design Code Transformation Software visualization can reduce those information gaps. 6 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Aspects on Integrating Software Visualization Aspects for introducing software visualization to software-engineering processes: Identification of use cases that benefit from SoftVis. Development of the visualization concept itself. Elicitation of required information. Selection of appropriate rendering and interaction techniques. Provisioning of the visualization. 7 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Provisioning of Software Visualizations to Software-Engineering Processes Integration into preexisting tool sets without imposing usage overhead. Customization to project specific process, requirements, and constraints. Teaching developers and managers how to use, read, and interpret the visualization. 8 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Provisioning of Software Visualizations to Software-Engineering Processes Integration into preexisting tool sets without imposing usage overhead. Customization to project specific process, requirements, and constraints. Teaching developers and managers how to use, read, and interpret the visualization. 9 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Provisioning of Software Visualizations to Software-Engineering Processes Integration into preexisting tool sets without imposing usage overhead. Customization to project specific process, requirements, and constraints. Teaching developers and managers how to use, read, and interpret the visualization. 10 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Provisioning of Software Visualizations to Software-Engineering Processes Integration into preexisting tool sets without imposing usage overhead. Customization to project specific process, requirements, and constraints. Teaching developers and managers how to use, read, and interpret the visualization. 11 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
3D SOFTWARE MAPS
Structure of a Software Map Item Height Module Area Layout Color A software map links a rectangular 2.5D-Treemap with a software system structure and software metrics mapped to visual variables (i.e., height, area, and color). 13 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
AREA MAPPED
HEIGHT MAPPED
COLOR MAPPED
DIFF MAPPED
Perspectives and Dashboards Perspectives specify a mapping of attributes to visual variables. Dashboards communicate relevance and context for software maps. 18 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
DATA PROVISIONING
Considerations on Data Provisioning Visualization should not interfere with its exploratory nature: Fast client-side initialization times. Interactive frame rates, even with large software maps. Considerations for software maps on web clients: Well known geometry structure. Alternatives for triangle based streaming? Use of perspectives reduces number of layout changes. Without any geometry rendered, no source code related information is required. 21 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Considerations on Data Provisioning Visualization should not interfere with its exploratory nature: Fast client-side initialization times. Interactive frame rates, even with large software maps. Considerations for software maps on web clients: Well known geometry structure. Alternatives for triangle based streaming? Use of perspectives reduces number of layout changes. Without any geometry rendered, no source code related information is required. 22 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Report, Hierarchy and Geometry Data Report 1 Geometry 2 JSON structure. Binary AJAX request (Array-Buffer). Meta information like project Pre-layouted 2D bounding boxes. name, number of items, authors, Attributes color, diff threshold, height. revisions, the name of the Not required: id, normal, binary height. perspective, metric names and explanations, ids of all labeled Hierarchy 3 items and modules. Hierarchy part of the JSON structure top items per metric. Remaining Hierarchy Note: we choose to decode geometry data and retrieve vertex attribute arrays on the client. 23 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Report, Hierarchy and Geometry Data Report 1 Geometry 2 JSON structure. Binary AJAX request (Array-Buffer). Meta information like project Pre-layouted 2D bounding boxes. name, number of items, authors, Attributes color, diff threshold, height. revisions, the name of the Not required: id, normal, binary height. perspective, metric names and explanations, ids of all labeled Hierarchy 3 items and modules. Hierarchy part of the JSON structure top items per metric. Remaining Hierarchy Note: we choose to decode geometry data and retrieve vertex attribute arrays on the client. 24 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Report, Hierarchy and Geometry Data Report 1 Geometry 2 JSON structure. Binary AJAX request (Array-Buffer). Meta information like project Pre-layouted 2D bounding boxes. name, number of items, authors, Attributes color, diff threshold, height. revisions, the name of the Not required: id, normal, binary height. perspective, metric names and explanations, ids of all labeled Hierarchy 3 items and modules. Hierarchy part of the JSON structure top items per metric. Remaining Hierarchy Note: we choose to decode geometry data and retrieve vertex attribute arrays on the client. 25 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
RENDERING DETAILS
Vertex Attribute Arrays WebGL limited to GLushort vertices requiring chunked drawing: 20 vertices with attributes, 30 indices per box yields 3276 modules and items per draw call. Box 0 Vertex X Vertex Y Vertex Z ID Color Threshold Normal Binary Height -X Face float32 float32 float32 uint24 3 × uint8 uint16 uint8 uint8 -Z Face X1 Y1 Z1 I0 R0 G0 B0 T0 1 0 +X Face X4 Y4 Z4 I0 R0 G0 B0 T0 1 0 +Z Face X7 Y7 Z7 I0 R0 G0 B0 T0 1 1 +Y Face Box 1 X2 Y2 Z2 I0 R0 G0 B0 T0 1 1 -X Face ... Face Vertices Box Attributes Const Vertex Attributes constant index array chunk specific attribute arrays two static arrays (constant vertex vertex attributes) ID per-box color per-box normal as face attribute per-face threshold per-box binary height per-vertex 27 Interactive Software Maps for Web-Based Source Code Analysis Daniel Limberger 20th of June, Web3D2013
Recommend
More recommend
