The Code Mini-Map Visualisation: Encoding Conceptual Structures Within Source Code

Abstract

Modern source code editors typically include a code mini-map visualisation, which provides programmers with an overview of the currently open source code document. This paper proposes to add a layering mechanism to the code mini-map visualisation in order to provide programmers with visual answers to questions related to conceptual structures that are not manifested directly in the code. Details regarding the design and implementation of this scope information layer, which displays additional encodings that correspond to the scope chain and information related to the scope chain within a source code document, is presented. The scope information layer can be used by programmers to answer questions such as: to which scope does a specific variable belong, and in which scope is the cursor of the source code editor currently located in. Additionally, this paper presents a study that evaluates the effectiveness of adding the scope information layer to a code mini-map visualisation in order to help programmers understand scope relationships within source code. The results of the study show that the incorporating additional layers of information onto the code mini-map visualisation can have a positive effect on code understanding.