162 lines
3.6 KiB
Markdown
162 lines
3.6 KiB
Markdown
# The Lucia Project Frontend
|
|
|
|
The frontend of the Lucia project, a process mining platform for
|
|
analyzing, discovering, and comparing business process workflows.
|
|
|
|
Built with [Vue 3][vue], [Vite][vite], [Pinia][pinia],
|
|
and [Tailwind CSS][tailwind].
|
|
|
|
|
|
## Features
|
|
|
|
- **Files** -- Upload, browse, and manage event log files (CSV).
|
|
- **Discover** -- Visualize process maps ([Cytoscape.js][cytoscape]),
|
|
analyze performance metrics ([Chart.js][chartjs]), and run
|
|
conformance checking against user-defined rules.
|
|
- **Compare** -- Side-by-side comparison of process maps and
|
|
dashboards.
|
|
- **Account Management** -- User account CRUD with role-based
|
|
access control.
|
|
|
|
|
|
## Tech Stack
|
|
|
|
| Category | Technologies |
|
|
|----------|-------------|
|
|
| Framework | Vue 3.5, Vue Router 5, Pinia 3 |
|
|
| Build | Vite 7, TypeScript 5, Tailwind CSS 4 |
|
|
| UI | PrimeVue 4, PrimeIcons, SweetAlert2 |
|
|
| Visualization | Cytoscape.js (process maps), Chart.js (charts) |
|
|
| HTTP | Axios with JWT refresh token handling |
|
|
| Testing | Vitest 4 (unit/component), Cypress 15 (E2E) |
|
|
| Linting | ESLint, Prettier |
|
|
|
|
|
|
## Prerequisites
|
|
|
|
- [Node.js][nodejs] (v18 or later)
|
|
- npm
|
|
|
|
|
|
## Getting Started
|
|
|
|
### Install dependencies
|
|
|
|
```sh
|
|
npm ci
|
|
```
|
|
|
|
### Configure environment
|
|
|
|
Copy `.env` to `.env.local` and set the backend API URL:
|
|
|
|
```sh
|
|
cp .env .env.local
|
|
```
|
|
|
|
```dotenv
|
|
# .env.local
|
|
VUE_APP_API_URL = "http://localhost:8000"
|
|
```
|
|
|
|
The dev server proxies `/api` requests to this URL.
|
|
|
|
### Start development server
|
|
|
|
```sh
|
|
npm run dev
|
|
```
|
|
|
|
The app will be available at `http://localhost:58249`.
|
|
|
|
|
|
## Testing
|
|
|
|
### Run unit and component tests
|
|
|
|
```sh
|
|
npx vitest run
|
|
```
|
|
|
|
### Run E2E tests
|
|
|
|
Build first, then run [Cypress][cypress] against the preview
|
|
server:
|
|
|
|
```sh
|
|
npm run build
|
|
npm run test:e2e
|
|
```
|
|
|
|
For interactive E2E development with the Vite dev server:
|
|
|
|
```sh
|
|
npm run test:e2e:dev
|
|
```
|
|
|
|
|
|
## Build for Production
|
|
|
|
```sh
|
|
npm run build
|
|
```
|
|
|
|
Output is in the `dist/` directory. Preview locally with:
|
|
|
|
```sh
|
|
npm run preview
|
|
```
|
|
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── api/ # Axios client with JWT interceptors
|
|
├── assets/ # CSS (Tailwind), static assets
|
|
├── components/ # Reusable Vue components
|
|
│ ├── Discover/ # Map, Conformance, Performance
|
|
│ ├── Compare/ # Comparison sidebar
|
|
│ └── File/ # Upload modal
|
|
├── module/ # Business logic (alerts, charts, sorting)
|
|
├── router/ # Vue Router configuration
|
|
├── stores/ # Pinia stores (state management)
|
|
├── utils/ # Utility functions (emitter, escaping)
|
|
└── views/ # Page-level route components
|
|
├── Discover/ # Map, Performance, Conformance
|
|
├── Compare/ # Dashboard, MapCompare
|
|
├── Files/ # File browser
|
|
├── Upload/ # File upload
|
|
└── Login/ # Authentication
|
|
```
|
|
|
|
|
|
## Copyright
|
|
|
|
Copyright 2022-2026 DSP, inc. All rights reserved.
|
|
|
|
This software is proprietary. You may obtain, use, copy, edit or
|
|
update this software with written agreements from DSP, inc.
|
|
|
|
|
|
## Authors
|
|
|
|
- Chia-Yin Kuo (chiayin.kuo@dsp.im)
|
|
- imacat (imacat.yang@dsp.im)
|
|
|
|
|
|
## Acknowledgments
|
|
|
|
Code quality improvements assisted by [Claude Code][claude-code].
|
|
|
|
|
|
[vue]: https://vuejs.org/
|
|
[vite]: https://vitejs.dev/
|
|
[pinia]: https://pinia.vuejs.org/
|
|
[tailwind]: https://tailwindcss.com/
|
|
[cytoscape]: https://js.cytoscape.org/
|
|
[chartjs]: https://www.chartjs.org/
|
|
[nodejs]: https://nodejs.org/
|
|
[cypress]: https://www.cypress.io/
|
|
[claude-code]: https://claude.ai/claude-code
|