Visual augmentation of source code editors: A systematic mapping study

Abstract

c 2018. This manuscript version is made available under the CC-BY-NC-ND 4.0 license: http://creativecommons.org/licenses/by-nc-nd/4.0/. This is the accepted version of: M. Sulír, M. Bačíková, S. Chodarev, J. Porubän. Visual augmentation of source code editors: A systematic mapping study. AbstractSource code written in textual programming languages is typically edited in integrated development environments or specialized code editors. These tools often display various visual items, such as icons, color highlights or more advanced graphical overlays directly in the main editable source code view. We call such visualizations source code editor augmentation.In this paper, we present a first systematic mapping study of source code editor augmentation tools and approaches. We manually reviewed the metadata of 5,553 articles published during the last twenty years in two phases -keyword search and references search. The result is a list of 103 relevant articles and a taxonomy of source code editor augmentation tools with seven dimensions, which we used to categorize the resulting list of the surveyed articles.We also provide the definition of the term source code editor augmentation, along with a brief overview of historical development and augmentations available in current industrial IDEs.

A Systematic Mapping on Visual Solutions to Support the Comprehension of Software Architecture Evolution

“…We conducted a SMS to find evidence for the use of visual solutions to support the comprehension of SA evolution during the software lifespan. A SMS is a form of a systematic literature review (SLR) with more general research questions, aiming to provide an overview of the given research [11]. We decided to conduct a SMS due to the potential that this methodology has to reduce the analysis bias, through the establishment of selection procedures [12].…”

“…For this reason, we adopted them as references to propose the new taxonomy. According to Sulr et al [11], a taxonomy is consisted of a number of dimensions (e.g., visualization form) with their attributes (e.g., 2D Elements, Color Coding). Each visual solution from the selected papers from this SMS can pertain to one or more attributes from a specific dimension, as we will describe in the following paragraphs.…”

Exploranative Code Quality Documents

“…Some approaches apply these in the context of software engineering and embed them into the code to assist developers in understanding a program. Harward et al [21] and Sulír et al [52] suggest augmenting the source code with visualizations to keep track of the state and properties of the code. Beck et al [9,10] implement embedded visualizations for understanding program behavior and performance bottlenecks.…”

Integrating Runtime Values with Source Code to Facilitate Program Comprehension

“…Third, to understand the details of a particular method, the developers can read the source code of the method definition. To alleviate this, many tools try to visually augment the source code directly in the editor to provide additional information in-place [5]. This work was supported by project KEGA 047TUKE-4/2016 Integrating software processes into the teaching of programming.…”

“…Then we performed a systematic mapping study [5], summarizing existing tools which visually augment the textual source code editor with various icons, graphics and textual labels. We found more than 20 tools augmenting the code with runtime information, but very few of them aim to display examples of concrete variable values.…”