Catalogue Dashboard UI

Unified dashboard for discovering and analyzing the D4Science open data catalogues provided through the D4Science research infrastructure. It use the Catalogue Dashoard Service to collect and aggregate the data.

Table of Contents

• Overview
• UI Preview
• Mini Architecture
• Key Features
• Quick Start
• Documentation
• Authors

Overview

Catalogue Dashboard provides a unified view of multiple CKAN catalogue instances, helping users quickly understand:

• catalogue purpose and content composition
• number of datasets, organizations, and groups
• metadata distribution and dataset type breakdown
• historical trends and growth patterns across catalogues

The application follows a backend-first architecture: Angular consumes REST APIs from the service layer instead of calling CKAN instances directly.

UI Preview

The dashboard exposes three main user flows:

• / for catalogue discovery, KPI cards, and quick tag filters
• /catalog/:id for per-catalog detail, organizations, groups, and trend visualizations
• /trends for global KPI comparisons and type analytics

Mini Architecture

flowchart LR
	A[Catalogue Dashboard UI] --> B[Catalogue Dashboard Service]
	B --> C[(PostgreSQL)]
	B --> D[CKAN APIs]
	C --> B
	B --> A

Key Features

Catalogue Discovery and Search

• Catalogue discovery across multiple CKAN instances collected by the backend service
• Full-text search on catalogue content
• Top-tags exploration to quickly identify relevant topics
• Configurable number of top tags per catalogue via runtime environment

Analytics and Insights

• Dataset type analytics (faceted counts by system type)
• Catalogue detail view with organizations and groups, including dataset counts
• Historical metrics exposed by backend APIs
• Global Trends page with KPI comparison cards across all catalogs and selectable time periods

Trend Analysis

• Catalog detail page with lazy-loaded type growth, KPI evolution, organization, and group charts
• Open Trends page with monthly and yearly global type trend charts aggregated across catalogs
• Click-to-inspect details on Global Types Trend bars, including source catalogs and item counts per type
• Source catalog details in the legend of the Current Type Distribution chart

User Experience

• Loading-state feedback for dashboard and detail sections
• Responsive UI behavior for desktop and mobile layouts

Quick Start

1. Install dependencies:

npm install

2. Run the development server:

npm start

3. Open the app:

• http://localhost:4200

URL Parameters for Read-Only View

The catalog detail view supports optional URL parameters for customizing the appearance when in read-only mode (via /catalog/view/:id).

Supported Parameters

Parameter	Description	Format	Example
background	Background color of the page in view-only mode	CSS color or hex code	?background=%23f0f0f0
background_title	Background color of the Catalogue Title header	CSS color or hex code	?background_title=%23003366
color_title	Text color of the Catalogue Title	CSS color or hex code	?color_title=%23ffffff

Color Format

Colors can be specified as:

• Valid CSS color values (e.g., white, rgb(255, 255, 255))
• Hexadecimal values: #RGB, #RRGGBB, or #RRGGBBAA (e.g., #f0f0f0, #00336699)

Example URLs

/catalog/view/123
/catalog/view/123?background=%23f0f0f0
/catalog/view/123?background_title=%23003366&color_title=%23ffffff
/catalog/view/123?background=%23f0f0f0&background_title=%23003366&color_title=%23ffffff

Documentation

• DEVELOPER.md: application architecture, runtime configuration, local development/build commands, testing and troubleshooting notes
• Catalogue Dashoard Service: backend service and API documentation

Authors

• Francesco Mangiacrapa (ORCID) Istituto di Scienza e Tecnologie dell'Informazione 'A. Faedo', Consiglio Nazionale delle Ricerche, Pisa, Italy