Published on

DependencyVis

Authors
  • avatar

DependencyVis: An Interactive Vizualization Tool for External Software Dependency Information

Introduction

I served as a paid fellowship student researcher under Dr. Bruno Da Silva. Used React, d3.js, Node.js, and Express.js to build out a interactive visualization tool to analyze dependencies of opensource JavaScript projects using NPM. Here's our poster that we presented at Cal Poly: poster.png

Here are some of the github artifacts we produced:

Project Introduction

The rise of package managers such as npm has significantly increased the use of external software dependencies, making software development faster and more efficient. However, this convenience comes with its own set of challenges, including license conflicts, security vulnerabilities, and insufficient maintenance. Recognizing these challenges, we developed DependencyVis, a tool designed to improve the understanding and management of dependency networks in software projects.

Development Background

DependencyVis originated from Nathan Lui's master's thesis and has since been extended to include more features and a refined user interface. My contributions focused on enhancing the user interface and adding new functionalities like Truck Factor computation and license categorization.

Technical Stack

  • Frontend: React.js with Chakra UI for styling
  • Backend: Express.js and Node.js for API development
  • Deployment: Heroku for hosting the custom API and web application
  • Database: MongoDB Atlas for caching data

Usage

Upon entering a repository URL, users experience a loading screen before the dependency graph is rendered. The main interface includes:

  • A sidebar displaying textual information about the dependency metrics
  • A Load Next Layer button to progressively unveil layers of dependencies
  • An input box for adding new npm libraries to the project under analysis

Architecture

To construct this tool, we first divided the responsibilities of the tool into client side and server side tasks:

  • The client side is responsible for visualization of the data, all user interactions, and requests to the server side.
  • The server side is responsible for making all the API requests and managing the mongodb database that DependencyVis uses as a cache.

Conclusions and Future Directions

Package managers have made software reuse so quick and convenient that software developers today give little to no thought about the dependencies they rely on. Dependencies can save a lot of time and can even be more secure or more efficient than what most developers would have written if they coded the functionality themselves. However, these potential benefits can be lost if software developers are not careful. For example, developers could be relying on outdated or buggy code from a library that is not well maintained or abadoned. In terms of future work, we have a few possibilities as a path forward:

  • Expand into other package managers like yarn, PyPi, or gem.
  • Conduct a case study for empirical evidence on whether and to what extent DependencyVis can be useful to software developers.

DependencyVis aims to make dependency management more transparent and manageable, helping developers make informed decisions about the software components they use.