Codebase Outline

Directory Structure:

• .github/ GitHub configuration files
• .vscode/ Visual Studio Code configuration files
• media/ Compiled TypeScript output of the web folder, and stylesheets
• node_modules/ Required node modules installed by running npm install
• out/ Compiled TypeScript output of src folder
• resources/ Media resources (e.g. icon and readme animations)
• src/ Extension back end TypeScript files
• web/ Webview front end TypeScript files

Extension back end

• extension.ts
  • Registers the git-graph.view command, and triggers webview creation
  • Registers the text document content document provider for commit diff viewing
  • Manages status bar icon
• gitGraphView.ts
  • Manages the creation of the webview
  • Responsible for communication with the front end
• dataSource.ts
  • Executes Git commands and parses output into the corresponding output objects
• diffDocProvider.ts
  • Provides documents at specific commits, in order to view the commit file diff.
• config.ts
  • Abstracts the Visual Studio Code workspace settings, providing default values for unset configuration variables.

Webview front end

• main.ts
  • Renders the front end (e.g. controls, commits, context menus, dialogs, ...)
  • Responsible for communication with the back end
  • Manages event listeners
• graph.ts
  • Graph generation and rendering
• dropdown.ts
  • Custom dropdown element respecting the Visual Studio Code colour scheme