GDI User Portal Front-end

The GDI User Portal Front-end is a crucial component of the Genomic Data Infrastructure (GDI) project, which aims to facilitate access to genomic, phenotypic, and clinical data across Europe. The GDI project is committed to establishing a federated, sustainable, and secure infrastructure to enable seamless data access. Leveraging the outcomes of the Beyond 1 Million Genomes (B1MG) project, the GDI project is actively realizing the ambitious goals set forth by the 1+Million Genomes (1+MG) initiative.

The GDI User Portal Front-end serves as the user-friendly interface for this initiative, utilizing Angular CLI version 16.2.3. This frontend application plays a crucial role in enhancing user experience and ensuring efficient interaction with the genomic data infrastructure.

• Status: 1.0.0
• Demo Link: Demo Website
• Related Project: 1+ Million Genomes Project

Installation

Locally

Before using the GDI User Portal Front-end, make sure you have the required dependencies installed. Follow the installation instructions below:

npm install

You also have to create a new .env.local file in the root directory, and copy the content of .env.local.example into the new file. Feel free to modify the environment variables as you wish.

Using Docker

Alternatively, you can run the docker-compose file that provides a running instance of the application. Use the following command to run docker-compose:

docker compose up or docker-compose up depending on your docker compose version.

Development server

Run npm run dev for a dev server. Navigate to http://localhost:3000/. The application will automatically reload if you change any of the source files.

Discovery Adapter Setup (Development)

You can switch the server-side discovery adapter via environment variables in .env.local.

• DISCOVERY_PROVIDER=dds uses the current DDS backend behavior.
• DISCOVERY_PROVIDER=local-index uses the local index adapter.

If you choose the local index adapter with OpenSearch, set:

DISCOVERY_PROVIDER=local-index
OPENSEARCH_URL=https://localhost:9200
OPENSEARCH_DISCOVERY_INDEX=discovery_datasets
OPENSEARCH_USERNAME=admin
OPENSEARCH_PASSWORD=<your-password>
OPENSEARCH_TLS_INSECURE=true

Notification Provider Setup

The notification bell in the header is backed by a NotificationProvider selected via NOTIFICATION_PROVIDER in .env.local.

• NOTIFICATION_PROVIDER=noop (default) — no backend wired up; the bell is hidden.
• Any other value must be registered in src/app/api/notifications/providers/factory.ts. Project-specific providers (e.g. a mirrored repo's own backend integration) are added there without changing the generic contract, the provider interface, or any React component.

The bell only renders once a non-noop provider is configured — there is no separate feature flag to toggle.

To run OpenSearch locally:

docker run -d -p 9200:9200 -p 9600:9600 -e "discovery.type=single-node" -e "OPENSEARCH_INITIAL_ADMIN_PASSWORD=myStrongPassword123" opensearchproject/opensearch:latest

The default username is admin. OPENSEARCH_INITIAL_ADMIN_PASSWORD sets the password for that user.

Then start the dev server:

npm run dev

To trigger a DCAT harvest from CLI:

npm run harvest:dcat -- --url https://letzdata.public.lu/content/dam/dga/ctie/c/catalogue.rdf

The harvest:dcat command calls the server route at /api/discovery/harvest. That route is protected with HARVEST_INTERNAL_SECRET, so set the secret in the app container and in the CLI environment before running it. It uses http://localhost:3000 by default, or HARVEST_BASE_URL if you need to point it somewhere else.

Do not put harvest settings in public/properties.json. Set them as direct environment variables on the app/worker process instead.

If the DCAT URL is protected by OIDC client-credentials, set:

HARVEST_OIDC_TOKEN_URL=<oidc-token-endpoint>
HARVEST_OIDC_CLIENT_ID=<client-id>
HARVEST_OIDC_CLIENT_SECRET=<client-secret>

Scheduled harvesting worker

For recurring harvesting in a container, use the built-in worker process:

npm run harvest:worker

The worker uses node-cron and calls /api/discovery/harvest. It is meant to run as a separate container from the same image while the main app container serves the endpoint.

Required environment variables:

HARVEST_SOURCE_URL=https://example.org/catalogue.rdf
HARVEST_INTERNAL_SECRET=<shared-secret>
HARVEST_SCHEDULE=0 * * * *

Optional for local host-based worker runs:

HARVEST_BASE_URL=http://localhost:3000

For a single manual run through the same internal flow:

npm run harvest:dcat -- \
  --url https://example.org/catalogue.rdf \
  --secret <shared-secret>

To harvest the repo fixture instead, use:

npm run harvest:dcat -- \
  --file no-data-dict.rdf \
  --secret <shared-secret>

Modifying Open API Specifications

In case of changes in the OpenAPI specifications, you must upgrade the client and schemas by running npm run prebuild:service where service is either discovery or access-management. The schemas will be automatically generated in src/app/api/{service}/open-api/schemas.ts.

Additionally, you must export all the types defined in schemas.ts (can not be done automatically).

Helpdesk / Zammad setup (local)

The footer includes a Get in touch modal that submits inquiries to Zammad via backend APIs.

Set these environment variables in .env.local:

HELPDESK_TOPIC_ROUTING=[{"value":"general","label":"General inquiry","recipientEmail":"helpdesk@example.org","zammadGroup":"Users"},{"value":"technical","label":"Technical issue","recipientEmail":"helpdesk@example.org","zammadGroup":"2nd Level"}]
HELPDESK_ZAMMAD_URL=http://localhost:8080
HELPDESK_ZAMMAD_API_TOKEN=<token-from-zammad-user-profile>
HELPDESK_ZAMMAD_DEFAULT_GROUP=Users
HELPDESK_ZAMMAD_TLS_INSECURE=false
NEXT_PUBLIC_FEATURE_CONTACT_US=true

If your Zammad endpoint uses an internal/self-signed HTTPS certificate, set HELPDESK_ZAMMAD_TLS_INSECURE=true.

Build

Run npm run build to build the project. The build artifacts will be stored in the .next/ directory.

Running unit tests

TODO

Running end-to-end tests

Playwright E2E tests support two modes:

• Mocked mode (recommended for local dev and PRs): uses a local mock API server.
  • E2E_MODE=mocked npx playwright test
  • Optional: set MOCK_API_PORT to change the mock server port (default: 4010).
• Real backend mode (release pipeline): uses .env.e2e.test and hits DEV services.
  • E2E_MODE=real npx playwright test

If this is your first time running Playwright, install the browsers:

npx playwright install --with-deps

Further help

To get more help on Next JS, go check out the Next JS API Reference page.

Frontend Customization

For detailed information on how to customize the GDI User Portal Front-end, including environment variables and additional customization options, please refer to the Frontend Customization Documentation.

License

• All original source code is licensed under Apache-2.0.
• All documentation is licensed under CC-BY-4.0.
• All the fonts are licensed under OFL-1.1.
• Some configuration and data files are licensed under CC-BY-4.0.
• For more accurate information, check the individual files.