Overview

This is the frontend for DiscoveryPlus, a patent discovery and research platform developed for UAB (Universitat Autònoma de Barcelona). It's an Angular 19 single-page application that allows researchers to search, filter, and explore patent data, manage projects, and interact with AI-assisted search features.

Key Technologies

Technology	Version	Purpose
Angular	19	Core framework (standalone components, signals-era)
Angular Material	19	UI components (dialogs, tables, forms, etc.)
Tailwind CSS	3.4	Utility-first styling
Fuse	(bundled in @fuse)	Admin template/UI framework providing layouts, navigation, theming
Transloco	7.5	i18n — supports Catalan (ca), Spanish (es), English (en)
RxJS	7.8	Reactive state management via BehaviorSubject/Observable
Apache ECharts (ngx-echarts)	19	Data visualization / charts
ApexCharts (ng-apexcharts)	4.3	Additional charts
Luxon	3.5	Date/time handling (with Angular Material adapter)
ngx-quill	27	Rich text editor
ngx-infinite-scroll	19	Infinite scroll for patent result lists
Apache Superset SDK	0.2	Embedded dashboards
Karma + Jasmine	—	Unit testing

Repository Layout

/
├── src/
│   ├── @fuse/               # Fuse UI framework (layouts, components, services, styles)
│   │   ├── components/      # Reusable UI primitives (alerts, drawers, navigation, etc.)
│   │   ├── directives/      # Angular directives
│   │   ├── pipes/           # Custom pipes
│   │   ├── services/        # Media query, config, confirmation dialogs, etc.
│   │   └── tailwind/        # Tailwind plugin/config helpers
│   │
│   ├── app/
│   │   ├── app.config.ts    # Root providers (routing, HTTP, i18n, Material, ECharts)
│   │   ├── app.routes.ts    # Top-level route definitions
│   │   ├── app.resolvers.ts # Initial data resolver (navigation, user, etc.)
│   │   │
│   │   ├── core/            # Cross-cutting concerns
│   │   │   ├── auth/        # AuthService, guards, interceptor, CAS/dev login
│   │   │   ├── navigation/  # Navigation data service
│   │   │   ├── roles/       # Role model & service (RBAC)
│   │   │   ├── user/        # User types & service
│   │   │   ├── icons/       # Icon provider (Heroicons/Material Icons)
│   │   │   ├── dialog/      # Generic dialog service
│   │   │   ├── services/    # Error dialog service
│   │   │   └── transloco/   # HTTP loader for translation files
│   │   │
│   │   ├── layout/          # Shell layout component + layout variants
│   │   │   ├── layouts/
│   │   │   │   ├── empty/   # Used for auth pages (sign-in, sign-out)
│   │   │   │   ├── vertical/# Sidebar layout
│   │   │   │   └── horizontal/ # Top-nav layout
│   │   │   └── common/      # Shared layout pieces (header, footer, nav, etc.)
│   │   │
│   │   ├── mock-api/        # Client-side API mocking (Fuse mock API)
│   │   │   ├── common/      # Navigation, user, notifications, shortcuts
│   │   │   ├── apps/        # App-specific mock data
│   │   │   └── ...
│   │   │
│   │   └── modules/         # Feature modules (lazy-loaded)
│   │       ├── auth/        # Sign-in, sign-out, CAS/AAD callback
│   │       ├── search/      # Main patent search (query builder, results, LLM assist)
│   │       ├── patents/     # Patent detail, family view, filters, export
│   │       ├── projects/    # Project management, import, sharing, charts
│   │       ├── dashboard/   # Embedded Superset dashboards
│   │       ├── charts/      # ECharts/ApexCharts visualizations
│   │       ├── users/       # User management (admin)
│   │       ├── admin/       # Admin pages
│   │       ├── about/       # About page
│   │       ├── session-sqls/# SQL session debug/history viewer
│   │       ├── search-results-info-bar/ # Stats bar above results
│   │       └── generic_popup/ # Reusable popup component
│   │
│   ├── environments/        # Dev and production environment configs
│   ├── styles/              # Global SCSS styles
│   └── index.html
│
├── nginx/                   # Nginx config for production Docker deployment
├── Dockerfile               # Multi-stage Docker build
├── angular.json             # Angular CLI config (build, test, linting)
├── tailwind.config.js       # Tailwind customizations
├── transloco.config.js      # Transloco CLI config
└── proxy.conf.json          # Dev proxy to backend API

How the Application is Organized

Authentication

Uses CAS (Central Authentication Service) in production — the login page redirects to a CAS server, which returns a code to /auth/code. In development, a hardcoded dev-login endpoint is used. A JWT access token is stored in localStorage and attached to all API requests via authInterceptor. Route guards (AuthGuard, NoAuthGuard) protect routes.

Routing

All main routes require authentication. They are lazy-loaded:

• /search — main patent search UI
• /patents — patent detail views
• /projects — project management
• /users — user admin
• /session-sqls — SQL debug logs
• /about — about page
• /sign-in, /auth/code — auth flow (guests only)

State Management

No NgRx/Akita — state is managed with RxJS BehaviorSubject at the service level. The SearchService is the central hub for search criteria, results, pagination, and LLM responses.

Search & Patents

The search module supports normal, advanced, and AI assistant search modes. Queries are a nested JSON structure: { operator: "AND", operands: [...] } sent to the backend /api/v1/db/query. An LlmService sends natural language prompts to /api/v1/llm/prompt to generate SQL/structured queries. Results are paginated with infinite scroll.

i18n

Three languages: Catalan (default), Spanish, English. Language preference is persisted in localStorage.

Theming

Fuse provides multiple color themes (teal is default) and light/dark scheme support. The default layout is dense (compact sidebar).

Backend API

All API calls go to environment.apiBaseUrl (default: http://localhost:8000/api/v1). The dev proxy (proxy.conf.json) forwards /api requests to the backend during development.