Code Understanding Analyzer

Web App to allow the user to understand previously scanned code. Through queries, visualizations, datasets and special interactions.

The following is an example of the Analyzer showing the result of a query as a graph visualization:

Code Understanding Analyzer

Architecture

The user side part of the solution is a single-page implementation using Angular as our framework.

Components

• AppModule: The root module. The app is launched by bootstrapping this module.

• GraphVisualizerModule: Contains the main components that the app will render.

• OperationsGUIModule: Contains the majority of GUI elements/components.

• Services: The application interactions, operations, and data are all processed by a service.

  • The communication follows a publish and subscribe pattern.

• History: Using the memento pattern we have the possibility to undo and redo some interactions.

• SharedModule: This module is used for importing commonly used Angular Material components.

• VisModule: Imports the VisNetworkDirective.

• VisNetworkDirective: Angular directive for the VisJS network instance (basically the graph).

• VisNetworkService: A service to create, manage and control VisNetwork instances.

Features

• Queries

• Graph Visualizations

  • Highlights

  • View Settings

• Dataset Visualizations

• DataSources

  • Choosing DBs

  • Export/Import Plain File (Dataset or Graph)