Identification of Variability Implementations in TypeScript: the 2Cities Visualization

When variability is directly implemented in a single codebase with languages supporting many different mechanisms, its identification and comprehension are impeded by the absence of documentation, their scattered locations, and obviously, their diversity. This is typically the case with TypeScript in which variability can be implemented with Object-Oriented (OO) mechanisms, and design patterns, but also with dynamic loading of files. This latter mechanism allows for organizing internal variants of part of code in directories and files, usually containing code clones of different forms. In this paper, we demonstrate 2Cities, a dedicated visualization based on the city metaphor to highlight variability implementations in a single TypeScript codebase. We introduce the detection toolchain that gathers all the necessary information and variability metrics. Then we detail the visualization mechanisms that use two dedicated cities whose relations also highlight the architecture of the implementation. The first one, ObjectCity, adapts the VariCity visualization with classes as buildings shaped by their variability and usage relationships as streets. The second one, CloneCity, visualizes the directory hierarchy as streets and files as circular districts with different colors to point out duplication and cylindrical shades to highlight clones obtained from a code clone detection phase.