# VIPR Frontend

Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Prerequisites

This frontend requires the **vipr-api** backend to be running.

- **Backend API**: [vipr-api](https://codebase.helmholtz.cloud/vipr/vipr-api)
- **Full Web App Stack**: Use docker-compose from [vipr-framework](https://codebase.helmholtz.cloud/vipr/vipr-framework/-/blob/init/docker-compose.yml) (orchestrates vipr-api + vipr-frontend)

## Architecture: Nuxt Layers

The frontend uses **Nuxt Layers** to separate generic framework code for the inference workflow from use-case specific code:

```
app/                    # Minimal root (app.vue, assets, config)
layers/
├── base/              # Generic framework (components, stores, composables)
└── reflectometry/     # Reflectometry-specific overrides and extensions
```

**Component Resolution Priority:** `app/` > `reflectometry/` > `base/`

The reflectometry layer overrides base components (e.g., `PredictStep.vue`, `LoadModelStep.vue`) and adds reflectometry-specific UI, adapters, stores, and composables. To add a new use case, create a new layer in `layers/` and configure it in `nuxt.config.ts` extends array.

# Development

## Setup
The best way to deal with different node version is to use Node Version Manager. 
Refer to [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm) for setup instructions

Use to proper node version
```shell
  nvm use
```

Make sure to install dependencies:

```shell
  npm install
```

Start the development server on `http://localhost:3000`:

```shell
  npm run dev
```


## API Client Generation

When the backend API changes, update the frontend API client:

```shell
# 1. Download the OpenAPI specification (make sure backend is running)
curl -o openapi.json http://localhost:8000/openapi.json

# 2. Generate the API client
npm run generate-api
```

## API Configuration
Set the backend API URL in `.env`:
```shell
NUXT_PUBLIC_API_URL=http://localhost:8000
```

# Testing

## Unit Tests
Component tests with Vitest:
```shell
npm run test:unit
```

## E2E Tests
End-to-end tests with Playwright:
```shell
npm run test:e2e
```

# Deployment

**Note:** For deployment, use the docker-compose configuration from the [vipr-framework](https://codebase.helmholtz.cloud/vipr/vipr-framework/-/blob/init/docker-compose.yml) repository, which orchestrates the full stack (vipr-api + vipr-frontend + Redis + Celery workers).

 - [Kubernetes](chart/README.md)

## License

This project is licensed under the GNU Lesser General Public License v3.0 or later (LGPL-3.0-or-later).

See [LICENSE.txt](LICENSE.txt) for the full license text and [NOTICE.txt](NOTICE.txt) for third-party component information.

## Acknowledgments

This project is developed by the VIPR Project Consortium with contributions from:
- [Helm & Walter IT-Solutions GmbH](https://www.helmundwalter.de/)
- [Forschungszentrum Jülich (FZJ) - Jülich Centre for Neutron Science (JCNS)](https://www.fz-juelich.de)
- [Technische Universität München (TUM)](https://www.tum.de)
- [University of Tübingen](https://www.uni-tuebingen.de)
- [University of Siegen](https://www.uni-siegen.de)
- [Helmholtz-Zentrum Dresden-Rossendorf (HZDR)](https://www.hzdr.de)
- [DESY (Deutsches Elektronen-Synchrotron)](https://www.desy.de)

For more information, visit: https://vipr-project.de
