tools/android/dependency_analysis/js/README.md

# Chrome Android Dependency Analysis Visualization

If you'd like to just view the graph, the simplest way is to use the script:

```
tools/android/dependency_analysis/start_server.sh
```

## Development Setup

### Shell variables


This setup assumes Chromium is in the `CHROMIUM_DIR` directory (e.g.
`~/cr/src/...`). Please modify the following command using the path to your
chromium repo:

```
export CHROMIUM_DIR=<path to your repo>
```

Now you can copy/paste the following and set up these other variables. You can
swap out `out/Debug` in `DEP_ANALYSIS_BUILD_DIR` to your preferred output dir.

```
export DEP_ANALYSIS_DIR=$CHROMIUM_DIR/src/tools/android/dependency_analysis
export DEP_ANALYSIS_BUILD_DIR=$CHROMIUM_DIR/src/out/Debug
```

### Generate JSON

See [../README.md](../README.md) for instructions on using
`generate_json_dependency_graph.py`, then generate a graph file in the `src`
directory (`js/src/json_graph.txt`) with that exact name:

```
cd $DEP_ANALYSIS_DIR
./generate_json_dependency_graph.py -C $DEP_ANALYSIS_BUILD_DIR -o js/src/json_graph.txt
```

**Move into the `$DEP_ANALYSIS_DIR/js` directory before continuing.**

```
cd $DEP_ANALYSIS_DIR/js
```

### Install dependencies

First, ensure you have a sufficiently new Node.js version. The dependency viewer
doesn't work with v8 for example, and v18.10.0 definitely works.

```
node -v
```

Install the latest version with:

```
nvm install node
```

You will also need to install `npm` if it is not already installed (check with
`npm -v`), either [from the site](https://www.npmjs.com/get-npm) or via
[nvm](https://github.com/nvm-sh/nvm#about) (Node Version Manager).

To install dependencies:

```
npm install
```

### Run visualization for development

```
npm run serve
```

If you prefer to run npm commands from the root of your chromium repo:

```
npm run --prefix tools/android/dependency_analysis/js serve
```

This command runs `webpack-dev-server` in development mode, which will bundle
all the dependencies and open `localhost:8888/package_view.html`, the entry
point of the bundled output. Changes made to the core JS will reload the page,
and changes made to individual modules will trigger a
[hot module replacement](https://webpack.js.org/concepts/hot-module-replacement/).

**To view the visualization, open http://localhost:8888/index.html.**

### Build the visualization

```
npm run build
```

This command runs `webpack`, which will bundle the all the dependencies into
output files in the `dist/` directory. These files can then be served via other
means, for example:

```
npm run serve-dist
```

This command will open a simple HTTP server serving the contents of the `dist/`
directory.

To build and serve, you can execute the two commands together:

```
npm run build && npm run serve-dist
```

**To view the visualization, open http://localhost:8888/index.html.**

### Deploy

The Chromium Dependency Graph Visualizer is hosted at
https://chromium-dependency-graph.firebaseapp.com.

If you are a Googler, you can see this [doc][deploy doc] for how to deploy a new
version of the viewer.

[deploy doc]: https://docs.google.com/document/d/1u4wlB2EAWNx8zkQr60CQbxDD_Ji_mgSGjhBvX6K8IdM/edit?usp=sharing

### Miscellaneous

To run [ESLint](https://eslint.org/) on the JS and Vue files:

```
npm run lint
```

To let ESLint try and fix as many lint errors as it can:

```
npm run lint-fix
```