Github Filetree Visualizer
Cloning the Repo
If you wish to run this repo locally by cloning it:
- get the angular cli package with
npm install -g @angular/cli
ng serveto bundle and serve on 4200
- to push to github pages, run
npm run buildand
npm run ghafter installing the
The visualizer will parse out the contents of any given repository, sift through all files with a
.jsx extension, and calculate the interdependencies based on the contents of the files.
Users can input either the Github URL or the user, repo, and an optional subdirectory. The visualizer will retrieve and display the files in a graph.
Nodes denote files with a .js or .jsx extension. The size of the node corresponds to the size of the file. Nodes are colored by the subdirectory they are in.
Users can click on a node to highlight its links and display its contents. To remove highlighting, users can click on the same node or on the background. Users can also click and drag nodes around.
The visualizer is compatible with various major repositories, including Redux, Express, and React.
How it works
The visualizer sends XHRs via the Github API - one to retrieve the SHA of the most recent commit, one to retrieve the file tree, and a series of requests to retrieve the contents of every
.jsx file. It stores each file as a node and examines file dependencies to construct links between each file. Using a combination of data structures, memoization, and regex, the parser rapidly determines the tree structure and converts
require statements into links. The resulting JSON is then rendered in D3.
- The visualizer ignores any file named
bundle.js.map, and any similarly named files like
- References to node modules or files outside of the specified subdirectory are ignored
- Nodes are grouped and colored by the subdirectory immediately following the specified directory, e.g. with a specified directory of
frontend/component, all files in
frontend/components/channelwill be one color and all files in
frontend/components/workspacewill be a separate color. Providing a subdirectory (if applicable) will result in more colorful graphs
- The subdirectory field can take in any number of folders, e.g.