@@ -8,19 +8,11 @@ _Project Analysis is supported by the Ministry of the Interior of the Czech Repu
See the [__latest build__](https://www.fi.muni.cz/~xrehacek/analysis-vis) of the tool.
## Technologies
[Vue.js](https://github.com/vuejs/vue) as the frontend framework, forming the core of the visualization.
[Vuex](https://github.com/vuejs/vue) for state management.
[Jest](https://github.com/vuejs/vue) as the testing framework.
[Buefy](https://buefy.org/documentation/) for UI components.
[D3-force](https://github.com/d3/d3-force) to calculate layout for node-link diagram.
The tool is built using the frontend framework [Vue.js](https://github.com/vuejs/vue) and the state management library [Vuex](https://github.com/vuejs/vuex). Data operations in store modules are tested using the testing framework [Jest](https://github.com/vuejs/vue). [Buefy](https://buefy.org/documentation/) is used for UI components. [D3-force](https://github.com/d3/d3-force) is used to calculate layout for the node-link diagram, and [D3-zoom](https://github.com/d3/d3-zoom) together with [D3-selection](https://github.com/d3/d3-selection) are used to setup zoom/pan behaviour.
## Project setup
1. Install the JavaScript runtime [Node.js](https://nodejs.org/en/), which also includes _NPM_, a package manager used to handle dependencies.
2. Install [Python](https://www.python.org/downloads/), which is required to compile node-sass, one of the dependencies.
1. Install the JavaScript runtime [Node.js](https://nodejs.org/en/), which also includes _NPM_, a package manager for handling dependencies.
2. Install [Python](https://www.python.org/downloads/), which is required to compile _node-sass_, one of the dependencies.
3. Using NPM, install project's dependecies:
```
@@ -45,7 +37,20 @@ npm run serve
npm run build
```
## Documenting
## Development guides
<details>
<summary>Application's architecture</summary>
[![Diagram with high level overview of components and project structure](docs/architecture-highlevel-preview.png"High-level overview of the applications architecture.")](docs/architecture-highlevel.png)
[![Simplified diagram of components](docs/architecture-components-preview.png"Component tree.")](docs/architecture-components.png)
</details>
<details>
<summary>Documenting</summary>
Use [JSDoc](https://devdocs.io/jsdoc/) to document store modules (there is no support for Vue's __single file components__). Using proper tools, it allows [type checking as in TypeScript](https://medium.com/@trukrs/type-safe-javascript-with-jsdoc-7a2a63209b76).
To enable type checking in VS Code, turn on this option in editor settings:
@@ -53,7 +58,11 @@ To enable type checking in VS Code, turn on this option in editor settings:
"javascript.implicitProjectConfig.checkJs": true
```
## Testing
</details>
<details>
<summary>Testing</summary>
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:
@@ -69,9 +78,8 @@ npm run test:coverage
```
<details>
<summary>Setup for VS Code</summary>
<summary>Debugging in VS Code</summary>
### Debugging
Open debug tab, edit `launch.json`:
```
@@ -107,7 +115,11 @@ Open debug tab, edit `launch.json`:
}
```
### Extensions
</details>
<details>
<summary>Extensions</summary>
Pretty much required:
- Vetur (Pine Wu)
@@ -123,16 +135,14 @@ Useful:
</details>
## Application's architecture
[![Diagram with high level overview of components and project structure](docs/architecture-highlevel-preview.png"High-level overview of the applications architecture.")](docs/architecture-highlevel.png)
[![Simplified diagram of components](docs/architecture-components-preview.png"Component tree.")](docs/architecture-components.png)
<details>
<summary>Contribution</summary>
## 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/.
