# Analysis – visualization frontend in [Vue.js](https://github.com/vuejs/vue)

This project is a follow-up on Kristína Zákopčanová's thesis [_Visual Analysis of Data for Criminal Investigation_](docs/zakopcanova_thesis.pdf) and is a part of the research project _Complex Analysis and Visualization of Heterogenous Big Data_. In the development of this tool, we follow system requirements and visualization design proposed in the thesis.

## Used libraries

[Buefy](https://buefy.org/documentation/) for UI components.

[D3-force](https://github.com/d3/d3-force) in network visualization module.

## Project setup

Install [Node.js](https://nodejs.org/en/), a JavaScript runtime.

Install Python, it may be required to compile node-sass, one of the dependencies.

Node.js includes NPM, a package manager used to handle dependencies. To install project dependecies, run:

```
npm install
```

Now, install tooling for Vue (`-g` for global install), which will take care of building the application (we won't even see webpack):

```
npm install -g @vue/cli
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

## Documenting
Use [JSDoc](https://devdocs.io/jsdoc/) to document store (Vuex). This thing is native to JavaScript, does not support __single file components__ of Vue, sadly. However, it allows type checking as in TypeScript. 

[Learn more in this article](https://medium.com/@trukrs/type-safe-javascript-with-jsdoc-7a2a63209b76).

To enable type checking in VS Code, turn on this option in editor settings:
```
"javascript.implicitProjectConfig.checkJs": true
```

## Testing

Using [Jest](https://jestjs.io/docs/en/getting-started). Tests are located in `/tests/unit/` and need to be named `*.spec.(js|jsx|ts|tsx)` – Jest will automatically load them.

Run all tests with:

```
npm run test
```

To generate fancy html coverage report in `/coverage` additonally, run:

```
npm run test:coverage
```

## Debugging in VS Code

Open debug tab, edit `launch.json`:

```
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "jest-tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "./node_modules/@vue/cli-service/bin/vue-cli-service.js",
        "test:unit",
        "--runInBand"
      ],
      "cwd": "${workspaceFolder}",
      "protocol": "inspector",
      "disableOptimisticBPs": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "outFiles": ["${workspaceFolder}/src/**/*.js"],
      "port": 9229
    }
  ]
}
```

## VS Code extensions

Pretty much required:

- Vetur (Pine Wu)
- Prettier - Code formatter (Esben Peterson)
- ESLint (Dirk Baeumer)
- Sass (Robin Bentley)

Useful:

- Vue VSCode Snippets (Sarah Drasner)
- Vue Peek (Dario Fuzinato)
- Auto Close Tag, Auto Rename Tag (Jun Han)

## Application architecture

![Diagram with high level overview of components and project structure](docs/architecture.png "Application structure diagram")

## Contributing

See [issue board](https://gitlab.fi.muni.cz/xrehacek/analysis-vis-prototype/-/boards/731).

Follow this git workflow: https://nvie.com/posts/a-successful-git-branching-model/.

## License

TBD
